Clinical Terminal
AboutSign in

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: agent@clinicalterminal.com

Midwest Anesthesia Consultants homepage

Palette

Type

Headings
Playfair Display

Midwest Anesthesia Consultants at a glance

Body
Barlow

Clear, readable paragraphs for clinicians, buyers and patients alike.

Shape & depth

Cards and panels: 3px corners · buttons and chips: 3px.

Corner radii

Shadows

Gradients

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.

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