Substack
A writer-first publishing platform built on a warm cream-white canvas (#FFFFFF with warm tonal notes) with Substack's signature orange (#FF6719) used boldly on CTAs, publication avatars, and the brand. The reading experience is typographically excellent — Georgia or a refined serif for long-form articles, generous line-height and measure, and a distraction-free interface that respects the written word. The dashboard is minimal: subscriber count, revenue, recent posts. The system reads as 'independent publishing with an opinion' — it favors writers over platforms, reader experience over engagement metrics, and typographic quality over visual noise.
Color Tokens
version: alpha name: Substack description: "A writer-first publishing platform built on a warm cream-white canvas (#FFFFFF with warm tonal notes) with Substack's signature orange (#FF6719) used boldly on CTAs, publication avatars, and the brand. The reading experience is typographically excellent — Georgia or a refined serif for long-form articles, generous line-height and measure, and a distraction-free interface that respects the written word. The dashboard is minimal: subscriber count, revenue, recent posts. The system reads as 'independent publishing with an opinion' — it favors writers over platforms, reader experience over engagement metrics, and typographic quality over visual noise."
colors: primary: "#FF6719" on-primary: "#ffffff" primary-hover: "#E55A14" ink: "#191919" ink-muted: "#898989" canvas: "#ffffff" surface-1: "#FAFAFA" surface-2: "#F2F2F2" border: "#DCDCDC" paid-gold: "#FFB84D"
typography: display: fontFamily: "Source Serif Pro, Georgia, serif" fontSize: 44px fontWeight: 700 lineHeight: 1.2 letterSpacing: -0.01em body: fontFamily: "Source Serif Pro, Georgia, Times New Roman, serif" fontSize: 18px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0 ui: fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128]
radius: sm: 4px md: 8px lg: 16px pill: 9999px
shadows: card: "0 1px 3px rgba(0,0,0,0.06)" elevated: "0 4px 12px rgba(0,0,0,0.08)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
1. Visual Theme & Atmosphere
Substack made email newsletters feel like a meaningful medium again by treating the reading experience with genuine typographic care. The article reading surface is clean to the point of minimalism: serif body text at 18px with 1.75 line-height, a comfortable measure (~680px), and no sidebar clutter. Orange appears on subscribe buttons and the brand itself — it's warm and human, not tech-cold. The platform favors writers: the dashboard is quiet, the stats minimal, and the editor simple. You write; Substack distributes.
2. Color System
Serene and restrained:
- Canvas: Clean white, near-pure — no warm tint
- Orange: #FF6719 — subscribe button, publication name accent, brand avatar default
- Ink: #191919 — near-black, warm for long-form reading comfort
- Muted: #898989 — byline text, dates, secondary labels
- Paid badge: #FFB84D — warm gold for paid subscriber indicators
- Surfaces: Very faint grays (#FAFAFA / #F2F2F2) for panel backgrounds
3. Typography
Source Serif Pro for articles and publication names — an editorial serif that elevates the content. 18px body at 1.75 line-height is among the most comfortable reading configurations available in any web product. UI chrome uses system sans to stay out of the way. The typographic opinionation is Substack's biggest product differentiator.
4. Components & Patterns
- Article view: Single-column, serif body, max 680px, author avatar + name + date below headline
- Subscribe button: Orange fill, "Subscribe" or custom CTA text, always prominent
- Publication page: Masthead with logo/name, recent posts list, subscribe widget
- Dashboard post list: Title, publish date, status (Draft/Published), open rate
- Email compose: Simple rich text editor, plain by design
- Comment threads: Minimal, text-first — no gamification
5. Spacing & Layout
Article: 680px max centered, 48px top/bottom padding, 24px horizontal on mobile. Dashboard: simple centered layout, max 800px. No sidebar. The simplicity is a product decision, not a resource constraint.
6. Motion & Interaction
Subscribe button pulse on scroll-reveal. Page transitions are browser-native. Comment expand is smooth. The product is notably un-animated — Substack's philosophy is that attention belongs to words, not interface motion.