# Careexpand Design System

> Deep navy clinical precision anchored by ultra-light Swiss-style typography and generous architectural whitespace.

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

## TL;DR
Careexpand utilizes a high-contrast monochrome palette dominated by "Black" (#002237)—which is actually a deep, midnight navy—against a pure white (#ffffff) foundation. The system is typographically driven by the Twk Lausanne family, specifically utilizing the weight 300 (Light) for body and sub-headers to maintain a clean, clinical aesthetic. Primary actions are defined by pill-shaped buttons with 40px radii, while content containers alternate between sharp 0px corners and soft 8px card radii. The brand avoids vibrant colors, opting instead for a single soft blue accent (#c4dcea) used sparingly for secondary surfaces and badges.

## Signature DNA
1. **The Midnight Navy Anchor** (#002237 is used for text, primary backgrounds, and borders, creating a severe but professional medical-tech atmosphere across all pages.)
2. **Twk Lausanne Light** (The consistent use of weight 300 for body text and mid-level headings creates a sophisticated, airy feel that prevents the dark primary color from feeling heavy.)
3. **Pill-to-Sharp Contrast** (Interactive elements like buttons use a 40px "Pill" radius, while the global layout and many section containers remain strictly 0px sharp, signaling a distinction between the "platform" and the "content".)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--base-color-neutral--black` | `#002237` | Primary text, button backgrounds, and section anchors | 217 | 1.0 | `--text-color--text-primary` |
| `--base-color-neutral--neutral` | `#ffffff` | Primary page background and canvas | 83 | 1.0 | `computed_style` |
| `--base-color-neutral--neutral-lighter` | `#f6f5f3` | Subtle section backgrounds and secondary buttons | 7 | 1.0 | `--base-color-neutral--neutral-lighter` |
| `--base-color-neutral--neutral-light` | `#e8e6df` | Tertiary background surfaces | 1 | 1.0 | `--background-color--background-tertiary` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--base-color-brand--blue` | `#c4dcea` | Decorative surface backgrounds and badges | 4 | 1.0 | `decorative_only` |
| `--base-color-neutral--blue-dark` | `#afc9d9` | Tertiary accent or hover states | 1 | 0.8 | `declared_token` |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--text-color--text-success` | `#027a48` | Success states and positive indicators |
| `--text-color--text-error` | `#b42318` | Error messages and validation |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Twk Lausanne 400 | 400, 700 | Display and bold emphasis | Inter | Licensed (Milieu Grotesque) |
| Twk Lausanne 300 | 300 | Primary body and sub-headings | Inter Light | Licensed (Milieu Grotesque) |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 54px | 56px | normal | 400 | Page Hero H1 | `h1.heading-style-h2` |
| `{type.h2}` | 40px | 48px | normal | 400 | Section Headers | `h2.heading-style-h3` |
| `{type.h3}` | 32px | 40px | normal | 400 | Sub-section Headers | `h2.heading-style-h4` |
| `{type.large}` | 24px | 32px | normal | 300 | Feature titles | `h3.text-size-large` |
| `{type.medium}` | 20px | 28px | normal | 300 | Intro paragraphs | `p.text-size-medium` |
| `{type.body}` | 16px | 24px | normal | 300 | Default running text | `header.section_header113` |
| `{type.button}` | 16px | 16px | normal | 300 | Interactive labels | `a.button.is-alternate` |
| `{type.small}` | 14px | 22px | normal | 300 | Captions / Footer | `div.text-size-small` |

### Principles
1. **Weight 300 is the default.** Unlike most SaaS systems that use 400 for body, Careexpand uses 300 for almost all prose.
2. **Tight Display Leading.** Large headings (54px) use nearly 1:1 line height (56px) for a compact, editorial look.
3. **No Letter Spacing.** The system relies on the natural kerning of Twk Lausanne; no tracking overrides are observed.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 12 |
| `{space.sm}` | 16px | 5 |
| `{space.md}` | 24px | 18 |
| `{space.lg}` | 32px | 3 |
| `{space.xl}` | 48px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Global sections, primary containers | 218 occurrences |
| `{radius.md}` | 8px | Pricing cards, feature cards | Pricing page cards |
| `{radius.pill}` | 40px | Primary and secondary buttons | Rounded Button component |
| `{radius.full}` | 100px | Avatars and circular badges | About page team photos |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | Standard cards and sections | 0px border-width surfaces |
| Focus | `rgb(255, 255, 255) 0px 0px 0px 8px` | Avatar/Image ring highlights | Team cards on About page |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Call to Action
**Pages observed:** Home, Pricing, About
**Spec:** Background `#002237` / Text `#ffffff` / Border 1px `#002237` / Radius 40px / Padding 11px 24px / Typography 16px 300
**States observed:** Default | Active: captured

#### Navigation
**Role:** Global header
**Pages observed:** Pricing, About
**Spec:** Background `#002237` / Text `#ffffff` / Border 0px / Radius 0px / Typography 16px 300
**States observed:** Default: captured

### Tier 2: Patterns

#### Pricing Card
**Role:** Service tier display
**Pages observed:** Pricing
**Spec:** Background `#f6f5f3` / Text `#002237` / Border 1px `#d7d9dc` / Radius 8px / Padding 32px
**States observed:** Default: captured

#### Feature Card
**Role:** Highlighting platform benefits
**Pages observed:** Home, About
**Spec:** Background `#c4dcea` / Text `#002237` / Border 0px / Radius 40px / Padding 0px 8px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Team Avatar
**Role:** Biographical display
**Pages observed:** About
**Spec:** Background `#cccccc` / Radius 100% / Shadow `rgb(255, 255, 255) 0px 0px 0px 8px`
**States observed:** Default: captured

#### Alternate Button
**Role:** Secondary actions on dark backgrounds
**Pages observed:** Home, About
**Spec:** Background `transparent` / Text `#ffffff` / Border 1px `#ffffff` / Radius 40px / Padding 4px 0px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px (estimated) |
| Section Gap | 80px - 120px |
| Card Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; Padding reduces to 16px. |
| Desktop | 1440px | Multi-column grids (3-up for pricing); Horizontal navigation visible. |

## Imagery & decoration
Careexpand uses high-resolution photography of medical professionals in soft-focus clinical environments. Decorative elements include subtle concentric line-art circles in the background of navy sections, reinforcing the "expanding" brand name.

## Do's
- Use `#002237` for all primary text to ensure 16.4:1 contrast.
- Apply `Twk Lausanne 300` for long-form body copy.
- Use `40px` radius for all interactive button elements.
- Maintain sharp `0px` corners for full-width background sections.
- Use `#f6f5f3` for secondary background tiers to provide subtle separation.

## Don'ts
- **Wrong:** Using a generic bright blue (#007bff) for buttons. **Right:** Use `#002237`. **Reason:** Careexpand is a monochrome-navy brand; bright blues are reserved for sub-brand tokens not used in parent UI.
- Do not use bold (700) for body text; use 300 for the clinical aesthetic.
- Do not apply shadows to cards; use 1px borders (#d7d9dc) or flat color changes for depth.
- Do not use the accent blue (#c4dcea) for text; it is for background surfaces only.

## Similar brands
- Forward Health
- One Medical
- Modern Health
- Oscar Health

## Quick start

```css
/* CSS Variables */
:root {
  --color-navy: #002237;
  --color-white: #ffffff;
  --color-sand: #f6f5f3;
  --color-accent-blue: #c4dcea;
  --font-main: "Twk Lausanne", sans-serif;
  --radius-pill: 40px;
  --radius-card: 8px;
}
```

## Agent prompt examples
- "Create a primary CTA button using #002237 background, white Twk Lausanne 300 text, and a 40px border radius."
- "Design a pricing card with a #f6f5f3 background, 8px border radius, and a 1px border in #d7d9dc."
- "Generate a hero section with a #002237 background and 54px Twk Lausanne 400 white text."

## Known gaps
- Hover states for buttons were not explicitly captured in the computed style evidence.
- The exact transition timing for mobile menu animations is not documented.
- Tertiary button states (Disabled) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://careexpand.com | 1440x900 | 2026-06-06 |
| Pricing | https://careexpand.com/pricing | 1440x900 | 2026-06-06 |
| About | https://careexpand.com/about | 1440x900 | 2026-06-06 |