---
generator: clinical-terminal-brand-kit
company: "Karoo Health"
domain: "karoohealth.com"
colors:
  primary: "#F08354"
  onPrimary: "#000000"
  dark: "#2D3142"
  accent: "#4F5D75"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#2D3142"
  accent: "#C05827"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "0px"
  button: "2px"
---

# Design System — Karoo Health

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Wbu Color Blue** (`--wbu-color-blue-N`): 0 `#0F2CCF` · 100 `#2F5DFF` · 200 `#597DFF` · 300 `#ACBEFF` · 400 `#D5DFFF` · 500 `#EAEFFF` · 600 `#F5F7FF`
- **Wbu Color Black** (`--wbu-color-black-N`): 0 `#151414` · 100 `#383838` · 200 `#525150` · 300 `#767574` · 400 `#A8A6A5` · 500 `#E0DFDF` · 600 `#F1F0EF`
- **Wbu Color Red** (`--wbu-color-red-N`): 0 `#9C2426` · 100 `#DF3336` · 200 `#E55C5E` · 300 `#ED8F90` · 400 `#F4B8B9` · 500 `#F9D6D7` · 600 `#FCEBEB`
- **Wbu Color Green** (`--wbu-color-green-N`): 0 `#0D4F3D` · 100 `#4B916D` · 200 `#97C693` · 300 `#BDE2A7` · 400 `#DAF3C0` · 500 `#EFFAE5` · 600 `#F1F5ED`
- **Wbu Color Yellow** (`--wbu-color-yellow-N`): 0 `#D49341` · 100 `#F9AD4D` · 200 `#FABD71` · 300 `#FCD29D` · 400 `#FDEAD2` · 500 `#FEF3E5` · 600 `#FEF6ED`
- **Wbu Color Orange** (`--wbu-color-orange-N`): 0 `#AE3E09` · 100 `#FF8044` · 200 `#FE9361` · 300 `#FDA77F` · 400 `#FBCFBB` · 500 `#FBE3D9` · 600 `#FDF1EC`
- **Wbu Color Purple** (`--wbu-color-purple-N`): 0 `#5000AA` · 100 `#7200F3` · 200 `#8B2DF5` · 300 `#BE89F9` · 400 `#D7B7FB` · 500 `#F1E5FE` · 600 `#F8F2FF`
- **Wbu Color Ai** (`--wbu-color-ai-N`): 0 `#4D3DD0` · 100 `#5A48F5` · 200 `#7B6DF7` · 300 `#A59BFA` · 400 `#D6D1FC` · 500 `#E7E4FE` · 600 `#EEECFE`

### Other named colors

- `--remainderBadgeColor`: `#FFFFFF`
- `--stroke`: `#000000`
- `--fill`: `#EF8354`
- `--divider-top-color`: `#FFFFFF`

### Typefaces

- Madefor Display (`--wbu-heading-font-stack`)
- normal normal normal 16px/1.4em din-next-w01-light (`--font_1`)
- normal normal normal 24px/1.4em helvetica-w01-bold (`--font_5`)
- normal normal normal 22px/1.4em helvetica-w01-bold (`--font_6`)
- normal normal normal 12px/1.4em din-next-w01-light (`--font_10`)
- normal normal normal 13px/1.4em futura-lt-w01-light (`--fntlbl`)
- normal normal normal 16px/1.4em helvetica-w01-roman (`--fntprefix`)
- din-next-w01-light (`--wix-font-Menu-family`)
- helvetica-w01-bold (`--wix-font-Heading-M-family`)

### Type scale (most-used sizes)

`32px` · `28px` · `24px` · `20px` · `18px` · `16px` · `14px` · `12px` · `10px`

### Letter-spacing

`-0.5px` (3) · `0.05em` (3) · `0.1em` (2)

### Corner radii (most-used)

`50%` · `300px` · `2px` · `24px`

### Shadows

- `0 0 #000`
- `inset 0 0 0 2px #116dff, inset 0 0 0 4px #fff!important`
- `0 0 1px 2px #fff`
- `0 0 0 2px #ffffff, 0 0 0 4px #116dff`
- `inset 0 0 0 2px #ffffff, inset 0 0 0 4px #116dff !important`
- `-5.66px 5.66px 15px 3px rgba(0, 0, 0, 0.05)`

### Gradients

- `radial-gradient(circle at 16.2646484375% 77.421875%, rgba(79,93,117,0.99) 0%, 34%, rgba(79,93,117,0) 50%)`
- `radial-gradient(circle at 15.4443359375% 23.0078125%, #4F5D75 0%, 48%, rgba(79,93,117,0) 80%)`
- `radial-gradient(circle at 93.6865234375% 11.42578125%, #4F5D75 0%, 42%, rgba(79,93,117,0) 70%)`
- `radial-gradient(circle at 48.9013671875% 49.521484375%, #FFFFFF 0%, 100%, rgba(255,255,255,0) 100%)`
- `radial-gradient(circle at 70.7958984375% 83.54817708333333%, #4F5D75 0%, 39.04%, rgba(79,93,117,0) 64%)`
- `radial-gradient(circle at 71.25% 87.5%, #4F5D75 0%, 39.04%, rgba(79,93,117,0) 64%)`