Clinical Terminal
AboutSign in

Epic design system

epic.com

Read from Epic's public website by Clinical Terminal. Not reviewed by Epic. Copy it and paste it into Claude as inspiration.

Corrections or removal: agent@clinicalterminal.com

Epic homepage

Palette

Color ramps

Color Slate
100
#F1F5F9
200
#E2E8F0
400
#90A1B9
600
#45556C
700
#314158
900
#0F172B
Color Gray
50
#F9FAFB
200
#E5E7EB
400
#99A1AF
500
#6A7282
600
#4A5565
900
#101828
Color Zinc
300
#D4D4D8
400
#9F9FA9
600
#52525C
Color Neutral
500
#737373
800
#262626
900
#171717

Other named colors

Type

Headings
Raleway

Epic at a glance

Body
Raleway

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

Shape & depth

Cards and panels: 4px corners · buttons and chips: 0px.

Corner radii

Gradients

Breakpoints: 350px · 450px · 550px · 1600px

Voice

Tone: professional. Energy: high. 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: "Epic"
domain: "epic.com"
colors:
  primary: "#C62715"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  accent: "#CD1543"
  background: "#EAE5E1"
ground:
  mode: light
  hex: "#EAE5E1"
  ink: "#000000"
  accent: "#C62715"
fonts:
  heading: "Raleway"
  body: "Raleway"
radius:
  card: "4px"
  button: "0px"
---

# Design System — Epic

> Read from Epic's public website (epic.com) by Clinical Terminal. Not reviewed by Epic.
> Use it as inspiration: borrow the ideas, not Epic's name, logo or identity.

## Ground
- **Light ground** (#EAE5E1), from Epic's site background #EAE5E1. Pages and panels sit on it.
- Main text: #000000 (16.79:1 on the ground).
- Secondary text is #000000 at 88% / 76% / 60%; hairlines and plate borders #000000 at 16%.

## Color
- **Accent on the ground: #C62715** (4.54:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #C62715** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.67:1).
- Secondary accent #CD1543: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Raleway**. Body: **Raleway**. Both on Google Fonts.

## Shape
- Cards and panels: 4px corners. Buttons and chips: 0px.

## Voice
- Tone: professional. Energy: high. Written for patients and healthcare professionals.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Color Slate** (`--color-slate-N`): 100 `#F1F5F9` · 200 `#E2E8F0` · 400 `#90A1B9` · 600 `#45556C` · 700 `#314158` · 900 `#0F172B`
- **Color Gray** (`--color-gray-N`): 50 `#F9FAFB` · 200 `#E5E7EB` · 400 `#99A1AF` · 500 `#6A7282` · 600 `#4A5565` · 900 `#101828`
- **Color Zinc** (`--color-zinc-N`): 300 `#D4D4D8` · 400 `#9F9FA9` · 600 `#52525C`
- **Color Neutral** (`--color-neutral-N`): 500 `#737373` · 800 `#262626` · 900 `#171717`

### Other named colors

- `--color-black`: `#000000`
- `--color-white`: `#FFFFFF`
- `--color-epic-red`: `#CD1543`
- `--color-epic-darker-gray`: `#6B615C`
- `--color-epic-light-red`: `#C62715`
- `--color-epic-darker-red`: `#9B1B3B`
- `--color-epic-social-hover-red`: `#991000`
- `--color-epic-footer-orange`: `#C8493A`
- `--color-epic-green`: `#679775`
- `--color-epic-cyan`: `#689695`
- `--color-epic-light-gray`: `#EAE5E1`
- `--color-epic-light-brown`: `#CFBCB6`
- `--color-epic-brown`: `#826156`
- `--color-epic-black`: `#3D2C2B`
- `--color-epic-beige`: `#E9E3E2`
- `--color-epic-cream`: `#F9F4F2`
- `--color-epic-orange-red`: `#C23D2C`
- `--color-epic-muted-gray`: `#BDB5BD`
- `--epicheader-color-white`: `#FFFFFF`
- `--color-red-500`: `#FB2C36`
- `--color-orange-50`: `#FFF7ED`
- `--color-yellow-500`: `#EAB300`
- `--color-green-500`: `#00C65A`
- `--color-sky-500`: `#00A5EA`
- `--color-rose-100`: `#FFE4E6`
- `--color-stone-300`: `#D6D3D1`
- `--color-stone-500`: `#79716B`
- `--epicheader-color-neutral-600`: `#525252`

### Typefaces

- Raleway (`--font-raleway`) — on Google Fonts
- Covered By Your Grace (`--font-covered-by-your-grace`)
- Gelasio (`--font-gelasio`)
- Lora (`--font-lora`) — on Google Fonts
- Raleway Fallback
- Covered By Your Grace Fallback
- Gelasio Fallback
- Lora Fallback

### Type scale (most-used sizes)

`3.75rem` · `3rem` · `2.25rem` · `1.875rem` · `26px` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `.875rem` · `.75rem` · `11px`

### Corner radii (most-used)

`.25rem` · `.375rem` · `.3125rem` · `1.5rem` · `.5rem` · `.75rem`

### Gradients

- `linear-gradient(90deg,#ffffff5e,#80cfdb5e,#80cfdb5e,#ffffff5e)`

### Breakpoints

350px · 450px · 550px · 1600px