[Design systems](/design-systems/) / Personify Health # 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: ![Personify Health homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100007249.jpg?alt=media) ## Palette - Ground \#FFFFFF \--color-white - Ink \#000000 - Accent on the ground \#003C44 - Primary \#003C44 \--color-sea - On primary \#FFFFFF \--color-white - Secondary accent \#ED5500 \--color-sunset-100 - Dark \#000000 \--color-black - Site background \#FFFFFF \--color-white ## 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 - \--color-white #FFFFFF - \--color-black #000000 - \--color-sea #003C44 - \--color-charcoal #2A2A2A - \--color-disabled #B3B3B3 - \--search-frame-color #000000 - \--color-ice-20 #CCCCCC ## Type Headings Archivo · closest free match for NationalCondensed Personify Health at a glance Body Inter Clear, readable paragraphs for clinicians, buyers and patients alike. - 6.4rem · 102.4pxPersonify Health - 4.2rem · 67.2pxPersonify Health - 3.4rem · 54.4pxPersonify Health - 2.6rem · 41.6pxPersonify Health - 2.4rem · 38.4pxPersonify Health - 2rem · 32pxPersonify Health - 1.8rem · 28.8pxPersonify Health - 1.6rem · 25.6pxPersonify Health ## Shape & depth Cards and panels: 16px corners · buttons and chips: 23.5px. ### Corner radii - 3rem used in 37 rules - 1.6rem used in 14 rules - 2px used in 12 rules - 0.8rem used in 12 rules - 50% used in 5 rules - 0.2rem used in 3 rules - 2.4rem used in 2 rules - 2.35rem used in 2 rules - 0.4rem used in 2 rules - 5rem used in 2 rules ### Shadows - 0 0 0 2px rgba(24,144,255,0.2) used in 6 rules - 0 0 0 5px rgba(24,144,255,0.12) used in 4 rules - none !important used in 3 rules - 0px 12px 32px 0px rgba(0, 0, 0, 0.1019607843) used in 3 rules - 0px 0px 2px 1px lightgrey used in 2 rules - 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) used in 2 rules ### Gradients - linear-gradient(135deg,#00d084,#0693e3) used in 1 rule - linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe) used in 1 rule - linear-gradient(135deg,#faaca8,#dad0ec) used in 1 rule - linear-gradient(135deg,#fafae1,#67a671) used in 1 rule - linear-gradient(135deg,#fdd79a,#004a59) used in 1 rule - linear-gradient(135deg,#330968,#31cdcf) used in 1 rule 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100007249.md?alt=media). ``` --- 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 ```