v1.0BRAND & DESIGN SYSTEM

The pagebird
field guide.

How we make things at pagebird — from the typeset wordmark to the last pixel of the app. Foundations, voice, components, and the rules that hold them together.

Updated · Spring 2026 · 4 sections · 8 docs
pagebird
where readers flock.

The three principles

What everything follows from

Pagebird is editorial, not feed-shaped. Slow, not loud. Warm, not cute. Every design decision in this system can be traced back to one of these three.

01 · Editorial

Set in type, not generated.

Fraunces does the heavy lifting. Headlines are written, italics carry meaning, copy reads aloud well. We don't ship growth-marketing voice and we don't lean on emoji.

02 · Warm

Cream, forest, and one accent.

A four-color brand built around clothbound covers and warm paper. Generous whitespace, soft photography, hand-drawn linework. Reading is private and social — we honor both.

03 · The bird

One songbird, always.

A single yellow songbird carries the brand across every surface. Never a flock, never recolored, never angry. Pair it with the wordmark or with gold linework — that's the whole motif.

Color, at a glance

Forest · Cream · Gold · Coral
#0F231B
#163026
#1F3D31
#2D6A58
#F2C14E
#E8856B
#F5DCD0
#F4EBDC
#FBF6EC

The kit

Foundations & UI · jump in
01

Foundations

Logo, color, type, spacing, voice — the bedrock of the brand. Start here before anything else.

Open foundations → 02

Iconography & illustration

Icons, gold linework, mascot poses, photography mood.

Open icon set → 03

UI Kit · components

Buttons, forms, cards, chips, alerts, navigation.

Open components → 04

UI Kit · phone screens

Home, club, discover — the in-app application of the brand.

Open phone kit → 05

UI Kit · slide layouts

Title, section opener, stat, columns, quote, closing.

Open slide kit →

Quick rules

If you read nothing else
DO
  • Lowercase the wordmark — always italic Fraunces.
  • Use cream as the default page; forest as the cover.
  • One coral moment per surface — italic word, bookmark, or CTA.
  • Italicize at most one or two words per headline.
  • Pair the mascot with the wordmark, or alone — never as a flock.
  • Set body copy in Fraunces 300; UI in Nunito 500–700.
  • Breathe — sections at 96–128px, paragraphs at 12–16px.
DON'T
  • Don't capitalize "Pagebird" in the wordmark.
  • Don't put dark ink on forest — always cream.
  • Don't use gold as a CTA color (only as decoration).
  • Don't use multiple coral elements on one screen.
  • Don't recolor or restyle the bird.
  • Don't use emoji or exclamation points in primary copy.
  • Don't write "users," "platform," "supercharge," "unleash."