# Careacademy Design System

> A professional healthcare canvas defined by deep teal anchors, high-contrast orange actions, and a rigorous Swiss-style typographic hierarchy.

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

## TL;DR
Careacademy utilizes a "Teal and Tangelo" palette to balance clinical authority with urgent calls to action. The system is built on a pure white foundation (`#ffffff`) with a secondary light gray surface (`#f7f7f7`) used for section alternating. Primary brand voltage is carried by a deep teal (`#0a828f`) used for headings and borders, while a high-visibility orange (`#f16736`) is reserved strictly for primary conversion points. Typography is strictly **Neue Haas Grotesk**, utilizing a wide range of weights (400 to 700) to create a clear information hierarchy, often paired with generous 32px to 56px vertical spacing.

## Signature DNA
1. **The Conversion Tangelo** (The use of `#f16736` or `#ef5b36` is restricted to high-intent buttons and primary "Start Free Trial" actions, creating a singular focal point against the teal-heavy UI. Observed on Homepage and Pricing.)
2. **Clinical Teal Anchoring** (Headings and secondary UI elements use `#0a828f` or `#287080`, establishing a professional healthcare aesthetic that avoids the coldness of pure blue. Observed across all analyzed pages.)
3. **Neue Haas Hierarchy** (A rigorous application of Neue Haas Grotesk, scaling from 13px utility text to 72px display heroes, using weight shifts rather than color shifts to denote importance.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary canvas, button text, card backgrounds | 120 | 1.0 | Computed Style |
| `{color.black}` | `#000000` | Primary text, deep shadows | 70 | 1.0 | Computed Style |
| `{color.gray.light}` | `#f7f7f7` | Tertiary surface, footer background | 20 | 1.0 | `--wp--preset--color--tertiary` |
| `{color.ink}` | `#3f3f3f` | Default body text | 202 | 0.8 | Computed Style |
| `{color.charcoal}` | `#1f2226` | Dark text, pricing borders | 138 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.teal.primary}` | `#0a828f` | Headings, primary borders, icons | 68 | 0.8 | Computed Style |
| `{color.orange.cta}` | `#f16736` | Primary button background, high-intent text | 12 | 0.8 | Computed Style |
| `{color.teal.dark}` | `#287080` | Secondary buttons, footer links | 21 | 0.8 | Computed Style |
| `{color.teal.muted}` | `#a3cfd9` | Pricing tier headers, secondary surfaces | 3 | 0.6 | Computed Style |
| `{color.navy}` | `#15437b` | Specialized card backgrounds | 6 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Neue Haas Grotesk | 400, 500, 600, 700 | Display, Heading, Body | Inter | Licensed |
| Arial | 400 | Utility fallback, UI Close buttons | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 72px | 72px | normal | 700 | Hero Display | `p` (Homepage) |
| `{type.display.lg}` | 48px | 50px | normal | 700 | Section Headlines | `h3#headline-4299-4783` |
| `{type.display.md}` | 40px | 29px | normal | 600 | Sub-hero Display | `div#text_block-182-49` |
| `{type.heading.lg}` | 36px | 44px | normal | 500 | Section Titles | `p` |
| `{type.heading.md}` | 32px | 29px | normal | 700 | Pricing/Feature Heads | `div#_rich_text-4130-4724` |
| `{type.heading.sm}` | 24px | 29px | normal | 700 | Card Titles | `p` |
| `{type.body.lg}` | 18px | 29px | normal | 400 | Default Body | `header#header` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Descriptive Text | `p` |
| `{type.body.sm}` | 14px | 20px | normal | 700 | Small CTAs | `a.cta-ca-primary` |
| `{type.utility}` | 13px | 16px | normal | 400 | Footer Links | `a#text_block-1256-35` |

### Principles
1. **Weight-Based Emphasis:** Hierarchy is driven by weight transitions (400 to 700) rather than color variation.
2. **Tight Display Leading:** Large display sizes (72px) use 1.0 line-height for maximum impact.
3. **Standardized Body Leading:** Body text (16px-18px) maintains a consistent 29px line-height for readability.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 106 |
| `{space.sm}` | 16px | 79 |
| `{space.md}` | 24px | 44 |
| `{space.lg}` | 32px | 31 |
| `{space.xl}` | 56px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Default containers, footer | 569 occurrences |
| `{radius.sm}` | 3px | Primary/Secondary Buttons | Rounded Button component |
| `{radius.md}` | 8px | Feature Cards | Card component |
| `{radius.lg}` | 10px | Pricing/Integration Cards | Card component |
| `{radius.xl}` | 24px | Testimonial/Surface blocks | Surface component |
| `{radius.full}` | 50% | Avatars, Icon circles | Surface component |

## Components

### Tier 1: Foundational

#### Primary CTA Button
**Role:** Main conversion (Start Free Trial)
**Pages observed:** Homepage, Pricing
**Spec:** Background `#f16736` | Text `#ffffff` | Border `#f16736` (3px) | Radius `3px` | Padding `10px 16px` | Typography `16px/700`
**States observed:** Default | Hover: Captured (slight darken)

#### Secondary Outline Button
**Role:** Alternative actions (Pricing, Learn More)
**Pages observed:** Homepage, Pricing
**Spec:** Background `#ffffff` | Text `#0a828f` | Border `#0a828f` (3px) | Radius `3px` | Padding `10px 16px` | Typography `18px/500`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform benefits
**Pages observed:** Homepage
**Spec:** Background `rgba(241, 248, 248, 0.5)` | Text `#3f3f3f` | Border `0px` | Radius `8px` | Padding `16px 16px 16px 56px`
**States observed:** Default

#### Pricing Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background `#ffffff` | Text `#000000` | Border `#1d73ce` (1px) | Radius `10px` | Padding `0px`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Alternating Section Surface
**Role:** Visual rhythm between content blocks
**Pages observed:** Homepage, Pricing
**Spec:** Background `#f7f7f7` | Text `#3f3f3f` | Border `0px` | Radius `0px` | Padding `0px`
**States observed:** Default

#### Footer
**Role:** Global navigation and legal
**Pages observed:** Homepage, Pricing
**Spec:** Background `#f5f5f5` | Text `#3f3f3f` | Border `0px` | Radius `0px` | Typography `13px/400`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1440px |
| Section Gap | 56px - 182px |
| Column Grid | 12-column desktop |
| Card Gap | 24px |

## Do's
- Use `#f16736` exclusively for primary conversion buttons.
- Apply `Neue Haas Grotesk` weight 700 for all display headers above 32px.
- Use `#f7f7f7` for full-width background bands to separate content sections.
- Maintain a 3px border on all primary and secondary buttons.
- Use `#0a828f` for iconography and primary brand accents.

## Don'ts
- Do not use orange (`#f16736`) for body text or non-interactive elements.
- Do not apply border-radius to the main footer or header containers.
- Do not use Arial for anything other than utility UI elements (e.g., close buttons).
- **Wrong:** Using `#00d084` (Vivid Green Cyan) as a primary brand color. **Right:** Use `#0a828f`. **Reason:** The green is a legacy WP token, not the Careacademy brand teal.

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary-teal: #0a828f;
  --color-primary-orange: #f16736;
  --color-surface-gray: #f7f7f7;
  --font-main: "Neue Haas Grotesk", sans-serif;
  --radius-button: 3px;
  --radius-card: 8px;
}
```

## Known gaps
- Hover and Active states for the secondary outline buttons were not explicitly captured in the provided evidence.
- Mobile-specific typography scale for display sizes was not fully mapped.
- Shadow tokens were not present in the CSS evidence, suggesting a flat design approach.