[Design systems](/design-systems/) / MCG # MCG design system mcg.com Read from MCG's public website by Clinical Terminal. Not reviewed by MCG. Copy it and paste it into Claude as inspiration. Corrections or removal: ![MCG homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100056.jpg?alt=media) ## Palette - Ground \#FFFFFF \--em--input--background-color - Ink \#000000 - Accent on the ground \#025893 - Primary \#025893 - On primary \#FFFFFF \--em--input--background-color - Secondary accent \#1A365C - Dark \#000000 - Site background \#FFFFFF \--em--input--background-color ## Other named colors - \--em--color--danger #DC3545 - \--em--color--warning #FFC107 - \--em--color--info #0DCAF0 - \--em--color--success #198754 - \--em--link--hover--color #40D7D0 - \--em--input--background-color #FFFFFF - \--em--uploader--button--color #FFFFFF - \--em--uploader--button--background--hover #FFFFFF - \--em--checkbox--color #FFFFFF - \--em--checkbox--checked--background-color #FFFFFF - \--em--main-menu--sub-menu--background-color #FFFFFF - \--em--header--background #FFFFFF - \--em--mobile-menu--background #FFFFFF ## Type Headings Inter MCG at a glance Body Inter Clear, readable paragraphs for clinicians, buyers and patients alike. - 3.75rem · 60pxMCG - 2rem · 32pxMCG - 1.75rem · 28pxMCG - 1.5rem · 24pxMCG - 1.375rem · 22pxMCG - 1.25rem · 20pxMCG - 1.125rem · 18pxMCG - 1rem · 16pxMCG ## Shape & depth Cards and panels: 4px corners · buttons and chips: 30px. ### Corner radii - 50% used in 7 rules - 1.5625rem used in 6 rules - 0.375rem used in 4 rules - 0.25rem used in 3 rules - 1.6875rem used in 2 rules - 1.875rem used in 2 rules - 0.1875rem used in 1 rule - 0.125rem used in 1 rule - 3.125rem used in 1 rule ### Shadows - none !important used in 13 rules - 0 0 1.875rem rgba(0,0,0,.15) used in 4 rules - 0 0 0.625rem rgba(0, 0, 0, 0.1) used in 3 rules - 0 0 0.3125rem rgba(0,0,0,.3) used in 2 rules - inset 0 0 0 0.3125rem #fff used in 2 rules - 0 0.125rem 0.25rem 0 rgba(0,0,0,.2) used in 2 rules ### Gradients - linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%) used in 1 rule - linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%) used in 1 rule - linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%) used in 1 rule - linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%) used in 1 rule - linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%) used in 1 rule - linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%) used in 1 rule Breakpoints: 390px · 479px · 480px · 639px · 640px · 849px · 850px · 881px · 999px · 1000px · 1119px · 1120px ## Voice Tone: professional. Energy: low. Written for businesses. ## 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%2F100056.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "MCG" domain: "mcg.com" colors: primary: "#025893" onPrimary: "#FFFFFF" dark: "#000000" accent: "#1A365C" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#000000" accent: "#025893" fonts: heading: "Inter" body: "Inter" radius: card: "4px" button: "30px" --- # Design System — MCG > Read from MCG's public website (mcg.com) by Clinical Terminal. Not reviewed by MCG. > Use it as inspiration: borrow the ideas, not MCG's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from MCG's site background #FFFFFF. Pages and panels sit on it. - Main text: #000000 (21:1 on the ground). - Secondary text is #000000 at 88% / 76% / 60%; hairlines and plate borders #000000 at 16%. ## Color - **Accent on the ground: #025893** (7.45:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #025893** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (7.45:1). - Secondary accent #1A365C: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Inter**. Body: **Inter**. Both on Google Fonts. ## Shape - Cards and panels: 4px corners. Buttons and chips: 30px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--em--color--danger`: `#DC3545` - `--em--color--warning`: `#FFC107` - `--em--color--info`: `#0DCAF0` - `--em--color--success`: `#198754` - `--em--link--hover--color`: `#40D7D0` - `--em--input--background-color`: `#FFFFFF` - `--em--uploader--button--color`: `#FFFFFF` - `--em--uploader--button--background--hover`: `#FFFFFF` - `--em--checkbox--color`: `#FFFFFF` - `--em--checkbox--checked--background-color`: `#FFFFFF` - `--em--main-menu--sub-menu--background-color`: `#FFFFFF` - `--em--header--background`: `#FFFFFF` - `--em--mobile-menu--background`: `#FFFFFF` ### Typefaces - Inter — on Google Fonts - inherit !important ### Type scale (most-used sizes) `3.75rem` · `2rem` · `1.75rem` · `1.5rem` · `1.375rem` · `1.25rem` · `1.125rem` · `1rem` · `0.9375rem` · `0.875rem` · `0.75rem` · `0.625rem` ### Letter-spacing `0.0125rem` (5) · `0.03em` (2) · `0.05em` (2) · `.07em` (2) · `0.00438rem` (2) · `-0.0175rem` (2) ### Corner radii (most-used) `50%` · `1.5625rem` · `0.375rem` · `0.25rem` · `1.6875rem` · `1.875rem` · `0.1875rem` · `0.125rem` · `3.125rem` ### Shadows - `none !important` - `0 0 1.875rem rgba(0,0,0,.15)` - `0 0 0.625rem rgba(0, 0, 0, 0.1)` - `0 0 0.3125rem rgba(0,0,0,.3)` - `inset 0 0 0 0.3125rem #fff` - `0 0.125rem 0.25rem 0 rgba(0,0,0,.2)` ### Gradients - `linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)` - `linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)` - `linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)` - `linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%)` - `linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)` - `linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)` ### Breakpoints 390px · 479px · 480px · 639px · 640px · 849px · 850px · 881px · 999px · 1000px · 1119px · 1120px · 1351px · 1379px · 1380px ```