[Design systems](/design-systems/) / DeliverHealth # DeliverHealth design system ai.deliverhealth.com Read from DeliverHealth's public website by Clinical Terminal. Not reviewed by DeliverHealth. Copy it and paste it into Claude as inspiration. Corrections or removal: ![DeliverHealth homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100072.jpg?alt=media) ## Palette - Ground \#FFFFFF \--color-white - Ink \#002952 - Accent on the ground \#9F6B00 - Primary \#CC9600 \--color-dh-yellow - On primary \#002952 \--color-dh-navy - Dark \#002952 \--color-dh-navy - Site background \#FFFFFF \--color-white ## Other named colors - \--color-black #000000 - \--color-white #FFFFFF - \--color-dh-navy #002952 - \--color-dh-teal #00857E - \--color-dh-teal-light #00A8A0 - \--color-dh-orange #CC3300 - \--color-dh-orange-light #FF6E3D - \--color-dh-yellow #CC9600 - \--color-dh-yellow-decorative #FFC31F - \--color-dh-light-gray #D9D9D9 - \--color-dh-dark-gray #504E4E - \--color-dh-muted #757575 - \--color-ent-teal #00857E - \--color-ent-teal-dark #002952 - \--color-ent-teal-mid #00A8A0 - \--color-ent-teal-light #C2F0ED - \--color-ent-teal-xlight #EDF8F7 - \--color-ent-dark #002952 - \--color-ent-gray-bg #F6F7F8 - \--color-ent-gray-line #DCE0E5 - \--color-ent-gray-text #504E4E - \--color-ent-orange #CC3300 - \--background #FFFFFF - \--foreground #002952 - \--card #FFFFFF - \--card-foreground #002952 - \--popover #FFFFFF - \--popover-foreground #002952 - \--primary #002952 - \--primary-foreground #FAFAFA - \--secondary #D9D9D9 - \--secondary-foreground #002952 - \--muted #F5F5F5 - \--muted-foreground #504E4E - \--accent #00A8A0 - \--accent-foreground #FAFAFA - \--destructive #EF4444 - \--destructive-foreground #F8FAFC - \--border #E6E6E6 - \--input #E6E6E6 - \--ring #00A8A0 - \--sidebar #FAFAFA - \--sidebar-foreground #002952 - \--sidebar-primary #002952 - \--sidebar-primary-foreground #FAFAFA - \--sidebar-accent #F5F5F5 - \--sidebar-accent-foreground #002952 - \--sidebar-border #E6E6E6 ## Type Headings DM Sans DeliverHealth at a glance Body DM Sans Clear, readable paragraphs for clinicians, buyers and patients alike. - 1.75rem · 28pxDeliverHealth - 1.5rem · 24pxDeliverHealth - 1.25rem · 20pxDeliverHealth - 1.125rem · 18pxDeliverHealth - 1rem · 16pxDeliverHealth - .875rem · 14pxDeliverHealth - .8rem · 12.8pxDeliverHealth - 12pxDeliverHealth ## Shape & depth Cards and panels: 0px corners · buttons and chips: 6px. ### Corner radii - .3125rem used in 4 rules - .375rem used in 3 rules - .25rem used in 2 rules - 2.5rem used in 1 rule - 2px used in 1 rule - 2rem used in 1 rule - 3rem used in 1 rule - 10px used in 1 rule - 18px used in 1 rule - 2147483647px used in 1 rule ### Gradients - linear-gradient(135deg, #ffc31f, #00a8a0) used in 1 rule ## 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%2F100072.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "DeliverHealth" domain: "ai.deliverhealth.com" colors: primary: "#CC9600" onPrimary: "#002952" dark: "#002952" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#002952" accent: "#9F6B00" fonts: heading: "DM Sans" body: "DM Sans" radius: card: "0px" button: "6px" --- # Design System — DeliverHealth > Read from DeliverHealth's public website (ai.deliverhealth.com) by Clinical Terminal. Not reviewed by DeliverHealth. > Use it as inspiration: borrow the ideas, not DeliverHealth's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from DeliverHealth's site background #FFFFFF. Pages and panels sit on it. - Main text: #002952 (14.59:1 on the ground). - Secondary text is #002952 at 88% / 76% / 60%; hairlines and plate borders #002952 at 16%. ## Color - **Accent on the ground: #9F6B00** (4.59:1), adjusted from DeliverHealth's primary #CC9600 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #CC9600** for filled shapes (buttons, chips, bars), with #002952 text on it (5.51:1). - Quote every hex exactly as written above. ## Type - Headlines: **DM Sans**. Body: **DM Sans**. Both on Google Fonts. ## Shape - Cards and panels: 0px corners. Buttons and chips: 6px. ## Voice - Tone: professional. Energy: medium. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--color-black`: `#000000` - `--color-white`: `#FFFFFF` - `--color-dh-navy`: `#002952` - `--color-dh-teal`: `#00857E` - `--color-dh-teal-light`: `#00A8A0` - `--color-dh-orange`: `#CC3300` - `--color-dh-orange-light`: `#FF6E3D` - `--color-dh-yellow`: `#CC9600` - `--color-dh-yellow-decorative`: `#FFC31F` - `--color-dh-light-gray`: `#D9D9D9` - `--color-dh-dark-gray`: `#504E4E` - `--color-dh-muted`: `#757575` - `--color-ent-teal`: `#00857E` - `--color-ent-teal-dark`: `#002952` - `--color-ent-teal-mid`: `#00A8A0` - `--color-ent-teal-light`: `#C2F0ED` - `--color-ent-teal-xlight`: `#EDF8F7` - `--color-ent-dark`: `#002952` - `--color-ent-gray-bg`: `#F6F7F8` - `--color-ent-gray-line`: `#DCE0E5` - `--color-ent-gray-text`: `#504E4E` - `--color-ent-orange`: `#CC3300` - `--background`: `#FFFFFF` - `--foreground`: `#002952` - `--card`: `#FFFFFF` - `--card-foreground`: `#002952` - `--popover`: `#FFFFFF` - `--popover-foreground`: `#002952` - `--primary`: `#002952` - `--primary-foreground`: `#FAFAFA` - `--secondary`: `#D9D9D9` - `--secondary-foreground`: `#002952` - `--muted`: `#F5F5F5` - `--muted-foreground`: `#504E4E` - `--accent`: `#00A8A0` - `--accent-foreground`: `#FAFAFA` - `--destructive`: `#EF4444` - `--destructive-foreground`: `#F8FAFC` - `--border`: `#E6E6E6` - `--input`: `#E6E6E6` - `--ring`: `#00A8A0` - `--sidebar`: `#FAFAFA` - `--sidebar-foreground`: `#002952` - `--sidebar-primary`: `#002952` - `--sidebar-primary-foreground`: `#FAFAFA` - `--sidebar-accent`: `#F5F5F5` - `--sidebar-accent-foreground`: `#002952` - `--sidebar-border`: `#E6E6E6` - `--sidebar-ring`: `#00A8A0` ### Typefaces - DM Sans (`--font-dm-sans`) — on Google Fonts - Open Sans (`--font-open-sans`) — on Google Fonts ### Type scale (most-used sizes) `1.75rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `.875rem` · `.8rem` · `12px` · `.72rem` · `.7rem` · `11px` · `10px` ### Letter-spacing `.12em` (2) · `.14em` (2) · `.1em` (1) · `.16em` (1) · `.18em` (1) · `.03em` (1) ### Corner radii (most-used) `.3125rem` · `.375rem` · `.25rem` · `2.5rem` · `2px` · `2rem` · `3rem` · `10px` · `18px` · `2147483647px` ### Gradients - `linear-gradient(135deg, #ffc31f, #00a8a0)` ```