What is Patreon's primary brand color?

The redesigned Patreon marketing site wires --color-primary to #5fc1f1, a soft sky blue, and --color-highlight to a deeper #0e87eb. The legacy coral that defined Patreon for years does not appear on this captured page. The sky-blue carries one major above-the-fold band — the 'Complete creative control' section sits on a #5fc1f1 fill — and a quartet of pastel variants (#b4d7ff, #94bbff, #71a0ff, #4a87ff) populates background washes and panel fills. The structural action color, wired as --color-action, is pure black #000000; primary CTAs are black-fill rather than brand-color-fill, which keeps the brand-blue at the band level.

What typeface does Patreon use, and what should I use as a substitute?

Patreon runs Oracle across every typographic tier — a contemporary geometric grotesk with a long Cyrillic and CJK fallback chain (Noto Sans JP, KR, SC, TC). The display ladder tops out at 187.5px / weight 250 with -11.25px negative tracking on the hero h1 ('Where podcasts grow'), drops to 127.5px / 250 / -7.65px on the h2 ('Complete creative control'), and lands at 22px / 350 for body copy. The weight ladder is 250 / 350 / 400 / 500 — no 600 or 700 anywhere. The closest open-source substitute is Inter at the same weights with display tracking tightened to -0.06em on the 187px tier; General Sans is a closer match in feel but not free. The aggressive negative tracking is the move to preserve.

Why does Patreon use whole blue bands instead of a single accent?

The chromatic strategy is band-as-voltage rather than accent-as-voltage. Each section of the page sits on a single saturated color — full-bleed creator photograph, sky-blue #5fc1f1 fill, cream wash, brown-photograph wash, black band — and the type sits on top in either pure white or pure black depending on the band's contrast. There is no held-in-reserve cobalt-on-white CTA pattern; the page reads as a sequence of magazine spreads, each spread carrying its own ground. The pastel quartet (#b4d7ff, #94bbff, #71a0ff, #4a87ff) populates secondary washes and inline panel fills inside these bands.

What is Patreon's corner-radius philosophy?

The dominant captured radius is 30px (frequency 15), used on cards, panel bands, the floating creator-credit chips, and the primary CTA. A 37.5px radius appears on three larger surfaces. Avatar chips and circular badges sit at 50% radius (frequency 6) for full circles. There is no 4px, 8px, 12px, or 16px middle tier — the system jumps from 0px (full-bleed photography) to 30px (every UI surface) to 50% (avatar circles). The contrast between the editorial-thin typography and the soft 30px rounding is the system's main warmth signal.

Can I use this DESIGN.md to build my own creator-platform marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Patreon's specific moves: full-bleed creator photography as canvas, ultra-thin Oracle display at 187px with aggressive negative tracking, sky-blue band fills instead of single-accent voltage, black-fill primary CTAs with white text, 30px default radius across cards and buttons, and the 250-500 weight ladder. The token references resolve cleanly; every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move that needs the underlying photography to work: the magazine-cover composition only succeeds when the creator portraits themselves are art-directed at studio quality.

Patreon Design System

Patreon's redesigned marketing site runs ultra-thin Oracle at 187.5px / weight 250 across full-bleed creator portraits, with sky-blue washes painting entire vertical bands.

About Patreon DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source patreon.com

Social & Community

Patreon's redesigned marketing site reads like the cover of a print magazine. The above-fold hero is a full-bleed photograph of two creators in a podcast studio — recording booth, soft warm-toned lighting, gear visible in the frame — with the headline "Where podcasts grow" overlaid across the lower third at 187.5px / weight 250 in pure white. The letter-spacing is set at -11.25px so the characters almost touch; the line height (183.75px) sits below the size to lock the headline as a single visual block. Below the fold, the page alternates between four more full-bleed creator portraits (musicians, podcasters, illustrators in their studios) and chromatic interstitial bands — pale cream "Creativity / Powered by fandom" at editorial display size, a sky-blue "Complete creative control" band on #5fc1f1, a desaturated brown landscape-photograph band, and a closing "Creators. Fans. Nothing in between" black band. The historic Patreon coral does not appear anywhere on this captured page.

The DESIGN.md file packages the redesigned system into a machine-readable spec for React tooling. Inside: 18 color tokens — a structural binary of pure black `#000000` (wired as `--color-action`, `--color-neutral-0`, `--color-black`) and pure white `#ffffff` (the dominant text color at 257 occurrences, plus the canvas background), a sky-blue voltage `#5fc1f1` wired as `--color-primary`, a deeper highlight blue `#0e87eb` wired as `--color-highlight`, a quartet of pastel sky-blues that populate band backgrounds, and a small set of semantic tones (`#dc362e` red error, `#00bda5` green success, `#ffca30` yellow warning, `#f6668b` nprogress pink). 12 typography tokens running Oracle (a contemporary geometric grotesk) at weights 250-500, with 187.5px at the top of the display ladder and 13.5px / 350 at the bottom of the body tier. A 30px-default radius scale with no 8px or 12px middle, and 18 components covering the editorial-thin hero heading, the band-fill section headings, the black-fill primary CTA, the photo-overlay caption card, and the avatar-chip creator credit.

Feed this file to an AI coding tool and it reproduces Patreon's specific moves: full-bleed creator photography as canvas, ultra-thin Oracle display at 187.5px with -11.25px tracking, sky-blue band fills replacing the legacy single-accent voltage, black-as-CTA rather than brand-color-as-CTA, 30px default radius with no middle tier, and a 250-500 weight ladder that never reaches 600+. The one move worth borrowing for any creator-economy or membership product: the editorial-thin display treatment. The 187.5px / 250 / -11.25px headline reads like a Vogue cover, which is precisely the point — Patreon is positioning creators as the talent, the marketing surface as the magazine.

What makes it distinct

Editorial-thin displayOracle at 187.5px / weight 250 with -11.25px negative tracking ('Where podcasts grow') is the loudest typographic moment, closer to a fashion magazine than a SaaS hero
Sky-blue voltage as band#5fc1f1 paints the entire 'Complete creative control' band edge-to-edge, replacing the legacy coral as the chromatic brand moment
Black as action color--color-action #000000 carries primary CTAs; the brand-blue voltage stays at the band level and never doubles as a button fill
Single typeface across every tierOracle does display, heading, body, button, and caption work, with weight 250 / 350 / 400 / 500 as the entire weight ladder
30px default radiusbuttons, cards, and panel-bands all round at 30px; the next step up is full circle for avatar chips

Live at patreon.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

patreon.com

Explore Patreon

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Patreon design system FAQ

Common questions about Patreon's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Patreon — official site

Patreon's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.