[Design systems](/design-systems/) / Pivotal Health # Pivotal Health design system pivotalhealth.ai Read from Pivotal Health's public website by Clinical Terminal. Not reviewed by Pivotal Health. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Pivotal Health homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100069.jpg?alt=media) ## Palette - Ground \#FFFFFF \--white - Ink \#0F0E0E - Accent on the ground \#182952 - Primary \#182952 - On primary \#FFFFFF \--white - Secondary accent \#7045AF - Dark \#0F0E0E \--black - Site background \#FFFFFF \--white ## Other named colors - \--black #0F0E0E - \--white #FFFFFF - \--purple #754781 - \--red #CF5B28 - \--light-purple #B7A9AF - \--dark-blue #103246 - \--teal #51A297 - \--brown #6F5522 - \--mint #A6CFBD - \--light-blue #BED2DB - \--yellow #F4CF8A - \--tan #E8D5A8 - \--off-white #F8F4E9 - \--orange #FFBC7D ## Type Headings Archivo · closest free match for Host Grotesk Pivotal Health at a glance Body Archivo · closest free match for Host Grotesk Clear, readable paragraphs for clinicians, buyers and patients alike. - 2.5rem · 40pxPivotal Health - 38pxPivotal Health - 32pxPivotal Health - 24pxPivotal Health - 20pxPivotal Health - 18pxPivotal Health - 17pxPivotal Health - 16pxPivotal Health ## Shape & depth Cards and panels: 20px corners · buttons and chips: 10px. ### Corner radii - 10px used in 30 rules - 20px used in 19 rules - 50px used in 15 rules - 60px used in 13 rules - 30px used in 10 rules - 40px used in 7 rules - 25% used in 4 rules - 35px used in 4 rules - 50% used in 3 rules - 2px used in 3 rules ### Shadows - 0 2px 5px #0003 used in 27 rules - inset 0 0 0 1px transparent used in 26 rules - 0 0 1rem #00000026 used in 4 rules - 0 0 0 1px #0000001a, 0 1px 3px #0000001a used in 1 rule - 0 0 3px #3336 used in 1 rule - 0 0 0 2px #fff used in 1 rule ### Gradients - linear-gradient(90deg,rgba(16, 50, 70, 1) 0%, rgba(79, 125, 168, 1) 100%) used in 26 rules - linear-gradient(90deg,rgba(253, 245, 227, 1) 0%, rgba(254, 225, 191, 1) 100%) used in 26 rules - radial-gradient(#000 99%, transparent 100%) used in 13 rules - linear-gradient(90deg,rgba(253, 245, 227, 1) 0%, rgba(224, 233, 215, 1) 100%) used in 13 rules - linear-gradient(135deg, #fdf5e3, #fedab3) used in 4 rules - linear-gradient(135deg, #e5ddce 20%, #c7d8de 49%, #e5ddce 80%) used in 3 rules Breakpoints: 479px · 600px · 767px · 768px · 991px · 1440px ## Voice Tone: professional. Energy: low. 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%2F100069.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Pivotal Health" domain: "pivotalhealth.ai" colors: primary: "#182952" onPrimary: "#FFFFFF" dark: "#0F0E0E" accent: "#7045AF" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#0F0E0E" accent: "#182952" fonts: heading: "Archivo" body: "Archivo" radius: card: "20px" button: "10px" --- # Design System — Pivotal Health > Read from Pivotal Health's public website (pivotalhealth.ai) by Clinical Terminal. Not reviewed by Pivotal Health. > Use it as inspiration: borrow the ideas, not Pivotal Health's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Pivotal Health's site background #FFFFFF. Pages and panels sit on it. - Main text: #0F0E0E (19.28:1 on the ground). - Secondary text is #0F0E0E at 88% / 76% / 60%; hairlines and plate borders #0F0E0E at 16%. ## Color - **Accent on the ground: #182952** (14.21:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #182952** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (14.21:1). - Secondary accent #7045AF: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Pivotal Health's site uses Host Grotesk / Host Grotesk; these are the closest free look-alikes. ## Shape - Cards and panels: 20px corners. Buttons and chips: 10px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--black`: `#0F0E0E` - `--white`: `#FFFFFF` - `--purple`: `#754781` - `--red`: `#CF5B28` - `--light-purple`: `#B7A9AF` - `--dark-blue`: `#103246` - `--teal`: `#51A297` - `--brown`: `#6F5522` - `--mint`: `#A6CFBD` - `--light-blue`: `#BED2DB` - `--yellow`: `#F4CF8A` - `--tan`: `#E8D5A8` - `--off-white`: `#F8F4E9` - `--orange`: `#FFBC7D` ### Typefaces - Host Grotesk - Newsreader — on Google Fonts ### Type scale (most-used sizes) `2.5rem` · `38px` · `32px` · `24px` · `20px` · `18px` · `17px` · `16px` · `1rem` · `15px` · `14px` · `12px` ### Letter-spacing `1.3px` (8) · `1px` (1) · `2px` (1) · `-.01em` (1) · `-.04px` (1) · `-.02em` (1) ### Corner radii (most-used) `10px` · `20px` · `50px` · `60px` · `30px` · `40px` · `25%` · `35px` · `50%` · `2px` ### Shadows - `0 2px 5px #0003` - `inset 0 0 0 1px transparent` - `0 0 1rem #00000026` - `0 0 0 1px #0000001a, 0 1px 3px #0000001a` - `0 0 3px #3336` - `0 0 0 2px #fff` ### Gradients - `linear-gradient(90deg,rgba(16, 50, 70, 1) 0%, rgba(79, 125, 168, 1) 100%)` - `linear-gradient(90deg,rgba(253, 245, 227, 1) 0%, rgba(254, 225, 191, 1) 100%)` - `radial-gradient(#000 99%, transparent 100%)` - `linear-gradient(90deg,rgba(253, 245, 227, 1) 0%, rgba(224, 233, 215, 1) 100%)` - `linear-gradient(135deg, #fdf5e3, #fedab3)` - `linear-gradient(135deg, #e5ddce 20%, #c7d8de 49%, #e5ddce 80%)` ### Breakpoints 479px · 600px · 767px · 768px · 991px · 1440px ```