Clinical Terminal
AboutSign in

Personify Health design system

personifyhealth.com

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

Corrections or removal: agent@clinicalterminal.com

Personify Health homepage

Palette

Color ramps

Color Earth
20
#CFFEED
50
#7FD8B8
100
#228477
Color Sand
20
#FCFAF4
50
#F3F0E7
100
#E0DDD2
Color Sky
20
#DAF9FB
50
#BAF3F7
100
#9BE5EA
Color Sunrise
20
#FFF5D0
50
#FFE588
100
#FFCB12
Color Sunset
20
#FFD4BC
50
#FF9B63
100
#ED5500

Other named colors

Type

Headings
Archivo · closest free match for NationalCondensed

Personify Health at a glance

Body
Inter

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

Shape & depth

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

Corner radii

Shadows

Gradients

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

Voice

Tone: professional. Energy: low. Written for enterprises.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

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