# Substack · Design system migration spec

> Source: https://substack.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of a modern, content-first publishing platform that balances editorial aesthetics with clear, functional UI.

## 1. Identity DNA

Substack's design system is built as a clean, editorial-focused platform, functioning like a modern, digital magazine. Its identity is defined by a content-first approach, where the architecture supports the act of publishing itself.

**One-liner:** A clean, content-first publishing platform with a bold orange accent and a focus on readability.
**Keywords:** publishing · newsletter · creator · community
**Analogy:** A clean, editorial-focused platform that feels like a modern, digital magazine or a curated feed for independent writers and readers.

## 2. Color

The palette is a study in focused contrast: a pristine white background with high-contrast ink for optimal readability, anchored by a single, vibrant orange accent. This orange provides all the platform's energy and call-to-action focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F4F4F4` | card background |
| `--bg-quiet` | `#EEEEEE` | quiet area |
| `--ink` | `#363737` | body text |
| `--ink-soft` | `#777777` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--muted-soft` | `#C8C8C8` | weak hint |
| `--accent` | `#FF6719` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** White background with high-contrast ink for readability; a single, vibrant orange accent provides energy and call-to-action focus.

The principle is restraint, using a single high-chroma accent against a neutral field to direct attention without visual noise.

## 3. Typography

The typographic voice establishes a clear hierarchy between editorial display and functional UI. Serif fonts are reserved for prominent headlines, lending a literary weight, while the system sans-serif stack handles body copy and navigation for clarity.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.1 | 600 | -0.5px | Hero headlines |
| h1 | 24px | 1.2 | 600 | 0px | Section titles |
| h2 | 20px | 1.3 | 600 | 0px | Post titles |
| body | 15px | 1.35 | 400 | 0px | Body text and post content |
| caption | 13px | 1.3 | 400 | 0px | Metadata, timestamps, small labels |

**Type rules:**
- Use the serif font family for prominent headlines and editorial display.
- Use the system sans-serif stack for body text, navigation, and UI elements.
- Maintain clear hierarchy through size and weight differences between titles and body.

## 4. Spacing

A consistent 8px-based vertical rhythm governs the space between elements, creating a predictable and calm visual cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 px
- **Rhythm:** Consistent 8px-based vertical rhythm for spacing between elements, with 4px increments for tighter gaps.

## 5. Surfaces

Depth is communicated through minimal, almost imperceptible elevation. Borders are fine and shadows are shallow, keeping the interface flat, focused, and layered only by necessity.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0 1px 0 0 rgba(255,255,255,0.2) inset, 0 -1px 0 0 rgba(0,0,0,0.1) inset
  - 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 6px -1px rgba(0,0,0,0.1)
- **Borders:** 1px solid rgba(0,0,0,0.1)

## 6. Layout

The desktop layout is a classic three-part skeleton: a fixed left sidebar for navigation, a central column for the content feed, and a right sidebar for login and search. On mobile, this collapses into a single-column stack with a bottom navigation bar.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Fixed left sidebar navigation (desktop), central feed column, right sidebar for login/search (desktop); single-column stack with bottom navigation (mobile).

## 7. Motion & Interaction

Motion is functional and understated, limited to smooth 250ms transitions that provide responsive feedback without distraction. It is used to signal interactivity, not to decorate the experience.

- **Durations:** micro 220ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth 250ms transitions for color, background-color, and border properties on interactive elements.
  - Transform transitions for hover states.
  - No complex animations; motion is subtle and functional.

- **Hover:** Subtle background-color or text-color changes on interactive elements like links and buttons.
- **Click:** Immediate feedback via standard browser focus states.
- **Transition:** All transitions follow the 250ms cubic-bezier(0.19, 1, 0.22, 1) curve for a smooth, slightly bouncy feel.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The platform's voice is confident, straightforward, and creator-focused. It avoids hype, technical jargon, and overly casual slang in favor of clear, empowering language.

- **Tone:** Confident, straightforward, and creator-focused.
- **Headline style:** Concise and empowering, often using a serif font for a more editorial feel.
- **CTA style:** Direct and action-oriented, using clear verbs like 'Start', 'Sign in', 'Log in'.
- **Avoid:** Overly casual slang / Technical jargon / Hype words

### Don'ts
- ❌ Don't use a dark theme — the screenshot shows a predominantly white background with light grey accents.
- ❌ Don't use multiple accent colors — the screenshot shows orange as the single, dominant high-chroma color.
- ❌ Don't use rounded cards for the main feed — the screenshot shows items separated by simple horizontal lines.
- ❌ Don't use a sans-serif font for major headlines — the screenshot shows serif fonts (like Cahuenga/Spectral) for display text.
- ❌ Don't use heavy, drop shadows on cards — the screenshot shows very subtle or no shadows on feed items.
- ❌ Don't use a dense, multi-column grid for content — the screenshot shows a single, focused column for the main feed.
- ❌ Don't use decorative elements or illustrations in the UI — the screenshot shows a clean, functional layout with icons and photos only.

The system deliberately avoids decorative elements, complex animations, dark themes, and multiple accent colors to maintain its clean, content-first integrity.

## System Prompt (paste into AI tool)

```
This design is for a publishing and newsletter platform. It prioritizes readability and content discovery with a clean, white-background layout. The primary accent is a vibrant orange (#FF6719) used for CTAs and branding. Typography uses a mix of a serif font (like Cahuenga or Spectral) for display headlines and a system sans-serif stack for body text. The layout features a fixed sidebar (desktop), a central feed, and a right sidebar for login, transitioning to a single-column mobile layout with bottom navigation. Critical don'ts: don't use dark mode, don't introduce multiple accent colors, and don't use complex animations.
```