---
title: "Substack design system"
variant: extended
source: https://substack.com/
captured_at: 2026-10-12
theme: light
industry: media
generator: Design DNA (https://four.wiralomi.com/style/substack-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Substack · Design System

> Independent voices, in a calm editorial feed

**Theme:** light · **Industry:** media · **Source:** https://substack.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Substack pairs a restrained white interface with a warm orange action color and a flowing feed of independent publishing. A fixed-feeling navigation rail, central stream, and sign-up panel make discovery and subscription the primary actions.

## North star

Keep the interface quiet and readable so creator content leads, while orange clearly identifies the next action.

## Overview

The page uses white as an expansive canvas, letting the central feed and its varied creator posts carry the visual interest. Warm orange (#ff6719) marks high-intent actions such as Create, Subscribe, and onboarding buttons, while charcoal text and muted gray metadata keep the interface legible without competing with post media. System sans-serif handles navigation, labels, and feed copy; a distinctive serif display face gives promotional headlines and selected editorial cards a publishing-oriented tone. The desktop composition separates a narrow left navigation rail, a centered content stream, and a right-side search and sign-up area, with generous whitespace around these zones. Feed items are divided by delicate gray hairlines rather than heavy containers. Photography, video, and publication-cover previews appear in varied aspect ratios, framed as creator content rather than as a unified campaign. Rounded promotional panels and pill-shaped primary actions soften the otherwise quiet, flat interface.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas, white promotional-card areas, and occasional text on dark media or buttons. |
| Substack Orange | `#ff6719` | `--color-substack-orange` | brand | Primary Create and Start your Substack buttons, Subscribe links, and small brand marks. |
| Editorial Charcoal | `#363737` | `--color-editorial-charcoal` | neutral | Main feed copy, creator names, navigation labels in active states, and headings. |
| Quiet Rule | `#e5e5e5` | `--color-quiet-rule` | semantic | Thin dividers and subtle outlines around inputs, cards, and feed boundaries. |
| Muted Graphite | `#777777` | `--color-muted-graphite` | neutral | Secondary navigation, timestamps, counts, and low-emphasis supporting text. |
| Night Surface | `#232525` | `--color-night-surface` | surface | Inverse dark link or content surface; secondary to the page’s white canvas. |
| Cover Umber | `#8e776b` | `--color-cover-umber` | semantic | Gradient-derived tones detected around linked cover imagery, not a defining interface color. |
| Soft Fog | `#eeeeee` | `--color-soft-fog` | surface | Pale secondary surfaces, including subdued buttons and occasional card backgrounds. |
| Link Blue | `#0083d5` | `--color-link-blue` | accent | Rare blue link accent; not a primary color in the visible homepage interface. |
| Cover Clay | `#8c6d62` | `--color-cover-clay` | semantic | Muted gradient tone found in linked artwork or cover imagery, not core UI. |
| Cover Slate | `#6d6c6b` | `--color-cover-slate` | semantic | Gray-brown gradient tone detected in linked imagery rather than interface controls. |
| Cover Taupe | `#7f6b67` | `--color-cover-taupe` | semantic | Muted gradient tone associated with linked cover visuals, not a defining brand surface. |
| Publication Green | `#2f6d5d` | `--color-publication-green` | surface | Deep green surface on promotional publication-growth cards and illustrated banners. |
| Cover Olive | `#423b28` | `--color-cover-olive` | semantic | Dark olive tone detected in artwork or media-derived content, not standard interface chrome. |
| Media Black | `#000000` | `--color-media-black` | semantic | Sparse near-black pixels in content cards or imagery; not a primary UI color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#232525` (Night Surface) · `--color-surface-2` → `#eeeeee` (Soft Fog) · `--color-surface-3` → `#2f6d5d` (Publication Green) · `--color-text` → `#363737` (Editorial Charcoal) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#777777` (Muted Graphite) · `--color-border` → `#e5e5e5` (Quiet Rule) · `--color-accent` → `#ff6719` (Substack Orange) · `--color-accent-2` → `#2f6d5d` (Publication Green) · `--color-accent-3` → `#0083d5` (Link Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#363737` | `#ffffff` | 11.94:1 | AAA |
| `#363737` | `#232525` | 1.29:1 | fail |
| `#363737` | `#eeeeee` | 10.29:1 | AAA |
| `#363737` | `#2f6d5d` | 1.97:1 | fail |
| `#ffffff` | `#232525` | 15.41:1 | AAA |
| `#ffffff` | `#eeeeee` | 1.16:1 | fail |
| `#ffffff` | `#2f6d5d` | 6.06:1 | AA |
| `#777777` | `#ffffff` | 4.48:1 | AA-large |
| `#777777` | `#232525` | 3.44:1 | AA-large |
| `#777777` | `#eeeeee` | 3.86:1 | AA-large |

### Gradients

- `linear-gradient(rgba(101, 60, 46, 0.75), rgba(101, 60, 46, 0.75)), none`
- `linear-gradient(rgba(104, 74, 58, 0.75), rgba(104, 74, 58, 0.75)), none`
- `linear-gradient(rgba(60, 59, 57, 0.75), rgba(60, 59, 57, 0.75)), none`
- `linear-gradient(rgba(84, 57, 52, 0.75), rgba(84, 57, 52, 0.75)), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| system-ui | `--font-body` | system | 400, 500, 600, 700 | Navigation, body copy, labels, metadata, links, and buttons throughout the interface. | Inter |
| -apple-system-ui-serif | `--font-apple-system-ui-serif` | system | 400 | System serif fallback for editorial or promotional display text. | Literata |
| Cahuenga | `--font-display` | webfont | 500 | Promotional hero and selected large editorial headings. | Literata |

- **system-ui:** Neutral sans-serif with measured regular-to-bold weights; sentence case and unembellished spacing.
- **-apple-system-ui-serif:** Use sparingly for publishing-oriented headlines; retain natural serif contrast and sentence case.
- **Cahuenga:** Measured medium weight, regular tracking, and sentence-case headlines with a distinctive bookish character.

### Type scale — Major Third (ratio ≈ 1.287, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 500 | 1.24 | 0 | — | Cahuenga | Centered promotional banner headline, set in a distinctive serif display face. |
| h2 | 24px | 500 | 1.25 | 0 | — | Cahuenga | Secondary promotional headings and editorial card titles. |
| h3 | 20px | 800 | 1.2 | 0 | — | SF Pro Display | Emphatic content or card headings, using a heavy sans-serif treatment. |
| body | 15px | 400 | 1.4 | 0 | — | system-ui | Feed post text, descriptions, and supporting promotional copy. |
| caption | 13px | 400 | 1.31 | 0 | — | system-ui | Timestamps, post details, and compact supporting labels. |
| button | 15px | 600 | 1.33 | 0 | — | system-ui | Primary action labels such as Create and Start your Substack. |
| nav | 15px | 500 | 1.33 | 0 | — | system-ui | Left-rail navigation labels and menu items. |
| link | 15px | 500 | 1.33 | 0 | — | system-ui | Creator names, Subscribe actions, and inline navigation links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 12, 16, 20, 24, 32 px.
- Section rhythm — · element gap 8px · card padding — · max content width —.

A desktop three-zone composition places a compact navigation rail on the left, the main feed in a centered column, and search plus account onboarding on the right. The measured page is long and feed-led, with promotional banners interspersed among creator posts. Headings in the banner are centered; feed content is mostly left-aligned. Whitespace separates the rails and content rather than enclosing the whole page in a dense grid. Feed rhythm alternates text, media, engagement controls, thin dividers, and occasional promotional cards.

## Shape & elevation

- Radius: button `9999px` · input `12px` · card `12px` · media `12px` · nav `12px` · link `50%` · xs `4px` · sm `8px` · md `12px` · pill `9999px`
- Shadow `inset` (button): `rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset`
- Shadow `md` (card, button): `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px`
- Motion: standard transition `0.25s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

The interface is mostly flat: feed entries rely on whitespace and thin #e5e5e5 dividers rather than raised cards. Search and sign-up panels have subtle borders, and promotional cards may use a light shadow to separate them from the canvas. Primary buttons use rounded shapes and a restrained inset highlight rather than dramatic depth.

## Imagery

Creator photography and video dominate the feed, appearing as portrait, landscape, and multi-image posts with natural, unpolished framing. Publication previews and promotional banners add designed illustrations and device mockups, but remain occasional interruptions within the stream. Images retain their own color and aspect ratios; the interface does not apply a uniform color grade or decorative overlay across ordinary posts.

## Components

### Left navigation rail

Vertical icon-and-label navigation on white; muted gray labels contrast with the darker active item, with an orange Create button below.

### Creator feed item

Author avatar, name, time, Subscribe action, post text, media where present, and compact engagement controls; thin dividers separate entries.

### Primary action button

Orange #ff6719 pill-shaped button with white, semibold system text; used for Create and account or publication calls to action.

### Search field

Quiet outlined search input with a leading magnifier, charcoal text, and a rounded white surface.

### Sign-up panel

Right-column bordered card with Substack mark, centered invitation copy, orange start button, and a subdued gray sign-in button.

### Promotional feed card

Editorial serif heading and supporting copy paired with a small illustration or device preview; white or deep green surface with an orange action.

### Measured component styles

- **Primary button** (“Create”): background #ff6719 · text #ffffff · radius 8px · padding 0px 16px · 600 15px system-ui · shadow rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px 
- **Link** (“The Conscious Lee”): transparent background · text #363737 · radius 0px · padding 0px · 500 15px system-ui
- **Input**: transparent background · text #363737 · border 1px solid #e5e5e5 · radius 12px · padding 0px 20px 0px 40px · 400 15px system-ui
- **Card** (“Coco Mocoe 2h Subscribe I hate gay hallo”): transparent background · text #363737 · border 1px solid #e5e5e5 · radius 0px · padding 0px · 400 15px system-ui
- **Navigation item** (“Subscriptions”): transparent background · text #777777 · radius 0px · padding 0px · 500 15px system-ui

## Do

- Keep the page canvas white and let creator content provide color.
- Use orange for clear, high-intent actions and subscription links.
- Separate feed entries with fine gray rules and breathing room.
- Mix serif promotional headlines with practical system sans-serif UI text.
- Preserve the natural aspect ratios and varied framing of creator media.
- Use muted gray for timestamps, counts, and secondary navigation.

## Don't

- Do not turn every feed item into a raised, heavily bordered card.
- Do not use orange as a large background across ordinary feed sections.
- Do not force creator photography into one uniform crop or color treatment.
- Do not make metadata as prominent as author names or post copy.
- Do not treat artwork-derived browns and grays as core brand colors.
- Do not crowd the navigation, feed, and account panel into one dense column.

## Agent prompt

Build a new Substack-style media homepage with a quiet, white-led editorial interface. Use Gallery White (#ffffff) for the canvas, Editorial Charcoal (#363737) for primary copy, Muted Graphite (#777777) for metadata, and Quiet Rule (#e5e5e5) for delicate dividers. Reserve Substack Orange (#ff6719) for primary actions and Subscribe links; use Publication Green (#2f6d5d) only for occasional promotional panels. Create a desktop layout with a left icon-and-label navigation rail, a central creator feed, and a right search and sign-up area. Set everyday interface text in a clean system sans-serif; use a bookish serif for promotional headlines. Keep cards mostly flat, let photos and video retain varied natural framing, and intersperse promotional cards without disrupting the feed rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Three-zone desktop page: left navigation, centered long-form feed, and right search and sign-up panel. | Discover creator posts, Subscribe from feed, Create publication, Join or sign in | Icon navigation rail, Media-rich post stream, Orange primary actions, Thin feed dividers, Promotional cards within feed |

## Source CSS custom properties (selected)

```css
--background_pop: #ff6719;
--cover_bg_color: #FFFFFF;
--cover_bg_color_secondary: #f0f0f0;
--background_pop_darken: #ff5600;
--cover_print_primary: #363737;
--cover_print_secondary: #757575;
--cover_border_color: #ff6719;
--background_contrast_1: #f0f0f0;
--background_contrast_2: #dddddd;
--background_contrast_3: #b7b7b7;
--background_contrast_4: #929292;
--background_contrast_5: #515151;
--color_theme_detail: #e6e6e6;
--background_contrast_pop: rgba(255, 103, 25, 0.4);
--theme_bg_is_dark: 0;
--background_pop_rgb: 255, 103, 25;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/substack-com