Folio Press
A literary publisher's catalogue: Garamond, small caps, cream paper and a printer's red.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
The colophon page of a well-made hardback, extended into a website. Garamond set at book sizes with proper small caps and old-style figures, a centred classical layout, and a single printer's red for rubrics. It reads like a book because it was designed like one.
Folio Press is book typography carried onto the web without compromise. It follows the conventions of fine private-press printing — a classical Garamond in a single family for display and text, true small caps, old-style figures, centred title pages and a printer's red reserved for rubrics. The measure is narrow, the leading generous and the margins wide, so long text is comfortable to read. It should feel like holding a well-made book in good light.
Principles
- One typeface, used well: size, italic and small caps make all the hierarchy.
- Set text at book sizes — 19px with 1.6 leading, 60–66 characters per line.
- Red is a rubric: section numbers, initials, a single mark.
- Centre title material; left-align reading text.
- Use old-style figures and lowercase roman numerals for lists.
Motion
Text fades in a paragraph at a time, as if pages are being turned slowly. Links grow a thin red rule beneath them on hover; there is no other motion.
Do & don't
Do
- ✓ Enable old-style figures and true small caps via OpenType features.
- ✓ Hang lowercase roman numerals in the left margin.
- ✓ Use a drop initial in red on the first paragraph of long text.
Don't
- ✕ Don't add a second typeface.
- ✕ Don't fake small caps by shrinking capitals.
- ✕ Don't set body text below 18px.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 363 lines of DESIGN.md in total.
More like this
All Editorial & Luxury →
Broadsheet Press
No. 001A morning broadsheet: masthead, column rules, datelines and a grey halftone photograph.
Didone Couture
No. 002Haute couture in two inks: a hairline Didone, paper white and absolute black.
Herbarium Journal
No. 004A naturalist's field journal: specimen plates, Latin names, moss green and foxed paper.
Linen Atelier
No. 005An artisan workshop journal: flax tones, soft serif, stitched details and daylight.
Magenta Shout
No. 006A pop-culture magazine at full volume: towering italics, hot magenta, cut-out photos.
Quiet Stone
No. 007Quiet luxury in taupe and limestone: wide-tracked capitals, no logo, nothing to prove.