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: agent@clinicalterminal.com
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
- 300pxused in 2 rules
- 2pxused in 2 rules
- 24pxused in 1 rule
Shadows
- 0 0 #000used in 1 rule
- inset 0 0 0 2px #116dff, inset 0 0 0 4px #fff!importantused in 1 rule
- 0 0 1px 2px #fffused in 1 rule
- 0 0 0 2px #ffffff, 0 0 0 4px #116dffused in 1 rule
- inset 0 0 0 2px #ffffff, inset 0 0 0 4px #116dff !importantused 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.
--- 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%)`