---
generator: clinical-terminal-brand-kit
company: "iMPROve Health"
domain: "improve.health"
colors:
  primary: "#192F7C"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  accent: "#FFFF00"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#192F7C"
fonts:
  heading: "Figtree"
  body: "Figtree"
radius:
  card: "8px"
  button: "25px"
---

# Design System — iMPROve Health

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

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

## Color
- **Accent on the ground: #192F7C** (12.08:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #192F7C** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (12.08:1).
- Secondary accent #FFFF00: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Figtree**. Body: **Figtree**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Bricks Color Grey** (`--bricks-color-grey-N`): 100 `#F5F5F5` · 300 `#E0E0E0` · 500 `#9E9E9E` · 700 `#616161` · 800 `#424242` · 900 `#212121`

### Other named colors

- `--bricks-color-primary`: `#FFD64F`
- `--bricks-color-secondary`: `#FC5778`
- `--bricks-text-dark`: `#212121`
- `--bricks-text-muted`: `#616161`
- `--bricks-text-light`: `#9E9E9E`
- `--bricks-text-info`: `#00B0F4`
- `--bricks-text-success`: `#11B76B`
- `--bricks-text-warning`: `#FFA100`
- `--bricks-text-danger`: `#FA4362`
- `--bricks-bg-info`: `#E5F3FF`
- `--bricks-bg-success`: `#E6F6ED`
- `--bricks-bg-warning`: `#FFF2D7`
- `--bricks-bg-danger`: `#FFE6EC`
- `--bricks-bg-dark`: `#263238`
- `--bricks-bg-light`: `#F5F6F7`
- `--bricks-border-color`: `#DDDEDF`
- `--bricks-tooltip-bg`: `#23282D`
- `--bricks-tooltip-text`: `#EAECEF`
- `--bulma-white-invert`: `#090A0C`
- `--bulma-black-invert`: `#FFFFFF`
- `--bulma-light-invert`: `#2E333D`
- `--bulma-dark-invert`: `#F3F4F6`
- `--bulma-black-bis`: `#14161A`
- `--bulma-black-ter`: `#1F2229`
- `--bulma-grey-darker`: `#2E333D`
- `--bulma-grey-dark`: `#404654`
- `--bulma-grey`: `#69748C`
- `--bulma-grey-light`: `#ABB1BF`
- `--bulma-grey-lighter`: `#D6D9E0`
- `--bulma-white-ter`: `#F3F4F6`
- `--bulma-white-bis`: `#F9FAFB`
- `--bg-dark-font-color`: `#FFFFFF`
- `--primary-color-rgb`: `#497B02`
- `--green-color`: `#8DC63F`
- `--blue-color`: `#00539F`
- `--green-dark-color`: `#497B02`
- `--green-medium-color`: `#589600`
- `--blue-dark-color`: `#072A79`
- `--blue-navy-color`: `#041743`
- `--color-green`: `#8DC63F`
- `--color-blue`: `#192F7C`
- `--color-green-dark`: `#497B02`
- `--color-green-medium`: `#589600`
- `--color-blue-dark`: `#192F7C`
- `--color-blue-navy`: `#041743`
- `--color-orange`: `#BC5A36`
- `--color-gray`: `#58595B`
- `--color-gray-lite`: `#929292`
- `--color-gray-dark`: `#2D2D2D`
- `--color-black`: `#000000`
- `--color-gray-lite-warm`: `#EFEFEF`
- `--gf-local-color`: `#000000`
- `--bricks-color-yellow`: `#FFEB3B`
- `--bricks-color-amber`: `#FFC107`
- `--bricks-color-orange`: `#FF9800`
- `--bricks-color-deep-orange`: `#FF5722`
- `--bricks-color-red`: `#F44336`
- `--bricks-color-purple`: `#9C27B0`
- `--bricks-color-blue`: `#2196F3`
- `--bricks-color-light-blue`: `#03A9F4`
- `--bricks-color-sky-blue`: `#81D4FA`
- `--bricks-color-green`: `#4CAF50`
- `--bricks-color-light-green`: `#8BC34A`
- `--bricks-color-lime`: `#CDDC39`

### Typefaces

- Inter (`--bulma-family-primary`) — on Google Fonts
- Inconsolata (`--bulma-family-code`)
- Figtree — on Google Fonts

### Type scale (most-used sizes)

`3rem` · `2.5rem` · `2rem` · `32px` · `1.5rem` · `24px` · `1.25rem` · `1rem` · `14px` · `.875rem` · `.75rem` · `11px`

### Letter-spacing

`.5px` (1) · `0.1em` (1)

### Corner radii (most-used)

`50%` · `12px` · `24px` · `25px` · `4px` · `100px` · `3px` · `30px`

### Shadows

- `0 0 2px 2px rgba(0,0,0,.6)`
- `none!important`
- `0 1em 2em -0.5em rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02)`
- `0 0px 15px rgba(255, 255, 255, 0.45)`
- `rgba(0, 0, 0, 0.25) 0 6px 6px -6px inset`
- `2px 2px 8px #efefef`

### Gradients

- `linear-gradient(90deg, rgba(138,198,65,1) 0%, rgba(138,198,65,0.75) 45%, rgba(138,198,65,0) 100%)`
- `linear-gradient(45deg,transparent 50%,gray 0)`
- `linear-gradient(135deg,gray 50%,transparent 0)`
- `linear-gradient(90deg, rgba(25,47,124,1) 0%, rgba(25,47,124,0.7203256302521008) 40%, rgba(25,47,124,0) 73%, rgba(25,47,124,0) 100%)`
- `linear-gradient(90deg, rgba(25,47,124,0) 0%, rgba(25,47,124,0.75) 45%, rgba(25,47,124,1) 100%)`

### Breakpoints

478px · 767px · 768px · 769px · 1023px · 1024px · 1215px · 1216px · 1279px · 1280px · 1320px · 1407px · 1408px