---
generator: clinical-terminal-brand-kit
company: "Atlas Health"
domain: "atlas.health"
colors:
  primary: "#ED3847"
  onPrimary: "#000000"
  dark: "#142534"
  background: "#F7F7F2"
ground:
  mode: light
  hex: "#F7F7F2"
  ink: "#142534"
  accent: "#DB2138"
fonts:
  heading: "IBM Plex Serif"
  body: "IBM Plex Sans"
radius:
  card: "16px"
  button: "16px"
---

# Design System — Atlas Health

> Read from Atlas Health's public website (atlas.health) by Clinical Terminal. Not reviewed by Atlas Health.
> Use it as inspiration: borrow the ideas, not Atlas Health's name, logo or identity.

## Ground
- **Light ground** (#F7F7F2), from Atlas Health's site background #F7F7F2. Pages and panels sit on it.
- Main text: #142534 (14.54:1 on the ground).
- Secondary text is #142534 at 88% / 76% / 60%; hairlines and plate borders #142534 at 16%.

## Color
- **Accent on the ground: #DB2138** (4.56:1), adjusted from Atlas Health's primary #ED3847 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #ED3847** for filled shapes (buttons, chips, bars), with #000000 text on it (5.26:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **IBM Plex Serif**. Body: **IBM Plex Sans**. Both on Google Fonts.

## Shape
- Cards and panels: 16px corners. Buttons and chips: 16px.

## Voice
- Tone: professional. Energy: high. Written for patients and healthcare professionals.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Base Background Lift Low Opacity Azure 37** (`--base---background-lift-low-opacity--azure-37-N`): 30 `#3A5E83` · 60 `#3A5E83` · 80 `#3A5E83`

### Other named colors

- `--baseblue`: `#142534`
- `--red-bg`: `#E92633`
- `--base---ui--error`: `#C94040`
- `--base---accent--primary`: `#1E1C1B`
- `--base---ui--success`: `#12B347`
- `--base---accent--brand`: `#ED3847`
- `--base---background-lift--light`: `#EFEDE7`
- `--base---background-lift--dark`: `#1E1C1B`
- `--base---background-lift-low-opacity--light`: `#EFEDE7`
- `--base---background-lift-low-opacity--dark`: `#1E1C1B`
- `--base---background-depth--light`: `#E1DCD5`
- `--base---background-depth--dark`: `#22201F`
- `--base---ui--warning`: `#C56A21`
- `--base---neutral--light-100`: `#F7F7F2`
- `--base---neutral--dark-100`: `#191818`

### Typefaces

- IBM Plex Mono (`--font--label`)
- IBM Plex Serif (`--font--heading-serif`) — on Google Fonts
- IBM Plex Sans Variable (`--font--body`)
- Raveo Display

### Type scale (most-used sizes)

`40px` · `38px` · `32px` · `24px` · `21px` · `18px` · `17px` · `16px` · `15px` · `14px` · `12px` · `10px`

### Letter-spacing

`.75px` (3) · `-.48px` (2) · `-1px` (2) · `.25px` (1) · `-.5px` (1)

### Corner radii (most-used)

`16px` · `50%` · `20px` · `3px` · `24px` · `12px` · `100%`

### Shadows

- `0 2px 5px #0003`
- `0 0 0 1px #0000001a,0 1px 3px #0000001a`
- `0 0 3px #3336`
- `0 0 0 2px #fff`
- `0 -1px #f7f7f229,0 1px #f7f7f214`

### Gradients

- `linear-gradient(to bottom,null,null)`
- `linear-gradient(#0000,#0000)`
- `linear-gradient(#0a2f54,#000)`
- `linear-gradient(#172333,#fff)`
- `radial-gradient(circle at 50% 0,#0003,#0009)`
- `linear-gradient(#142534,#0a2b4f)`

### Breakpoints

479px · 767px · 768px · 991px · 1440px