[Design systems](/design-systems/) / Kairon Health # Kairon Health design system kaironhealth.com Read from Kairon Health's public website by Clinical Terminal. Not reviewed by Kairon Health. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Kairon Health homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F106653409.jpg?alt=media) ## Palette - Ground \#FAF7ED \--paper - Ink \#0C2D57 - Accent on the ground \#C74301 - Primary \#F97140 \--accent - On primary \#000000 - Dark \#0C2D57 \--navy - Site background \#FAF7ED \--paper ## Color ramps Cost 1 \#FBE6D6 2 \#F6B487 3 \#F5834B 4 \#D2551F 5 \#9A3411 ## Other named colors - \--paper #FAF7ED - \--card #FFFFFF - \--navy #0C2D57 - \--ink #0C2D57 - \--muted #667389 - \--faint #9BA3B1 - \--line #E7E1D2 - \--line-navy #0C2D57 - \--line-navy2 #0C2D57 - \--accent #F97140 - \--accent-tint #FDE6DA - \--accent-line #F6C6AD - \--good #2F8F5B - \--good-t #E4F1EA - \--warn #C98A2E - \--warn-t #FBF0DA - \--bad #CC4436 - \--bad-t #FAE6E3 - \--info #3E6DB5 - \--info-t #E7EEF8 - \--violet #7A5AA6 - \--violet-t #EFEAF6 - \--paper-2 #F2ECDC - \--card-2 #FBF9F2 - \--ink-2 #2B3F5B - \--line-2 #D8D0BC - \--accent-2 #CF521C ## Type Headings Oswald Kairon Health at a glance Body IBM Plex Sans Clear, readable paragraphs for clinicians, buyers and patients alike. - 72pxKairon Health - 55pxKairon Health - 40pxKairon Health - 32pxKairon Health - 24pxKairon Health - 22pxKairon Health - 20pxKairon Health - 18pxKairon Health ## Shape & depth Cards and panels: 8px corners · buttons and chips: 6px. ### Corner radii - 6px used in 6 rules - 8px used in 6 rules - 12px used in 3 rules - 10px used in 2 rules - 9999px used in 1 rule - 1.5px used in 1 rule - 4px used in 1 rule - 5px used in 1 rule - 7px used in 1 rule ### Shadows - 0 1px 2px #0c2d5724 used in 1 rule - inset 0 1px #ffffff38,0 8px 20px -10px #cf521cb3 used in 1 rule - 0 20px 25px #00000026 used in 1 rule - inset 3px 0 #f97140 used in 1 rule ### Gradients - linear-gradient(#0000,#000 15% 85%,#0000) used in 2 rules - radial-gradient(circle at 60% 100%,#00adf26b,#fff0 27%) used in 1 rule - linear-gradient(53deg,#092447 51%,#fff0) used in 1 rule - radial-gradient(circle closest-corner at 0 33%,#072652 49%,#134f7a61 93%) used in 1 rule - radial-gradient(circle at 50% 0,#00adf2,#fff0 24%) used in 1 rule - radial-gradient(circle at 100% 0,#18517d,#fff0) used in 1 rule ## Voice Tone: professional. Energy: high. 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%2F106653409.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Kairon Health" domain: "kaironhealth.com" colors: primary: "#F97140" onPrimary: "#000000" dark: "#0C2D57" background: "#FAF7ED" ground: mode: light hex: "#FAF7ED" ink: "#0C2D57" accent: "#C74301" fonts: heading: "Oswald" body: "IBM Plex Sans" radius: card: "8px" button: "6px" --- # Design System — Kairon Health > Read from Kairon Health's public website (kaironhealth.com) by Clinical Terminal. Not reviewed by Kairon Health. > Use it as inspiration: borrow the ideas, not Kairon Health's name, logo or identity. ## Ground - **Light ground** (#FAF7ED), from Kairon Health's site background #FAF7ED. Pages and panels sit on it. - Main text: #0C2D57 (12.82:1 on the ground). - Secondary text is #0C2D57 at 88% / 76% / 60%; hairlines and plate borders #0C2D57 at 16%. ## Color - **Accent on the ground: #C74301** (4.63:1), adjusted from Kairon Health's primary #F97140 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #F97140** for filled shapes (buttons, chips, bars), with #000000 text on it (7.46:1). - Quote every hex exactly as written above. ## Type - Headlines: **Oswald**. Body: **IBM Plex Sans**. Both on Google Fonts. ## Shape - Cards and panels: 8px corners. Buttons and chips: 6px. ## Voice - Tone: professional. Energy: high. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Cost** (`--cost-N`): 1 `#FBE6D6` · 2 `#F6B487` · 3 `#F5834B` · 4 `#D2551F` · 5 `#9A3411` ### Other named colors - `--paper`: `#FAF7ED` - `--card`: `#FFFFFF` - `--navy`: `#0C2D57` - `--ink`: `#0C2D57` - `--muted`: `#667389` - `--faint`: `#9BA3B1` - `--line`: `#E7E1D2` - `--line-navy`: `#0C2D57` - `--line-navy2`: `#0C2D57` - `--accent`: `#F97140` - `--accent-tint`: `#FDE6DA` - `--accent-line`: `#F6C6AD` - `--good`: `#2F8F5B` - `--good-t`: `#E4F1EA` - `--warn`: `#C98A2E` - `--warn-t`: `#FBF0DA` - `--bad`: `#CC4436` - `--bad-t`: `#FAE6E3` - `--info`: `#3E6DB5` - `--info-t`: `#E7EEF8` - `--violet`: `#7A5AA6` - `--violet-t`: `#EFEAF6` - `--paper-2`: `#F2ECDC` - `--card-2`: `#FBF9F2` - `--ink-2`: `#2B3F5B` - `--line-2`: `#D8D0BC` - `--accent-2`: `#CF521C` ### Typefaces - IBM Plex Serif (`--serif`) — on Google Fonts - IBM Plex Sans (`--sans`) — on Google Fonts - JetBrains Mono (`--mono`) — on Google Fonts - Oswald (`--display`) — on Google Fonts ### Type scale (most-used sizes) `72px` · `55px` · `40px` · `32px` · `24px` · `22px` · `20px` · `18px` · `17px` · `16px` · `14px` · `12px` ### Letter-spacing `-.01em` (3) · `-.03em` (3) · `.1em` (2) · `.025em` (1) · `.05em` (1) · `.14em` (1) ### Corner radii (most-used) `6px` · `8px` · `12px` · `10px` · `9999px` · `1.5px` · `4px` · `5px` · `7px` ### Shadows - `0 1px 2px #0c2d5724` - `inset 0 1px #ffffff38,0 8px 20px -10px #cf521cb3` - `0 20px 25px #00000026` - `inset 3px 0 #f97140` ### Gradients - `linear-gradient(#0000,#000 15% 85%,#0000)` - `radial-gradient(circle at 60% 100%,#00adf26b,#fff0 27%)` - `linear-gradient(53deg,#092447 51%,#fff0)` - `radial-gradient(circle closest-corner at 0 33%,#072652 49%,#134f7a61 93%)` - `radial-gradient(circle at 50% 0,#00adf2,#fff0 24%)` - `radial-gradient(circle at 100% 0,#18517d,#fff0)` ```