Marketing

Substack

substack.com16 colors4 componentssystem-uiMulti-page · 12 screens

Substack is the app for independent voices: a free newsletter, video, and podcast hosting platform with paid subscriptions built in.

Remix Visit

Remix

Visit

12 screenshots captured· substack.com

1 / 12 · Substack · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from substack.com

Primary

#FF6719

Primary CTA, brand accent, active state

#B37767

Inline link colour

#2A1A1E

Accent / decorative

#342831

Accent / decorative

#2F6D5D

Accent / decorative

#3A261C

Accent / decorative

#8AE1A2

Accent / decorative

#774134

Accent / decorative

Neutral

#161718

Default page background

#FFFFFF

Card / panel background; Headings / primary text

#EEEEEE

Alternating section band; Body copy

#808080

Captions, secondary text

#777777

Tertiary / placeholder text

#222222

Label colour on brand surfaces

#000000

1px borders and dividers

#363737

Neutral

Typography · system-ui

body13px · 400 · 17px

body15px · 400 · 21px

button15px · 600 · 20px

body15px · 500 · 20px

button13px · 600 · 20px

link19px · 400

button14px · 600 · 20px

link15px · 400 · 20px

body16px · 600 · 25.5px

link16px · 400 · 24px

button17px · 600 · 20px

nav-link15px · 400 · 20px

body17px · 400 · 23px

body14px · 400 · 21px

heading18.72px · 700 · 24px

input15px · 400 · 20px

body17px · 600 · 24px

quote15px · 400 · 20px

body13px · 600 · 20px

Typography · SF Pro Display

body19px · 600 · 26px

body20px · 700 · 24px

heading20px · 800 · 24px

h324px · 700 · 28px

list-item19px · 400

button17px · 400 · 24px

Typography · Cahuenga

h424px · 500 · 30px

h332px · 500 · 39.68px

h155px · 400 · 68.2px

h332px · 400 · 39.68px

h424px · 400 · 30px

heading38px · 400 · 40.13px

body20px · 400 · 28px

Typography · Arial

input14px · 400 · 20px

Typography · SF Compact

caption11px · 500 · 20px

Typography · monospace

code15px · 400 · 20px

Typography · ui-monospace

code12.75px · 500 · 20px

Typography · -apple-system-ui-serif

body17px · 400 · 28px

Spacing

8px

12px

4px

24px

16px

20px

32px

40px

Elevation

rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset

rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px

rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

rgba(0, 0, 0, 0.2) 0px 0px 12px 0px

Components · 4

Remixes of Substack

Latest remixes

No public remixes yet. Be the first to make one.

Remix it