[Design systems](/design-systems/) / Medable # Medable design system medable.com Read from Medable's public website by Clinical Terminal. Not reviewed by Medable. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Medable homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101525530.jpg?alt=media) ## Palette - Ground \#FFFFFF \--white - Ink \#1A0541 - Accent on the ground \#5F46CF - Primary \#5F46CF \--color-theme--purple-100 - On primary \#FFFFFF \--white - Secondary accent \#5F7887 \--color-theme--grey-200 - Dark \#1A0541 \--midnight-blue - Site background \#FFFFFF \--white ## Color ramps Color Theme Grey 15 \#F9FAFB 50 \#ECEFF1 100 \#D9E0E4 200 \#5F7887 Color Theme Purple 15 \#CACAFF 50 \#8F7DFF 100 \#5F46CF Color Theme Beige 15 \#FDFCFB 40 \#F9F8F5 100 \#F1EEE7 Grey 15 \#F9FAFB 50 \#ECEFF1 100 \#D9E0E4 200 \#5F7887 Beige 15 \#FDFCFB 40 \#F9F8F5 100 \#F1EEE7 ## Other named colors - \--midnight-blue #1A0541 - \--slate-blue #5F46CF - \--slate-grey #5F7887 - \--color-theme--primary #1A0541 - \--medium-purple #8F7DFF - \--white #FFFFFF - \--black #292929 - \--white-smoke #F9FAFB - \--gainsboro #D9E0E4 - \--floral-white #F1EEE7 - \--color-theme--white #FFFFFF - \--primary #1A0541 - \--purple #5F46CF - \--white-smoke-2 #ECEFF1 - \--white-smoke-3 #F9F8F5 - \--black-2 #000000 - \--white-2 #FDFCFB - \--slate-blue-2 #5F46CF - \--slate-blue-3 #5F46CF - \--midnight-blue-2 #1A0541 - \--slate-grey-2 #5F7887 ## Type Headings Archivo · closest free match for Sohne Medable at a glance Body Archivo · closest free match for Sohne Clear, readable paragraphs for clinicians, buyers and patients alike. - 3.5rem · 56pxMedable - 2.5rem · 40pxMedable - 2.25rem · 36pxMedable - 1.75rem · 28pxMedable - 1.5rem · 24pxMedable - 1.25rem · 20pxMedable - 1.125rem · 18pxMedable - 18pxMedable ## Shape & depth Cards and panels: 8px corners · buttons and chips: 8px. ### Corner radii - 2.5rem used in 17 rules - .25rem used in 12 rules - .5rem used in 8 rules - 50% used in 7 rules - 999rem used in 6 rules - 3px used in 5 rules - 1.5rem used in 5 rules - 4px used in 3 rules - 2rem used in 3 rules - 15px used in 3 rules ### Shadows - 0 8px 16px #00000017 used in 5 rules - 0 0 10px #0000001a used in 2 rules - 0 0 0 3px #00000040,0 0 10px #0000001a 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(#00000080,#00000080) used in 2 rules - linear-gradient(267deg,#b85df1 4.26%,#8f7dff 40%,#5271e0 77%) used in 1 rule - linear-gradient(98deg,#1a0541 9.82%,#8f7dff 80%,#b85df1) used in 1 rule Breakpoints: 479px · 480px · 500px · 767px · 768px · 896px · 991px · 1110px ## 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%2F101525530.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Medable" domain: "medable.com" colors: primary: "#5F46CF" onPrimary: "#FFFFFF" dark: "#1A0541" accent: "#5F7887" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#1A0541" accent: "#5F46CF" fonts: heading: "Archivo" body: "Archivo" radius: card: "8px" button: "8px" --- # Design System — Medable > Read from Medable's public website (medable.com) by Clinical Terminal. Not reviewed by Medable. > Use it as inspiration: borrow the ideas, not Medable's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Medable's site background #FFFFFF. Pages and panels sit on it. - Main text: #1A0541 (18.39:1 on the ground). - Secondary text is #1A0541 at 88% / 76% / 60%; hairlines and plate borders #1A0541 at 16%. ## Color - **Accent on the ground: #5F46CF** (6.43:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #5F46CF** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (6.43:1). - Secondary accent #5F7887: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Medable's site uses Sohne / Sohne; these are the closest free look-alikes. ## Shape - Cards and panels: 8px corners. Buttons and chips: 8px. ## Voice - Tone: professional. Energy: low. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Color Theme Grey** (`--color-theme--grey-N`): 15 `#F9FAFB` · 50 `#ECEFF1` · 100 `#D9E0E4` · 200 `#5F7887` - **Color Theme Purple** (`--color-theme--purple-N`): 15 `#CACAFF` · 50 `#8F7DFF` · 100 `#5F46CF` - **Color Theme Beige** (`--color-theme--beige-N`): 15 `#FDFCFB` · 40 `#F9F8F5` · 100 `#F1EEE7` - **Grey** (`--grey-N`): 15 `#F9FAFB` · 50 `#ECEFF1` · 100 `#D9E0E4` · 200 `#5F7887` - **Beige** (`--beige-N`): 15 `#FDFCFB` · 40 `#F9F8F5` · 100 `#F1EEE7` ### Other named colors - `--midnight-blue`: `#1A0541` - `--slate-blue`: `#5F46CF` - `--slate-grey`: `#5F7887` - `--color-theme--primary`: `#1A0541` - `--medium-purple`: `#8F7DFF` - `--white`: `#FFFFFF` - `--black`: `#292929` - `--white-smoke`: `#F9FAFB` - `--gainsboro`: `#D9E0E4` - `--floral-white`: `#F1EEE7` - `--color-theme--white`: `#FFFFFF` - `--primary`: `#1A0541` - `--purple`: `#5F46CF` - `--white-smoke-2`: `#ECEFF1` - `--white-smoke-3`: `#F9F8F5` - `--black-2`: `#000000` - `--white-2`: `#FDFCFB` - `--slate-blue-2`: `#5F46CF` - `--slate-blue-3`: `#5F46CF` - `--midnight-blue-2`: `#1A0541` - `--slate-grey-2`: `#5F7887` ### Typefaces - Roboto-mono - Sohne - Soehne Buch Kursiv - Montserrat — on Google Fonts - inherit !important ### Type scale (most-used sizes) `3.5rem` · `2.5rem` · `2.25rem` · `1.75rem` · `1.5rem` · `1.25rem` · `1.125rem` · `18px` · `1rem` · `14px` · `.8125rem` · `.75rem` ### Letter-spacing `.1em` (15) · `.01em` (10) · `-.005em` (10) · `.01rem` (1) · `.05rem` (1) · `0.01em` (1) ### Corner radii (most-used) `2.5rem` · `.25rem` · `.5rem` · `50%` · `999rem` · `3px` · `1.5rem` · `4px` · `2rem` · `15px` ### Shadows - `0 8px 16px #00000017` - `0 0 10px #0000001a` - `0 0 0 3px #00000040,0 0 10px #0000001a` - `0 0 0 1px #0000001a,0 1px 3px #0000001a` - `0 0 3px #3336` - `0 0 0 2px #fff` ### Gradients - `linear-gradient(#00000080,#00000080)` - `linear-gradient(267deg,#b85df1 4.26%,#8f7dff 40%,#5271e0 77%)` - `linear-gradient(98deg,#1a0541 9.82%,#8f7dff 80%,#b85df1)` ### Breakpoints 479px · 480px · 500px · 767px · 768px · 896px · 991px · 1110px ```