# Hhaexchange Design System

> Professional healthcare blue anchored by high-visibility orange utility, set in heavy-weight Lato typography.

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

## TL;DR
Hhaexchange utilizes a high-contrast "monochrome-plus-accent" system where a deep corporate blue `#284f88` serves as the primary structural color for cards and text, while a vibrant orange `#f47b20` is reserved strictly for primary calls to action. The layout relies on a clean white canvas `#ffffff` with subtle light-gray `#f7f8fa` sectioning. Typography is exclusively **Lato**, characterized by extreme weight variance: display headers often reach a "Black" weight of 900, while body copy remains at a legible 400. Geometry is mixed, using sharp 0px corners for large sections and soft 15px-20px radii for interactive cards and buttons.

## Signature DNA
1. **The "Power Orange" CTA** (A strict reservation of `#f47b20` for buttons like "Request a Demo" and "Learn More," ensuring the primary action is the highest-chroma element on any page).
2. **Heavyweight Lato Display** (The use of Lato at weight 900 for impact stats and major headers, creating a sense of stability and institutional authority).
3. **Deep Blue Inversion** (Large surface areas, such as feature cards, invert the palette using `#284f88` backgrounds with white text to create visual hierarchy without introducing new hues).

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface, button text | 21 | 1 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Primary text, button text, borders | 42 | 1 | `--wp--preset--color--black` |
| `{color.gray.100}` | `#f7f8fa` | Secondary surface background | 4 | 1 | `--bs-gray-100` |
| `{color.gray.200}` | `#e9e9e9` | Search inputs, decorative borders | 0 | 0.9 | `brand_page` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.blue.primary}` | `#284f88` | Primary brand color, card backgrounds, headings | 61 | 1 | `--bs-primary-2` |
| `{color.orange.cta}` | `#f47b20` | Primary button background, hover states | 2 | 1 | `--wp--custom--button--color--background` |
| `{color.blue.light}` | `#324e84` | Secondary text emphasis | 10 | 1 | `--wp--preset--color--light-blue` |
| `{color.blue.dark}` | `#002447` | Decorative surface background | 1 | 1 | `--wp--preset--color--darker-blue` (decorative_only) |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Lato | 400, 500, 700, 800, 900 | All headings, body, and UI | Lato (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 64px | 48px | normal | 900 | Impact stats | `p.impact-stats-block__value` |
| `{type.display.lg}` | 48px | 58px | normal | 900 | Hero headers | `h2#h-our-story` |
| `{type.heading.md}` | 32px | 40px | normal | 500 | Section headers | `h2#h-one-platform...` |
| `{type.heading.sm}` | 24px | 32px | normal | 500 | Card titles | `h3.resources-trio-block__card-title` |
| `{type.body.lg}` | 18px | 29.25px | normal | 400 | Lead paragraph | `p.has-black-color` |
| `{type.body.md}` | 16px | 26px | normal | 400 | Default body | `section#block_...` |
| `{type.body.bold}` | 16px | 24px | normal | 700 | Labels / Emphasis | `p.resources-trio-block__card-label` |
| `{type.button}` | 18px | 26px | normal | 700 | CTA labels | `button.popoverButton.btn` |

### Principles
1. **Weight as Hierarchy:** Use weight 900 for data points and 500-700 for structural headings.
2. **Tight Line Height on Display:** Large display type (64px) uses a line height (48px) smaller than the font size for a compact, "stacked" look.
3. **Color-Coded Text:** Use `#284f88` for headings on white backgrounds and `#ffffff` for headings on blue backgrounds.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 26 |
| `{space.sm}` | 16px | 4 |
| `{space.md}` | 24px | 15 |
| `{space.lg}` | 32px | 1 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, full-width bands | `occurrences: 110` |
| `{radius.md}` | 15px | Feature cards (Blue) | `https://hhaexchange.com` |
| `{radius.lg}` | 20px | Content cards (Gray) | `https://hhaexchange.com/about` |
| `{radius.pill}` | 30px | Primary CTA buttons | `Rounded Button` component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All observed cards and buttons | `shadow: none` in all components |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site-wide CTA (Request Demo, Learn More)
**Pages observed:** 2
**Spec:** Background: `#f47b20` | Text: `#000000` | Radius: `30px` | Padding: `10px 28px` | Typography: `Lato 18px/700`
**States observed:** Default | Hover: `#e8741d` | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns

#### Feature Card (Inverted)
**Role:** Highlighting specific user segments (Providers, Payers)
**Pages observed:** 1
**Spec:** Background: `#284f88` | Text: `#ffffff` | Radius: `15px` | Padding: `24px` | Typography: `Lato 24px/500`
**States observed:** Default

#### Resource Card
**Role:** Blog and webinar previews
**Pages observed:** 1
**Spec:** Background: `#284f88` | Radius: `15px` | Aspect Ratio: ~16:9 | Text: Below card in `#284f88`
**States observed:** Default

### Tier 3: Surface-specific

#### Content Card (Light)
**Role:** About page mission/vision blocks
**Pages observed:** 1
**Spec:** Background: `#f7f8fa` | Text: `#000000` | Radius: `20px` | Padding: `15px`
**States observed:** Default

#### Impact Stat
**Role:** Numerical proof points
**Pages observed:** 1
**Spec:** Text: `#284f88` | Typography: `Lato 64px/900` | Label Typography: `Lato 18px/500`
**States observed:** Default

#### Navigation Link
**Role:** Header menu items
**Pages observed:** 2
**Spec:** Text: `#ffffff` (on transparent) or `#000000` (on white) | Typography: `Lato 16px/700`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 80px - 100px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Feature cards stack vertically; Hero text aligns center. |
| Desktop | 1440px | 3-column resource grids; Horizontal top-nav. |

## Imagery & decoration
- **Photography:** Features diverse healthcare professionals and elderly patients in warm, natural lighting.
- **Icons:** Thin-stroke white line art icons used inside inverted blue cards.
- **Avoids:** Drop shadows, complex gradients, and rounded corners on main section containers.

## Do's
- Use `#f47b20` exclusively for primary action buttons.
- Set major headlines in Lato weight 900 for maximum impact.
- Use `#f7f8fa` as a background to separate content blocks on long pages.
- Invert text to `#ffffff` when placing it on a `#284f88` background.
- Maintain a `30px` radius for all primary buttons to ensure a "pill" appearance.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap default) for links. **Right:** Use `#284f88`. **Reason:** Brand consistency.
- **Wrong:** Applying shadows to cards. **Right:** Use flat backgrounds with borders or color fills. **Reason:** The system is strictly flat.
- **Wrong:** Using Orange `#f47b20` for body text. **Right:** Keep orange for buttons only.
- **Wrong:** Labeling the sub-brand accent as the parent primary. **Right:** Parent primary is always `#284f88`.

## Similar brands
- UnitedHealthcare (Blue/Orange healthcare palette)
- Aetna (Corporate healthcare typography)
- Optum (Clean, flat healthcare UI)

## Quick start

```css
/* CSS Variables */
:root {
  --hha-blue-primary: #284f88;
  --hha-orange-cta: #f47b20;
  --hha-white: #ffffff;
  --hha-gray-light: #f7f8fa;
  --hha-font-main: 'Lato', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using Hhaexchange specs: orange #f47b20 background, black text, 30px border radius, and Lato 18px bold font."
- "Design a feature card with a deep blue #284f88 background, 15px border radius, and white Lato text at 24px for the title."
- "Generate a hero section with a white background, a headline in Lato 900 at 48px in blue #284f88, and a primary orange button."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the token set.
- Shadow tokens were present in CSS variables (e.g., `--wp--preset--shadow--deep`) but no rendered components used them in the analyzed pages.

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