Substack

Colors

• #FE5C00Brand Orange · primary button background · top bookmark icon fill · inline text links
• #FFFFFFBackground White · screen background · secondary button background · primary button text
• #242424Primary Dark · title text · secondary button text · body copy
• #737373Muted Gray · subtitle text
• #E5E5E5Border Gray · secondary button outline border

Type

• Screen TitleNewsreader · 68px · 700 · #242424
• SubtitleSF Pro Text · 38px · 400 · #737373
• Primary Button TextSF Pro Text · 36px · 600 · #FFFFFF
• Secondary Button TextSF Pro Text · 36px · 600 · #242424
• Footer Legal TextSF Pro Text · 30px · 400 · #242424

Elements

• Substack Top Emblem · icon

  Centered horizontally near top, width ~90px, height ~104px · Orange bookmark ribbon shape composed of horizontal bars and notched bottom

• Feature Illustration Collage · graphic

  Centered vertically in upper-middle viewport, spanning ~620px wide by ~780px tall · Isometric multi-element illustrations (books, glasses, mailboxes, steps, flags) with black drop shadows

• Sign up free Button · button

  Horizontally centered near bottom, width ~980px, height ~120px, 48px lateral margins · Solid orange fill with centered white bold text

• Log in Button · button

  Placed 24px below primary button, width ~980px, height ~120px · White background with 1px light gray border and dark gray centered label

Layout

Single-column welcoming landing screen with brand emblem at top, centered isometric graphics, headline group, and stacked dual action buttons with legal agreement text anchored at the bottom.

Notes

Serif font in headline is characteristic of Substack brand typography (e.g. Newsreader, Lyon Text, or Georgia).