# Phish design system

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

## Overview

Phish leads with a hand-lettered tour poster that fills the first screen, then drops to a calm #f6f7f5 page with warm #535046 ink and #e36740 orange for the marks that matter. One geometric family, Function Pro, does everything from 72px bold display down to 14px tracked uppercase labels, and pills are the only rounded shape.

- Theme: light
- Mood: poster, jam band, tour dates, warm, illustrated
- Category: Band

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#f6f7f5` | The page ground |
| Surface | `#413648` | Raised panels, bands and cards |
| Text | `#535046` | Primary ink, 7.5:1 on the background |
| Muted text | `#68947c` | Supporting copy, 3.2:1 on the background |
| Accent | `#e36740` | Primary actions |
| Border | `#e4e6ec` | Hairlines and dividers |

Full palette, most used first: `#535046`, `#f6f7f5`, `#413648`, `#ffffff`, `#000000`, `#e36740`, `#68947c`, `#7e668e`.

## Typography

- **function_probook**: display and body, 81.8% of the text. Use Outfit. Function Pro is a paid typeface. Outfit is a free stand-in, not a match.
- **function_prodemi**: display and body, 8.1% of the text. Use Outfit. The demibold cut of Function Pro, a paid typeface.
- **function_promedium**: body, 7.8% of the text. Use Outfit. The medium cut of Function Pro, a paid typeface.
- **function_pro_bookbold**: display and body, 2.2% of the text. Use Outfit. The book bold cut of Function Pro, a paid typeface.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | function_probook | 72px | 700 | 1.2 | 0 |
| Heading | function_probook | 24px | 700 | 1 | 0 |
| Subheading | function_promedium | 18px | 400 | 1.2 | 0 |
| Body | function_probook | 16px | 400 | 1.4 | 0 |
| Small | function_probook | 14px | 400 | 1 | 0.143em |

Sizes in use, largest first: 72px, 24px, 20px, 18px, 16px, 14px, 12px, 10px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 3px, 7px, 10px, 14px, 18px.

## Shape

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

No shadows: depth comes from color and borders.

## Components

No repeated button or card treatment was found above the fold.

## Do

- Let one commissioned poster carry the whole first screen.
- Drop to a soft off-white and warm grey ink below it so the art stays the loudest thing.
- Run every size from one geometric family and set small labels in tracked uppercase.

## Don't

- Use pure black text on the off-white: the ink here is a warm #535046.
- Put the orange on body copy: at 3.1:1 it only works on large marks and buttons.
- Add more than one rounded shape: pills are the only radius on the page.

## CSS variables

```css
:root {
  --color-background: #f6f7f5;
  --color-surface: #413648;
  --color-text: #535046;
  --color-text-muted: #68947c;
  --color-accent: #e36740;
  --color-border: #e4e6ec;
  --font-display: "function_probook", system-ui, sans-serif;
  --text-display: 72px;
  --weight-display: 700;
  --font-heading: "function_probook", system-ui, sans-serif;
  --text-heading: 24px;
  --weight-heading: 700;
  --font-subheading: "function_promedium", system-ui, sans-serif;
  --text-subheading: 18px;
  --weight-subheading: 400;
  --font-body: "function_probook", system-ui, sans-serif;
  --text-body: 16px;
  --weight-body: 400;
  --font-small: "function_probook", system-ui, sans-serif;
  --text-small: 14px;
  --weight-small: 400;
  --space-1: 3px;
  --space-2: 7px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --radius-1: 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.