[Design systems](/design-systems/) / Epic # 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: ![Epic homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100027.jpg?alt=media) ## Palette - Ground \#EAE5E1 \--color-epic-light-gray - Ink \#000000 - Accent on the ground \#C62715 - Primary \#C62715 \--color-epic-light-red - On primary \#FFFFFF \--color-white - Secondary accent \#CD1543 \--color-epic-red - Dark \#000000 \--color-black - Site background \#EAE5E1 \--color-epic-light-gray ## 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 - \--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 ## Type Headings Raleway Epic at a glance Body Raleway Clear, readable paragraphs for clinicians, buyers and patients alike. - 3.75rem · 60pxEpic - 3rem · 48pxEpic - 2.25rem · 36pxEpic - 1.875rem · 30pxEpic - 26pxEpic - 1.5rem · 24pxEpic - 1.25rem · 20pxEpic - 1.125rem · 18pxEpic ## Shape & depth Cards and panels: 4px corners · buttons and chips: 0px. ### Corner radii - .25rem used in 4 rules - .375rem used in 2 rules - .3125rem used in 1 rule - 1.5rem used in 1 rule - .5rem used in 1 rule - .75rem used in 1 rule ### Gradients - linear-gradient(90deg,#ffffff5e,#80cfdb5e,#80cfdb5e,#ffffff5e) used in 1 rule 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100027.md?alt=media). ``` --- 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 ```