# Dhicorp Design System

> Corporate stability rendered through deep navy anchors, serif-driven authority, and high-contrast teal actions.

**Source:** https://dhicorp.org | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Dhicorp utilizes a "monochrome-plus" system where a foundational palette of deep navy (#07314e) and charcoal (#25292b) is punctuated by a singular, high-vibrancy teal (#00c6ab) for primary actions. The typographic system is dual-natured: **Roboto Slab** provides a traditional, trustworthy serif voice for display headings, while **Nunito Sans** and **Roboto** handle functional UI and body tasks. Layouts are characterized by generous internal card padding (30px) and a distinctive soft-elevation shadow (`rgba(0, 0, 0, 0.08) 0px 8px 19px 2px`) that lifts content modules off a pure white canvas.

## Signature DNA
1. **The Slab-Serif Anchor** (Roboto Slab weight 500 is used for all major section headings (h2-h4), establishing a legacy-institutional feel that contrasts with the modern tech stack.)
2. **Teal-on-Navy Contrast** (The primary brand voltage is generated by placing #00c6ab teal components against #00326d navy backgrounds, specifically in footer and 404 states.)
3. **Soft-Lift Geometry** (A specific 12px border radius combined with a deep, diffused 19px spread shadow creates a "floating sheet" aesthetic for feature cards.)

## Family Map
Not captured in source. No sub-brands identified in topology.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Background, button text | 8 | 0.6 | computed_style |
| `{color.ink}` | `#25292b` | Primary body text | 30 | 0.8 | computed_style |
| `{color.navy.deep}` | `#07314e` | Display text, footer background | 15 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#00c6ab` | CTA background, active borders | 4 | 0.6 | computed_style |
| `{color.navy.mid}` | `#00326d` | Secondary text, brand signals | 6 | 0.6 | computed_style |
| `{color.blue.alt}` | `#025580` | Decorative text | 4 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Roboto Slab | 500 | Display Headings | N/A (Google Font) | Apache 2.0 |
| Nunito Sans | 400, 800 | UI / Display | N/A (Google Font) | SIL OFL |
| Roboto | 400, 700 | Body / Lead | N/A (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 62px | 77.5px | normal | 800 | Hero Display | `h1` (Nunito Sans) |
| `{type.display.lg}` | 55px | 77px | normal | 500 | Section Hero | `h1` (Roboto Slab) |
| `{type.display.md}` | 44px | 61.6px | normal | 500 | Section Head | `h2` |
| `{type.heading.sm}` | 24px | 33.6px | normal | 500 | Card Title | `h4` |
| `{type.body.lead}` | 20px | 28px | normal | 400 | Intro Text | `p.lead` |
| `{type.body.md}` | 16px | 22.4px | normal | 400 | Default Body | `span` |
| `{type.body.ui}` | 16px | 24px | normal | 400 | Content Wrapper | `section` |
| `{type.button}` | 16px | 24px | normal | 800 | CTA Label | `a#button_button` |

### Principles
1. **Serif for Hierarchy:** Use Roboto Slab exclusively for section-level storytelling (h2, h4).
2. **Weight for Action:** Primary buttons use the heaviest weight of Nunito Sans (800) to ensure legibility against high-saturation teal.
3. **Lead Pacing:** Introductory paragraphs use a 20px/28px ratio to bridge the gap between display and body.

## Spacing
**Base unit:** 4px (approximated)
Table: | Token | Value | Occurrences |
|---|---|---|---|
| `{space.xs}` | 15px | 4 |
| `{space.sm}` | 16px | 9 |
| `{space.md}` | 22px | 9 |
| `{space.lg}` | 24px | 4 |
| `{space.xl}` | 30px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default containers | 49 occurrences |
| `{radius.md}` | 12px | Feature cards | Card component |
| `{radius.pill}` | 50px | Primary buttons | Rounded Button component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.floating}` | `rgba(0, 0, 0, 0.08) 0px 8px 19px 2px` | Content cards | Observed on 6 cards |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site-wide CTA
**Pages observed:** /pricing, /about
**Spec:** Background `#00c6ab` / Text `#ffffff` / Border `#00c6ab` (1px) / Radius `50px` / Padding `12px 44px` / Typography `Nunito Sans 800 16px`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Value proposition display
**Pages observed:** dhicorp.org
**Spec:** Background `#ffffff` / Text `#25292b` / Border `0px` / Radius `12px` / Padding `30px` / Shadow `rgba(0, 0, 0, 0.08) 0px 8px 19px 2px`
**States observed:** Default: captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|---|---|
| Max content width | 1140px (estimated from screenshots) |
| Grid | 3-column feature grid |
| Section Padding | 60px - 80px vertical |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column. |

## Imagery & decoration
Dhicorp uses flat, multi-color illustrative icons (e.g., schoolhouse, shield) centered within feature cards. It avoids photographic backgrounds in favor of clean white surfaces and solid navy blocks.

## Do's
- Use **Roboto Slab 500** for all section headings to maintain institutional authority.
- Apply the **19px spread shadow** to all white cards on white backgrounds to ensure depth.
- Use **#00c6ab (Teal)** exclusively for the primary path to conversion.
- Maintain **30px internal padding** on all feature-based cards.
- Pair **Nunito Sans 800** with teal backgrounds for maximum button legibility.

## Don'ts
- **Wrong:** Using #00c6ab for body text. **Right:** Use #25292b. **Reason:** Teal is reserved for interactive signals only.
- **Wrong:** Applying border-radius to the main header or footer. **Right:** Keep these sharp (0px). **Reason:** Rounded corners are reserved for floating content modules.
- **Wrong:** Using Roboto Slab for body copy. **Right:** Use Roboto or Nunito Sans. **Reason:** Slab serifs at small sizes degrade legibility in this system.

## Similar brands
- TIAA (Institutional blue/white/serif mix)
- Vanguard (Corporate stability, high-contrast action colors)
- UnitedHealthcare (Navy-heavy corporate palette with teal accents)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --dh-color-primary: #00c6ab;
  --dh-color-navy-deep: #07314e;
  --dh-color-ink: #25292b;
  --dh-shadow-floating: 0px 8px 19px 2px rgba(0, 0, 0, 0.08);
  --dh-radius-card: 12px;
  --dh-font-display: 'Roboto Slab', serif;
  --dh-font-ui: 'Nunito Sans', sans-serif;
}
```

## Agent prompt examples
- "Create a feature card using a 12px border radius, white background, and a 19px spread shadow with 8% black opacity."
- "Generate a primary CTA button with a 50px pill radius, #00c6ab background, and white Nunito Sans text at weight 800."
- "Style an H2 heading using Roboto Slab at weight 500 and color #07314e."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Secondary button variants (outline or ghost) were not observed on the analyzed pages.
- Specific form input styling (focus states) was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://dhicorp.org | 1440px | 2026-06-06 |
| Pricing | https://dhicorp.org/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://dhicorp.org | 390px | 2026-06-06 |