---
generator: clinical-terminal-brand-kit
company: "Rezilient Health"
domain: "rezilienthealth.com"
colors:
  primary: "#BFD7EA"
  onPrimary: "#001D3F"
  dark: "#001D3F"
  accent: "#3898EC"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#001D3F"
  accent: "#617788"
fonts:
  heading: "Poppins"
  body: "Playfair Display"
radius:
  card: "5px"
  button: "4.5px"
---

# Design System — Rezilient Health

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

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

## Color
- **Accent on the ground: #617788** (4.66:1), adjusted from Rezilient Health's primary #BFD7EA so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #BFD7EA** for filled shapes (buttons, chips, bars), with #001D3F text on it (11.32:1).
- Secondary accent #3898EC: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Poppins**. Body: **Playfair Display**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Neutral** (`--neutral-N`): 100 `#FFFFFF` · 200 `#EEEEEE` · 300 `#CCCCCC` · 400 `#AAAAAA` · 500 `#666666` · 600 `#565557` · 700 `#383D43` · 800 `#1E2124` · 900 `#000000`

### Other named colors

- `--brand-pink`: `#F45B66`
- `--brand-navy`: `#001D3F`
- `--brand-light-blue`: `#F0F5FA`
- `--brand-light-pink`: `#F7F0F1`
- `--brand-blue`: `#BFD7EA`

### Typefaces

- Poppins (`--font--primary-family`) — on Google Fonts
- Playfair Display (`--font--secondary-family`) — on Google Fonts
- Open Sans — on Google Fonts
- Inter — on Google Fonts
- undefined

### Type scale (most-used sizes)

`3rem` · `40px` · `24px` · `22px` · `18px` · `1rem` · `16px` · `15px` · `14px` · `.875rem` · `13px` · `12px`

### Corner radii (most-used)

`6px` · `.25rem` · `100%` · `2.5px` · `2px` · `100px` · `50%` · `8px` · `3px` · `1rem`

### Shadows

- `0 1px 2px #00000026`
- `0 1px 1px #23282f26,0 0 0 1px #23282f33`
- `0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a`
- `0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80`
- `0 0 3px 1px #3898ec`
- `0 0 0 1px #0000001a,0 1px 3px #0000001a`

### Gradients

- `linear-gradient(#0000,#000000bf)`
- `linear-gradient(90deg,#0000 0%,#000 3% 97%,#0000 100%)`
- `linear-gradient(#0000 0%,#000 40%)`
- `linear-gradient(90deg,#000 5%,#0000 100%)`
- `linear-gradient(#0000 0%,#000 95%)`
- `linear-gradient(270deg,#000 5%,#0000 100%)`

### Breakpoints

479px · 480px · 767px · 768px · 991px · 1024px · 1440px · 1920px