UI Skillbook
2

Substack DESIGN.md

Brands

Publishing with literary simplicity, serif display tone, and restrained orange brand cues. Substack's public site uses a clean editorial layout, black-and-white structure, and orange accents to frame newsletters,…

Raw DESIGN.md

At a glance

Group
Brands
Main color
#ff6719Orange design systems
Fonts
GeorgiaInterSF Mono

Colors in this file

  • #e5e5e5

    Unnamed

  • #ff6719

    Unnamed

  • #111111

    Unnamed

  • #ffffff

    Unnamed

  • #f8f8f8

    Unnamed

  • #666666

    Unnamed

Publishing with literary simplicity, serif display tone, and restrained orange brand cues. Substack's public site uses a clean editorial layout, black-and-white structure, and orange accents to frame newsletters, writers, and subscriptions.

1. Visual Theme & Atmosphere

Overall Aesthetic

Substack feels like independent publishing with modern internet simplicity.

Mood & Feeling

  • Editorial
  • Independent
  • Minimal
  • Literary
  • Direct

Design Density

Low to medium density. The site leaves space for writing and creator voice.

Visual Character

  • Black and white base
  • Orange support accent
  • Serif-friendly editorial tone
  • Minimal chrome

2. Color Palette & Roles

TokenHexRole
--substack-orange#FF6719Brand accent
--substack-black#111111Text and strong contrast
--substack-white#FFFFFFCanvas
--substack-surface#F8F8F8Soft support background
--substack-muted#666666Secondary text
--substack-border#E5E5E5Borders

3. Typography Rules

Font Stack

css--font-display: "Georgia", "Iowan Old Style", serif;
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 56/700, H1 40/700, H2 28/700, Body 17/400, Small 14/400

Typography Philosophy

Mix literary editorial display tone with very simple modern UI text.

4. Component Stylings

css.button-primary { background:#ff6719; color:#fff; border:none; border-radius:999px; min-height:44px; padding:0 18px; font-weight:700; }
.button-secondary { background:#fff; color:#111; border:1px solid #e5e5e5; border-radius:999px; min-height:44px; padding:0 18px; }
.card { background:#fff; border:1px solid #e5e5e5; border-radius:18px; }

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48, 64px

Layout Behavior

  • Let creators and writing lead
  • Keep subscription actions visible but understated
  • Preserve editorial breathing room

6. Depth & Elevation

Substack uses minimal depth; structure comes mostly from spacing and light borders.

7. Do's and Don'ts

Do

  • Keep it minimal and editorial
  • Use orange as a compact brand signal
  • Leave room for text and creator identity

Don't

  • Don’t overbuild the chrome
  • Don’t turn it into colorful creator-economy UI noise

8. Responsive Behavior

Breakpoints

  • Mobile <768px
  • Tablet 768px-1023px
  • Desktop 1024px+

Responsive Rules

  • Keep reading and subscription actions obvious
  • Preserve generous text margins

9. Agent Prompt Guide

textDesign this like Substack: minimal editorial publishing UI with black-and-white structure, subtle orange accents, serif-led literary tone, and simple subscription-focused creator pages.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/substack.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "substack" })

Related Design.md files

Moreh

Brands · Inter

Moreh (모레) is an AI-infrastructure software company founded in September 2020. Its About page names the problem it works on: running AI at scale means solving parallelization, disaggregation, cluster scheduling and…

SoundCloud

Brands · Inter

Creator-driven audio design built around a signature orange, clean white surfaces, and waveform-first track players. SoundCloud's public product feels open, community-focused, and utilitarian, putting artwork,…

KKday

Brands · SF Mono

KKday is a Taiwan-born online travel marketplace — the place a traveler books a tea-ceremony in Kyoto, a SIM card for Bangkok, or a high-speed-rail pass before a trip — and its design system is built for one job:…

Zapier

Brands · Inter

An inspired interpretation of Zapier's design language — a workflow-automation platform whose surface combines warm-cream neutrals (#fffefb canvas, #f8f4f0 soft cream) with deep coffee ink (#201515) and a single…

Home Depot

Brands · Helvetica Neue

Home improvement retail with vivid orange branding and highly practical commerce structure. Home Depot's public site uses strong orange (#F96302), white surfaces, black text, and tool-and-project-oriented shopping…

HubSpot

Brands · HubSpot Sans

HubSpot's homepage is a warm, modern marketing platform — approachable and energetic without sacrificing professionalism. The page opens on a canvas cream background (#fcfcfa), a softly warmed white that reads…

All Design.md filesBrowse by font