---
generator: clinical-terminal-brand-kit
company: "Candid Health"
domain: "candidhealth.com"
colors:
  primary: "#03021D"
  onPrimary: "#F1F1F1"
  dark: "#374151"
  background: "#FBFBFB"
ground:
  mode: light
  hex: "#FBFBFB"
  ink: "#374151"
  accent: "#03021D"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "2px"
  button: "2px"
---

# Design System — Candid Health

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

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

## Color
- **Accent on the ground: #03021D** (19.7:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #03021D** for filled shapes (buttons, chips, bars), with #F1F1F1 text on it (18.05:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Inter**. Body: **Inter**. Both on Google Fonts.
- Candid Health's site uses GT America / GT America; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--vc-clr-primary`: `#000000`
- `--vc-clr-secondary`: `#090F20`
- `--vc-clr-white`: `#FFFFFF`
- `--color-surface-light`: `#FBFBFB`
- `--color-surface-high-contrast-light`: `#FFFFFF`
- `--color-text-light`: `#03021D`
- `--color-text-opaque-light`: `#03021D`
- `--color-text-low-contrast-light`: `#5B5A72`
- `--color-text-high-contrast-light`: `#000000`
- `--color-mist-shade-light`: `#ECECEC`
- `--color-outline-light`: `#D9D9D9`
- `--color-surface-dark`: `#03021D`
- `--color-surface-opaque-dark`: `#03021D`
- `--color-surface-high-contrast-dark`: `#020113`
- `--color-text-dark`: `#F1F1F1`
- `--color-text-low-contrast-dark`: `#CCCCCC`
- `--color-text-high-contrast-dark`: `#FFFFFF`
- `--color-mist-shade-dark`: `#38384D`
- `--color-mist`: `#FBFBFB`
- `--color-light-grey`: `#F3F3F3`
- `--color-night-shade-tint`: `#30254A`
- `--color-ultra-purple-tint`: `#7573FF`
- `--color-ultra-purple`: `#2E04E8`
- `--color-ultra-purple-shade`: `#180083`
- `--color-pink-tint`: `#FFA9F1`
- `--color-pink`: `#FB7FFF`
- `--color-pink-shade`: `#D000B7`
- `--color-aqua-tint`: `#CDFFFF`
- `--color-aqua`: `#42FFFC`
- `--color-aqua-shade`: `#24D7F3`

### Typefaces

- GT America
- Inter — on Google Fonts

### Type scale (most-used sizes)

`4rem` · `2.5rem` · `1.25rem` · `20px` · `1.125rem` · `1rem` · `16px` · `.9375rem` · `.875rem` · `14px` · `13.5px` · `12px`

### Letter-spacing

`.05em` (3) · `-.2px` (2) · `.135px` (2) · `.42px` (2) · `-1.5px` (2) · `-1px` (2)

### Corner radii (most-used)

`50%` · `4px` · `2px` · `3px` · `12px` · `8px`

### Shadows

- `none!important`
- `0 5px 15px #0000001a`
- `0 4px 24px #00000040`
- `0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a`
- `0 0 0 1px #00000005,0 0 1px #0000000d`
- `0 10px 15px #0000001a`

### Gradients

- `linear-gradient(#fff 0 0)`
- `linear-gradient(180deg,#d1d5db,#d1d5db00)`
- `linear-gradient(90deg,#ffffff1a 25%,#fff3,#ffffff1a 75%)`
- `linear-gradient(180deg,#fff3,#fff0)`
- `linear-gradient(#fff,#fff)`
- `linear-gradient(135deg,#00d4ff,#06f)`

### Breakpoints

480px · 600px · 768px · 769px · 865px · 866px · 1024px · 1200px · 1400px