---
generator: clinical-terminal-brand-kit
company: "Qualified Health"
domain: "qualifiedhealthai.com"
colors:
  primary: "#31B5FF"
  onPrimary: "#000000"
  dark: "#0A2540"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#0A2540"
  accent: "#007CC2"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "4px"
  button: "4px"
---

# Design System — Qualified Health

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Color Blue Blue** (`--color-blue--blue-N`): 50 `#F5FBFF` · 100 `#DFF0FF` · 200 `#B8E3FF` · 300 `#78CEFF` · 400 `#31B5FF` · 500 `#069CF1` · 600 `#058BE8` · 700 `#0062A7` · 800 `#0A3D63` · 900 `#0A2540`
- **Color Gray Grey** (`--color-gray--grey-N`): 50 `#F4F4F4` · 100 `#F4F4F4` · 200 `#C1CFD8` · 300 `#A3B5C2` · 400 `#819BAC` · 500 `#5E7484` · 600 `#4F6070` · 700 `#3F4D5C` · 800 `#2F3948` · 900 `#1F2634`
- **Brand Brand** (`--brand--brand-N`): 100 `#182771` · 200 `#203492` · 300 `#657CFF` · 400 `#F5D2FC` · 500 `#FAE9FE`
- **Neutral Neutral** (`--neutral--neutral-N`): 100 `#F8F7F6` · 200 `#E4E2DF` · 300 `#E4E2DF` · 400 `#CDCBCA` · 500 `#ACABA9` · 600 `#6C6B6A`
- **Color Orange Orange** (`--color-orange--orange-N`): 50 `#FFFCEB` · 100 `#FFF7C6` · 200 `#FFEE88` · 300 `#FFDF4A` · 400 `#FFCD20` · 500 `#FAAD06` · 600 `#ED8D02` · 700 `#B75D06` · 800 `#58260E` · 900 `#461E02`
- **Color Violet Violet** (`--color-violet--violet-N`): 50 `#F2F5FB` · 100 `#DDE3FF` · 200 `#C2CBFF` · 300 `#9CA7FF` · 400 `#7578FF` · 500 `#635BFF` · 600 `#4E36F5` · 700 `#432AD8` · 800 `#3725AE` · 900 `#1E1650`
- **Color Red Red** (`--color-red--red-N`): 50 `#F9EBED` · 100 `#F4D7DB` · 200 `#E9AFB7` · 300 `#DE8794` · 400 `#D35F70` · 500 `#C8374C` · 600 `#A02C3D` · 700 `#78212E` · 800 `#50161E` · 900 `#280B0F`
- **Color Green Green** (`--color-green--green-N`): 50 `#EDF7F2` · 100 `#DCEFE4` · 200 `#B8E0CA` · 300 `#95D0AF` · 400 `#71C195` · 500 `#4EB17A` · 600 `#3E8E62` · 700 `#2F6A49` · 800 `#1F4731` · 900 `#102318`
- **Color Transparent Transparent** (`--color-transparent--transparent-N`): 50 `#FFFFFF` · 100 `#FFFFFF` · 500 `#FFFFFF` · 700 `#FFFFFF` · 900 `#FFFFFF`

### Other named colors

- `--neutral--neutral-white`: `#FFFFFF`
- `--neutral--neutral-dark`: `#222222`
- `--system--error`: `#F46B6B`
- `--system--success`: `#4CB06C`
- `--system--error-light`: `#FFE5E5`
- `--system--warning`: `#FFA25B`
- `--system--warning-light`: `#FFF2E9`
- `--system--success-light`: `#D5F4E7`
- `--color-transparent--translarent-300`: `#FFFFFF`

### Typefaces

- DmSans (`--main--main-font`)

### Type scale (most-used sizes)

`38px` · `2rem` · `32px` · `24px` · `1.25rem` · `18px` · `1rem` · `16px` · `14px` · `.875rem` · `.75rem` · `12px`

### Letter-spacing

`-.05em` (3) · `-.01em` (2) · `-.005em` (2) · `-.02em` (1) · `-.04em` (1)

### Corner radii (most-used)

`100%` · `8px` · `.5rem` · `3px` · `50%` · `4px` · `100px` · `.2rem` · `.75rem` · `2.5rem`

### Shadows

- `0 2px 12px #0000001a`
- `1px 1px #fff0`
- `inset 0 2px 20px #00000014`
- `0 0 0 1px #0000001a,0 1px 3px #0000001a`
- `0 0 3px #3336`
- `0 0 0 2px #fff`

### Gradients

- `linear-gradient(#31b5ff,#058be8)`
- `linear-gradient(#fcfcfc00,#fff0)`
- `linear-gradient(90deg,#31b5ff00,#31b5ff 53%,#fff)`
- `linear-gradient(90deg,#fff,#fff0)`
- `linear-gradient(90deg,#fff0,#fff)`
- `linear-gradient(#0000001a,#0006)`

### Breakpoints

479px · 767px · 768px · 991px · 992px