[Design systems](/design-systems/) / Healthcare IT Leaders # Healthcare IT Leaders design system healthcareit.com Read from Healthcare IT Leaders's public website by Clinical Terminal. Not reviewed by Healthcare IT Leaders. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Healthcare IT Leaders logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F100923742.jpg?alt=media) ## Palette - Ground \#FFFFFF \--white - Ink \#475A70 - Accent on the ground \#1E6FCB - Primary \#1E6FCB \--blue-600 - On primary \#FFFFFF \--white - Secondary accent \#F2A24B \--accent-500 - Dark \#475A70 \--slate-600 - Site background \#FFFFFF \--white ## Color ramps Navy 600 \#1A4A78 700 \#123A60 800 \#0C2B4A 900 \#07203A Blue 50 \#F1F7FE 100 \#E3EEFB 500 \#2E86E0 600 \#1E6FCB 700 \#155BB0 Teal 50 \#E7F6F4 300 \#6FD0C5 500 \#14A697 600 \#0F8F84 Accent 100 \#FCECD8 500 \#F2A24B 600 \#D97F2A Slate 50 \#F6F8FB 100 \#EEF2F7 200 \#DFE6EE 300 \#C6D0DB 400 \#94A3B3 500 \#64748B 600 \#475A70 700 \#314256 ## Other named colors - \--ink #0F1F30 - \--white #FFFFFF ## Type Headings Archivo · closest free match for Schibsted Grotesk Healthcare IT Leaders at a glance Body Public Sans Clear, readable paragraphs for clinicians, buyers and patients alike. - 15.5pxHealthcare IT Leaders - 15pxHealthcare IT Leaders - 14pxHealthcare IT Leaders - 13.5pxHealthcare IT Leaders - 13pxHealthcare IT Leaders - 12.5pxHealthcare IT Leaders - 12pxHealthcare IT Leaders - 11.5pxHealthcare IT Leaders ## Shape & depth Cards and panels: 8px corners · buttons and chips: 11px. ### Corner radii - 50% used in 14 rules - 8px used in 10 rules - 999px used in 8 rules - 10px used in 5 rules - 2px used in 4 rules - 5px used in 4 rules - 12px used in 3 rules - 7px used in 3 rules - 3px used in 2 rules - 9px used in 2 rules ### Shadows - 0 0 12px #2e86e08c used in 1 rule - 0 0 0 6px #2e86e029,0 12px 26px -8px #2e86e0d9 used in 1 rule - 0 0 0 6px #f2a24b2e,0 12px 26px -8px #f2a24be6 used in 1 rule ### Gradients - radial-gradient(70% 70% at 70% 30%,#000,transparent 75%) used in 2 rules - radial-gradient(1100px 600px at 88% -10%,rgba(20,166,151,.16),transparent 60%) used in 1 rule - radial-gradient(900px 560px at 8% 8%,rgba(46,134,224,.18),transparent 55%) used in 1 rule - radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px) used in 1 rule Breakpoints: 480px · 520px · 560px · 620px · 640px · 720px · 740px · 760px · 860px · 900px · 920px · 980px ## Voice Tone: professional. Energy: high. Written for businesses. ## 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%2F100923742.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Healthcare IT Leaders" domain: "healthcareit.com" colors: primary: "#1E6FCB" onPrimary: "#FFFFFF" dark: "#475A70" accent: "#F2A24B" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#475A70" accent: "#1E6FCB" fonts: heading: "Archivo" body: "Public Sans" radius: card: "8px" button: "11px" --- # Design System — Healthcare IT Leaders > Read from Healthcare IT Leaders's public website (healthcareit.com) by Clinical Terminal. Not reviewed by Healthcare IT Leaders. > Use it as inspiration: borrow the ideas, not Healthcare IT Leaders's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Healthcare IT Leaders's site background #FFFFFF. Pages and panels sit on it. - Main text: #475A70 (7.08:1 on the ground). - Secondary text is #475A70 at 88% / 76% / 60%; hairlines and plate borders #475A70 at 16%. ## Color - **Accent on the ground: #1E6FCB** (5.01:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #1E6FCB** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.01:1). - Secondary accent #F2A24B: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Public Sans**. Both on Google Fonts. - Healthcare IT Leaders's site uses Schibsted Grotesk / Public Sans; these are the closest free look-alikes. ## Shape - Cards and panels: 8px corners. Buttons and chips: 11px. ## Voice - Tone: professional. Energy: high. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Navy** (`--navy-N`): 600 `#1A4A78` · 700 `#123A60` · 800 `#0C2B4A` · 900 `#07203A` - **Blue** (`--blue-N`): 50 `#F1F7FE` · 100 `#E3EEFB` · 500 `#2E86E0` · 600 `#1E6FCB` · 700 `#155BB0` - **Teal** (`--teal-N`): 50 `#E7F6F4` · 300 `#6FD0C5` · 500 `#14A697` · 600 `#0F8F84` - **Accent** (`--accent-N`): 100 `#FCECD8` · 500 `#F2A24B` · 600 `#D97F2A` - **Slate** (`--slate-N`): 50 `#F6F8FB` · 100 `#EEF2F7` · 200 `#DFE6EE` · 300 `#C6D0DB` · 400 `#94A3B3` · 500 `#64748B` · 600 `#475A70` · 700 `#314256` ### Other named colors - `--ink`: `#0F1F30` - `--white`: `#FFFFFF` ### Typefaces - Schibsted Grotesk (`--font-display`) - Public Sans (`--font-body`) — on Google Fonts - IBM Plex Mono (`--font-mono`) ### Type scale (most-used sizes) `15.5px` · `15px` · `14px` · `13.5px` · `13px` · `12.5px` · `12px` · `11.5px` · `11px` · `10.5px` · `10px` · `9.5px` ### Letter-spacing `.1em` (5) · `-.01em` (4) · `-.02em` (3) · `.08em` (3) · `.06em` (3) · `.12em` (2) ### Corner radii (most-used) `50%` · `8px` · `999px` · `10px` · `2px` · `5px` · `12px` · `7px` · `3px` · `9px` ### Shadows - `0 0 12px #2e86e08c` - `0 0 0 6px #2e86e029,0 12px 26px -8px #2e86e0d9` - `0 0 0 6px #f2a24b2e,0 12px 26px -8px #f2a24be6` ### Gradients - `radial-gradient(70% 70% at 70% 30%,#000,transparent 75%)` - `radial-gradient(1100px 600px at 88% -10%,rgba(20,166,151,.16),transparent 60%)` - `radial-gradient(900px 560px at 8% 8%,rgba(46,134,224,.18),transparent 55%)` - `radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px)` ### Breakpoints 480px · 520px · 560px · 620px · 640px · 720px · 740px · 760px · 860px · 900px · 920px · 980px · 1000px ```