---
generator: clinical-terminal-brand-kit
company: "agilon health"
domain: "agilonhealth.com"
colors:
  primary: "#3E99D4"
  onPrimary: "#00173C"
  dark: "#00173C"
  accent: "#FF9E1B"
  background: "#FDFEFF"
ground:
  mode: light
  hex: "#FDFEFF"
  ink: "#00173C"
  accent: "#147AB3"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "0px"
  button: "100px"
---

# Design System — agilon health

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

## Ground
- **Light ground** (#FDFEFF), from agilon health's site background #FDFEFF. Pages and panels sit on it.
- Main text: #00173C (17.51:1 on the ground).
- Secondary text is #00173C at 88% / 76% / 60%; hairlines and plate borders #00173C at 16%.

## Color
- **Accent on the ground: #147AB3** (4.66:1), adjusted from agilon health's primary #3E99D4 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #3E99D4** for filled shapes (buttons, chips, bars), with #00173C text on it (5.65:1).
- Secondary accent #FF9E1B: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- agilon health's site uses Utopia-Std / Utopia-Std; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Accent Color** (`--accent-color-N`): 1 `#FBD757` · 2 `#FF9E1B` · 3 `#D28B00`

### Other named colors

- `--primary-color-light`: `#1AABA7`
- `--primary-color`: `#3E97CC`
- `--primary-color-dark`: `#005DAD`
- `--primary-color-alt`: `#00173C`
- `--action-color-light`: `#E3E768`
- `--action-color`: `#C3D600`
- `--action-color-dark`: `#82A700`
- `--secondary-color-light`: `#9CD9B4`
- `--secondary-color`: `#6AC04C`
- `--secondary-color-dark`: `#23816E`
- `--white-color`: `#FFFFFF`
- `--white-off-color`: `#FDFEFF`
- `--black-color`: `#000000`
- `--black-off-color`: `#111111`
- `--gray-color-light`: `#E6E5DD`
- `--gray-color`: `#D0C9C6`
- `--gray-color-dark`: `#B1AD9C`
- `--gray-color-alt`: `#323946`
- `--social-facebook-color`: `#3B5998`
- `--social-twitter-color`: `#08A0E9`
- `--social-linkedin-color`: `#005E89`
- `--social-medium-color`: `#000000`
- `--social-youtube-color`: `#C4302B`
- `--social-instagram-color`: `#5851DB`
- `--social-snapchat-color`: `#FFFC00`
- `--alert-error-color`: `#DD6363`
- `--alert-warning-color`: `#EDED90`
- `--alert-success-color`: `#ACD68F`
- `--keyboard-focus-color`: `#FF2323`
- `--primary-color-light-2`: `#B8DCE7`
- `--primary-color-dark-2`: `#002F57`
- `--gray-color-light-2`: `#F4F2F0`
- `--gray-color-dark-2`: `#748592`

### Typefaces

- utopia-std (`--super-font-family`)
- effra (`--h3-font-family`)
- SFMono-Regular

### Type scale (most-used sizes)

`2.5rem` · `2rem` · `1.75rem` · `28px` · `1.625rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `.8rem` · `0.75rem` · `10px`

### Letter-spacing

`.1em` (2) · `-0.008125rem` (2) · `.05rem` (1) · `-0.078125rem` (1) · `-0.059375rem` (1) · `-0.03875rem` (1)

### Corner radii (most-used)

`100%` · `0.5rem` · `.2rem` · `9999px` · `8px` · `100px`

### Shadows

- `none!important`

### Gradients

- `linear-gradient(180deg,rgba(50,74,91,0),#324a5b)`
- `linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)`
- `linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)`
- `linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)`
- `linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%)`
- `linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)`

### Breakpoints

77px · 600px · 767px · 768px · 991px · 1000px · 1001px · 1019px · 1023px · 1024px · 1199px · 1200px · 1366px · 1440px · 1679px · 1920px