# Corumdigital Design System

> Sharp, corporate precision anchored by high-contrast monochrome foundations and geometric sans-serif clarity.

**Source:** https://corumdigital.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Corumdigital operates as a high-contrast, monochrome parent brand that utilizes a white canvas `#ffffff` and absolute black `#000000` for its primary structural identity. The system relies on a dual-font strategy: **Montserrat** for authoritative, geometric headings and **Poppins** for clean, legible body text. While the parent remains achromatic, it serves as a neutral container for a diverse portfolio of sub-brand logos, using a light gray `#eaeaea` for secondary actions and card surfaces to maintain a professional, enterprise-grade atmosphere.

## Signature DNA
1. **Achromatic Authority** (The parent identity is strictly monochrome, using `#000000` and `#ffffff` to create a neutral, high-trust environment for its colorful sub-brands. Seen on all pages.)
2. **Geometric Sans Pairing** (The deliberate use of Montserrat for bold headers and Poppins for body text creates a modern, tech-focused typographic rhythm. Seen on homepage and about page.)
3. **Sharp Geometry** (A strict adherence to `0px` border radii across buttons and containers signals industrial precision. Seen on all interactive elements.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.black}` | `#000000` | Primary text, headings, logo | 26 | 1.0 | `--wp--preset--color--black` |
| `{color.white}` | `#ffffff` | Page background, primary surface | 1 | 1.0 | `--wp--preset--color--white` |
| `{color.gray.text}` | `#626262` | Secondary body text | 16 | 0.8 | Computed Style |
| `{color.gray.surface}` | `#eaeaea` | Button backgrounds, section dividers | 6 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.blue.link}` | `#005ab2` | Text links, emphasis | 12 | 0.8 | Computed Style |
| `{color.blue.button}` | `#257fc2` | Button text labels | 10 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 400, 500, 700 | Headings, UI Labels | Montserrat (Google Fonts) | OFL |
| Poppins | 400 | Body, Buttons | Poppins (Google Fonts) | OFL |
| Times New Roman | 400 | Body fallback | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h4}` | 24px | 28px | normal | 700 | Section titles | `h4` |
| `{type.h2}` | 20px | 25px | normal | 400 | Sub-headers | `h2` |
| `{type.nav.link}` | 20px | 25px | normal | 700 | Navigation items | `a` |
| `{type.h5}` | 18px | 22px | normal | 400 | Minor headings | `h5` |
| `{type.body.strong}` | 18px | 22px | normal | 700 | Bold emphasis | `strong` |
| `{type.body.md}` | 14px | 21px | normal | 400 | Default body text | `section.section` |
| `{type.button}` | 14px | 16.8px | normal | 400 | CTA labels | `a.button` |
| `{type.footer.link}` | 14px | 0px | normal | 400 | Footer links | `footer a` |

### Principles
1. **Heading Weight Hierarchy:** Use Montserrat 700 for primary section headers and 400 for secondary descriptive headers.
2. **Body Consistency:** All running text must use Poppins at 14px for optimal digital legibility.
3. **Achromatic Text:** Primary information is always `#000000`, while secondary descriptions drop to `#626262`.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 15px | 12 |
| `{space.sm}` | 16px | 5 |
| `{space.md}` | 20px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | All buttons, cards, and images | 64 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All surfaces and cards | Observed on all pages |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Standard call to action for sub-brand exploration.
**Pages observed:** https://corumdigital.com
**Spec:** Background: `#eaeaea` | Text: `#257fc2` | Border: `0px` | Radius: `0px` | Padding: `16px 20px` | Typography: Poppins 14px
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns
#### Brand Grid Card
**Role:** Container for sub-brand logos and descriptions.
**Pages observed:** https://corumdigital.com
**Spec:** Background: `#ffffff` | Text: `#000000` | Border: `none` | Radius: `0px` | Padding: `20px`
**States observed:** Default: Captured

#### Section Divider
**Role:** Visual break between major content blocks.
**Pages observed:** https://corumdigital.com, https://corumdigital.com/about
**Spec:** Background: `#eaeaea` | Height: `1px` | Width: `100%`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max content width | ~1200px |
| Column grid | 12-column desktop |
| Section padding | 60px - 80px vertical |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Brand grid stacks 1-up |
| Desktop | 1440px | Multi-column layouts for brand grid (3-up) |

## Imagery & decoration
Corumdigital uses high-tech, abstract photography featuring blue light trails and digital connectivity motifs in hero sections. It avoids rounded corners or soft shadows, maintaining a "hard-tech" industrial aesthetic.

## Do's
- Use `#000000` for all Montserrat headings to maintain parent brand authority.
- Apply `0px` border radius to every interactive element.
- Ensure all body copy is Poppins 14px.
- Use `#eaeaea` for subtle background containers to separate content sections.
- Maintain high contrast (21:1) between text and background.

## Don'ts
- **Wrong:** Using `#0693e3` (Vivid Cyan Blue) for parent brand buttons. **Right:** Use `#eaeaea`. **Reason:** Saturated colors are reserved for sub-brand identities or specific text links.
- Do not use rounded corners on any component.
- Do not use Montserrat for long-form body text.
- Do not apply drop shadows to cards or buttons.

## Similar brands
- Siemens (Industrial monochrome)
- IBM (Corporate tech typography)
- Rockwell Automation (Enterprise industrial)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-text: #626262;
  --color-gray-surface: #eaeaea;
  --color-blue-link: #005ab2;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --radius-sharp: 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #000000;
  --color-surface: #ffffff;
  --color-muted: #626262;
  --color-accent: #eaeaea;
  --font-display: "Montserrat";
  --font-body: "Poppins";
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Create a section header using Montserrat Bold at 24px in absolute black with a 1px `#eaeaea` divider below it."
- "Generate a primary button with a light gray `#eaeaea` background, blue `#257fc2` Poppins text, and a strictly sharp 0px border radius."
- "Design a content card with no shadow, a white background, and 20px internal padding."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Specific mobile breakpoint transitions for typography were not fully mapped beyond the 390px viewport.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://corumdigital.com | 1440px | 2026-06-06 |
| About | https://corumdigital.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://corumdigital.com | 390px | 2026-06-06 |