Skip to content

Brand

A shelf, two books standing, one leaning. Use the mark, wordmark, colours and type as they are. If you need something that is not here, ask first.

Download everythingZIP · 185 KB · 8 files
01

The mark

Solid geometry on a 32-unit grid so it survives 16px. The lean is the only diagonal in the system; it is what makes the mark read as a hand rather than a generator.

Mark on whiteEveryday ground
Mark on nightDark theme, video cards
Mark on paperReader theme, the site card
Toread app icon
App iconRounded tile, iOS and Android
02

Wordmark and lockups

Literata SemiBold, capital T, tracked to −0.03em. Inter is never used for the name: the shell is grey and the brand is the one serif thing in it.

Toread
ToreadHorizontal · app header, docs, email
ToreadStacked · first run, site card
Mark only · favicon, tab, nav, toast
03

Colour

Mineral: limestone, weathered slate, oxidised copper. The chrome is grey; verdigris is the only colour that carries meaning. Where it goes is rule 01 in section 06. Select a swatch to copy its code.

04

Type

Inter for the shell, Literata for the page, JetBrains Mono for values. Three weights, sentence case everywhere. The numbers below are the whole scale; there is nothing else.

DisplayLiterata 400
What the first year taught me56/60 · 36/40 · 30/36 · tracking −0.02em
ReaderLiterata 400
The shelf is the oldest interface we have for things we mean to come back to, and it works because it makes the backlog visible without making it loud.18/30 · tracking 0 · measure 680px
InterfaceInter 400 / 500 / 600
Paste a link or a PDFPaste a link or a PDFPaste a link or a PDF12/16 · 13/18 · 14/20 · 15/22 · 18/26 · tracking 0, −0.01em above 18
ValuesJetBrains Mono 400
example.com · Mar 3, 2026 · 4 min12/16 · 13/18 · domains, dates, counts, hex, file sizes
05

Link previews

Every page ships a 1200×630 card rendered on the edge from the same template: the site card here, and one per saved item.

Toread site link preview
The site card/og.png
Save something and its card appears here.
06

Using the mark

Five rules. Each one is a picture because each one is about how the mark looks, not about how it is described.

DoDon't
Keep the mark monoInk on white, white on ink, paper ink on paper. The whole mark is never green.
DoDon't
Clear space is one volumeFive thirty-seconds of the mark's width on every side, measured from the shelf rule.
Toread
DoDon't
Mark alone below 120pxThe lockup needs 120px of width; under that, the mark carries the name.
Ready
DoDon't
One green per surfaceVerdigris marks the single most important thing in view: the primary action, the icon's leaning volume, or a card's language line. Never two.
DoDon'tDon't
Never outline, stretch or tintNo strokes, no non-uniform scaling, no mark on a green tint.
07

Voice

A librarian's, not a coach's. It names what happened, offers one next thing, and gets out of the way of the text.

Report, don't cheerSaved to Toread. Ready in about a minute.Awesome! Your article is being processed 🎉
One verb per surfacePaste a linkGet started with your first save now
Name the language, not the modelTranslated into 繁體中文 · original besideAI-powered translation by GPT
Failures say why and what nextFetch failed: the site returned 403. RetryOops, something went wrong. Sorry!

Assets are exported from the Paper file, boards 06–09. The values on this page come from packages/design-token/src/brand.ts; change them there and the app, the cards and this page follow.