---
generator: clinical-terminal-brand-kit
company: "Kairon Health"
domain: "kaironhealth.com"
colors:
  primary: "#F97140"
  onPrimary: "#000000"
  dark: "#0C2D57"
  background: "#FAF7ED"
ground:
  mode: light
  hex: "#FAF7ED"
  ink: "#0C2D57"
  accent: "#C74301"
fonts:
  heading: "Oswald"
  body: "IBM Plex Sans"
radius:
  card: "8px"
  button: "6px"
---

# Design System — Kairon Health

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Cost** (`--cost-N`): 1 `#FBE6D6` · 2 `#F6B487` · 3 `#F5834B` · 4 `#D2551F` · 5 `#9A3411`

### Other named colors

- `--paper`: `#FAF7ED`
- `--card`: `#FFFFFF`
- `--navy`: `#0C2D57`
- `--ink`: `#0C2D57`
- `--muted`: `#667389`
- `--faint`: `#9BA3B1`
- `--line`: `#E7E1D2`
- `--line-navy`: `#0C2D57`
- `--line-navy2`: `#0C2D57`
- `--accent`: `#F97140`
- `--accent-tint`: `#FDE6DA`
- `--accent-line`: `#F6C6AD`
- `--good`: `#2F8F5B`
- `--good-t`: `#E4F1EA`
- `--warn`: `#C98A2E`
- `--warn-t`: `#FBF0DA`
- `--bad`: `#CC4436`
- `--bad-t`: `#FAE6E3`
- `--info`: `#3E6DB5`
- `--info-t`: `#E7EEF8`
- `--violet`: `#7A5AA6`
- `--violet-t`: `#EFEAF6`
- `--paper-2`: `#F2ECDC`
- `--card-2`: `#FBF9F2`
- `--ink-2`: `#2B3F5B`
- `--line-2`: `#D8D0BC`
- `--accent-2`: `#CF521C`

### Typefaces

- IBM Plex Serif (`--serif`) — on Google Fonts
- IBM Plex Sans (`--sans`) — on Google Fonts
- JetBrains Mono (`--mono`) — on Google Fonts
- Oswald (`--display`) — on Google Fonts

### Type scale (most-used sizes)

`72px` · `55px` · `40px` · `32px` · `24px` · `22px` · `20px` · `18px` · `17px` · `16px` · `14px` · `12px`

### Letter-spacing

`-.01em` (3) · `-.03em` (3) · `.1em` (2) · `.025em` (1) · `.05em` (1) · `.14em` (1)

### Corner radii (most-used)

`6px` · `8px` · `12px` · `10px` · `9999px` · `1.5px` · `4px` · `5px` · `7px`

### Shadows

- `0 1px 2px #0c2d5724`
- `inset 0 1px #ffffff38,0 8px 20px -10px #cf521cb3`
- `0 20px 25px #00000026`
- `inset 3px 0 #f97140`

### Gradients

- `linear-gradient(#0000,#000 15% 85%,#0000)`
- `radial-gradient(circle at 60% 100%,#00adf26b,#fff0 27%)`
- `linear-gradient(53deg,#092447 51%,#fff0)`
- `radial-gradient(circle closest-corner at 0 33%,#072652 49%,#134f7a61 93%)`
- `radial-gradient(circle at 50% 0,#00adf2,#fff0 24%)`
- `radial-gradient(circle at 100% 0,#18517d,#fff0)`