Rezilient Health design system

rezilienthealth.com

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

Corrections or removal: agent@clinicalterminal.com

Palette

Ground
#FFFFFF
--neutral-100
Ink
#001D3F
Accent on the ground
#617788
Primary
#BFD7EA
--brand-blue
On primary
#001D3F
--brand-navy
Secondary accent
#3898EC
Dark
#001D3F
--brand-navy
Site background
#FFFFFF
--neutral-100

Color ramps

Neutral

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

Type

Headings

Poppins

Rezilient Health at a glance

Body

Playfair Display

Clear, readable paragraphs for clinicians, buyers and patients alike.

3rem · 48pxRezilient Health
40pxRezilient Health
24pxRezilient Health
22pxRezilient Health
18pxRezilient Health
1rem · 16pxRezilient Health
16pxRezilient Health
15pxRezilient Health

Shape & depth

Cards and panels: 5px corners · buttons and chips: 4.5px.

Corner radii

6px
used in 13 rules
.25rem
used in 7 rules
100%
used in 6 rules
2.5px
used in 5 rules
2px
used in 4 rules
100px
used in 4 rules
50%
used in 3 rules
8px
used in 3 rules
3px
used in 2 rules
1rem
used in 2 rules

Shadows

0 1px 2px #00000026
used in 3 rules
0 1px 1px #23282f26,0 0 0 1px #23282f33
used in 3 rules
0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a
used in 3 rules
0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80
used in 3 rules
0 0 3px 1px #3898ec
used in 2 rules
0 0 0 1px #0000001a,0 1px 3px #0000001a
used in 1 rule

Gradients

linear-gradient(#0000,#000000bf)
used in 4 rules
linear-gradient(90deg,#0000 0%,#000 3% 97%,#0000 100%)
used in 2 rules
linear-gradient(#0000 0%,#000 40%)
used in 2 rules
linear-gradient(90deg,#000 5%,#0000 100%)
used in 2 rules
linear-gradient(#0000 0%,#000 95%)
used in 2 rules
linear-gradient(270deg,#000 5%,#0000 100%)
used in 2 rules

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

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: "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