[Design systems](/design-systems/) / Health Catalyst # Health Catalyst design system healthcatalyst.com Read from Health Catalyst's public website by Clinical Terminal. Not reviewed by Health Catalyst. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Health Catalyst homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100784.jpg?alt=media) ## Palette - Ground \#FFFFFF \--white - Ink \#052533 - Accent on the ground \#005CB7 - Primary \#005CB7 \--blue-300 - On primary \#FFFFFF \--white - Dark \#052533 \--blue-500 - Site background \#FFFFFF \--white ## Color ramps Purple 100 \#DDD9FF 200 \#8661F7 300 \#5139A8 400 \#2F2968 500 \#222238 Blue 0 \#E7F5FF 100 \#D2F2FF 200 \#0BC0FF 300 \#005CB7 400 \#003D66 500 \#052533 Green 100 \#CDFCE1 200 \#AAF0CE 300 \#48C186 400 \#068252 500 \#04473A Orange 100 \#FFDBB3 200 \#FF8843 300 \#E84D2E 400 \#A5230E 500 \#601A12 ## Other named colors - \--white #FFFFFF - \--offblack #333333 - \--black #000000 - \--magenta #CC2F7E - \--teal #59EACE - \--yellow #FFF5CC - \--slate-gray-100 #F0F3F6 - \--gray-200 #E0E0E0 ## Type Headings Archivo Health Catalyst at a glance Body Arimo · closest free match for Arial Clear, readable paragraphs for clinicians, buyers and patients alike. - 3rem · 48pxHealth Catalyst - 2.5rem · 40pxHealth Catalyst - 2rem · 32pxHealth Catalyst - 1.5rem · 24pxHealth Catalyst - 20pxHealth Catalyst - 1.2rem · 19.2pxHealth Catalyst - 1.1rem · 17.6pxHealth Catalyst - 1rem · 16pxHealth Catalyst ## Shape & depth Cards and panels: 16px corners · buttons and chips: 24px. ### Corner radii - 18px used in 19 rules - 9999px used in 16 rules - 12px used in 11 rules - 50% used in 10 rules - 1.5rem used in 10 rules - 8px used in 10 rules - 14px used in 8 rules - 50px used in 7 rules - 5px used in 7 rules - 10px used in 6 rules ### Shadows - 0 0 0 3px #005cb799 used in 10 rules - 0 2px 5px #0003 used in 3 rules - 0 0 3px 1px #3898ec used in 2 rules - 0 0 0 2px #0aaef01f used in 2 rules - 0 25px 50px -12px #0000004d used in 2 rules - 0 18px 34px -10px #00000080 used in 2 rules ### Gradients - linear-gradient(#00000080, #00000080) used in 7 rules - linear-gradient(45deg, #e6f4fa, #e6f4fa 12px, #dfeef5 12px 24px) used in 6 rules - linear-gradient(#0000001a, #0000001a) used in 5 rules - linear-gradient(#0000, #0000) used in 3 rules - linear-gradient(145deg, #c8eaf8 0%, #6ab2e2 38%, #0b69bf 72%, #0759a8 100%) used in 3 rules - linear-gradient(45deg, #c6e8f6, #c6e8f6 14px, #bce1f1 14px 28px) used in 2 rules Breakpoints: 479px · 767px · 768px · 991px · 1280px ## Voice Tone: professional. Energy: medium. Written for patients and healthcare professionals. ## 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%2F100784.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Health Catalyst" domain: "healthcatalyst.com" colors: primary: "#005CB7" onPrimary: "#FFFFFF" dark: "#052533" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#052533" accent: "#005CB7" fonts: heading: "Archivo" body: "Arimo" radius: card: "16px" button: "24px" --- # Design System — Health Catalyst > Read from Health Catalyst's public website (healthcatalyst.com) by Clinical Terminal. Not reviewed by Health Catalyst. > Use it as inspiration: borrow the ideas, not Health Catalyst's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Health Catalyst's site background #FFFFFF. Pages and panels sit on it. - Main text: #052533 (15.92:1 on the ground). - Secondary text is #052533 at 88% / 76% / 60%; hairlines and plate borders #052533 at 16%. ## Color - **Accent on the ground: #005CB7** (6.53:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #005CB7** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (6.53:1). - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Arimo**. Both on Google Fonts. - Health Catalyst's site uses Archivo / Arial; these are the closest free look-alikes. ## Shape - Cards and panels: 16px corners. Buttons and chips: 24px. ## Voice - Tone: professional. Energy: medium. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Purple** (`--purple-N`): 100 `#DDD9FF` · 200 `#8661F7` · 300 `#5139A8` · 400 `#2F2968` · 500 `#222238` - **Blue** (`--blue-N`): 0 `#E7F5FF` · 100 `#D2F2FF` · 200 `#0BC0FF` · 300 `#005CB7` · 400 `#003D66` · 500 `#052533` - **Green** (`--green-N`): 100 `#CDFCE1` · 200 `#AAF0CE` · 300 `#48C186` · 400 `#068252` · 500 `#04473A` - **Orange** (`--orange-N`): 100 `#FFDBB3` · 200 `#FF8843` · 300 `#E84D2E` · 400 `#A5230E` · 500 `#601A12` ### Other named colors - `--white`: `#FFFFFF` - `--offblack`: `#333333` - `--black`: `#000000` - `--magenta`: `#CC2F7E` - `--teal`: `#59EACE` - `--yellow`: `#FFF5CC` - `--slate-gray-100`: `#F0F3F6` - `--gray-200`: `#E0E0E0` ### Typefaces - Archivo — on Google Fonts - Open Sans Embed ### Type scale (most-used sizes) `3rem` · `2.5rem` · `2rem` · `1.5rem` · `20px` · `1.2rem` · `1.1rem` · `1rem` · `16px` · `.9rem` · `14px` · `12px` ### Letter-spacing `.16em` (13) · `-.025em` (8) · `-.02em` (8) · `-.04em` (6) · `.14em` (5) · `.12em` (4) ### Corner radii (most-used) `18px` · `9999px` · `12px` · `50%` · `1.5rem` · `8px` · `14px` · `50px` · `5px` · `10px` ### Shadows - `0 0 0 3px #005cb799` - `0 2px 5px #0003` - `0 0 3px 1px #3898ec` - `0 0 0 2px #0aaef01f` - `0 25px 50px -12px #0000004d` - `0 18px 34px -10px #00000080` ### Gradients - `linear-gradient(#00000080, #00000080)` - `linear-gradient(45deg, #e6f4fa, #e6f4fa 12px, #dfeef5 12px 24px)` - `linear-gradient(#0000001a, #0000001a)` - `linear-gradient(#0000, #0000)` - `linear-gradient(145deg, #c8eaf8 0%, #6ab2e2 38%, #0b69bf 72%, #0759a8 100%)` - `linear-gradient(45deg, #c6e8f6, #c6e8f6 14px, #bce1f1 14px 28px)` ### Breakpoints 479px · 767px · 768px · 991px · 1280px ```