[Design systems](/design-systems/) / InVita Healthcare Technologies # InVita Healthcare Technologies design system invitahealth.com Read from InVita Healthcare Technologies's public website by Clinical Terminal. Not reviewed by InVita Healthcare Technologies. Copy it and paste it into Claude as inspiration. Corrections or removal: ![InVita Healthcare Technologies homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100365559.jpg?alt=media) ## Palette - Ground \#FFFFFF \--theme-palette-color-6 - Ink \#3F444B - Accent on the ground \#1D3358 - Primary \#1D3358 - On primary \#FFFFFF \--theme-palette-color-6 - Secondary accent \#8DC8E8 \--theme-palette-color-1 - Dark \#3F444B - Site background \#FFFFFF \--theme-palette-color-6 ## Color ramps Theme Palette Color 1 \#8DC8E8 2 \#1F2A44 3 \#9D2235 4 \#EDEDED 5 \#000000 6 \#FFFFFF 7 \#FEFEFF 8 \#FFFEFE ## Other named colors - \--theme-button-text-hover-color #FFFFFF - \--theme-selection-text-color #FFFFFF - \--toggle-button-border-color #000000 - \--toggle-button-background #000000 ## Type Headings Montserrat InVita Healthcare Technologies at a glance Body Montserrat Clear, readable paragraphs for clinicians, buyers and patients alike. - 40pxInVita Healthcare Technologies - 35pxInVita Healthcare Technologies - 30pxInVita Healthcare Technologies - 25pxInVita Healthcare Technologies - 20pxInVita Healthcare Technologies - 18pxInVita Healthcare Technologies - 16pxInVita Healthcare Technologies - 15pxInVita Healthcare Technologies ## Shape & depth Cards and panels: 3px corners · buttons and chips: 3px. ### Corner radii - 100% used in 10 rules - 3px used in 9 rules - 2px used in 3 rules - 6px used in 1 rule - 4px used in 1 rule - 8px used in 1 rule ### Shadows - 0px 12px 18px -6px rgba(34, 56, 101, 0.04) used in 5 rules - 0 0 1px 3px #0C4DA2 used in 3 rules - inset 0 0 0 1px currentColor used in 2 rules - 0px 10px 20px 10px rgba(0, 0, 0, 0.35) used in 1 rule - 0px 10px 25px 20px rgba(0, 0, 0, 0.2) used in 1 rule - 0 0 10px 0 rgba(0,0,0,.5) used in 1 rule ### Gradients - linear-gradient(to bottom,transparent,#000) used in 2 rules - linear-gradient(0deg,rgb(222,222,222) 70%,rgb(167,167,167) 100%) used in 1 rule - linear-gradient(45deg,#fff 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%) used in 1 rule - linear-gradient(currentColor, currentColor) used in 1 rule - linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%) used in 1 rule - linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%) used in 1 rule Breakpoints: 600px · 601px · 690px · 767px · 768px · 783px · 1000px · 1225px ## 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%2F100365559.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "InVita Healthcare Technologies" domain: "invitahealth.com" colors: primary: "#1D3358" onPrimary: "#FFFFFF" dark: "#3F444B" accent: "#8DC8E8" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#3F444B" accent: "#1D3358" fonts: heading: "Montserrat" body: "Montserrat" radius: card: "3px" button: "3px" --- # Design System — InVita Healthcare Technologies > Read from InVita Healthcare Technologies's public website (invitahealth.com) by Clinical Terminal. Not reviewed by InVita Healthcare Technologies. > Use it as inspiration: borrow the ideas, not InVita Healthcare Technologies's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from InVita Healthcare Technologies's site background #FFFFFF. Pages and panels sit on it. - Main text: #3F444B (9.81:1 on the ground). - Secondary text is #3F444B at 88% / 76% / 60%; hairlines and plate borders #3F444B at 16%. ## Color - **Accent on the ground: #1D3358** (12.6:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #1D3358** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (12.6:1). - Secondary accent #8DC8E8: 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: 3px corners. Buttons and chips: 3px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Theme Palette Color** (`--theme-palette-color-N`): 1 `#8DC8E8` · 2 `#1F2A44` · 3 `#9D2235` · 4 `#EDEDED` · 5 `#000000` · 6 `#FFFFFF` · 7 `#FEFEFF` · 8 `#FFFEFE` ### Other named colors - `--theme-button-text-hover-color`: `#FFFFFF` - `--theme-selection-text-color`: `#FFFFFF` - `--toggle-button-border-color`: `#000000` - `--toggle-button-background`: `#000000` ### Typefaces - Montserrat — on Google Fonts - star - Comfortaa - ' ### Type scale (most-used sizes) `40px` · `35px` · `30px` · `25px` · `20px` · `18px` · `16px` · `15px` · `14px` · `.875rem` · `13px` · `12px` ### Letter-spacing `.4em` (1) ### Corner radii (most-used) `100%` · `3px` · `2px` · `6px` · `4px` · `8px` ### Shadows - `0px 12px 18px -6px rgba(34, 56, 101, 0.04)` - `0 0 1px 3px #0C4DA2` - `inset 0 0 0 1px currentColor` - `0px 10px 20px 10px rgba(0, 0, 0, 0.35)` - `0px 10px 25px 20px rgba(0, 0, 0, 0.2)` - `0 0 10px 0 rgba(0,0,0,.5)` ### Gradients - `linear-gradient(to bottom,transparent,#000)` - `linear-gradient(0deg,rgb(222,222,222) 70%,rgb(167,167,167) 100%)` - `linear-gradient(45deg,#fff 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%)` - `linear-gradient(currentColor, currentColor)` - `linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)` - `linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)` ### Breakpoints 600px · 601px · 690px · 767px · 768px · 783px · 1000px · 1225px ```