Horizontal
5.99:1 · min 116px wide
The primary lockup. Use it wherever there is room — the footer, share cards, print.
Marginalia
Brand Guide
Everything footnote.cafe is built from — the logo set, the palette, the type, the ornament, and the way it speaks. This page is generated from the same tokens the site renders with, so it cannot drift from what ships.
The name
A footnote is where a text steps aside to say one more thing. That aside is the whole premise of the site, and it is also the logo.
The wordmark sets footnote in ink and hangs .cafe above it in gold, at the size and height of a reference marker. The domain is not a suffix bolted on — it is a footnote to the word “footnote”.
The monogram does the same thing in miniature: an f with a raised c tucked under its hook. It reads as a letter that has been annotated.
The same gesture appears in the product: reference markers in essays use this gold and this raised position. The logo is the typographic system, compressed.
Logo set
Four lockups. All are drawn from one 20px grid, so a mark and a wordmark set at the same size stay in proportion.
Wordmark
5.76:1 · min 90px wide
The name alone. Used in the site header, where the monogram would compete with the navigation.
Download SVG
Monogram
0.81:1 · min 20px wide
The f with its raised reference. Favicons, avatars, loading states, and anywhere the name is already present.
Download SVG
Stacked
2.19:1 · min 76px wide
For square and vertical spaces: covers, title pages, and the centre of a splash.
Download SVG
App icon
The monogram optically centred in a rounded square. On parchment it switches to Gold Deep, which holds its own against a light field.
Construction
The lockups are outlined from Cormorant Garamond Medium, then frozen. Nothing here depends on a webfont loading.
- Wordmark size20px
- The one number every lockup scales from.
- Letter-spacing1px
- Applied to “footnote”; the reference gets the same spacing, scaled.
- Reference ratio0.55×
- “.cafe” is set at 55% of the wordmark.
- Reference rise8.4px
- How far “.cafe” sits above the shared baseline.
- Mark size28px
- The “f” is 1.4× the wordmark.
- Mark reference rise14px
- The “c” tucks under the f’s hook, half the f’s height up.
- Lockup gap11px
- Optical space between the mark and the wordmark.
- Clear space0.5× height
- Keep this margin free of type, rules, and imagery.
Using the logo
The lockups are artwork. Scale them, recolour them between the supplied themes, and otherwise leave them alone.
Do
- Scale uniformly from the supplied SVGs.
- Use the mono lockups on photography, colour, and single-ink print.
- Keep half the lockup’s height clear on every side.
- Drop to the monogram before the wordmark becomes unreadable.
- Let the link or heading around it carry the accessible name.
- Use Gold Deep when the gold has to read as text.
Don’t
Don’t recolour it
The accent is gold. The word is ink or parchment. Nothing else.
Don’t stretch it
Scale uniformly. The proportions are the logo.
Don’t re-typeset it
The wordmark is outlined artwork, not live text in a similar face.
Don’t add effects
No shadows, strokes, bevels, or gradients.
Don’t crowd it
Keep half the lockup’s height clear on every side.
Don’t set it on low contrast
Gold on a warm mid-tone disappears. Use the mono lockups instead.
Colour
Warm neutrals doing the work, with one gold used sparingly. Select any value to copy it.
Foundation
Paper and ink. Every page starts on parchment; every word is set in ink.
Parchment
Page background. The default canvas everywhere except the reader.
on ink16.72:1AAA
Ink
Headings and body copy. Never pure black — it is warm, like print.
on parchment16.72:1AAA
Ink Light
Secondary prose, long passages where full ink would feel heavy.
on parchment8.84:1AAAon ink1.89:1fails AA
Ink Muted
Captions, metadata, timestamps. Large text only — it does not clear AA at body size.
on parchment3.41:1AA Largeon ink4.90:1AA
Margin Line
Rules, borders, dividers. The ruled line of a notebook margin.
on parchment1.20:1fails AAon ink13.98:1AAA
Horizon
Dark surfaces — footers, inverted panels, the icon field.
on parchment13.88:1AAAon ink1.20:1fails AA
Gold
The accent — gilt lettering on a spine. Gold marks brand moments, not sentences.
Gold
The logo accent, ornaments, and hairline rules. Decorative only on light backgrounds.
on parchment2.27:1fails AAon ink7.37:1AAA
Gold Soft
Hover states and gradients on dark surfaces.
on parchment1.80:1fails AAon ink9.30:1AAA
Gold Deep
The readable gold. Links, footnote markers, and any gold that carries meaning as text.
on parchment4.80:1AAon ink3.48:1AA Large
Reader
The book surface. Warmer and dimmer than the site, so the page recedes and the text advances.
Reader Background
The desk the book rests on.
on parchment1.20:1fails AAon ink13.98:1AAA
Page Left
Verso page in the two-page spread.
on parchment1.04:1fails AAon ink17.44:1AAA
Page Right
Recto page — a shade warmer, as a real gutter shadow would make it.
on parchment1.03:1fails AAon ink17.14:1AAA
Temperaments
Author-assigned moods that colour a piece’s book cover. Never auto-detected.
Resonant
Warm, affirming, personal.
on parchment2.10:1fails AAon ink7.96:1AAA
Dialectic
Argumentative, in tension, working something out.
on parchment3.30:1AA Largeon ink5.07:1AA
Contemplative
Quiet, unresolved, meditative.
on parchment3.01:1AA Largeon ink5.56:1AA
Threads
Subject colours for the threads that run between pieces. Used as accents on cards and filters.
Legibility
Shares its value with Gold Deep.
on parchment4.80:1AAon ink3.48:1AA Large
Optimization
Systems, efficiency, tradeoffs.
on parchment3.81:1AA Largeon ink4.39:1AA Large
Topologies
Structure, shape, relation.
on parchment7.03:1AAAon ink2.38:1fails AA
Uncertainty
Probability, doubt, the unresolved.
on parchment5.27:1AAon ink3.17:1AA Large
Contrast
Gold is a decorative colour on light surfaces — it does not clear WCAG AA as body text, and it is not asked to. Gold Deep is the readable one.
| Foreground | on Parchment | on Ink | on Reader |
|---|---|---|---|
| Ink | 16.72:1 AAA | — | 13.98:1 AAA |
| Ink Light | 8.84:1 AAA | 1.89:1 fails | 7.39:1 AAA |
| Ink Muted | 3.41:1 AA Large | 4.90:1 AA | 2.85:1 fails |
| Gold | 2.27:1 fails | 7.37:1 AAA | 1.90:1 fails |
| Gold Soft | 1.80:1 fails | 9.30:1 AAA | 1.50:1 fails |
| Gold Deep | 4.80:1 AA | 3.48:1 AA Large | 4.01:1 AA Large |
| Parchment | — | 16.72:1 AAA | 1.20:1 fails |
The rule
Use Gold for the logo accent, ornaments, and hairline rules — marks that carry no information on their own. The moment gold has to be read — a link, a footnote marker, a label — switch to Gold Deep, which clears AA on parchment at 4.80:1. On the reader’s warmer background, Gold Deep only clears large text, so keep it to headings and markers there.
Typography
Two Garamonds. One for display, one for reading — the difference is stroke contrast, and it matters most at small sizes.
Aa
Cormorant Garamond
- Role
- Display & logo
- Weights
- 500, 600
High-contrast Garamond revival. Sets the logo, all headings, and pull quotes. Its extreme thin strokes need size — never below 16px.
Aa
EB Garamond
- Role
- Body & UI
- Weights
- 400, 500, 600
A sturdier Garamond for reading at length. Everything that is not a heading.
Scale
- Display3rem / 48px / 600
The margin is the point
Page titles. One per page.
- Heading 22.25rem / 36px / 600
The margin is the point
Section openers.
- Heading 31.5rem / 24px / 600
The margin is the point
Subsections and card titles.
- Heading 41.25rem / 20px / 500
The margin is the point
Inline headings, list leads.
- Body1rem / 16px / 400
The margin is the point
Running prose. The size everything else is judged against.
- Caption0.875rem / 14px / 400
The margin is the point
Metadata, footnotes, figure captions.
- Label0.75rem / 12px / 500
The margin is the point
Eyebrows and small caps. Letterspaced, uppercase.
Ornament
Printer’s marks, used at the joins. They are decorative and hidden from assistive technology.
Hedera
Section breaks in prose.
hedera
Section
Numbered divisions.
section
Asterism
A pause between movements.
flourish
Divider
A hedera between two hairlines.
divider
Spacing
A doubling scale from 4px. Generous margins are part of the argument the site is making.
- xs0.25rem · 4px
- sm0.5rem · 8px
- md1rem · 16px
- lg1.5rem · 24px
- xl2rem · 32px
- 2xl3rem · 48px
Surfaces
Panels are frosted glass over parchment — the look of a page seen through vellum.
Glass, light
.glass-light — 12px blur over parchment.
Glass, dark
.glass-dark — the same blur on ink.
Voice
The site is a reading room. The writing should sound like one.
A reading room, not a feed
Never borrow the vocabulary of engagement. No “content”, no “users”, no “posts”. There are pieces, readers, and a shelf.
The margin is the point
Footnotes, asides, and digressions are features. Copy should invite the reader sideways, not push them forward.
Quiet over clever
Understatement reads as confidence. Skip exclamation marks, growth-speak, and urgency.
Old words are fine
Colophon, commonplace, marginalia, verso. Use the printer’s vocabulary when it is the accurate one.
Words we use
piece, reader, shelf, thread, archive, colophon
Words we avoid
content, user, post, feed, engage, drop
Assets
Every lockup in four themes, plus the app icons. SVG only — they scale to any size you need.
Files live under /brand/. Each lockup ships as light, dark, mono-ink, and mono-parchment. Download links sit with each lockup in the logo set.
Colophon
- Typefaces:
- Cormorant Garamond and EB Garamond, both SIL Open Font License 1.1.
- Logo:
- Cormorant Garamond Medium, outlined and locked to a 20px grid.
- Regenerate:
- python3 scripts/brand/generate-logo.py
- Contrast:
- Computed at render time by src/lib/brand/contrast.ts.