Patreon Brand Design System Deep Dive

1. Brand Overview

Patreon’s design language hits a very deliberate note: stripped-back, creator-first, no fluff. The visual system is utilitarian but not cold. This is a platform for people making things — so the UI gets out of the way and lets content breathe.

The moment you land on patreon.com, you’re met with a stark black-and-white foundation. Black is the default ink for text, white is the canvas. Around that, rare pops of color — a sea-glass blue (#5fc1f1), a hot magenta (#f15ff1), a sharp highlight blue (#0e87eb), functional reds (#dc362e) and greens (#00bda5). They’re not throwing gradients or heavy branding everywhere. Instead, they use color tactically: a primary action, a highlight, a success state. This restraint makes the few colors that do appear feel more important.

Typography is bold but clean. The custom "Oracle" typeface carries almost every context — headings, buttons, links, captions. It’s modern, slightly geometric, and paired with a robust fallback stack that covers multiple scripts (Japanese, Korean, Simplified Chinese, Traditional Chinese). That’s a clear signal: Patreon is global, and they’ve built a system to render legibly everywhere.

Spacing is on an 8px grid — predictable, easy to scale. But you’ll see oddball numbers (9px, 10px, 14px) sprinkled in, which tells me they’re not religious about strict multiples. The layout breathes; big headings get big gaps, buttons get generous padding.

Component styling leans toward pill shapes — 40px, 50px, even 60px border radii, plus full 50% for circular elements. This creates a friendly, approachable rhythm without going full “bubblegum.”

Shadows are almost nonexistent. Depth is hinted with a very soft rgba(0, 0, 0, 0.15) shadow in just three places. Everything else is flat — borders and color changes handle state.

The vibe? Creator-first minimalism. Functional, but with little flashes of personality when they want you to click something. They’ve nailed restraint. I love that.

2. Color System

2.1 Primary Colors

Primary brand color: rgb(0, 0, 0) (#000000). Yes, black. It’s the dominant ink for text, outlines, and the “action default” token. This works because it’s timeless — any creator’s content can sit on top without clashing.

Secondary brand color: color(srgb 0.8 0.8 0.8) — effectively a light neutral grey. This is background/support, not a “secondary action” color.

Then there’s the accent: --color-primary: #5fc1f1 — a clean, light blue used for CTAs and key interactive areas. Compare to platforms like Kickstarter (green) or YouTube (red): Patreon’s blue is friendlier, less aggressive.

2.2 Complete Palette

2.3 Color Relationships

Black-on-white is the default — maximum contrast, WCAG AAA compliant. Highlight colors like #0e87eb against white hit ~4.5:1 contrast (AA compliant for normal text). The light blue #5fc1f1 is less contrasty; works fine for large text/buttons but not for small body copy.

Dark mode isn’t explicitly in the extracted data, but the heavy use of color-mix variables (--color-neutral-20, --color-neutral-60, etc.) means they can adjust light/dark blends dynamically.

2.4 Usage Guide

• Use black for primary text, actions, outlines.
• Use #5fc1f1 sparingly — CTAs only.
• #0e87eb for hover/focus highlights — don’t use it for static decoration.
• Red and green strictly for status messaging.
• Avoid mixing #f15ff1 and #5fc1f1 in the same component — too much competing color.
• Grey neutrals for disabled states or subtle dividers.

3. Typography

3.1 Font Families

Main font: Oracle. Every context uses it — headings, buttons, links, captions. Fallback stack:

Oracle, Noto Sans JP, Noto Sans KR, Noto Sans SC, Noto Sans TC, Noto Sans Regular, Helvetica Neue, Helvetica, Arial

No Google Fonts or Adobe Fonts — likely a custom hosted typeface.

3.2 Type Scale

3.3 Hierarchy

They’ve gone big for hero headings (250px!) — that’s billboard scale. Then a steep drop to 72px, 52px, and down. This creates dramatic contrast between hero moments and functional UI text. Button and link sizes are oversized (18–30px), which makes them feel tappable and friendly.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

Odd values like 9px and 42.5px suggest custom tweaks for visual balance.

4.2 Layout

Breakpoints:

• 480px (mobile)
• 768px / 769px (tablet)
• 960px / 964px (small desktop)
• 1120px
• 1300px (large desktop)

This spread allows fine-grained control — note the 1px difference between 768px and 769px, likely for specific layout shifts.

5. Visual Elements

• Border Radius: Heavy use of pill shapes.

  • 40px — buttons, modals
  • 50px — list items, buttons
  • 60px — inputs
  • 50% — perfect circles (avatars, icon buttons)

• Shadows: Rare. Only rgba(0, 0, 0, 0.15) 0px 2px 24px used in 3 places.

• Borders:

  • 1px solid #000 — buttons, inputs, lists
  • 1px solid #fff — inverse buttons

6. Components

6.1 Buttons

Four main variants:

Primary (black background)

• Default: bg #000, color #fff, padding 20px 28px, radius 40px, border 1px solid #000
• Hover: color var(--color-highlight-light), bg var(--color-neutral-60)
• Focus: translateX(66%), color var(--color-action)

Secondary (transparent)

• Default: bg transparent, color #000, border 1px solid #000
• Hover: same as primary hover

White (inverse)

• Default: bg #fff, color #000, border 1px solid #fff
• Hover: color var(--color-highlight-light), bg var(--color-neutral-60)

Tertiary (light overlay)

• Default: bg rgba(255,255,255,0.16), color #fff, padding 14px 28px, radius 50px, no border
• Hover: bg transparent, color var(--color-highlight-light)

6.2 Links

Two styles:

• Black link: default underline, hover var(--color-highlight-light)
• White link: default no underline, hover rebeccapurple

6.3 Forms

Search input:

• bg transparent, color #000, border 0px solid color(srgb 0.1 0.1 0.1), radius 60px

No explicit focus styles in data — likely styled via JS.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #5fc1f1;
  --color-secondary: #f15ff1;
  --color-highlight: #0e87eb;
  --color-highlight-light: color-mix(in srgb,#0e87eb 70%,#fff);
  --color-red: #dc362e;
  --color-green: #00bda5;
  --color-warning: #ffca30;
  --color-lightGrey: #959595;
  --color-nprogress: #f6668b;
  --color-action-default: #000000;
  --color-action-contrast: #ffffff;
  --color-neutral-20: color-mix(in srgb,#fff 20%,#000);
  --color-neutral-60: color-mix(in srgb,#fff 60%,#000);
  --color-neutral-70: color-mix(in srgb,#fff 70%,#000);
  --color-neutral-90: color-mix(in srgb,#fff 90%,#000);
  --color-mix-neutral-50: color-mix(in srgb,#fff 50%,#000);

  /* Typography */
  --font-family-primary: "Oracle", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans Regular", "Helvetica Neue", Helvetica, Arial;

  /* Spacing */
  --space-9: 9px;
  --space-10: 10px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-26: 26px;
  --space-30: 30px;
  --space-32: 32px;
  --space-36: 36px;
  --space-42-5: 42.5px;
  --space-46-8: 46.8px;
  --space-50: 50px;
  --space-70: 70px;
  --space-72: 72px;

  /* Border Radius */
  --radius-40: 40px;
  --radius-50: 50px;
  --radius-60: 60px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.15) 0px 2px 24px 0px;
}

8. AI Coding Assistant Prompt

# Patreon Design System Specification

You are a Patreon design expert. Build UIs matching their visual language exactly.

## Brand Context
Patreon’s design is minimal and creator-focused. Black-and-white foundation with selective color accents. Typography is oversized and clean, space is generous, shapes are rounded and friendly.

## Color Palette
- Primary Ink: #000000 — Body text, outlines, primary actions
- Secondary Neutral: color(srgb 0.8 0.8 0.8) — Background fills, dividers
- Pure White: #ffffff — Text on dark backgrounds, inverse buttons
- Primary Accent Blue: #5fc1f1 — CTAs, key interactive elements
- Secondary Accent Magenta: #f15ff1 — Secondary brand actions
- Highlight Blue: #0e87eb — Hover/focus states
- Red: #dc362e — Errors, destructive actions
- Green: #00bda5 — Success states
- Warning Yellow: #ffca30 — Alerts
- Light Grey: #959595 — Secondary text
- NProgress Pink: #f6668b — Loading indicators
- Neutral Greys (#adadad, #bababa, #cbcbcb, #c2c2c2) — Disabled UI, borders

## Typography
Font Family: Oracle, Noto Sans JP/KR/SC/TC, Noto Sans Regular, Helvetica Neue, Helvetica, Arial

Type Sizes:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 Hero | 250px | 250 | 0.98 | Homepage hero |
| H1 Large | 170px | 250 | 0.87 | Large headings |
| H1 | 72px | 250 | 1.10 | Section headings |
| H2 | 52px | 300 | 1.10 | Subheadings |
| H3 | 36px | 400 | 1.00 | Smaller headings |
| H4 | 34px | 400 | 1.20 | UI headings |
| Button | 18px | 350 | 1.10 | Action labels |
| Link | 18px | 350 | 1.10 | Inline links |
| Caption | 10px | 400 | 1.50 | Small labels |

## Spacing & Grid
Base: 8px grid
Scale: 9, 10, 14, 16, 18, 20, 24, 26, 30, 32, 36, 42.5, 46.8, 50, 70, 72px
Use these for padding, margins, gaps.

## Border Radius
- 40px — Buttons, modals
- 50px — List items, larger buttons
- 60px — Inputs
- 50% — Circular elements

## Shadows & Depth
Soft shadow: rgba(0,0,0,0.15) 0px 2px 24px — Use sparingly. Mostly flat design.

## Components

### Primary Button
Default:
- background: #000000
- color: #ffffff
- padding: 20px 28px
- border-radius: 40px
- border: 1px solid #000000
Hover: color: var(--color-highlight-light), background: var(--color-neutral-60)
Focus: transform: translateX(66%), color: var(--color-action)

### Secondary Button
Default: transparent bg, #000 text, border 1px solid #000
Hover: same as primary hover

### Inverse Button
Default: #ffffff bg, #000 text, border 1px solid #ffffff
Hover: color: var(--color-highlight-light)

### Tertiary Button
Default: rgba(255,255,255,0.16) bg, #fff text, padding 14px 28px, radius 50px
Hover: transparent bg, var(--color-highlight-light) text

### Links
Black link: underline default, hover highlight blue
White link: no underline default, hover rebeccapurple

### Input Fields
Search:
- Transparent bg
- #000 text
- 60px radius
- No border

## Layout & Responsive Rules
Breakpoints: 480px, 768px/769px, 960px/964px, 1120px, 1300px
Page padding adapts per breakpoint. Maintain 8px grid.

## Interaction Rules
- Transition timing: ~150ms ease for hover/focus changes
- Focus indicators: color changes + transforms
- No heavy animations — subtle shifts

## DO List
- Use ONLY colors from the palette
- Maintain 8px-based spacing
- Keep shapes rounded (40px+ radius)
- Oversize interactive text (18px+)
- Use Oracle for all text

## DON'T List
- Add shadows where not specified
- Mix sharp corners with rounded UI
- Use gradient backgrounds
- Undersize button text below 18px
- Introduce unapproved colors

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #000;
  color: #fff;
  padding: 20px 28px;
  border-radius: 40px;
  border: 1px solid #000;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-weight: 350;
  transition: background 150ms ease, color 150ms ease;
}
.btn-primary:hover {
  color: var(--color-highlight-light);
  background: var(--color-neutral-60);
}
.btn-primary:focus {
  transform: translateX(66%);
  color: var(--color-action);
}
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #000;
  padding: 20px 28px;
  border-radius: 40px;
  border: 1px solid #000;
}
.btn-secondary:hover {
  color: var(--color-highlight-light);
  background: var(--color-neutral-60);
}
```

### Input
```css
.input-search {
  background: transparent;
  color: #000;
  border-radius: 60px;
  border: none;
  padding: 0;
  font-family: var(--font-family-primary);
}
```

9. Summary

TL;DR — Patreon’s design system is stark, spacious, and creator-focused. Black-and-white foundation, oversized Oracle type, pill-shaped components, and tactical use of bright accent colors make it clean but not boring.

Brand Keywords: creator-minimalist, bold-type, pill-shapes, color-sparse, accessibility-conscious