---
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