---
generator: clinical-terminal-brand-kit
company: "Cair Health"
domain: "cairhealth.com"
colors:
  primary: "#4C95FF"
  onPrimary: "#000000"
  dark: "#050419"
  accent: "#3898EC"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#050419"
  accent: "#2972D9"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "7px"
  button: "8px"
---

# Design System — Cair Health

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

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

## Color
- **Accent on the ground: #2972D9** (4.66:1), adjusted from Cair Health's primary #4C95FF so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #4C95FF** for filled shapes (buttons, chips, bars), with #000000 text on it (7.05:1).
- Secondary accent #3898EC: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Cair Health's site uses Cabinetgrotesk / Cabinetgrotesk; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--color--black`: `#050419`
- `--color--blue`: `#574AFF`
- `--color--white`: `#FFFFFF`
- `--color--gray`: `#FBFBFB`
- `--color--gradient-1`: `#4318FF`
- `--color--gradient-2`: `#FAD9DA`

### Typefaces

- Cabinetgrotesk (`--font-family--cabinet-grotesk`)
- Inter (`--font-family--inter`) — on Google Fonts
- Fa Brands 400
- Fa 400
- Fa Solid 900

### Type scale (most-used sizes)

`58px` · `48px` · `42px` · `38px` · `36px` · `34px` · `32px` · `24px` · `20px` · `18px` · `16px` · `14px`

### Corner radii (most-used)

`50%` · `20px` · `14px` · `10px` · `4px` · `3px` · `200px` · `7px` · `100%` · `40px`

### Shadows

- `0 5px 32px #0000000d`
- `0 1px 2px #08071b0d`
- `0 0 0 1px #0000001a, 0 1px 3px #0000001a`
- `0 0 3px #3336`
- `0 0 0 2px #fff`
- `0 0 12px #0000000f`

### Gradients

- `linear-gradient(90deg, #fad9da, #4318ff)`
- `linear-gradient(290deg, #4318ff 8.67%, #fad9da 99.13%)`
- `linear-gradient(#4318ff4d, #fad9da26)`
- `linear-gradient(270deg, #ffffff1a, #ffffff4d 40%, #d4cbf8 50%, #ffffff4d 58%, #ffffff1a)`
- `linear-gradient(#ffffff59, #ffffff1a)`
- `linear-gradient(#ffffff08, #fff0)`

### Breakpoints

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