Signal Orange
#ff6719Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Substack
substack.comWebsite preview
The design language
Substack reads like a well-worn newsroom dashboard — white canvas, warm near-black text, and one loud signal-orange that marks every act of creation. The visual hierarchy is built from density rather than decoration: thin gray rules separate feed items, avatars are small, metadata is muted, and the reader's eye is trained to find the orange CTA, the orange logo, the orange 'Subscribe' link, the orange 'Create' button. Surfaces stay flat and unbounded — no card shadows, no panel chrome — letting the typography (a compact system-ui chrome paired with a custom serif headline face) carry the editorial weight. The signature gesture is restraint in chrome and loudness in one color: a reading app that looks like a publishing tool.
Color palette
brand
neutral
Ink
#363737Primary text — body copy, headings, post titles, timestamps, author names; warm-shifted near-black instead of pure #000 for less aggressive reading
Paper
#ffffffPage canvas, card surfaces, input fields, nav background — the dominant surface, occupying the vast majority of the interface
Charcoal
#232525Secondary text and high-emphasis link hover state; deeper than Ink for code blocks and emphasis blocks
Stone
#777777Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Ash
#b6b6b6Hairline borders, button outlines, icon strokes, disabled control borders
Mist
#c8c8c8Divider lines, subtle icon backgrounds, skeleton placeholder fills
Cloud
#eeeeeeLight supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color
Slate
#5e5e5eDark mode surface accent or pressed button state — infrequently used but present in the token set
Black
#000000Icon strokes, image overlays, dark accent blocks in promo cards
Typography
Type scale
Minor Second (1.067) · 16px baseheading
32px · 500 · 1.24The quick brown fox jumps
heading-sm
24px · 500 · 1.25The quick brown fox jumps
subheading
20px · 400 · 1.6The quick brown fox jumps
text-19
19px · 400 · 1.2The quick brown fox jumps
body
15px · 400 · 1.54The quick brown fox jumps
text-14
14px · 700 · 1.43The quick brown fox jumps
text-13
13px · 400 · 1.54The quick brown fox jumps
caption
12px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
system-ui
- Weights
- 400, 500, 600
- Sizes
- 12, 13, 15, 19, 20px
- Line height
- 1.0–1.54
- Fallback
- -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Primary UI and body font — used for navigation labels, buttons, post body text, metadata, input fields, and all interface chrome. The compact 12-13px metadata and 15-19px body sizes create the dense newsroom feel. Weight 400 for body, 500 for nav items and button labels, 600 for emphasized post titles and section headers.
Additional typeface
Cahuenga
- Weights
- 500
- Sizes
- 24, 32px
- Line height
- 1.24, 1.25
- Fallback
- Charter, 'Iowan Old Style', 'Source Serif Pro', Georgia, serif
Branded display serif for product-level headings (sidebar headings, sign-up card titles, hero text). The medium weight and tight line-height give it editorial presence without feeling heavy; this is the only font that signals 'this is Substack' beyond the orange color.
Additional typeface
Spectral
- Weights
- 400
- Sizes
- 19px
- Line height
- 1.20
- Fallback
- Charter, 'Iowan Old Style', 'Source Serif Pro', Georgia, serif
Long-form post body serif — used inside reader views and feed post content for editorial readability. The slightly looser line-height (1.20) keeps reading paragraphs comfortable while maintaining the compact newsroom density.
Additional typeface
JetBrains Mono
- Weights
- 700
- Sizes
- 14px
- Line height
- 1.43
- Letter spacing
- -0.014em
- Fallback
- 'Fira Code', 'Source Code Pro', Menlo, Consolas, monospace
Code blocks and inline code within posts — the slight negative tracking (-0.014em) tightens the monospace for better visual alignment with surrounding serif text.
Additional typeface
-apple-system-ui-serif
- Weights
- 400
- Sizes
- 20px
- Line height
- 1.6
-apple-system-ui-serif — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 32px
- Card padding
- 20px
- Element gap
- 8px
Border radius
tags
9999pxcards
12pxinputs
12pxbuttons
9999pxSpacing scale
2px4px6px8px10px12px16px20px24px32pxGuidelines
Do
- Use #ff6719 exclusively for primary action buttons, the logo, and Subscribe links — it is the only chromatic color in the system and loses all signal power if applied to decorative elements
- Pair system-ui (weight 400 body, 500 UI labels, 600 titles) with Cahuenga (24-32px, weight 500) for any page-level headings
- Use 9999px border-radius for all buttons, tags, and pill inputs; use 12px for cards and nav items; never use values outside {4, 8, 12, 9999}px
- Separate feed items with 1px #eeeeee hairlines and 32px gaps — never use card shadows or colored backgrounds to create separation
- Use #363737 for all body and heading text; reserve #000000 for icon strokes and image overlays only
- Set page max-width to 1200px with a three-column layout: ~200px left nav, ~600px center feed, ~300px right sidebar
- Size metadata at 12-13px in #777777 and body text at 15-19px — the newsroom density is a defining feature, not a bug
Don’t
- Do not introduce any chromatic color beyond #ff6719 — no blues, greens, purples, or secondary brand colors; the system is monochrome + orange
- Do not add card shadows, elevation, or panel chrome to feed items — the flat hairline-divided feed is the layout
- Do not use #000000 as a background or primary text color — use #363737 (Ink) for text warmth and #232525 (Charcoal) for emphasis
- Do not use sharp corners (0-4px) on buttons or inputs — pills (9999px) and soft rounds (8-12px) are the only radius values
- Do not use Cahuenga for body text — it is a display serif for headings only; use Spectral for long-form post bodies and system-ui for UI chrome
- Do not set body line-height below 1.4 in the UI chrome — the compact density comes from small font sizes and tight spacing, not cramped leading
- Do not use gradients on buttons, cards, or surfaces — the only gradient in the system is the teal hero banner illustration
Components
Primary Action Button (Orange Pill)
Filled CTA — Create, Get started, Get the app, Subscribe confirmationBackground #ff6719, white text, system-ui weight 500 at 15px, padding 8px 20px, border-radius 9999px (fully pill-shaped). Inset highlight shadow rgba(255,255,255,0.2) on top edge gives a subtle pressed-paper feel. The dominant button — every page has exactly one or two.
Secondary Action Button (Gray Pill)
Ghost/secondary action — Sign in, Less prominent CTAsBackground #eeeeee, text #363737, system-ui weight 500 at 15px, padding 8px 20px, border-radius 9999px. No border, no shadow — the fill alone creates the hierarchy difference from the orange primary.
Outlined Pill Button
Tertiary action — Learn more, alternative flowsTransparent background, border 1px solid #b6b6b6, text #363737, system-ui weight 500 at 15px, padding 8px 20px, border-radius 9999px. Sits alongside the primary button in the hero card as the non-default option.
Left Sidebar Nav Item
Primary navigation entries — Home, Subscriptions, Chat, Activity, Explore, ProfileIcon (20px, stroke #363737) left of label, system-ui weight 500 at 15px, text #363737, vertical padding 6px, horizontal padding 12px, border-radius 8px. Hover state adds #f5f5f5 background. Active state (Home) may add left orange bar or orange text.
Hero Banner Card
Featured callout — onboarding, promotions, featured publicationsTeal/dark gradient background, border-radius 12px, padding 24px 32px, Cahuenga 32px heading in white, subtitle in #c8c8c8, orange primary + outlined secondary button row. This is the only gradient surface in the system.
Feed Post Card
Post entry in the main feedNo background or border — just vertical rhythm. Avatar 32px circle, author name (system-ui 15px weight 600 #363737) + timestamp (system-ui 13px #777777), post body text (Spectral 19px #363737), engagement row (heart/comment/share icons, count in #777777 at 13px). Cards separated by 1px #eeeeee hairline.
Subscribe Link
Inline call-to-action next to each postText only — 'Subscribe' in #ff6719, system-ui weight 500 at 15px, no underline, no button chrome. Appears at the top-right of each post card, opposite the author/timestamp row.
Right Sidebar Recommendation Card
Up next feed, "Log in or sign up" promoWhite background, border-radius 12px, padding 20px, no shadow. Title in Cahuenga 24px #363737, body in system-ui 15px #777777, orange primary button at bottom, optional thumbnail (40px) on feed items.
Search Input
Top of right sidebar — search publications and postsFull-width pill input, background #ffffff, border 1px solid #b6b6b6, border-radius 9999px, padding 8px 12px 8px 36px (left padding for search icon). Placeholder 'Search Substack' in #777777 at 13px.
Up Next Feed Item
Recommended reading in right sidebarHorizontal layout: thumbnail (64px, border-radius 8px) left, text block right. Publication name in system-ui 13px weight 500 #363737, headline in system-ui 15px weight 400 #363737, metadata (read time, likes, comments) in #777777 at 12px. No card chrome — separated by 12px vertical gap.
App Download Floating Button
Bottom-right sticky CTA for mobile appWhite background, system-ui 15px weight 500, border-radius 9999px, padding 8px 16px, subtle drop shadow rgba(0,0,0,0.1) 0px 4px 6px. The only element with a real drop shadow — signals it's floating above the page.
Engagement Action Row
Like, comment, share, download on each postInline icon + count pair, system-ui 13px #777777, 20px icons (stroke #777777), 8px gap between icon and count, 16px gap between actions. No buttons — the entire row is a tappable area.
AI Annotation Badge
App/integration tag on posts (e.g., 'Cursor APP 41 mins')Small inline badge — icon (16px) + label (system-ui 13px weight 500 #363737) + timestamp (system-ui 13px #777777), separated by 8px gaps, sitting above highlighted/annotated text in the post body.
Surfaces & elevation
Level 1
Canvas
#ffffffPage background — the dominant surface
Level 2
Recessed
#eeeeeeSecondary surface — pill button backgrounds (Sign in), input resting states, subtle hover washes
Level 3
Divider
#c8c8c8Hairline separators and icon placeholder backgrounds
Substack avoids elevation almost entirely — there are no card shadows, no modal scrims, no elevated panels. The only shadows are the subtle inset highlights on filled buttons (to add tactile dimension) and the single drop shadow on the floating 'Get app' button (to signal it's a fixed overlay). All depth is achieved through background color differentiation (#ffffff → #eeeeee) and 1px hairline rules, keeping the interface feeling like a newsroom layout — flat, scannable, paper-like.
Buttons (inset highlight)
rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset
Floating App Button
rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px
Layout & imagery
Layout
Three-column desktop layout: fixed left sidebar (~200px, icon + label nav, sticky), center feed (max-width ~600px, vertically scrolling post list), fixed right sidebar (~300px, search + recommendations + sign-up). The center feed is the editorial core — no card chrome, just posts stacked with hairline dividers and 32px section gaps. Hero banner sits at the top of the feed as a single full-width card. The left sidebar contains the brand logo (orange stacked-lines mark), six nav items, and a full-width orange 'Create' button at the bottom. The right sidebar has a search input, a sign-up card, and an 'Up next' reading list. Navigation is minimal — no top bar, no breadcrumbs; the sidebar IS the nav. Content density is high: posts use 12-13px metadata and 15-19px body text, creating a newspaper-feed rhythm rather than a card-grid marketplace feel.
Imagery
Photography is user-generated content (author avatars, publication thumbnails, post images) — Substack provides no decorative photography of its own. The hero card uses a teal-to-green gradient with abstract illustration elements (geometric shapes, stylized pen/note objects) as background. Post thumbnails in the right sidebar are small (64px), contained with 8px radius, and function as reading-list previews. The overall visual language is text-dominant — the interface is a canvas for reading, with imagery serving as small visual anchors rather than atmosphere.
Design notes
Agent Guide
## Quick Color Reference - Text: #363737 (Ink) - Background: #ffffff (Paper) - Muted text: #777777 (Stone) - Border: #b6b6b6 (Ash) - Accent/Brand: #ff6719 (Signal Orange) - primary action: no distinct CTA color ## Example Component Prompts No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. **Feed Post Card**: No card background. 32px circular avatar, author name in system-ui 15px weight 600 #363737, timestamp in system-ui 13px #777777, post body in Spectral 19px #363737 line-height 1.2. Engagement row below: heart/comment/share icons (20px, stroke #777777) with counts in system-ui 13px #777777, 16px gap between actions. 'Subscribe' link in #ff6719 at top-right. 3. **Hero Banner Card**: Teal gradient background, border-radius 12px, padding 24px 32px. Cahuenga 32px weight 500 heading in white, subtitle in system-ui 15px #c8c8c8. Two buttons: orange filled 'Get started' pill + outlined 'Learn more' pill (border 1px #b6b6b6, text #363737). 4. **Left Sidebar Nav Item**: 20px icon (stroke #363737) + label in system-ui 15px weight 500 #363737, padding 6px 12px, border-radius 8px. Full-width orange 'Create' button at bottom: #ff6719 background, white text, 9999px radius, 8px 20px padding.
Similar brands
Medium
Same editorial reading-app layout with three-column desktop structure, serif body text for long-form posts, and minimal chrome that lets content dominate
Twitter/X
Same three-column feed layout with fixed sidebars, compact metadata-dense post rows, and a single accent color for primary actions (though Twitter uses blue instead of orange)
Same reading-list metaphor with right-sidebar recommendations, thumbnail + headline list items, and a flat white interface that treats typography as the primary visual asset
Ghost
Same newsletter-publisher visual language with serif headlines, pill-shaped CTAs, and a monochromatic interface where one accent color carries all interactive weight
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
