A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
12type steps
2radius steps
18pxspacing base
Substack, in one page
Substack's iOS app is built around a single belief: the writing is the product, and the writer's voice deserves a page that looks like a fine magazine, not a feed. Open any post and you land on a clean white reading surface — a serif headline set tight, an italic serif dek, a compact byline with the publication's logo and subscriber count, and then long-form body text in a generous reading serif at 18pt with 1.65 line-height. There are no cards around the prose, no boxes, no shadows in the reading column. The chrome is deliberately minimal and editorial: the only saturated color in the entire experience is Substack Orange (#FF6719), and it is rationed almost entirely to one job — the Subscribe button. Substack monetizes writers, so the orange Subscribe CTA is the single most important pixel in the app and everything else recedes to let it land.
The signature screen is the post reader: publication row (logo tile + name + subscriber count), serif title, italic serif subtitle, byline with avatar and "X min read", body prose with inline orange-left-border pull-quotes, a sticky Subscribe card (often a paywall break — "Keep reading with a subscription") with the orange button and the price line, and a bottom action bar (Like ♥ in orange, Comment, Restack, Share). The second signature surface is the Inbox: a chronological list of new posts from every publication the reader subscribes to — a small square publication thumbnail, an uppercase orange publication name, a serif post title, byline + read-time meta, and an orange unread dot. Inbox is the home tab; it is an email-replacement reading queue, not an algorithmic feed.
The color system is intentionally sparse. White paper carries the reading experience; near-black serif ink does the words; Substack Orange is the brand and the conversion; a single link blue (#4A6FE3) handles inline hyperlinks; everything else is neutral grey. The typography is the design: a high-quality reading serif (Spectral / Source Serif family) for everything the reader *reads* — titles, deks, body, pull-quotes — and a clean grotesque (Inter / system) for the chrome the reader *operates* — buttons, labels, the tab bar, metadata. The app has a Reader (light) and a Dark theme; the dark theme softens the page to charcoal #121212 but the orange never changes — it is the one constant signal.
Key Characteristics:
- White reading surface (
#FFFFFF) light / soft charcoal (#121212) dark — a magazine page, not a feed - Serif everything-you-read (title, dek, body, pull-quote); sans everything-you-operate (buttons, tabs, meta)
- Substack Orange (
#FF6719) rationed almost entirely to the Subscribe CTA — the one conversion - Long-form reading body: serif 18pt, 1.65 line-height, generous measure — built for 18-minute reads
- Sticky Subscribe card / paywall break with orange button + price line ("$8/month · $80/year")
- Inbox as home — a chronological subscription queue with orange publication labels + unread dots
- Publication row: logo tile + name + subscriber count — the publication is the brand, not Substack
- Pull-quotes with a 3pt orange left border, italic serif
- Bottom action bar: Like (orange heart) / Comment / Restack / Share
- Discover, Notes (a short-form companion feed), and Profile complete the tabs
- Restraint: one orange, one link blue, neutral greys — no decorative color anywhere
Do's and don'ts
Do
- Make the post reader the product — a clean white page, serif prose, no boxes
- Set everything-you-read in a reading serif (Source Serif 4 / Spectral); everything-you-operate in Inter
- Body at 18pt with 1.65 line-height and a ~24pt editorial measure — built for long reads
- Make the dek/subtitle italic serif — the editorial-magazine signal
- Ration Substack Orange (
#FF6719) to the Subscribe CTA, active tab, unread dot, liked heart, pull-quote rule — nothing else - Use the orange-tint Subscribe card as the one tinted block; stand it out by color, not shadow
- Make Inbox the home tab — chronological subscription queue, not an algorithm
- Use the 3pt orange left border for pull-quotes
- Keep the Subscribe button a single instance per post (the sticky/paywall card)
- Hold the orange identical in light and dark — it is the one constant signal
Don't
- Don't put cards, borders, or shadows around the reading prose — it flows on bare paper
- Don't use pure black for body ink — warm near-black
#1F1F1Fis correct - Don't use pure black for dark mode — soft charcoal
#121212 - Don't set the post body in a UI sans — the article is serif
- Don't add a second accent color — orange + one link blue + neutral greys only
- Don't make comments serif — comments/Notes are conversation chrome, set in Inter
- Don't scatter orange decoratively — it must mean "subscribe / active / new / liked"
- Don't make Inbox algorithmic — it is a chronological reading queue (email replacement)
- Don't duplicate the Subscribe button as decoration — one per post, where conversion happens
- Don't animate the reading column decoratively — quiet motion; the read-progress line is the only ambient motion
- Don't add a Material tint pill to the active tab — it is glyph fill + orange
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Substack design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Substack Orange: #ff6719
- Orange Pressed: #e5560e
- Orange Tint Surface: #fff7f2
- Orange Tint Border: #ffd9c2
- Link Blue: #4a6fe3
- Paper White: #ffffff
- Reading Ink: #1f1f1f
- Title Ink: #1a1a1a
- Subhead Ink: #57534e
- Meta Grey: #8a8a8a
Type:
- families: Spectral, Reading Serif, Inter, Georgia
- scale: 10, 11, 12, 13, 14, 15, 17, 18, 21
- weights: 400, 600, 700
Shape:
- radius: 6, 8
Spacing: 18
Rules:
- Make the post reader the product — a clean white page, serif prose, no boxes
- Set everything-you-read in a reading serif (Source Serif 4 / Spectral); everything-you-operate in Inter
- Body at 18pt with 1.65 line-height and a ~24pt editorial measure — built for long reads
- Make the dek/subtitle italic serif — the editorial-magazine signal
- Ration Substack Orange (`#FF6719`) to the Subscribe CTA, active tab, unread dot, liked heart, pull-quote rule — nothing else
- Use the orange-tint Subscribe card as the one tinted block; stand it out by color, not shadow
Avoid:
- Don't put cards, borders, or shadows around the reading prose — it flows on bare paper
- Don't use pure black for body ink — warm near-black `#1F1F1F` is correct
- Don't use pure black for dark mode — soft charcoal `#121212`
- Don't set the post body in a UI sans — the article is serif
- Don't add a second accent color — orange + one link blue + neutral greys only
- Don't make comments serif — comments/Notes are conversation chrome, set in Inter
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Brand & Interactive)
- Substack Orange (
#FF6719): The single brand + conversion color — Subscribe button, active tab, unread dot, liked heart, publication label, pull-quote border. Held identical light AND dark. - Orange Pressed (
#E5560E): Pressed state of the Subscribe button and orange controls. - Orange Tint Surface (
#FFF7F2light /#2A1C12dark): Subscribe-card / paywall background wash. - Orange Tint Border (
#FFD9C2light /#5C3A24dark): Subscribe-card hairline. - Link Blue (
#4A6FE3): Inline hyperlinks in body prose only — the one non-orange accent.
Reading Surface (Light — "Reader" theme)
- Paper White (
#FFFFFF): The reading page. - Reading Ink (
#1F1F1F): Body prose — near-black, warm-neutral, not pure black. - Title Ink (
#1A1A1A): Titles and headers. - Subhead Ink (
#57534E): Dek / subtitle, warm grey. - Meta Grey (
#8A8A8A): Byline meta, captions. - Hairline (
#ECECEC): Byline and section rules.
App Surfaces (Light)
- Surface Subtle (
#F7F6F4): Search field, grouped rows. - Divider (
#E7E5E1): List dividers.
App Surfaces (Dark)
- Dark Canvas (
#121212): Reading page + app background in dark — soft charcoal, NOT pure black. - Dark Surface 1 (
#1B1B1B): Cards, the Subscribe card base, rows. - Dark Surface 2 (
#262626): Pressed rows, search field. - Dark Divider (
#2E2E2E): Hairline rules on dark.
Text
- Text Primary Light (
#1A1A1A): Chrome labels, titles. - Text Secondary Light (
#6B6B6B): Metadata, captions. - Text Primary Dark (
#EDEDED): Body + chrome on dark. - Text Secondary Dark (
#A6A6A6): Secondary text on dark. - Text Tertiary Dark (
#6E6E6E): Disabled / overline on dark.
Semantic
- Error Red (
#D93025): Unsubscribe confirm, payment error. - Success Green (
#1A8917): "Subscribed" / saved toast. - Like Orange (
#FF6719): Liked-heart fill (reuses brand orange). - Warning Amber (
#E5560E): Non-blocking warnings (reuses pressed orange).
Type scaleRead the full spec
Font Family
- Reading Serif: Substack sets long-form in a high-quality reading serif. Use
Source Serif 4(Frank Grießhammer / Adobe, SIL OFL — an optical-size transitional serif) as the reference face for titles, deks, body, and pull-quotes;Spectral(Production Type, SIL OFL) is an equally faithful alternative. The reading face is the brand's editorial voice. - UI / Chrome:
Inter(Rasmus Andersson, SIL OFL) — a neutral humanist grotesque; used for buttons, the tab bar, labels, byline meta, and all chrome. - iOS Fallback: serif →
Georgia/'Times New Roman'; sans →-apple-system, 'SF Pro Text'. - Reader font/size is user-adjustable: the reader can pick serif/sans + text size in reading settings — respect it globally on the post body.
- Rationale: Substack competes with magazines and email newsletters — body must read like editorial print; chrome must be invisible and neutral so the orange Subscribe is the only thing that pops.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Source Serif 4 | 30pt | 700 | 1.2 | -0.4pt | "Inbox", "Discover" large nav title |
| Post Title | Source Serif 4 | 26pt | 700 | 1.22 | -0.3pt | The hero post headline |
| Section Heading (in post) | Source Serif 4 | 22pt | 700 | 1.3 | -0.2pt | H2 within a post body |
| Pull Quote | Source Serif 4 | 21pt | 600 italic | 1.4 | 0pt | Orange-left-border quote |
| Reading Body | Source Serif 4 | 18pt | 400 | 1.65 | 0pt | The long-form prose — user-scalable |
| Subtitle / Dek | Source Serif 4 | 17pt | 400 italic | 1.4 | 0pt | The post's italic deck under the title |
| Button | Inter | 15pt | 700 | 1.0 | 0pt | "Subscribe", primary CTAs |
| Label / Publication | Inter | 14pt | 600 | 1.3 | 0pt | Publication name, list labels |
| Metadata | Inter | 13pt | 400 | 1.4 | 0pt | "Mario Gabriele · 18 min read · May 14" |
| Caption | Inter | 12pt | 400 | 1.4 | 0pt | Subscriber count, footnote |
| Publication Eyebrow | Inter | 11pt | 700 | 1.0 | 0.4pt | UPPERCASE publication label in inbox |
| Overline | Inter | 11pt | 700 | 1.0 | 0.8pt | "FROM THE GENERALIST" all-caps |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
Principles
- Serif reads, sans operates: anything the reader *reads* (title, dek, body, pull-quote, section heads) is the serif; anything the reader *acts on* (buttons, tabs, labels, meta) is Inter.
- Long-form first: body is 18pt at 1.65 line-height with a generous measure — designed for sustained 15–20 minute reads, not skimming.
- The dek is italic serif: the subtitle/deck under a title is italic — an editorial convention that signals "magazine".
- Numerals are sans: subscriber counts, prices, read-times use Inter tabular figures.
- Reader controls size: the post body must honor the user's chosen reading text size and face globally.
- Dynamic Type first-class: titles, deks, body, section heads scale; tab labels, eyebrows, captions stay fixed.
Components and layoutRead the full spec
Buttons
Subscribe Button (the conversion)
- Shape: Rounded rectangle, 6pt corner radius, full content width in cards
- Height: 42–48pt
- Background:
#FF6719(Substack Orange) - Text:
#FFFFFF, Inter 15pt weight 700 - Pressed: background
#E5560E+ scale 0.98 - This is the single most important element in the app — it appears once per post (in the sticky/paywall card) and on publication pages; never duplicated as decoration
Subscribed / Outline State
- Background: transparent
- Border: 1pt
#6B6B6Blight /#A6A6A6dark - Text:
#1A1A1Alight /#EDEDEDdark with a leading check, Inter 14pt weight 600 - Corner radius: 6pt
- Pressed: background
#F7F6F4/#262626
Ghost Button ("Share", secondary)
- Background:
#F7F6F4/#262626 - Border: 1pt divider
- Text: Inter 13pt weight 600
- Corner radius: 6pt
Text / Link Button ("Continue reading", "See all")
- Font: Inter 14pt weight 600
- Color:
#4A6FE3 - No underline
Post Reader (the core surface)
The reading view is Substack's fundamental surface.
- Background:
#FFFFFF(Reader) /#121212(Dark) - Publication row: 34pt logo tile (6pt radius) + name (Inter 14pt/600) + "X subscribers" (12pt grey)
- Title: serif 26pt/700, tight leading, -0.3pt tracking
- Dek: italic serif 17pt/400,
#57534E - Byline: 26pt avatar + "Author · Date · X min read" (Inter 13pt grey), with a 0.5pt hairline below
- Body: serif 18pt/400, 1.65 line-height, ink
#1F1F1F; inline links#4A6FE3underlined - Pull-quote: serif 21pt/600 italic, 3pt
#FF6719left border, 18pt left padding - Images: full-bleed-to-measure, optional italic serif caption 13pt grey
- Section headings: serif 22pt/700
- No cards/boxes/shadows in the reading column — prose flows on bare paper
Subscribe Card / Paywall Break
- Background:
#FFF7F2(orange tint) /#2A1C12dark - Border: 1pt
#FFD9C2/#5C3A24, 10pt corner radius, 14pt padding, centered - Heading: serif 15pt/700 ("Keep reading with a subscription")
- Subtext: Inter 12pt grey
- Orange Subscribe button (full width, 42pt, 6pt radius)
- Price line: Inter 11pt grey ("$8/month · $80/year · cancel anytime")
- Often inserted mid-post as the paywall cut (free preview above, blurred/locked below)
Inbox Row
- Layout: 56pt square publication thumbnail (6pt radius) + content column + unread dot
- Publication eyebrow: Inter 11pt/700 UPPERCASE
#FF6719, 0.4pt tracking - Post title: serif 15pt/700, 1.3 line-height, 2-line clamp
- Meta: Inter 12pt
#6E6E6E("Author · X min · date") - Unread dot: 8pt circle
#FF6719 - Row divider: 1pt divider; full-row tap → post reader
- Inbox is the home tab — chronological, NOT algorithmic
Navigation
Post Top Bar
- Height: 44pt + safe area
- Leading: back chevron
- Trailing: Share icon + ⋯ overflow (Mute publication, Copy link, Report)
- Background: paper/charcoal, 0.5pt bottom hairline; the publication name can appear centered on scroll
Bottom Tab Bar
- Height: 50pt + safe area
- 4 tabs: Inbox, Discover, Notes, Profile
- Icon size: 22pt; labels Inter 10pt weight 600
- Active:
#FF6719(filled glyph); inactive:#9A9A9A/#6E6E6E - No tint pill — active is glyph fill + orange
- Background: paper / charcoal, 0.5pt top hairline
Input Fields
Search (Discover)
- Height: 40pt
- Background:
#F7F6F4/#262626 - Corner radius: 8pt
- Leading
magnifyingglass16pt grey - Placeholder: "Search Substack" Inter 14pt grey
- Focus: 1.5pt
#FF6719border
Comment Composer
- Bottom sheet; multiline Inter 15pt input (comments are sans, not serif — they are chrome/conversation, not the article)
- "Post" orange button in the sheet header
- Threaded replies indented 24pt
Distinctive Components
Publication Header (Publication page)
- Cover band + large logo + publication name (serif 26pt) + tagline (italic serif) + subscriber count
- A prominent orange Subscribe button + "X posts" / "About" tabs
Sticky Subscribe / Paywall Cut
- The free preview fades into a locked section behind the Subscribe card — the central monetization moment
Pull-Quote
- Italic serif with the signature 3pt orange left rule — the most recognizable in-post element
Action Bar (post footer)
- Like (orange heart, count), Comment (count), Restack (Notes share), Share
- Like fills orange with a heart-pop on tap
Notes Card (Notes tab)
- Short-form: avatar + name + handle + short text + Like/Reply/Restack — a Twitter-like companion feed, still neutral with orange accents
Subscription Tier Selector
- Free / Monthly / Annual cards; the recommended tier ringed in orange with an orange-tint background
Unread Dot
- 8pt orange dot on inbox rows and on the Inbox tab badge — the "you have new reading" signal
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Reading inset 20pt; inbox thumbnails 52pt |
| iPhone 13/14/15 | 390pt | Standard layout; reading inset 24pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected by post top bar |
| iPhone 15/16 Pro Max | 430pt | Wider measure; larger title |
| iPad (portrait) | 768pt | Centered reading column max ≈ 680pt; inbox single wide list |
| iPad (landscape) | 1024pt+ | Two-column: inbox list + post reader |
Dynamic Type
- Post title, dek, body, section heads, pull-quotes: full scale, plus the in-app reading-size control as an additional multiplier
- Tab labels, publication eyebrow, captions, overlines: FIXED (layout-sensitive)
- Inbox post titles scale modestly with body text
Orientation
- Reader rotates; iPad landscape shows inbox + reader side by side
- Inbox reflows; thumbnails stay fixed
- Sheets and the Subscribe card re-anchor on rotation
Touch Targets
- Subscribe button: 44pt tall minimum (the most important target — never smaller)
- Action-bar items (Like/Comment/Restack/Share): 44pt hit
- Inbox row: full-row tap, 72pt+ tall
- Tab bar icons: 22pt glyph, 49pt hit
Safe Area Handling
- Reader: prose respects safe area; the read-progress line hugs the very top safe-area edge
- Top bar respects Dynamic Island
- Bottom: tab bar + home indicator respected; the sticky Subscribe bar sits above the home indicator
- Sides: 24pt reading inset, 16pt chrome inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-substack {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #121212;
--heading-color: #121212;
--link-color: #c84300;
--link-hover-color: #953200;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(18,18,18,0.06);
--card-hover-shadow: 0 6px 18px rgba(18,18,18,0.12);
--header-bg: #121212;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #656565;
--button-bg: #ff6719;
--button-text-color: #000000;
--button-hover-bg: #e54e00;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #121212;
--button-secondary-hover-bg: #e3e3e3;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #121212;
--base-font: var(--font-serif);
--heading-font: var(--font-inter);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- quora 84.0%
- crunchyroll 83.3%
- yelp 81.1%
- coffee meets bagel 80.4%
- sanu 78.1%
Where this came from
- Source document
ios/design-md/misc/substack/DESIGN.md· 23.9 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.