[Design systems](/design-systems/) / Clinintell # Clinintell design system clinintell.com Read from Clinintell's public website by Clinical Terminal. Not reviewed by Clinintell. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Clinintell homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923681.jpg?alt=media) ## Palette - Ground \#FFFFFF \--neutral-100 - Ink \#203663 - Accent on the ground \#385EAB - Primary \#385EAB \--main - On primary \#FFFFFF \--neutral-100 - Secondary accent \#203663 \--neutral-800 - Dark \#203663 \--neutral-800 - Site background \#FFFFFF \--neutral-100 ## Color ramps Neutral 100 \#FFFFFF 200 \#F8FEFF 300 \#F3F5F8 400 \#D5D9E0 500 \#828B99 600 \#6F7F96 700 \#334D74 800 \#203663 Secondary 1 \#E7F2FF 2 \#FCF5DE 3 \#FFF6F7 4 \#F2FBF7 5 \#73B1FF 6 \#FFDC79 7 \#FF8DA0 8 \#73CFA8 9 \#8F73FF 10 \#E584F5 ## Other named colors - \--shadow-short-card #193765 - \--main #385EAB - \--text-gray #556575 - \--shadow-bg-interface #28282B - \--main-green #369EA8 - \--shadow-category-button #193765 - \--get-started-bkdg #EFF9FA - \--teal #46B9C3 - \--light-green-bkdg #F8FEFF - \--green-dark-1 #2F8991 - \--main-dark-4 #18294A - \--dark-3 #203663 - \--dark-4 #193765 - \--gray-700 #334155 - \--gray-50 #F8FAFC - \--main-green-dark-3 #1F5B61 - \--primary-light-2 #688ACE ## Type Headings Poppins Clinintell at a glance Body Inter · closest free match for Graphik Clear, readable paragraphs for clinicians, buyers and patients alike. - 48pxClinintell - 38pxClinintell - 32pxClinintell - 30pxClinintell - 24pxClinintell - 21pxClinintell - 20pxClinintell - 18pxClinintell ## Shape & depth Cards and panels: 16px corners · buttons and chips: 16px. ### Corner radii - 1000000px used in 33 rules - 10px used in 28 rules - 3px used in 23 rules - 16px used in 21 rules - 18px used in 19 rules - 20px used in 14 rules - 100px used in 10 rules - 9px used in 10 rules - 1000px used in 9 rules - 999999px used in 9 rules ### Shadows - 0 5px 16px #080f340f used in 10 rules - 0 4px 20px #1937650a used in 7 rules - 0 2px 7px #19376512 used in 3 rules - 0 0 #19376512 used in 3 rules - 1px 1px 3px #0000000d used in 3 rules - -3px 15px 15px -5px #28282b17 used in 3 rules ### Gradients - linear-gradient(#dfe9f3,#fff) used in 3 rules - linear-gradient(90deg,#f3f5f8,#0e0c1500) used in 3 rules - linear-gradient(#5c5cff 40%,#74cad2 50%,#40b6c1) used in 2 rules - linear-gradient(292deg,#46b9c3,#4972c4) used in 2 rules - linear-gradient(#0000 50%,#e0f3f5 50%) used in 1 rule - linear-gradient(#e2e8f0,#fff) used in 1 rule Breakpoints: 479px · 600px · 767px · 768px · 991px · 1000px · 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%2F100923681.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Clinintell" domain: "clinintell.com" colors: primary: "#385EAB" onPrimary: "#FFFFFF" dark: "#203663" accent: "#203663" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#203663" accent: "#385EAB" fonts: heading: "Poppins" body: "Inter" radius: card: "16px" button: "16px" --- # Design System — Clinintell > Read from Clinintell's public website (clinintell.com) by Clinical Terminal. Not reviewed by Clinintell. > Use it as inspiration: borrow the ideas, not Clinintell's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Clinintell's site background #FFFFFF. Pages and panels sit on it. - Main text: #203663 (11.87:1 on the ground). - Secondary text is #203663 at 88% / 76% / 60%; hairlines and plate borders #203663 at 16%. ## Color - **Accent on the ground: #385EAB** (6.26:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #385EAB** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (6.26:1). - Secondary accent #203663: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Poppins**. Body: **Inter**. Both on Google Fonts. - Clinintell's site uses Poppins / Graphik; these are the closest free look-alikes. ## Shape - Cards and panels: 16px corners. Buttons and chips: 16px. ## 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 `#F8FEFF` · 300 `#F3F5F8` · 400 `#D5D9E0` · 500 `#828B99` · 600 `#6F7F96` · 700 `#334D74` · 800 `#203663` - **Secondary** (`--secondary-N`): 1 `#E7F2FF` · 2 `#FCF5DE` · 3 `#FFF6F7` · 4 `#F2FBF7` · 5 `#73B1FF` · 6 `#FFDC79` · 7 `#FF8DA0` · 8 `#73CFA8` · 9 `#8F73FF` · 10 `#E584F5` ### Other named colors - `--shadow-short-card`: `#193765` - `--main`: `#385EAB` - `--text-gray`: `#556575` - `--shadow-bg-interface`: `#28282B` - `--main-green`: `#369EA8` - `--shadow-category-button`: `#193765` - `--get-started-bkdg`: `#EFF9FA` - `--teal`: `#46B9C3` - `--light-green-bkdg`: `#F8FEFF` - `--green-dark-1`: `#2F8991` - `--main-dark-4`: `#18294A` - `--dark-3`: `#203663` - `--dark-4`: `#193765` - `--gray-700`: `#334155` - `--gray-50`: `#F8FAFC` - `--main-green-dark-3`: `#1F5B61` - `--primary-light-2`: `#688ACE` ### Typefaces - Poppins — on Google Fonts - Graphik - Thicccboi - Lato — on Google Fonts - Palatino - Inter — on Google Fonts - Changa One ### Type scale (most-used sizes) `48px` · `38px` · `32px` · `30px` · `24px` · `21px` · `20px` · `18px` · `16px` · `15px` · `14px` · `12px` ### Letter-spacing `2px` (27) · `-.03em` (2) · `.5px` (2) · `.44px` (2) · `.02em` (1) · `.8px` (1) ### Corner radii (most-used) `1000000px` · `10px` · `3px` · `16px` · `18px` · `20px` · `100px` · `9px` · `1000px` · `999999px` ### Shadows - `0 5px 16px #080f340f` - `0 4px 20px #1937650a` - `0 2px 7px #19376512` - `0 0 #19376512` - `1px 1px 3px #0000000d` - `-3px 15px 15px -5px #28282b17` ### Gradients - `linear-gradient(#dfe9f3,#fff)` - `linear-gradient(90deg,#f3f5f8,#0e0c1500)` - `linear-gradient(#5c5cff 40%,#74cad2 50%,#40b6c1)` - `linear-gradient(292deg,#46b9c3,#4972c4)` - `linear-gradient(#0000 50%,#e0f3f5 50%)` - `linear-gradient(#e2e8f0,#fff)` ### Breakpoints 479px · 600px · 767px · 768px · 991px · 1000px · 1920px ```