[Design systems](/design-systems/) / Qualified Health # Qualified Health design system qualifiedhealthai.com Read from Qualified Health's public website by Clinical Terminal. Not reviewed by Qualified Health. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Qualified Health homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101135179.jpg?alt=media) ## Palette - Ground \#FFFFFF \--color-transparent--transparent-50 - Ink \#0A2540 - Accent on the ground \#007CC2 - Primary \#31B5FF \--color-blue--blue-400 - On primary \#000000 - Dark \#0A2540 \--color-blue--blue-900 - Site background \#FFFFFF \--color-transparent--transparent-50 ## Color ramps Color Blue Blue 50 \#F5FBFF 100 \#DFF0FF 200 \#B8E3FF 300 \#78CEFF 400 \#31B5FF 500 \#069CF1 600 \#058BE8 700 \#0062A7 800 \#0A3D63 900 \#0A2540 Color Gray Grey 50 \#F4F4F4 100 \#F4F4F4 200 \#C1CFD8 300 \#A3B5C2 400 \#819BAC 500 \#5E7484 600 \#4F6070 700 \#3F4D5C 800 \#2F3948 900 \#1F2634 Brand Brand 100 \#182771 200 \#203492 300 \#657CFF 400 \#F5D2FC 500 \#FAE9FE Neutral Neutral 100 \#F8F7F6 200 \#E4E2DF 300 \#E4E2DF 400 \#CDCBCA 500 \#ACABA9 600 \#6C6B6A Color Orange Orange 50 \#FFFCEB 100 \#FFF7C6 200 \#FFEE88 300 \#FFDF4A 400 \#FFCD20 500 \#FAAD06 600 \#ED8D02 700 \#B75D06 800 \#58260E 900 \#461E02 Color Violet Violet 50 \#F2F5FB 100 \#DDE3FF 200 \#C2CBFF 300 \#9CA7FF 400 \#7578FF 500 \#635BFF 600 \#4E36F5 700 \#432AD8 800 \#3725AE 900 \#1E1650 Color Red Red 50 \#F9EBED 100 \#F4D7DB 200 \#E9AFB7 300 \#DE8794 400 \#D35F70 500 \#C8374C 600 \#A02C3D 700 \#78212E 800 \#50161E 900 \#280B0F Color Green Green 50 \#EDF7F2 100 \#DCEFE4 200 \#B8E0CA 300 \#95D0AF 400 \#71C195 500 \#4EB17A 600 \#3E8E62 700 \#2F6A49 800 \#1F4731 900 \#102318 Color Transparent Transparent 50 \#FFFFFF 100 \#FFFFFF 500 \#FFFFFF 700 \#FFFFFF 900 \#FFFFFF ## Other named colors - \--neutral--neutral-white #FFFFFF - \--neutral--neutral-dark #222222 - \--system--error #F46B6B - \--system--success #4CB06C - \--system--error-light #FFE5E5 - \--system--warning #FFA25B - \--system--warning-light #FFF2E9 - \--system--success-light #D5F4E7 - \--color-transparent--translarent-300 #FFFFFF ## Type Headings Archivo · closest free match for DmSans Qualified Health at a glance Body Archivo · closest free match for DmSans Clear, readable paragraphs for clinicians, buyers and patients alike. - 38pxQualified Health - 2rem · 32pxQualified Health - 32pxQualified Health - 24pxQualified Health - 1.25rem · 20pxQualified Health - 18pxQualified Health - 1rem · 16pxQualified Health - 16pxQualified Health ## Shape & depth Cards and panels: 4px corners · buttons and chips: 4px. ### Corner radii - 100% used in 18 rules - 8px used in 7 rules - .5rem used in 7 rules - 3px used in 2 rules - 50% used in 2 rules - 4px used in 2 rules - 100px used in 2 rules - .2rem used in 2 rules - .75rem used in 2 rules - 2.5rem used in 1 rule ### Shadows - 0 2px 12px #0000001a used in 3 rules - 1px 1px #fff0 used in 2 rules - inset 0 2px 20px #00000014 used in 2 rules - 0 0 0 1px #0000001a,0 1px 3px #0000001a used in 1 rule - 0 0 3px #3336 used in 1 rule - 0 0 0 2px #fff used in 1 rule ### Gradients - linear-gradient(#31b5ff,#058be8) used in 2 rules - linear-gradient(#fcfcfc00,#fff0) used in 1 rule - linear-gradient(90deg,#31b5ff00,#31b5ff 53%,#fff) used in 1 rule - linear-gradient(90deg,#fff,#fff0) used in 1 rule - linear-gradient(90deg,#fff0,#fff) used in 1 rule - linear-gradient(#0000001a,#0006) used in 1 rule Breakpoints: 479px · 767px · 768px · 991px · 992px ## Voice Tone: professional. Energy: low. Written for enterprises. ## 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%2F101135179.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Qualified Health" domain: "qualifiedhealthai.com" colors: primary: "#31B5FF" onPrimary: "#000000" dark: "#0A2540" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#0A2540" accent: "#007CC2" fonts: heading: "Archivo" body: "Archivo" radius: card: "4px" button: "4px" --- # Design System — Qualified Health > Read from Qualified Health's public website (qualifiedhealthai.com) by Clinical Terminal. Not reviewed by Qualified Health. > Use it as inspiration: borrow the ideas, not Qualified Health's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Qualified Health's site background #FFFFFF. Pages and panels sit on it. - Main text: #0A2540 (15.54:1 on the ground). - Secondary text is #0A2540 at 88% / 76% / 60%; hairlines and plate borders #0A2540 at 16%. ## Color - **Accent on the ground: #007CC2** (4.5:1), adjusted from Qualified Health's primary #31B5FF so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #31B5FF** for filled shapes (buttons, chips, bars), with #000000 text on it (9.18:1). - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Qualified Health's site uses DmSans / DmSans; these are the closest free look-alikes. ## Shape - Cards and panels: 4px corners. Buttons and chips: 4px. ## Voice - Tone: professional. Energy: low. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Color Blue Blue** (`--color-blue--blue-N`): 50 `#F5FBFF` · 100 `#DFF0FF` · 200 `#B8E3FF` · 300 `#78CEFF` · 400 `#31B5FF` · 500 `#069CF1` · 600 `#058BE8` · 700 `#0062A7` · 800 `#0A3D63` · 900 `#0A2540` - **Color Gray Grey** (`--color-gray--grey-N`): 50 `#F4F4F4` · 100 `#F4F4F4` · 200 `#C1CFD8` · 300 `#A3B5C2` · 400 `#819BAC` · 500 `#5E7484` · 600 `#4F6070` · 700 `#3F4D5C` · 800 `#2F3948` · 900 `#1F2634` - **Brand Brand** (`--brand--brand-N`): 100 `#182771` · 200 `#203492` · 300 `#657CFF` · 400 `#F5D2FC` · 500 `#FAE9FE` - **Neutral Neutral** (`--neutral--neutral-N`): 100 `#F8F7F6` · 200 `#E4E2DF` · 300 `#E4E2DF` · 400 `#CDCBCA` · 500 `#ACABA9` · 600 `#6C6B6A` - **Color Orange Orange** (`--color-orange--orange-N`): 50 `#FFFCEB` · 100 `#FFF7C6` · 200 `#FFEE88` · 300 `#FFDF4A` · 400 `#FFCD20` · 500 `#FAAD06` · 600 `#ED8D02` · 700 `#B75D06` · 800 `#58260E` · 900 `#461E02` - **Color Violet Violet** (`--color-violet--violet-N`): 50 `#F2F5FB` · 100 `#DDE3FF` · 200 `#C2CBFF` · 300 `#9CA7FF` · 400 `#7578FF` · 500 `#635BFF` · 600 `#4E36F5` · 700 `#432AD8` · 800 `#3725AE` · 900 `#1E1650` - **Color Red Red** (`--color-red--red-N`): 50 `#F9EBED` · 100 `#F4D7DB` · 200 `#E9AFB7` · 300 `#DE8794` · 400 `#D35F70` · 500 `#C8374C` · 600 `#A02C3D` · 700 `#78212E` · 800 `#50161E` · 900 `#280B0F` - **Color Green Green** (`--color-green--green-N`): 50 `#EDF7F2` · 100 `#DCEFE4` · 200 `#B8E0CA` · 300 `#95D0AF` · 400 `#71C195` · 500 `#4EB17A` · 600 `#3E8E62` · 700 `#2F6A49` · 800 `#1F4731` · 900 `#102318` - **Color Transparent Transparent** (`--color-transparent--transparent-N`): 50 `#FFFFFF` · 100 `#FFFFFF` · 500 `#FFFFFF` · 700 `#FFFFFF` · 900 `#FFFFFF` ### Other named colors - `--neutral--neutral-white`: `#FFFFFF` - `--neutral--neutral-dark`: `#222222` - `--system--error`: `#F46B6B` - `--system--success`: `#4CB06C` - `--system--error-light`: `#FFE5E5` - `--system--warning`: `#FFA25B` - `--system--warning-light`: `#FFF2E9` - `--system--success-light`: `#D5F4E7` - `--color-transparent--translarent-300`: `#FFFFFF` ### Typefaces - DmSans (`--main--main-font`) ### Type scale (most-used sizes) `38px` · `2rem` · `32px` · `24px` · `1.25rem` · `18px` · `1rem` · `16px` · `14px` · `.875rem` · `.75rem` · `12px` ### Letter-spacing `-.05em` (3) · `-.01em` (2) · `-.005em` (2) · `-.02em` (1) · `-.04em` (1) ### Corner radii (most-used) `100%` · `8px` · `.5rem` · `3px` · `50%` · `4px` · `100px` · `.2rem` · `.75rem` · `2.5rem` ### Shadows - `0 2px 12px #0000001a` - `1px 1px #fff0` - `inset 0 2px 20px #00000014` - `0 0 0 1px #0000001a,0 1px 3px #0000001a` - `0 0 3px #3336` - `0 0 0 2px #fff` ### Gradients - `linear-gradient(#31b5ff,#058be8)` - `linear-gradient(#fcfcfc00,#fff0)` - `linear-gradient(90deg,#31b5ff00,#31b5ff 53%,#fff)` - `linear-gradient(90deg,#fff,#fff0)` - `linear-gradient(90deg,#fff0,#fff)` - `linear-gradient(#0000001a,#0006)` ### Breakpoints 479px · 767px · 768px · 991px · 992px ```