---
version: alpha
name: Patreon
description: A stark black-and-white editorial canvas where Patreon coral is the one electric accent, a heavy grotesque sets oversized headlines, and creators' work — not chrome — carries the color; a creator-economy platform that designs like a culture magazine.

colors:
  # Surface / canvas
  background: "#ffffff"        # the bright white canvas
  surface: "#f1f1f1"           # light gray section bands and cards
  surface-dark: "#080808"      # near-pure-black surface and inverted sections

  # Ink / text
  ink: "#080808"               # near-black headings and body
  ink-soft: "#313131"          # softened gray body text
  ink-secondary: "#52514f"     # supporting copy
  ink-muted: "#8a8a8a"         # captions, metadata
  on-dark: "#ffffff"           # white text on black surfaces

  # Brand accent — Patreon coral
  primary: "#ff424d"           # Patreon coral — primary CTAs, links, the one accent
  primary-hover: "#e63946"     # deepened coral on hover
  on-primary: "#ffffff"
  coral-soft: "#ffe5e6"        # pale coral tint for badge / highlight fills

  # Borders
  border: "#e2e2e2"            # light hairline dividers, card edges
  border-strong: "#080808"     # the black outline on inverted / outline buttons

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#080808"       # was rgba(8,8,8,0.10) — Google format requires hex

typography:
  display-hero:
    fontFamily: "ABC Favorit, Inter, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -2px
  display:
    fontFamily: "ABC Favorit, Inter, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1px
  heading:
    fontFamily: "ABC Favorit, Inter, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "ABC Favorit, Inter, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Inter, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Inter, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  button-label:
    fontFamily: "ABC Favorit, Inter, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  label:
    fontFamily: "Inter, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-dark-hover:
    backgroundColor: "{colors.ink-soft}"
    textColor: "{colors.on-dark}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
  card-media:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 16px 24px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px

  badge:
    backgroundColor: "{colors.coral-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Patreon Design System

## Overview

> **Extraction note:** Patreon serves a Cloudflare "Performing security verification" wall to automated agents, so live token extraction (dembrandt and a stealth headless-Playwright pass) was blocked. The values below are reconstructed from Patreon's established post-2023 brand system — the black-and-white editorial identity with Patreon coral as the sole accent and the ABC Favorit display grotesque. Pixel-exact sizes and radii are best-estimate against that system and marked where uncertain.

Patreon designs like a culture magazine that happens to run payments. The single most distinctive move is the color discipline: the entire interface is a stark black-and-white editorial canvas (`{colors.background}` and `{colors.ink}`), and the only color that escapes it is **Patreon coral** (`{colors.primary}`) — the electric red-pink that fills the primary CTA, marks links, and otherwise stays scarce. The reasoning is structural: Patreon's pages are full of creators' work — album art, video thumbnails, illustration, photography — and that work is where the color lives. The chrome goes monochrome so the creators don't have to fight it.

The typography is loud where the palette is quiet. Headlines run in a heavy grotesque (**ABC Favorit**, `{typography.display-hero}`) at large sizes and tight negative tracking, set in near-black and frequently oversized — a confident, almost poster-like display voice. Body and UI drop to a clean neutral sans (`Inter`-class, `{typography.body}`) for readability. The pairing reads editorial: a bold magazine headline over calm, legible running text. Nothing is decorative; the weight and scale of the type do the expressing.

The shapes and surfaces are clean and modern. Buttons are fully rounded pills (`{rounded.pill}`) — coral for the primary action, black for the secondary, a thin black outline for the tertiary — and content sits in soft-cornered cards (`{rounded.xl}`) on a bright white ground with light gray bands (`{colors.surface}`) for rhythm. Inverted near-black sections (`{colors.surface-dark}`) appear for emphasis, flipping the canvas to white-on-black. The overall impression is a platform that takes both creators and design seriously: monochrome, type-forward, with one unmistakable shot of coral.

**Key Characteristics:**
- Stark black-and-white editorial canvas (`{colors.background}` / `{colors.ink}`) — chrome stays monochrome so creators' work carries the color
- **Patreon coral** (`{colors.primary}`) as the singular accent: primary CTA, links, sparing highlights — never a wash
- Heavy grotesque display (**ABC Favorit**, `{typography.display-hero}`) — oversized, tight negative tracking, poster-like
- Neutral sans (`Inter`-class, `{typography.body}`) for body and UI — calm and legible under the loud headlines
- Fully-rounded **pill buttons** (`{rounded.pill}`): coral primary, black secondary, outlined tertiary
- Soft-cornered cards (`{rounded.xl}`) on white with light gray bands (`{colors.surface}`) for rhythm
- Inverted near-black sections (`{colors.surface-dark}`) flip to white-on-black for emphasis
- Near-black ink (`{colors.ink}`), a hair off pure black, keeps the system modern rather than harsh
- Generous whitespace and large type scale — the layout reads like editorial spreads
- Media cards hold creator artwork edge-to-edge (`{components.card-media}`, 0 padding) — the imagery is the hero

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant bright canvas.
- **Light Gray** (`{colors.surface}`): Section bands and media-card grounds for rhythm.
- **Near-Black** (`{colors.surface-dark}`): Inverted emphasis sections, flipping to white-on-black.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Headings and body — a hair off pure black for a modern feel.
- **Soft Gray** (`{colors.ink-soft}`): Softened body copy.
- **Muted Gray** (`{colors.ink-secondary}`): Supporting copy.
- **Faint Gray** (`{colors.ink-muted}`): Captions and metadata.

### Brand Accent
- **Patreon Coral** (`{colors.primary}`): The one accent. Primary CTAs, links, sparing highlights. Used scarcely to keep its charge.
- **Coral Hover** (`{colors.primary-hover}`): Deepened coral for hover/pressed.
- **Coral Soft** (`{colors.coral-soft}`): Pale coral tint for badge and highlight fills.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Light card edges and dividers.
- **Strong Border** (`{colors.border-strong}`): The black outline on outline/tertiary buttons.
- **Soft Shadow** (`{colors.shadow-soft}`): Opaque stand-in for the light card shadow (originally rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display grotesque**: `ABC Favorit` (Dinamo), fallbacks `Inter, 'Helvetica Neue', Arial, sans-serif`. Heavy, oversized headlines and button labels.
- **UI sans**: `Inter`-class neutral grotesque, fallbacks `'Helvetica Neue', Arial, sans-serif`. Body, labels, captions.
- **Tracking**: display uses tight negative tracking (up to -2px at 72px); body sits at zero.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 72px / 700 / -2px — **ABC Favorit** marquee headline |
| `display` | 48px / 700 / -1px — large display |
| `heading` | 32px / 600 — section headings |
| `heading-sub` | 24px / 600 — sub-section headings |
| `body-large` | 20px / 400 — lead paragraphs |
| `body` | 16px / 400 — standard body and inputs |
| `body-small` | 14px / 400 — dense supporting copy |
| `button-label` | 16px / 600 — button text |
| `label` | 13px / 500 — UI labels |
| `caption` | 12px / 400 — metadata, badges |

### Principles
- **Loud display, calm body**: heavy grotesque headlines do the expressing; the neutral sans keeps reading easy.
- **Scale over decoration**: hierarchy comes from size and weight, not ornament or color.
- **Tighten the big**: aggressive negative tracking on display; zero on body.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step. Generous vertical rhythm (`{spacing.5xl}` = 96px) separates editorial sections; component internals stay compact (`{spacing.md}`–`{spacing.xl}`).

### Grid & Container
- Max content width: ~1200px, centered
- Common pattern: an oversized headline + supporting sans paragraph + coral CTA, paired with a media grid of creator work
- Discovery and feed areas use multi-column media-card grids

### Whitespace Philosophy
- **Editorial breathing room**: large type and generous margins make pages feel like magazine spreads
- **Media is the hero**: creator artwork sits edge-to-edge in cards; the layout frames it, not the reverse
- **Monochrome restraint**: keeping the chrome black-and-white lets the imagery and the one coral CTA stand out

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, light hairline `{colors.border}` only | Section bands, most content |
| Card (Level 1) | Soft `0 1px 3px` at ~10% (`{colors.shadow-soft}`) | Resting content and media cards |
| Raised (Level 2) | Softer wider `0 8px 24px` at ~10% (`{colors.shadow-soft}`) | Hover-lifted cards, popovers |
| Inverted (Level 3) | No shadow; near-black fill (`{colors.surface-dark}`) | Emphasis sections, flipped white-on-black |

**Shadow Philosophy**: Patreon's depth is light and modern. Cards rest on faint soft shadows and lift slightly on hover; the page is mostly flat, separated by hairlines and surface contrast. The most dramatic "depth" move is not a shadow at all but the inverted near-black section (`{colors.surface-dark}`) — flipping the whole canvas to white-on-black for emphasis. Color, not shadow, does the heavy lifting.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Small chips, tight tags |
| `md` | 8px | Inputs, mid containers |
| `lg` | 12px | Smaller cards, menus |
| `xl` | 16px | Content and media cards |
| `pill` | 9999px | Buttons, avatars, toggles |

Buttons are fully-rounded pills; cards are soft 16px. The contrast — rounded-pill action elements against soft-rectangular content — is the modern, friendly geometry the brand leans on.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Patreon coral (`{colors.primary}`) fill, white text, pill. The main CTA. Hover deepens to `{colors.primary-hover}`.
- **`button-dark`** — Near-black (`{colors.surface-dark}`) fill, white text, pill. The secondary action.
- **`button-outline`** — White fill, black text, black outline (`{colors.border-strong}`), pill. The tertiary action.

### Cards
- **`card`** — White surface, soft hairline, 16px radius, padded. **`card-media`** holds creator artwork edge-to-edge (0 padding) on a light gray ground.

### Inputs
- **`input`** — White fill, hairline border, 8px radius. **`input-focus`** strengthens the border — clean, no loud ring.

### Navigation
- **`nav-bar`** — White surface, near-black labels, hairline bottom border; the coral CTA sits at the right.

### Accent
- **`link`** — Patreon coral (`{colors.primary}`) text.
- **`badge`** — Pale coral (`{colors.coral-soft}`) fill, coral text, pill — small status/flag chips.

## Do's and Don'ts

### Do
- Keep the chrome black-and-white (`{colors.background}` / `{colors.ink}`) so creators' work carries the color
- Reserve Patreon coral (`{colors.primary}`) for the primary CTA, links, and sparing highlights
- Set headlines in a heavy grotesque (`{typography.display-hero}`) — oversized, tight negative tracking
- Run body and UI in a neutral sans (`{typography.body}`) for calm legibility
- Use fully-rounded pill buttons (`{rounded.pill}`): coral primary, black secondary, outlined tertiary
- Let media cards (`{components.card-media}`) hold creator artwork edge-to-edge
- Use inverted near-black sections (`{colors.surface-dark}`) for emphasis instead of more color
- Use near-black ink (`{colors.ink}`), a hair off pure black

### Don't
- Don't wash sections in coral — it's a scarce accent, not a canvas
- Don't add a second accent color — the chrome is monochrome plus one coral
- Don't set headlines in the body sans — the heavy grotesque carries the display voice
- Don't crowd creator artwork with chrome — frame it, keep cards edge-to-edge
- Don't square off the buttons — action elements are fully-rounded pills
- Don't lean on heavy shadows for depth — use hairlines, surface contrast, and inverted sections
- Don't shrink the display type — the oversized headline scale is part of the editorial voice

---

## Responsive Behavior

### Breakpoints
*(Live breakpoints were not extractable behind Cloudflare; the stops below are standard and describe the expected behavior.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; display hero scales 72px → ~36px; nav collapses to a menu; media grid goes 1-up |
| Tablet | 640–1023px | Two-column rows; media grid reflows to 2-up |
| Desktop | 1024–1279px | Full layout; copy-left / media-grid-right hero |
| Large | ≥1280px | Max ~1200px container, centered; section padding opens to `{spacing.5xl}` |

### Touch Targets
- Pill buttons run ~48px tall with `14px 28px` padding — comfortable for thumbs
- Media cards carry generous tap areas; nav items have ample vertical padding

### Collapsing Strategy
- **Navigation**: horizontal nav → menu toggle on mobile; the coral CTA persists
- **Hero**: oversized headline and media grid go from side-by-side to stacked
- **Type**: display drops from 72px toward ~36px keeping proportional negative tracking
- **Spacing**: section padding compresses from 96px toward ~48px

### Image Behavior
- Creator artwork fills media cards edge-to-edge and reflows as grid children, keeping aspect ratios

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`)
- Brand accent: Patreon Coral (`{colors.primary}`)
- Secondary text: Muted Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Patreon Coral (`{colors.primary}`)

### Example Component Prompts

- "Create a hero on white (`{colors.background}`) with a 72px heavy grotesque headline in near-black (`{colors.ink}`), weight 700, letter-spacing -2px, an Inter-class subhead at `{typography.body-large}`, and a coral (`{colors.primary}`) pill CTA"
- "Build the primary button: Patreon coral (`{colors.primary}`) fill, white text in `{typography.button-label}`, `{rounded.pill}` radius, `14px 28px` padding; hover deepens to `{colors.primary-hover}`"
- "Create a media card for creator artwork: light gray (`{colors.surface}`) ground, `{rounded.xl}` (16px) radius, artwork edge-to-edge with 0 padding (`{components.card-media}`), soft `0 1px 3px` shadow in `{colors.shadow-soft}`"
- "Design an outline button: white fill, near-black text, 1px black outline (`{colors.border-strong}`), `{rounded.pill}` radius — the tertiary action"
- "Build an inverted emphasis section: near-black (`{colors.surface-dark}`) fill, white (`{colors.on-dark}`) text, a heavy grotesque headline and a coral pill CTA"

### Iteration Guide

1. Start black-and-white: white canvas (`{colors.background}`), near-black ink (`{colors.ink}`). If you added a second accent, remove it.
2. Patreon coral (`{colors.primary}`) is the only color and it's scarce — primary CTA, links, small highlights. Not a background.
3. Headlines are a heavy grotesque (`{typography.display-hero}`), oversized with tight negative tracking; body is a neutral sans (`{typography.body}`).
4. Buttons are fully-rounded pills (`{rounded.pill}`): coral primary, black secondary, outlined tertiary.
5. Let creator artwork own the color — keep media cards edge-to-edge (`{components.card-media}`).
6. For emphasis, flip to an inverted near-black section (`{colors.surface-dark}`) rather than adding color.
7. Keep depth light — hairlines and surface contrast over heavy shadows; cards round to `{rounded.xl}` (16px).

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Patreon. Brand names and trademarks belong to their respective owners.