# Cortexhc Design System

> A clinical yet approachable interface defined by deep indigo typography and vibrant violet actions set against a sterile, high-contrast white canvas.

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

## TL;DR
Cortexhc utilizes a "Clinical Violet" aesthetic that balances the seriousness of healthcare with modern SaaS clarity. The system is anchored by a deep indigo heading color `#222151` and a primary action violet `#7f33f0`. Typography is exclusively **Calibre**, leaning on semi-bold (600) and bold (700) weights for a structured hierarchy. Surfaces are primarily pure white `#ffffff` or a very light lavender-tinted foundation `#eeeef8`, often elevated by extremely soft, large-spread shadows (`rgb(232, 227, 239) 0px 4px 79px 0px`). The layout is generous, using a 4px base unit with significant section breathing room (64px-80px).

## Signature DNA
1. **The Indigo-Violet Contrast** (Deep indigo `#222151` headings paired with `#7f33f0` primary buttons create a professional, trustworthy palette that avoids standard "medical blue" tropes. Observed on all pages.)
2. **Soft-Depth Elevation** (Large-scale cards use a signature lavender-tinted shadow `rgb(232, 227, 239)` with a 79px spread, creating a "floating" effect without harsh borders. Observed on Homepage and Pricing.)
3. **Calibre Hierarchy** (The system relies on the Calibre typeface across all roles, using significant size jumps—from 64px display to 16px body—to signal information priority. Observed on all pages.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--base-color-neutral--white` | `#ffffff` | Page background, card surface, button text | 124 | 1 | `css_variable` |
| `--background-light-purple` | `#eeeef8` | Alternate section backgrounds, card surfaces | 9 | 1 | `css_variable` |
| `--base-color-neutral--black` | `#000000` | Primary text, dark backgrounds | 6 | 1 | `css_variable` |
| `--main-background` | `#f9f9fb` | Subtle surface variation | 1 | 1 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--body-font-color` | `#686a9e` | Default body text, secondary icons | 345 | 1 | `css_variable` |
| `--heading-dark-blue` | `#222151` | Primary headings, button text | 177 | 1 | `css_variable` |
| `--button-purple` | `#7f33f0` | Primary CTA background, active text | 37 | 1 | `css_variable` |
| `accent-border` | `#d5d5ee` | Subtle card/surface borders | 8 | 0.6 | `computed_style` |
| `decorative-text` | `#ababce` | Deemphasized labels | 3 | 0.6 | `computed_style` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--background-color--background-success` | `#cef5ca` | Success states |
| `--background-color--background-error` | `#f8e4e4` | Error states |
| `--background-color--background-warning` | `#fcf8d8` | Warning states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Calibre | 400, 500, 600, 700 | All roles (Display, Heading, Body) | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-mega` | 64px | 67.2px | normal | 600 | Hero H1 | `h1.heading-9` |
| `display-lg` | 60px | 63px | normal | 600 | Section H2 | `h2` |
| `display-md` | 42px | 50.4px | normal | 700 | Section H3 | `h3` |
| `heading-md` | 32px | 35.2px | normal | 700 | Sub-section H4 | `h4` |
| `heading-sm` | 26px | 31.2px | normal | 600 | Card titles | `h5.text-color-primary` |
| `body-lg` | 20px | 20px | normal | 400 | Intro text | `div.text-size-medium` |
| `body-md` | 16px | 22.4px | normal | 400 | Default body | `section.section.home-top` |
| `body-sm` | 14px | 19.6px | normal | 400 | Tooltips/Captions | `div.home-header-slider-tooltip` |

### Principles
1. **Heading Weight Dominance:** Headings at 32px and above always use weight 700 or 600; never use 400 for display.
2. **Tight Leading on Display:** Large display type (64px) uses a tight 1.05x line height ratio.
3. **Indigo for Text:** Use `#686a9e` for long-form body text to reduce contrast harshness compared to pure black.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `space-xs` | 12px | 37 |
| `space-sm` | 20px | 15 |
| `space-md` | 32px | 56 |
| `space-lg` | 64px | 25 |
| `space-xl` | 80px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-input` | 4px | Form fields | 10 occurrences |
| `radius-button` | 10px | Primary/Secondary CTAs | 17 occurrences |
| `radius-card` | 20px | Small containers | 8 occurrences |
| `radius-panel` | 24px | Standard feature cards | 61 occurrences |
| `radius-large` | 40px | Large section containers | 10 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-lavender` | `rgb(232, 227, 239) 0px 4px 79px 0px` | Feature cards on white | 44 occurrences |
| `shadow-deep` | `rgba(81, 68, 122, 0.4) 0px 4px 79px 0px` | High-emphasis cards | 8 occurrences |
| `shadow-button` | `rgb(232, 227, 239) 0px 0px 8px 0px` | Button hover/focus | 6 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Get Started")
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `#7f33f0` | Text `#ffffff` | Radius `10px` | Padding `12px 20px` | Typography `Calibre 18px/600`
**States observed:** Default | Hover: Not captured | Active: Captured

#### Secondary Button
**Role:** Alternative actions or "Learn More"
**Pages observed:** Homepage, About
**Spec:** Background `#ffffff` | Text `#222151` | Border `1px #222151` | Radius `10px` | Padding `12px 20px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or services
**Pages observed:** Homepage, Pricing
**Spec:** Background `#ffffff` | Radius `24px` | Shadow `rgb(232, 227, 239) 0px 4px 79px 0px` | Typography `Calibre 16px`
**States observed:** Default | Hover: Not captured

#### Pricing Card
**Role:** Tiered pricing display
**Pages observed:** Pricing
**Spec:** Background `#eeeef8` | Radius `24px` | Padding `36px` | Text `#686a9e`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Outcome Card
**Role:** Numbered management steps (Gather, Intervene, Improve)
**Pages observed:** Homepage
**Spec:** Background `#ffffff` | Radius `24px` | Shadow `rgb(232, 227, 239) 0px 4px 79px 0px` | Typography `Calibre 20px/600` (Numbers)
**States observed:** Default

#### Management Section
**Role:** Large container for end-to-end outcome management
**Pages observed:** Homepage, Pricing
**Spec:** Background `#eeeef8` | Radius `40px` | Padding `80px 0px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Gap | 80px |
| Column Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | 3-column grids for cards |
| Mobile | 390px | Stacked cards, 100% width buttons, reduced display type (H1 to ~40px) |

## Imagery & decoration
Cortexhc uses high-quality photography of healthcare professionals and patients, often placed in rounded containers (`24px`). Decorative elements include subtle violet-to-indigo gradients and circular "pulse" motifs behind hero imagery.

## Do's
- Use `#7f33f0` for all primary interactive elements.
- Apply `radius-panel` (24px) to all content-bearing cards.
- Set headings in Calibre weight 600 or 700.
- Use `shadow-lavender` for cards sitting on white backgrounds.
- Maintain a minimum section padding of 64px (`space-lg`).

## Don'ts
- **Wrong:** Using `#2d62ff` (Brand Blue) for primary buttons. **Right:** Use `#7f33f0`. **Reason:** The primary action color is violet; blue is reserved for secondary brand signals.
- **Wrong:** Using pure black `#000000` for long body copy. **Right:** Use `#686a9e`.
- **Wrong:** Applying sharp corners (0px) to buttons. **Right:** Use `radius-button` (10px).
- **Wrong:** Using weight 400 for H1 or H2 headings.
- **Wrong:** Mixing different shadow colors; stick to the lavender-tinted `rgb(232, 227, 239)`.

## Similar brands
- Oscar Health
- Hinge Health
- Modern Health
- Cedar

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #7f33f0;
  --color-heading: #222151;
  --color-body: #686a9e;
  --color-foundation: #eeeef8;
  --shadow-main: 0px 4px 79px 0px rgb(232, 227, 239);
  --radius-card: 24px;
  --font-main: 'Calibre', sans-serif;
}
```

## Agent prompt examples
- "Create a primary button using Calibre 18px semi-bold, background #7f33f0, white text, and 10px border radius."
- "Design a feature card with a white background, 24px border radius, and a 79px spread shadow in #e8e3ef."
- "Generate a section header using Calibre 42px bold in color #222151 with a 1.2 line height."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the static evidence.
- The specific transition timing for the "pulse" decorative motifs is unknown.
- Mobile-specific font size tokens for H1-H3 were not fully mapped in the scale.

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