What is Substack's primary brand color?

Substack runs a single saturated voltage. The orange is `#ff6719` — an OKLCH lightness of 0.70 with chroma 0.20 at hue 42 — and it carries the wordmark, the primary CTA fill, accent chip borders, and the tertiary-accent button background. It appears 47 times on the homepage across text (18), border (18), and background (11). There is no secondary brand color, no gradient extension, and no fade. A second saturated value (`#0083d5` sky blue) handles inline link text and that is the only other chromatic moment in the system.

What typography does Substack use, and what should I substitute?

Two families do the work. Cahuenga (a contemporary serif) carries display headlines at 24px / weight 500 with 30px line-height and the larger 32px / 39.68px tier for the hero. UI runs system-ui across 13px, 15px, and 17px in weights 400, 500, 600, and 700 — every nav link, button label, post-card title, body paragraph, and metadata line uses the system stack with no custom UI sans loaded. If Cahuenga is unavailable, Source Serif 4, Newsreader, Tiempos Text, or Spectral substitute cleanly at the published sizes — match the 500 weight rather than dropping to 400, since the serif is held at semibold to compensate for the modest 24–32px display range.

Why does Substack mix pills with 8px cards?

The system uses four distinct radii — 9999px for fully rounded chips and the primary CTA, 12px for elevated post cards and the publication-detail mini-cards, 8px for buttons and form inputs, and 4px for the smallest detail surfaces like the orange notification badge. Each radius marks a different surface class: pills are interactive controls, 12px is a content container, 8px is a labeled control, and 4px is a microsurface. There is no 16px, no 20px, no 24px — the binary jump from 12px straight to 9999px keeps the post-stream feed visually anchored on cards while letting the CTA read as a chip rather than another box.

How does Substack handle elevation?

The system uses hairline-only elevation. A 1px `#eeeeee` divider — the third-most-frequent color on the page with 47 background occurrences — carries every section break, every post-card boundary, and every comment thread separator. There are no box shadows on the canvas, no atmospheric blurs, no surface ladders. Shadows appear only inside one published gradient (the green publication-detail block at the page floor), and even there the shadow is rendered as a flat dark fill rather than a soft blur. The post-stream feed reads as a single continuous surface with hairlines drawing the cells, which is the inverse of a SaaS dashboard where every card floats.

Can I use this DESIGN.md to build a subscription-publishing React app?

Yes. Feed the file to Claude, Cursor, or any agent that reads structured design tokens and it reproduces Substack's voice — white feed canvas, single orange voltage held to one role, Cahuenga serif at subhead scale, system-ui UI, hairline dividers between every post. The spec captures the full token vocabulary, the post-card and comment-thread component definitions, and the orange-on-white CTA chrome. The 18 component entries cover the top nav, hero cluster, primary button, post card, comment row, publication-detail mini-card, footer rail, and metadata roles. The reader-app surfaces (article reading view, paywall flow, podcast player, video embed) are out of scope — those live on different pages with their own type ladders.

What's missing from this DESIGN.md spec?

A handful of pieces are documented in the Known Gaps section. The article-reading surface uses a different serif tier (Spectral or `-apple-system-ui-serif` at 17px with 28px leading) that appears in the extraction but is not part of the homepage token set. The dashboard surface for writers, the paywall checkout flow, and the dark-mode reader inversion are not in scope. Motion timings for the hover states are not captured in the extracted CSS, and the publication-detail page templates that creators customize per Substack carry their own per-publication color overrides that bypass these tokens.

Substack Design System

Substack's homepage as a DESIGN.md file.

About Substack DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source substack.com

News & Publishing

Substack's homepage is a feed of posts dressed as a marketing page. The canvas is pure white, the ink is a warm near-black ("#363737"), and the entire identity hangs on a single warm orange ("#ff6719") that does the work of wordmark, primary button fill, accent border, and the kicker chip beneath the hero. There is no gradient mesh, no dark hero section, no abstract product illustration loop — the page below the fold is the platform itself, rendered as a vertical column of real posts with avatars, reply threads, and emoji reactions. The marketing surface and the product surface are the same surface.

This DESIGN.md file packages the homepage system into a structured spec: 19 color tokens covering the orange voltage, the four-step gray ladder from `#363737` ink down to `#eeeeee` hairline, and the single sky-blue link color, 10 typography tokens spanning Cahuenga serif (20–32px) and system-ui (13–17px), a four-step radius scale where the pill (`9999px`), the 12px card, the 8px button, and the 4px detail each own a distinct surface class, an 8-step spacing scale built on a strict 4px-and-8px unit, and 18 component specifications covering the top nav, hero cluster, primary orange button, post card, comment thread row, and the publication-detail mini-cards. The format follows the Google Labs DESIGN.md specification.

Feed the file to Claude, Cursor, or any agent that reads structured tokens and it reproduces Substack's exact voice — white reading-feed canvas, warm orange voltage held to one role, near-black ink at weight 500 for serif display, system-ui sans for every UI label. Where most subscription brands lean on a chromatic hero gradient and a 64px display headline, Substack commits the homepage to a vertical post-stream rendered at reading-body type sizes — that decision to show the product instead of describing it is the design. Reference the tokens directly in Tailwind config, paste the hex values into CSS variables, or use the spec as an audit checklist when reviewing whether a publishing surface looks like a marketing page or a feed.

What makes it distinct

Single orange voltage#ff6719 used as the only saturated brand color, carrying the wordmark, primary CTA fill, and orange chip surfaces with zero gradient extension
Cahuenga serif at 24–32px weight 500a literary serif treated at subhead scale rather than the 80px+ billboard most subscription platforms reach for
Near-black ink #363737 over pure whitenot pure black, a warm dark gray that sits 8 points off black to soften the ink against long reading sessions
Pill-and-card binary9999px chips for tags and primary buttons sit alongside 8px and 12px cards, with no 16px or 20px middle radius
Hairline-only elevationa 1px #eeeeee divider carries every section break in place of shadows, with zero gradient surfaces anywhere on the page

Live at substack.com

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

substack.com

Explore Substack

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.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Substack design system FAQ

Common questions about Substack'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.

Substack — official site

The subscription publishing platform itself — visit to see the post-stream homepage and orange voltage in motion.

The DESIGN.md specification

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

Use Substack in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→