[Design systems](/design-systems/) / Rezilient Health # Rezilient Health design system rezilienthealth.com Read from Rezilient Health's public website by Clinical Terminal. Not reviewed by Rezilient Health. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Rezilient Health homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101614096.jpg?alt=media) ## Palette - Ground \#FFFFFF \--neutral-100 - Ink \#001D3F - Accent on the ground \#617788 - Primary \#BFD7EA \--brand-blue - On primary \#001D3F \--brand-navy - Secondary accent \#3898EC - Dark \#001D3F \--brand-navy - Site background \#FFFFFF \--neutral-100 ## Color ramps Neutral 100 \#FFFFFF 200 \#EEEEEE 300 \#CCCCCC 400 \#AAAAAA 500 \#666666 600 \#565557 700 \#383D43 800 \#1E2124 900 \#000000 ## Other named colors - \--brand-pink #F45B66 - \--brand-navy #001D3F - \--brand-light-blue #F0F5FA - \--brand-light-pink #F7F0F1 - \--brand-blue #BFD7EA ## Type Headings Poppins Rezilient Health at a glance Body Playfair Display Clear, readable paragraphs for clinicians, buyers and patients alike. - 3rem · 48pxRezilient Health - 40pxRezilient Health - 24pxRezilient Health - 22pxRezilient Health - 18pxRezilient Health - 1rem · 16pxRezilient Health - 16pxRezilient Health - 15pxRezilient Health ## Shape & depth Cards and panels: 5px corners · buttons and chips: 4.5px. ### Corner radii - 6px used in 13 rules - .25rem used in 7 rules - 100% used in 6 rules - 2.5px used in 5 rules - 2px used in 4 rules - 100px used in 4 rules - 50% used in 3 rules - 8px used in 3 rules - 3px used in 2 rules - 1rem used in 2 rules ### Shadows - 0 1px 2px #00000026 used in 3 rules - 0 1px 1px #23282f26,0 0 0 1px #23282f33 used in 3 rules - 0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a used in 3 rules - 0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80 used in 3 rules - 0 0 3px 1px #3898ec used in 2 rules - 0 0 0 1px #0000001a,0 1px 3px #0000001a used in 1 rule ### Gradients - linear-gradient(#0000,#000000bf) used in 4 rules - linear-gradient(90deg,#0000 0%,#000 3% 97%,#0000 100%) used in 2 rules - linear-gradient(#0000 0%,#000 40%) used in 2 rules - linear-gradient(90deg,#000 5%,#0000 100%) used in 2 rules - linear-gradient(#0000 0%,#000 95%) used in 2 rules - linear-gradient(270deg,#000 5%,#0000 100%) used in 2 rules Breakpoints: 479px · 480px · 767px · 768px · 991px · 1024px · 1440px · 1920px ## Voice Tone: professional. Energy: low. 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%2F101614096.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Rezilient Health" domain: "rezilienthealth.com" colors: primary: "#BFD7EA" onPrimary: "#001D3F" dark: "#001D3F" accent: "#3898EC" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#001D3F" accent: "#617788" fonts: heading: "Poppins" body: "Playfair Display" radius: card: "5px" button: "4.5px" --- # Design System — Rezilient Health > Read from Rezilient Health's public website (rezilienthealth.com) by Clinical Terminal. Not reviewed by Rezilient Health. > Use it as inspiration: borrow the ideas, not Rezilient Health's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Rezilient Health's site background #FFFFFF. Pages and panels sit on it. - Main text: #001D3F (16.83:1 on the ground). - Secondary text is #001D3F at 88% / 76% / 60%; hairlines and plate borders #001D3F at 16%. ## Color - **Accent on the ground: #617788** (4.66:1), adjusted from Rezilient Health's primary #BFD7EA so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #BFD7EA** for filled shapes (buttons, chips, bars), with #001D3F text on it (11.32:1). - Secondary accent #3898EC: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Poppins**. Body: **Playfair Display**. Both on Google Fonts. ## Shape - Cards and panels: 5px corners. Buttons and chips: 4.5px. ## Voice - Tone: professional. Energy: low. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Neutral** (`--neutral-N`): 100 `#FFFFFF` · 200 `#EEEEEE` · 300 `#CCCCCC` · 400 `#AAAAAA` · 500 `#666666` · 600 `#565557` · 700 `#383D43` · 800 `#1E2124` · 900 `#000000` ### Other named colors - `--brand-pink`: `#F45B66` - `--brand-navy`: `#001D3F` - `--brand-light-blue`: `#F0F5FA` - `--brand-light-pink`: `#F7F0F1` - `--brand-blue`: `#BFD7EA` ### Typefaces - Poppins (`--font--primary-family`) — on Google Fonts - Playfair Display (`--font--secondary-family`) — on Google Fonts - Open Sans — on Google Fonts - Inter — on Google Fonts - undefined ### Type scale (most-used sizes) `3rem` · `40px` · `24px` · `22px` · `18px` · `1rem` · `16px` · `15px` · `14px` · `.875rem` · `13px` · `12px` ### Corner radii (most-used) `6px` · `.25rem` · `100%` · `2.5px` · `2px` · `100px` · `50%` · `8px` · `3px` · `1rem` ### Shadows - `0 1px 2px #00000026` - `0 1px 1px #23282f26,0 0 0 1px #23282f33` - `0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a` - `0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80` - `0 0 3px 1px #3898ec` - `0 0 0 1px #0000001a,0 1px 3px #0000001a` ### Gradients - `linear-gradient(#0000,#000000bf)` - `linear-gradient(90deg,#0000 0%,#000 3% 97%,#0000 100%)` - `linear-gradient(#0000 0%,#000 40%)` - `linear-gradient(90deg,#000 5%,#0000 100%)` - `linear-gradient(#0000 0%,#000 95%)` - `linear-gradient(270deg,#000 5%,#0000 100%)` ### Breakpoints 479px · 480px · 767px · 768px · 991px · 1024px · 1440px · 1920px ```