The visual approach
Substack's design language telegraphs one intention: get out of the writer's way. The system splits typography duty cleanly—serif headlines at 72px, 48px, and 24px weights carry editorial voice, while sans-serif UI text (16px body, 14px captions, 11px uppercase overlines) handles navigation and metadata. That division is deliberate. Headlines inherit the authority of print; interface chrome stays quiet.
The color palette reinforces the hierarchy. Most of the system lives in grayscale: #000000 for headlines, #1A1A1A for body text, #6B6B6B for secondary information, and #F7F7F7 for backgrounds. The primary orange (#FF6719) appears sparingly—call-to-action buttons, subscribe prompts, notification badges. Teal (#0F6F5C) anchors hero sections and certain feature blocks but stays contained. Both accent colors carry weight precisely because they're rationed.
Spacing follows a 4px base scale (4, 8, 12, 16, 24, 32, 48, 64, 80px), tight enough to feel composed but generous enough to let prose breathe. Border radii stay minimal: 4px, 6px, 8px. Nothing here wants attention. The grid, the type scale, the muted palette—every token decision defers to the content inside it.
What works
The serif-sans split earns Substack immediate credibility. When a headline renders at 72px in a book-weight serif, it reads like the start of a long-form article, not a social media post. The system borrows editorial gravity from magazine layouts without the fussiness. Writers inherit that authority by default.
The orange accent is a case study in restraint. #FF6719 is saturated and warm, but because it appears only on subscribe buttons and key interaction points, it functions as a visual anchor rather than noise. You notice it when Substack wants you to act; otherwise, it vanishes. That discipline makes the color more effective than if it were splashed across headers or sidebars.
The grayscale progression (#000000 → #1A1A1A → #6B6B6B → #CCCCCC → #F7F7F7) handles information hierarchy without additional design work. Headline, body, caption, border, background—each lives at a distinct value, readable at a glance. The scale is tight enough to feel systematic but broad enough to stay legible at every step. Builders can drop text into this palette and the hierarchy surfaces automatically.
The typographic scale also does more with less. Three headline sizes (72px, 48px, 24px) and two body sizes (16px, 14px) cover most layout needs without offering so many options that consistency breaks down. The 11px uppercase overline (weight 600) functions as a category label or eyebrow—compact, unobtrusive, structurally useful. It's a small vocabulary that composes well.
What a builder can borrow
Start with the serif-sans division. Reserve serif for content headlines and body copy when editorial tone matters; use sans-serif for navigation, buttons, labels, and metadata. The split signals what's authored versus what's interface. If you're building anything that publishes user-generated writing—newsletters, blogs, documentation—this pattern buys credibility immediately.
Ration your accent color the way Substack rations #FF6719. Pick one saturated hue, restrict it to primary actions (subscribe, post, save), and let everything else live in grayscale. The restraint makes the color functional rather than decorative. If your accent appears in ten places per screen, it's not an accent—it's noise.
Use a tight grayscale progression for information hierarchy. Substack's five values (#000000, #1A1A1A, #6B6B6B, #CCCCCC, #F7F7F7) map cleanly to headline, body, secondary text, borders, and backgrounds. That's enough contrast to stay accessible while keeping the palette simple. Avoid the temptation to add a sixth or seventh gray—discipline here pays off in consistency.
Adopt a modular spacing scale with a small base unit. Substack's 4px base (4, 8, 12, 16, 24, 32, 48, 64, 80px) works because every margin, padding, and gap snaps to the grid. Layouts feel coherent even when designers don't share files. The scale also stays tight enough that generous whitespace doesn't require custom values—48px or 64px between sections is already in the system.
Keep border radii minimal. Substack's 4px, 6px, 8px corners are soft enough to avoid the brutalism of sharp edges but restrained enough to stay out of the way. Large radii (12px, 16px) draw attention to containers; small radii let content lead. If the platform should disappear behind what users create, round the corners just enough to feel finished, then stop.