Vori Health design system

vorihealth.com

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

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FFFFFF
• Ink

  #333333
• Accent on the ground

  #016A63
• Primary

  #FFE187
• On primary

  #4B5261
• Highlight

  #016A63
• Dark

  #333333
• Site background

  #FFFFFF

Color ramps

Other named colors

• --vori-grey #48546B
• --vori-linen #FBF3EB
• --vori-yellow #EFDEA6
• --dark-slate-blue #2B3445
• --vori-red #FF7665
• --bright-green #00D1A0
• --primary--t-600 #026460
• --primary--n-700 #2B3445
• --blue--b-200 #EDF4FB
• --green--g-200 #E5F3DF
• --red--r-600 #D35C3B
• --secondary--r-400 #FF8968

Type

• 40pxVori Health
• 36pxVori Health
• 32pxVori Health
• 28pxVori Health
• 26pxVori Health
• 24pxVori Health
• 22pxVori Health
• 20pxVori Health

Shape & depth

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

Corner radii

• 16px

  used in 81 rules
• 59px

  used in 26 rules
• 8px

  used in 20 rules
• 999px

  used in 18 rules
• 4px

  used in 17 rules
• 40px

  used in 16 rules
• 20px

  used in 16 rules
• 10px

  used in 11 rules
• 50%

  used in 9 rules
• .5rem

  used in 8 rules

Shadows

• 3px 3px 10px #5c5c5c1f

  used in 5 rules
• 0 0 24px #0000001a

  used in 3 rules
• 0 0 3px 1px #3898ec

  used in 2 rules
• 1px 14px 25px #06193814

  used in 2 rules
• 0 14px 25px #06193814

  used in 2 rules
• 3px 14px 20px #06193833

  used in 2 rules

Gradients

• linear-gradient(130deg,#fff0,#fff 50%)

  used in 34 rules
• linear-gradient(159deg,#cce0df 11%,#fbfefe)

  used in 3 rules
• linear-gradient(135deg,#faf2ea,#ffe1d7)

  used in 2 rules
• linear-gradient(#cce0df,#fff)

  used in 2 rules
• linear-gradient(216deg,#cce0df,#fbfefe)

  used in 2 rules
• linear-gradient(90deg,#fff,#fff0 50%)

  used in 2 rules

Breakpoints: 479px · 767px · 768px · 991px · 992px

Voice

Tone: professional. Energy: low. 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: "Vori Health"
domain: "vorihealth.com"
colors:
  primary: "#FFE187"
  onPrimary: "#4B5261"
  dark: "#333333"
  highlight: "#016A63"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#333333"
  accent: "#016A63"
fonts:
  heading: "Nunito"
  body: "Arimo"
radius:
  card: "16px"
  button: "8px"
---

# Design System — Vori Health

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

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

## Color
- **Accent on the ground: #016A63** (6.48:1), adjusted from Vori Health's primary #FFE187 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #FFE187** for filled shapes (buttons, chips, bars), with #4B5261 text on it (6.11:1).
- Highlight #016A63 (from Vori Health's logo gradient): sparing emphasis, never body text.
- Quote every hex exactly as written above.

## Type
- Headlines: **Nunito**. Body: **Arimo**. Both on Google Fonts.
- Vori Health's site uses Nunito / Arial; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Teal T** (`--teal--t-N`): 100 `#F3F9F8` · 200 `#CCE0DF` · 500 `#278682` · 700 `#02423F`
- **Neutral N** (`--neutral--n-N`): 200 `#F9F9F9` · 300 `#EFF0F1` · 400 `#C1C6CC` · 500 `#6D778A` · 600 `#48546B`

### Other named colors

- `--vori-grey`: `#48546B`
- `--vori-linen`: `#FBF3EB`
- `--vori-yellow`: `#EFDEA6`
- `--dark-slate-blue`: `#2B3445`
- `--vori-red`: `#FF7665`
- `--bright-green`: `#00D1A0`
- `--primary--t-600`: `#026460`
- `--primary--n-700`: `#2B3445`
- `--blue--b-200`: `#EDF4FB`
- `--green--g-200`: `#E5F3DF`
- `--red--r-600`: `#D35C3B`
- `--secondary--r-400`: `#FF8968`

### Typefaces

- Proxima Nova
- Nunito — on Google Fonts
- Recoleta
- proxima-nova
- Source Serif 4 — on Google Fonts

### Type scale (most-used sizes)

`40px` · `36px` · `32px` · `28px` · `26px` · `24px` · `22px` · `20px` · `18px` · `16px` · `14px` · `12px`

### Letter-spacing

`2px` (35) · `1px` (13) · `.3px` (5) · `-.08px` (4) · `1.4px` (3) · `.2px` (3)

### Corner radii (most-used)

`16px` · `59px` · `8px` · `999px` · `4px` · `40px` · `20px` · `10px` · `50%` · `.5rem`

### Shadows

- `3px 3px 10px #5c5c5c1f`
- `0 0 24px #0000001a`
- `0 0 3px 1px #3898ec`
- `1px 14px 25px #06193814`
- `0 14px 25px #06193814`
- `3px 14px 20px #06193833`

### Gradients

- `linear-gradient(130deg,#fff0,#fff 50%)`
- `linear-gradient(159deg,#cce0df 11%,#fbfefe)`
- `linear-gradient(135deg,#faf2ea,#ffe1d7)`
- `linear-gradient(#cce0df,#fff)`
- `linear-gradient(216deg,#cce0df,#fbfefe)`
- `linear-gradient(90deg,#fff,#fff0 50%)`

### Breakpoints

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