[Design systems](/design-systems/) / Medibillmd # Medibillmd design system medibillmd.com Read from Medibillmd's public website by Clinical Terminal. Not reviewed by Medibillmd. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Medibillmd logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F100923787.jpg?alt=media) ## Palette - Ground \#FFFFFF \--white - Ink \#3B475D - Accent on the ground \#0F75A8 - Primary \#0F75A8 - On primary \#FFFFFF \--white - Secondary accent \#E12454 - Dark \#3B475D - Site background \#FFFFFF \--white ## Other named colors - \--blue #007BFF - \--indigo #6610F2 - \--purple #6F42C1 - \--pink #E83E8C - \--red #DC3545 - \--orange #FD7E14 - \--yellow #FFC107 - \--green #28A745 - \--teal #20C997 - \--cyan #17A2B8 - \--white #FFFFFF - \--gray #6C757D - \--gray-dark #343A40 - \--primary #007BFF - \--secondary #6C757D - \--success #28A745 - \--info #17A2B8 - \--warning #FFC107 - \--danger #DC3545 - \--light #F8F9FA - \--dark #343A40 ## Type Headings Poppins Medibillmd at a glance Body Poppins Clear, readable paragraphs for clinicians, buyers and patients alike. - 40pxMedibillmd - 30pxMedibillmd - 24pxMedibillmd - 22pxMedibillmd - 20pxMedibillmd - 1.25rem · 20pxMedibillmd - 18pxMedibillmd - 16pxMedibillmd ## Shape & depth Cards and panels: 5px corners · buttons and chips: 50px. ### Corner radii - 50% used in 47 rules - .25rem used in 21 rules - 40px used in 14 rules - 10px used in 9 rules - 50px used in 9 rules - 1rem used in 7 rules - 25px used in 7 rules - .3rem used in 6 rules - 30px used in 6 rules - 5px used in 5 rules ### Shadows - 0 4px 8px 0 #655C804D used in 8 rules - 0 0 0 .2rem rgba(0,123,255,.25) used in 4 rules - 0 0 0 .2rem rgba(0,123,255,.5) used in 4 rules - 0 0 0 .2rem rgba(108,117,125,.5) used in 4 rules - 0 0 0 .2rem rgba(40,167,69,.5) used in 4 rules - 0 0 0 .2rem rgba(23,162,184,.5) used in 4 rules ### Gradients - linear-gradient(to right,#ffffff14 1px,transparent 1px) used in 3 rules - linear-gradient(to bottom,#ffffff14 1px,transparent 1px) used in 3 rules - linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent) used in 1 rule - linear-gradient(to right,#18a2b8,#32c3a1) used in 1 rule Breakpoints: 300px · 480px · 576px · 700px · 767px · 768px · 769px · 981px · 991px · 992px · 1000px · 1200px ## Voice Tone: professional. Energy: medium. 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%2F100923787.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Medibillmd" domain: "medibillmd.com" colors: primary: "#0F75A8" onPrimary: "#FFFFFF" dark: "#3B475D" accent: "#E12454" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#3B475D" accent: "#0F75A8" fonts: heading: "Poppins" body: "Poppins" radius: card: "5px" button: "50px" --- # Design System — Medibillmd > Read from Medibillmd's public website (medibillmd.com) by Clinical Terminal. Not reviewed by Medibillmd. > Use it as inspiration: borrow the ideas, not Medibillmd's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Medibillmd's site background #FFFFFF. Pages and panels sit on it. - Main text: #3B475D (9.35:1 on the ground). - Secondary text is #3B475D at 88% / 76% / 60%; hairlines and plate borders #3B475D at 16%. ## Color - **Accent on the ground: #0F75A8** (5.08:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #0F75A8** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.08:1). - Secondary accent #E12454: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Poppins**. Body: **Poppins**. Both on Google Fonts. ## Shape - Cards and panels: 5px corners. Buttons and chips: 50px. ## Voice - Tone: professional. Energy: medium. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--blue`: `#007BFF` - `--indigo`: `#6610F2` - `--purple`: `#6F42C1` - `--pink`: `#E83E8C` - `--red`: `#DC3545` - `--orange`: `#FD7E14` - `--yellow`: `#FFC107` - `--green`: `#28A745` - `--teal`: `#20C997` - `--cyan`: `#17A2B8` - `--white`: `#FFFFFF` - `--gray`: `#6C757D` - `--gray-dark`: `#343A40` - `--primary`: `#007BFF` - `--secondary`: `#6C757D` - `--success`: `#28A745` - `--info`: `#17A2B8` - `--warning`: `#FFC107` - `--danger`: `#DC3545` - `--light`: `#F8F9FA` - `--dark`: `#343A40` ### Typefaces - SFMono-Regular (`--font-family-monospace`) - Poppins — on Google Fonts - Rubik — on Google Fonts - Libre Franklin — on Google Fonts ### Type scale (most-used sizes) `40px` · `30px` · `24px` · `22px` · `20px` · `1.25rem` · `18px` · `16px` · `1rem` · `14px` · `.875rem` · `12px` ### Letter-spacing `2px` (28) · `1px` (10) · `-.3px` (4) · `-.03em` (4) · `-2.3px` (1) · `-2px` (1) ### Corner radii (most-used) `50%` · `.25rem` · `40px` · `10px` · `50px` · `1rem` · `25px` · `.3rem` · `30px` · `5px` ### Shadows - `0 4px 8px 0 #655C804D` - `0 0 0 .2rem rgba(0,123,255,.25)` - `0 0 0 .2rem rgba(0,123,255,.5)` - `0 0 0 .2rem rgba(108,117,125,.5)` - `0 0 0 .2rem rgba(40,167,69,.5)` - `0 0 0 .2rem rgba(23,162,184,.5)` ### Gradients - `linear-gradient(to right,#ffffff14 1px,transparent 1px)` - `linear-gradient(to bottom,#ffffff14 1px,transparent 1px)` - `linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)` - `linear-gradient(to right,#18a2b8,#32c3a1)` ### Breakpoints 300px · 480px · 576px · 700px · 767px · 768px · 769px · 981px · 991px · 992px · 1000px · 1200px ```