[Design systems](/design-systems/) / Karoo Health # Karoo Health design system karoohealth.com Read from Karoo Health's public website by Clinical Terminal. Not reviewed by Karoo Health. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Karoo Health homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F103599308.jpg?alt=media) ## Palette - Ground \#FFFFFF \--remainderBadgeColor - Ink \#2D3142 - Accent on the ground \#C05827 - Primary \#F08354 - On primary \#000000 \--stroke - Secondary accent \#4F5D75 - Dark \#2D3142 - Site background \#FFFFFF \--remainderBadgeColor ## Color ramps Wbu Color Blue 0 \#0F2CCF 100 \#2F5DFF 200 \#597DFF 300 \#ACBEFF 400 \#D5DFFF 500 \#EAEFFF 600 \#F5F7FF Wbu Color Black 0 \#151414 100 \#383838 200 \#525150 300 \#767574 400 \#A8A6A5 500 \#E0DFDF 600 \#F1F0EF Wbu Color Red 0 \#9C2426 100 \#DF3336 200 \#E55C5E 300 \#ED8F90 400 \#F4B8B9 500 \#F9D6D7 600 \#FCEBEB Wbu Color Green 0 \#0D4F3D 100 \#4B916D 200 \#97C693 300 \#BDE2A7 400 \#DAF3C0 500 \#EFFAE5 600 \#F1F5ED Wbu Color Yellow 0 \#D49341 100 \#F9AD4D 200 \#FABD71 300 \#FCD29D 400 \#FDEAD2 500 \#FEF3E5 600 \#FEF6ED Wbu Color Orange 0 \#AE3E09 100 \#FF8044 200 \#FE9361 300 \#FDA77F 400 \#FBCFBB 500 \#FBE3D9 600 \#FDF1EC Wbu Color Purple 0 \#5000AA 100 \#7200F3 200 \#8B2DF5 300 \#BE89F9 400 \#D7B7FB 500 \#F1E5FE 600 \#F8F2FF Wbu Color Ai 0 \#4D3DD0 100 \#5A48F5 200 \#7B6DF7 300 \#A59BFA 400 \#D6D1FC 500 \#E7E4FE 600 \#EEECFE ## Other named colors - \--remainderBadgeColor #FFFFFF - \--stroke #000000 - \--fill #EF8354 - \--divider-top-color #FFFFFF ## Type Headings Archivo · closest free match for wfont\_83b86e\_3a02ef83e25f4d49a9253021b709b4c6 Karoo Health at a glance Body Archivo · closest free match for wfont\_09f4ae\_afba33193b404fa59930fd072c47a29d Clear, readable paragraphs for clinicians, buyers and patients alike. - 32pxKaroo Health - 28pxKaroo Health - 24pxKaroo Health - 20pxKaroo Health - 18pxKaroo Health - 16pxKaroo Health - 14pxKaroo Health - 12pxKaroo Health ## Shape & depth Cards and panels: 0px corners · buttons and chips: 2px. ### Corner radii - 50% used in 5 rules - 300px used in 2 rules - 2px used in 2 rules - 24px used in 1 rule ### Shadows - 0 0 #000 used in 1 rule - inset 0 0 0 2px #116dff, inset 0 0 0 4px #fff!important used in 1 rule - 0 0 1px 2px #fff used in 1 rule - 0 0 0 2px #ffffff, 0 0 0 4px #116dff used in 1 rule - inset 0 0 0 2px #ffffff, inset 0 0 0 4px #116dff !important used in 1 rule - -5.66px 5.66px 15px 3px rgba(0, 0, 0, 0.05) used in 1 rule ### Gradients - radial-gradient(circle at 16.2646484375% 77.421875%, rgba(79,93,117,0.99) 0%, 34%, rgba(79,93,117,0) 50%) used in 2 rules - radial-gradient(circle at 15.4443359375% 23.0078125%, #4F5D75 0%, 48%, rgba(79,93,117,0) 80%) used in 2 rules - radial-gradient(circle at 93.6865234375% 11.42578125%, #4F5D75 0%, 42%, rgba(79,93,117,0) 70%) used in 2 rules - radial-gradient(circle at 48.9013671875% 49.521484375%, #FFFFFF 0%, 100%, rgba(255,255,255,0) 100%) used in 2 rules - radial-gradient(circle at 70.7958984375% 83.54817708333333%, #4F5D75 0%, 39.04%, rgba(79,93,117,0) 64%) used in 1 rule - radial-gradient(circle at 71.25% 87.5%, #4F5D75 0%, 39.04%, rgba(79,93,117,0) 64%) used in 1 rule ## 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%2F103599308.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Karoo Health" domain: "karoohealth.com" colors: primary: "#F08354" onPrimary: "#000000" dark: "#2D3142" accent: "#4F5D75" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#2D3142" accent: "#C05827" fonts: heading: "Archivo" body: "Archivo" radius: card: "0px" button: "2px" --- # Design System — Karoo Health > Read from Karoo Health's public website (karoohealth.com) by Clinical Terminal. Not reviewed by Karoo Health. > Use it as inspiration: borrow the ideas, not Karoo Health's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Karoo Health's site background #FFFFFF. Pages and panels sit on it. - Main text: #2D3142 (12.89:1 on the ground). - Secondary text is #2D3142 at 88% / 76% / 60%; hairlines and plate borders #2D3142 at 16%. ## Color - **Accent on the ground: #C05827** (4.5:1), adjusted from Karoo Health's primary #F08354 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #F08354** for filled shapes (buttons, chips, bars), with #000000 text on it (8.08:1). - Secondary accent #4F5D75: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Karoo Health's site uses wfont_83b86e_3a02ef83e25f4d49a9253021b709b4c6 / wfont_09f4ae_afba33193b404fa59930fd072c47a29d; these are the closest free look-alikes. ## Shape - Cards and panels: 0px corners. Buttons and chips: 2px. ## Voice - Tone: professional. Energy: low. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Wbu Color Blue** (`--wbu-color-blue-N`): 0 `#0F2CCF` · 100 `#2F5DFF` · 200 `#597DFF` · 300 `#ACBEFF` · 400 `#D5DFFF` · 500 `#EAEFFF` · 600 `#F5F7FF` - **Wbu Color Black** (`--wbu-color-black-N`): 0 `#151414` · 100 `#383838` · 200 `#525150` · 300 `#767574` · 400 `#A8A6A5` · 500 `#E0DFDF` · 600 `#F1F0EF` - **Wbu Color Red** (`--wbu-color-red-N`): 0 `#9C2426` · 100 `#DF3336` · 200 `#E55C5E` · 300 `#ED8F90` · 400 `#F4B8B9` · 500 `#F9D6D7` · 600 `#FCEBEB` - **Wbu Color Green** (`--wbu-color-green-N`): 0 `#0D4F3D` · 100 `#4B916D` · 200 `#97C693` · 300 `#BDE2A7` · 400 `#DAF3C0` · 500 `#EFFAE5` · 600 `#F1F5ED` - **Wbu Color Yellow** (`--wbu-color-yellow-N`): 0 `#D49341` · 100 `#F9AD4D` · 200 `#FABD71` · 300 `#FCD29D` · 400 `#FDEAD2` · 500 `#FEF3E5` · 600 `#FEF6ED` - **Wbu Color Orange** (`--wbu-color-orange-N`): 0 `#AE3E09` · 100 `#FF8044` · 200 `#FE9361` · 300 `#FDA77F` · 400 `#FBCFBB` · 500 `#FBE3D9` · 600 `#FDF1EC` - **Wbu Color Purple** (`--wbu-color-purple-N`): 0 `#5000AA` · 100 `#7200F3` · 200 `#8B2DF5` · 300 `#BE89F9` · 400 `#D7B7FB` · 500 `#F1E5FE` · 600 `#F8F2FF` - **Wbu Color Ai** (`--wbu-color-ai-N`): 0 `#4D3DD0` · 100 `#5A48F5` · 200 `#7B6DF7` · 300 `#A59BFA` · 400 `#D6D1FC` · 500 `#E7E4FE` · 600 `#EEECFE` ### Other named colors - `--remainderBadgeColor`: `#FFFFFF` - `--stroke`: `#000000` - `--fill`: `#EF8354` - `--divider-top-color`: `#FFFFFF` ### Typefaces - Madefor Display (`--wbu-heading-font-stack`) - normal normal normal 16px/1.4em din-next-w01-light (`--font_1`) - normal normal normal 24px/1.4em helvetica-w01-bold (`--font_5`) - normal normal normal 22px/1.4em helvetica-w01-bold (`--font_6`) - normal normal normal 12px/1.4em din-next-w01-light (`--font_10`) - normal normal normal 13px/1.4em futura-lt-w01-light (`--fntlbl`) - normal normal normal 16px/1.4em helvetica-w01-roman (`--fntprefix`) - din-next-w01-light (`--wix-font-Menu-family`) - helvetica-w01-bold (`--wix-font-Heading-M-family`) ### Type scale (most-used sizes) `32px` · `28px` · `24px` · `20px` · `18px` · `16px` · `14px` · `12px` · `10px` ### Letter-spacing `-0.5px` (3) · `0.05em` (3) · `0.1em` (2) ### Corner radii (most-used) `50%` · `300px` · `2px` · `24px` ### Shadows - `0 0 #000` - `inset 0 0 0 2px #116dff, inset 0 0 0 4px #fff!important` - `0 0 1px 2px #fff` - `0 0 0 2px #ffffff, 0 0 0 4px #116dff` - `inset 0 0 0 2px #ffffff, inset 0 0 0 4px #116dff !important` - `-5.66px 5.66px 15px 3px rgba(0, 0, 0, 0.05)` ### Gradients - `radial-gradient(circle at 16.2646484375% 77.421875%, rgba(79,93,117,0.99) 0%, 34%, rgba(79,93,117,0) 50%)` - `radial-gradient(circle at 15.4443359375% 23.0078125%, #4F5D75 0%, 48%, rgba(79,93,117,0) 80%)` - `radial-gradient(circle at 93.6865234375% 11.42578125%, #4F5D75 0%, 42%, rgba(79,93,117,0) 70%)` - `radial-gradient(circle at 48.9013671875% 49.521484375%, #FFFFFF 0%, 100%, rgba(255,255,255,0) 100%)` - `radial-gradient(circle at 70.7958984375% 83.54817708333333%, #4F5D75 0%, 39.04%, rgba(79,93,117,0) 64%)` - `radial-gradient(circle at 71.25% 87.5%, #4F5D75 0%, 39.04%, rgba(79,93,117,0) 64%)` ```