[Design systems](/design-systems/) / Midwest Anesthesia Consultants # Midwest Anesthesia Consultants design system midwestanesthesiaconsultants.com Read from Midwest Anesthesia Consultants's public website by Clinical Terminal. Not reviewed by Midwest Anesthesia Consultants. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Midwest Anesthesia Consultants homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923797.jpg?alt=media) ## Palette - Ground \#FFFFFF - Ink \#222222 - Accent on the ground \#468300 - Primary \#81C241 - On primary \#000000 - Secondary accent \#0CB8B6 - Dark \#222222 - Site background \#FFFFFF ## Type Headings Playfair Display Midwest Anesthesia Consultants at a glance Body Barlow Clear, readable paragraphs for clinicians, buyers and patients alike. - 60pxMidwest Anesthesia Consultants - 50pxMidwest Anesthesia Consultants - 40pxMidwest Anesthesia Consultants - 35pxMidwest Anesthesia Consultants - 24pxMidwest Anesthesia Consultants - 20pxMidwest Anesthesia Consultants - 16pxMidwest Anesthesia Consultants - 15pxMidwest Anesthesia Consultants ## Shape & depth Cards and panels: 3px corners · buttons and chips: 3px. ### Corner radii - 50% used in 30 rules - 3px used in 29 rules - 50px used in 25 rules - 100% used in 6 rules - 9999px used in 5 rules - 22px used in 2 rules - 25px used in 2 rules - 2px used in 2 rules - 40px used in 1 rule - 4px used in 1 rule ### Shadows - 0 0 0 2px #0cb8b6 inset used in 14 rules - 0 0 0 2px #81c241 inset used in 14 rules - 0 0 0 2px transparent inset used in 10 rules - 0 0 0 1px #0cb8b6 inset used in 8 rules - 0 0 0 1px #81c241 inset used in 8 rules - 0 0 0 2px #fff inset used in 6 rules ### Gradients - linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent) used in 2 rules - linear-gradient(left top,transparent 33%,rgba(0,0,0,.75) 33%,rgba(0,0,0,.75) 66%,transparent 66%) used in 2 rules - linear-gradient(left top,transparent 33%,rgba(255,255,255,.5) 33%,rgba(255,255,255,.5) 66%,transparent 66%) used in 2 rules - linear-gradient(top,#000 0%,transparent 25%,transparent 75%,#000 100%) used in 2 rules - linear-gradient(top,#fff 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,#fff 100%) used in 2 rules - linear-gradient(135deg,#00d084,#0693e3) used in 1 rule Breakpoints: 375px · 400px · 440px · 479px · 480px · 560px · 580px · 600px · 620px · 640px · 650px · 667px ## 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%2F100923797.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Midwest Anesthesia Consultants" domain: "midwestanesthesiaconsultants.com" colors: primary: "#81C241" onPrimary: "#000000" dark: "#222222" accent: "#0CB8B6" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#222222" accent: "#468300" fonts: heading: "Playfair Display" body: "Barlow" radius: card: "3px" button: "3px" --- # Design System — Midwest Anesthesia Consultants > Read from Midwest Anesthesia Consultants's public website (midwestanesthesiaconsultants.com) by Clinical Terminal. Not reviewed by Midwest Anesthesia Consultants. > Use it as inspiration: borrow the ideas, not Midwest Anesthesia Consultants's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Midwest Anesthesia Consultants's site background #FFFFFF. Pages and panels sit on it. - Main text: #222222 (15.91:1 on the ground). - Secondary text is #222222 at 88% / 76% / 60%; hairlines and plate borders #222222 at 16%. ## Color - **Accent on the ground: #468300** (4.66:1), adjusted from Midwest Anesthesia Consultants's primary #81C241 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #81C241** for filled shapes (buttons, chips, bars), with #000000 text on it (9.73:1). - Secondary accent #0CB8B6: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Playfair Display**. Body: **Barlow**. Both on Google Fonts. ## Shape - Cards and panels: 3px corners. Buttons and chips: 3px. ## Voice - Tone: professional. Energy: low. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Typefaces - montserrat — on Google Fonts - Barlow — on Google Fonts - Playfair Display — on Google Fonts - source serif pro - Barlow Semi Condensed - WooCommerce - btmedical - Essential ### Type scale (most-used sizes) `60px` · `50px` · `40px` · `35px` · `24px` · `20px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` ### Letter-spacing `1px` (5) · `3px` (2) · `2em` (1) · `2px` (1) · `-1px` (1) · `.1em` (1) ### Corner radii (most-used) `50%` · `3px` · `50px` · `100%` · `9999px` · `22px` · `25px` · `2px` · `40px` · `4px` ### Shadows - `0 0 0 2px #0cb8b6 inset` - `0 0 0 2px #81c241 inset` - `0 0 0 2px transparent inset` - `0 0 0 1px #0cb8b6 inset` - `0 0 0 1px #81c241 inset` - `0 0 0 2px #fff inset` ### Gradients - `linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent)` - `linear-gradient(left top,transparent 33%,rgba(0,0,0,.75) 33%,rgba(0,0,0,.75) 66%,transparent 66%)` - `linear-gradient(left top,transparent 33%,rgba(255,255,255,.5) 33%,rgba(255,255,255,.5) 66%,transparent 66%)` - `linear-gradient(top,#000 0%,transparent 25%,transparent 75%,#000 100%)` - `linear-gradient(top,#fff 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,#fff 100%)` - `linear-gradient(135deg,#00d084,#0693e3)` ### Breakpoints 375px · 400px · 440px · 479px · 480px · 560px · 580px · 600px · 620px · 640px · 650px · 667px · 750px · 767px · 768px · 780px · 781px · 782px · 800px · 820px · 900px · 991px · 992px · 993px · 1024px · 1199px · 1200px · 1399px ```