---
generator: clinical-terminal-brand-kit
company: "Personify Health"
domain: "personifyhealth.com"
colors:
  primary: "#003C44"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  accent: "#ED5500"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#003C44"
fonts:
  heading: "Archivo"
  body: "Inter"
radius:
  card: "16px"
  button: "23.5px"
---

# Design System — Personify Health

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

## Ground
- **Light ground** (#FFFFFF), from Personify 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: #003C44** (12.14:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #003C44** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (12.14:1).
- Secondary accent #ED5500: charts and a second data series only.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Color Earth** (`--color-earth-N`): 20 `#CFFEED` · 50 `#7FD8B8` · 100 `#228477`
- **Color Sand** (`--color-sand-N`): 20 `#FCFAF4` · 50 `#F3F0E7` · 100 `#E0DDD2`
- **Color Sky** (`--color-sky-N`): 20 `#DAF9FB` · 50 `#BAF3F7` · 100 `#9BE5EA`
- **Color Sunrise** (`--color-sunrise-N`): 20 `#FFF5D0` · 50 `#FFE588` · 100 `#FFCB12`
- **Color Sunset** (`--color-sunset-N`): 20 `#FFD4BC` · 50 `#FF9B63` · 100 `#ED5500`

### Other named colors

- `--color-white`: `#FFFFFF`
- `--color-black`: `#000000`
- `--color-sea`: `#003C44`
- `--color-charcoal`: `#2A2A2A`
- `--color-disabled`: `#B3B3B3`
- `--search-frame-color`: `#000000`
- `--color-ice-20`: `#CCCCCC`

### Typefaces

- Inter — on Google Fonts
- NationalCondensed
- NationalNarrow
- SF Pro Text

### Type scale (most-used sizes)

`6.4rem` · `4.2rem` · `3.4rem` · `2.6rem` · `2.4rem` · `2rem` · `1.8rem` · `1.6rem` · `1.4rem` · `16px` · `14px` · `12px`

### Letter-spacing

`-0.32px` (3) · `0.036rem` (2) · `-0.128rem` (2) · `0.02em` (1) · `-0.01em` (1) · `-0.005em` (1)

### Corner radii (most-used)

`3rem` · `1.6rem` · `2px` · `0.8rem` · `50%` · `0.2rem` · `2.4rem` · `2.35rem` · `0.4rem` · `5rem`

### Shadows

- `0 0 0 2px rgba(24,144,255,0.2)`
- `0 0 0 5px rgba(24,144,255,0.12)`
- `none !important`
- `0px 12px 32px 0px rgba(0, 0, 0, 0.1019607843)`
- `0px 0px 2px 1px lightgrey`
- `0 3px 6px -4px rgba(0,0,0,0.12),0 6px 16px 0 rgba(0,0,0,0.08),0 9px 28px 8px rgba(0,0,0,0.05)`

### Gradients

- `linear-gradient(135deg,#00d084,#0693e3)`
- `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)`
- `linear-gradient(135deg,#faaca8,#dad0ec)`
- `linear-gradient(135deg,#fafae1,#67a671)`
- `linear-gradient(135deg,#fdd79a,#004a59)`
- `linear-gradient(135deg,#330968,#31cdcf)`

### Breakpoints

375px · 500px · 560px · 600px · 768px · 1024px · 1200px · 1240px · 1440px · 1920px