# Umphrey's McGee design system

> Captured from https://umphreys.com/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/umphreys-mcgee/). An independent analysis for reference: Umphrey's McGee and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Umphrey's McGee opens on a dark slate band, then runs a #ffffff page where content sits in #3a3d4e cards with 8px corners, #445b79 borders and a hard 4px offset shadow. Display type is Archivo at 58px and 800 weight, body is Inter at 16px, with #f28d44 orange for section labels and #4fd1c5 teal as the accent. Buttons are pills.

- Theme: light
- Mood: slate, cards, offset shadow, news, jam band
- Category: Band

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#3a3d4e` | Raised panels, bands and cards |
| Text | `#000000` | Primary ink, 21.0:1 on the background |
| Muted text | `#849ab3` | Supporting copy, 2.9:1 on the background |
| Accent | `#4fd1c5` | Primary actions |
| Highlight | `#f28d44` | Brand color in artwork, marks and badges |
| Border | `#cadff1` | Hairlines and dividers |

Full palette, most used first: `#edecf2`, `#ffffff`, `#3a3d4e`, `#f28d44`, `#4fd1c5`, `#1e1e28`, `#000000`, `#849ab3`, `#686c80`.

## Typography

- **Inter**: body, 90.3% of the text. Use Inter. Inter is free under the SIL Open Font License.
- **Unbounded**: display and body, 5.6% of the text. Use Unbounded. Unbounded is free under the SIL Open Font License.
- **Archivo**: display and body, 3.8% of the text. Use Archivo. Archivo is free under the SIL Open Font License.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Archivo | 57.6px | 800 | 1.08 | 0 |
| Heading | Archivo | 18.7px | 800 | 1.6 | 0 |
| Body | Inter | 16px | 400 | 1.6 | 0 |
| Small | Inter | 12px | 400 | 1.6 | 0 |

Sizes in use, largest first: 58px, 19px, 17px, 16px, 14px, 12px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 3px, 6px, 10px, 12px, 16px, 19px, 32px, 35px.

## Shape

Corner radii, smallest first: 3px, 8px, pill (9999px).

Shadows, most used first:

- `rgba(0, 0, 0, 0.4) 4px 4px 0px 0px`
- `rgba(0, 0, 0, 0.4) 4px 4px 0px 0px, rgba(91, 155, 213, 0.45) 0px 0px 22px 0px`

## Components

### Primary button ("Read the Latest")

- Fill: #686c80
- Text: #edecf2, 16px at weight 600
- Border: 1px solid #cadff1
- Ring or shadow: `rgba(0, 0, 0, 0.4) 4px 4px 0px 0px`
- Corner: pill (9999px)
- Height: 53px, padding 13px 21px

### Secondary button ("UMVIP")

- Fill: #ffffff
- Text: #000000, 12px at weight 400
- Border: 2px solid #000000
- Corner: 3px
- Height: 35px, padding 6px 3px

### Card

- Fill: #3a3d4e
- Border: 1px solid #445b79
- Corner: 8px
- Shadow: `rgba(0, 0, 0, 0.4) 4px 4px 0px 0px`

## Do

- Put news and tour dates in dark cards with a hard offset shadow.
- Use small uppercase orange labels to mark each section.
- Set headlines in a heavy grotesk and keep body copy in Inter.

## Don't

- Use the teal for text on white: it measures 1.9:1.
- Blur the card shadows: they are solid offsets.
- Mix more than one radius per element type.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #3a3d4e;
  --color-text: #000000;
  --color-text-muted: #849ab3;
  --color-accent: #4fd1c5;
  --color-highlight: #f28d44;
  --color-border: #cadff1;
  --font-display: "Archivo", system-ui, sans-serif;
  --text-display: 57.6px;
  --weight-display: 800;
  --font-heading: "Archivo", system-ui, sans-serif;
  --text-heading: 18.7px;
  --weight-heading: 800;
  --font-body: "Inter", "Inter", system-ui, sans-serif;
  --text-body: 16px;
  --weight-body: 400;
  --font-small: "Inter", "Inter", system-ui, sans-serif;
  --text-small: 12px;
  --weight-small: 400;
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 19px;
  --space-7: 32px;
  --space-8: 35px;
  --radius-1: 3px;
  --radius-2: 8px;
  --radius-3: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.