Kairon Health design system

kaironhealth.com

Read from Kairon Health's public website by Clinical Terminal. Not reviewed by Kairon Health. Copy it and paste it into Claude as inspiration.

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FAF7ED

  --paper
• Ink

  #0C2D57
• Accent on the ground

  #C74301
• Primary

  #F97140

  --accent
• On primary

  #000000
• Dark

  #0C2D57

  --navy
• Site background

  #FAF7ED

  --paper

Color ramps

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

Type

• 72pxKairon Health
• 55pxKairon Health
• 40pxKairon Health
• 32pxKairon Health
• 24pxKairon Health
• 22pxKairon Health
• 20pxKairon Health
• 18pxKairon Health

Shape & depth

Cards and panels: 8px corners · buttons and chips: 6px.

Corner radii

• 6px

  used in 6 rules
• 8px

  used in 6 rules
• 12px

  used in 3 rules
• 10px

  used in 2 rules
• 9999px

  used in 1 rule
• 1.5px

  used in 1 rule
• 4px

  used in 1 rule
• 5px

  used in 1 rule
• 7px

  used in 1 rule

Shadows

• 0 1px 2px #0c2d5724

  used in 1 rule
• inset 0 1px #ffffff38,0 8px 20px -10px #cf521cb3

  used in 1 rule
• 0 20px 25px #00000026

  used in 1 rule
• inset 3px 0 #f97140

  used in 1 rule

Gradients

• linear-gradient(#0000,#000 15% 85%,#0000)

  used in 2 rules
• radial-gradient(circle at 60% 100%,#00adf26b,#fff0 27%)

  used in 1 rule
• linear-gradient(53deg,#092447 51%,#fff0)

  used in 1 rule
• radial-gradient(circle closest-corner at 0 33%,#072652 49%,#134f7a61 93%)

  used in 1 rule
• radial-gradient(circle at 50% 0,#00adf2,#fff0 24%)

  used in 1 rule
• radial-gradient(circle at 100% 0,#18517d,#fff0)

  used in 1 rule

Voice

Tone: professional. Energy: high. Written for patients and healthcare professionals.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
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)`