Set like a book, marked like a proof.
Five open-license pairings, one fluid scale, and a hand for the notes in the margin. All faces are SIL Open Font License and self-hosted, so no visitor data leaves the site.
Pairings
Brand and web design for companies that would rather be remembered than noticed. Booking from November 2026.
Architecture and interiors for homes, small hotels and shops in Vienna and Lower Austria.
Creative development for studios and brands: WebGL, generative identities and tools that feel alive.
Illustration, prints, stickers and brushes from a small studio in Cologne. New drop every month.
Portrait and editorial photography between Lisbon and Berlin, for magazines, labels and people.
Caveat, in the creator’s red. It annotates; it never carries information alone. Every note sits next to real text that says the same thing to a screen reader.
Fluid scale
Every step is a clamp() between a 390 px and a 1440 px layout. Resize the window: the samples below are live, in the current preset.
Craft details
font-optical-sizing: auto picks the cut.hanging-punctuation: first, with a negative indent as fallback.all-small-caps with +6% tracking, so capitals don’t shout inside running text.Notation
Fixed formats for the facts clients scan for. Same order, same separators, everywhere.
Annotation
- 01One or two notes per view. A page full of red pencil is a page with no emphasis.
- 02Circle price anchors, underline results, point arrows at the CTA. Never annotate decoration.
- 03Notes are 22 px or larger in Caveat and use the accent-text token, so they pass AA.
- 04Every note duplicates information that already exists as real text nearby.
- 05Strokes line-draw in 700 ms once, on first view. Reduced motion shows them finished.
Reading
Brühl came to me with a good coffee and a label nobody could read from two meters away. We tested three directions on a real shelf, with real customers, before a single guideline page was written. The quietest one sold the most.
- Body minimum
- 16 px · 18 px Editorial
- Line length
- 60–75 characters
- Line height
- 1.5–1.6 body · 0.9–1.1 display
- Paragraph space
- 1 line, no indent
- Wrapping
- text-wrap: pretty · balance for headings