[Design systems](/design-systems/) / Plutus Health Inc. # Plutus Health Inc. design system plutushealthinc.com Read from Plutus Health Inc.'s public website by Clinical Terminal. Not reviewed by Plutus Health Inc.. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Plutus Health Inc. homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100120.jpg?alt=media) ## Palette - Ground \#FFFFFF \--white - Ink \#0A0A0A - Accent on the ground \#196EB6 - Primary \#196EB6 - On primary \#FFFFFF \--white - Secondary accent \#3375E7 - Dark \#0A0A0A \--authority-black - Site background \#FFFFFF \--white ## Other named colors - \--authority-black #0A0A0A - \--executive-burgundy #9C1B2E - \--white #FFFFFF - \--gold #B8924A - \--soft-cream #FAFAF7 - \--diagnostic-beige #EFECE3 - \--ar-ledger-gray #363636 - \--green-ink #0C1512 - \--diagnostic-gold #F1ECE0 - \--executive-navy #091D3F - \--therapy-cloud #FAFAF7 - \--executive-emerald #0F7A55 - \--green-bright-emerald #5BC79A - \--mutedgreen #5C6A62 - \--diagnostic-beige-light #F6F4EF - \--muted-ink #9DB0A6 - \--cream #FBFAF6 - \--deep-cream #E0D2B1 - \--green-ink-2 #13211B ## Type Headings Montserrat Plutus Health Inc. at a glance Body Montserrat Clear, readable paragraphs for clinicians, buyers and patients alike. - 40pxPlutus Health Inc. - 30pxPlutus Health Inc. - 28pxPlutus Health Inc. - 22pxPlutus Health Inc. - 20pxPlutus Health Inc. - 18pxPlutus Health Inc. - 17pxPlutus Health Inc. - 16pxPlutus Health Inc. ## Shape & depth Cards and panels: 10px corners · buttons and chips: 0px. ### Corner radii - 10px used in 84 rules - 5px used in 33 rules - 100px used in 21 rules - 50% used in 19 rules - 20px used in 12 rules - 25px used in 10 rules - .25rem used in 9 rules - .5rem used in 7 rules - 3px used in 6 rules - 100% used in 6 rules ### Shadows - 0 2px 5px #0003 used in 15 rules - 0 10px 30px #0000001a used in 3 rules - 0 0 3px 1px #3898ec used in 2 rules - 0 1px 2px #0000000a used in 2 rules - 0 16px 40px #0000001f used in 2 rules - 0 2px 8px #0003 used in 2 rules ### Gradients - linear-gradient(#00000080,#00000080) used in 7 rules - linear-gradient(#3375e7d1,#3375e7d1) used in 4 rules - linear-gradient(#ffffffdb,#ffffffdb) used in 2 rules - radial-gradient(circle farthest-side,#e7e7e7b0,#f3f3f3f0 46%,#f3f3f3ed 63%) used in 2 rules - radial-gradient(circle farthest-side at 50% 40%,#e7e7e7ed,#f3f3f3fa 46%,#f3f3f3 63%) used in 2 rules - linear-gradient(#ffffff80,#ffffff80) used in 1 rule Breakpoints: 400px · 475px · 479px · 480px · 767px · 768px · 991px · 1024px · 1280px · 1440px · 1920px ## 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%2F100120.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Plutus Health Inc." domain: "plutushealthinc.com" colors: primary: "#196EB6" onPrimary: "#FFFFFF" dark: "#0A0A0A" accent: "#3375E7" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#0A0A0A" accent: "#196EB6" fonts: heading: "Montserrat" body: "Montserrat" radius: card: "10px" button: "0px" --- # Design System — Plutus Health Inc. > Read from Plutus Health Inc.'s public website (plutushealthinc.com) by Clinical Terminal. Not reviewed by Plutus Health Inc.. > Use it as inspiration: borrow the ideas, not Plutus Health Inc.'s name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Plutus Health Inc.'s site background #FFFFFF. Pages and panels sit on it. - Main text: #0A0A0A (19.8:1 on the ground). - Secondary text is #0A0A0A at 88% / 76% / 60%; hairlines and plate borders #0A0A0A at 16%. ## Color - **Accent on the ground: #196EB6** (5.32:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #196EB6** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.32:1). - Secondary accent #3375E7: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Montserrat**. Body: **Montserrat**. Both on Google Fonts. ## Shape - Cards and panels: 10px corners. Buttons and chips: 0px. ## Voice - Tone: professional. Energy: high. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--authority-black`: `#0A0A0A` - `--executive-burgundy`: `#9C1B2E` - `--white`: `#FFFFFF` - `--gold`: `#B8924A` - `--soft-cream`: `#FAFAF7` - `--diagnostic-beige`: `#EFECE3` - `--ar-ledger-gray`: `#363636` - `--green-ink`: `#0C1512` - `--diagnostic-gold`: `#F1ECE0` - `--executive-navy`: `#091D3F` - `--therapy-cloud`: `#FAFAF7` - `--executive-emerald`: `#0F7A55` - `--green-bright-emerald`: `#5BC79A` - `--mutedgreen`: `#5C6A62` - `--diagnostic-beige-light`: `#F6F4EF` - `--muted-ink`: `#9DB0A6` - `--cream`: `#FBFAF6` - `--deep-cream`: `#E0D2B1` - `--green-ink-2`: `#13211B` ### Typefaces - Lato (`--lato-body`) — on Google Fonts - Montserrat (`--montserrat-headings`) — on Google Fonts - JetBrains Mono — on Google Fonts - Inter Tight — on Google Fonts - InterTight ### Type scale (most-used sizes) `40px` · `30px` · `28px` · `22px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `12px` · `11px` ### Letter-spacing `.04em` (3) · `.18em` (1) · `-.04em` (1) · `-.02em` (1) · `.12em` (1) · `.15em` (1) ### Corner radii (most-used) `10px` · `5px` · `100px` · `50%` · `20px` · `25px` · `.25rem` · `.5rem` · `3px` · `100%` ### Shadows - `0 2px 5px #0003` - `0 10px 30px #0000001a` - `0 0 3px 1px #3898ec` - `0 1px 2px #0000000a` - `0 16px 40px #0000001f` - `0 2px 8px #0003` ### Gradients - `linear-gradient(#00000080,#00000080)` - `linear-gradient(#3375e7d1,#3375e7d1)` - `linear-gradient(#ffffffdb,#ffffffdb)` - `radial-gradient(circle farthest-side,#e7e7e7b0,#f3f3f3f0 46%,#f3f3f3ed 63%)` - `radial-gradient(circle farthest-side at 50% 40%,#e7e7e7ed,#f3f3f3fa 46%,#f3f3f3 63%)` - `linear-gradient(#ffffff80,#ffffff80)` ### Breakpoints 400px · 475px · 479px · 480px · 767px · 768px · 991px · 1024px · 1280px · 1440px · 1920px ```