Version 2.1 · synced from niklausgerber.com 33deff2

Design system

Catalogue

Every foundation, component, pattern, and page template of niklausgerber.com, rendered from the live code.

01

How it works

Five layers, each built from the one before: foundations (the values), components (one part, such as a tile), patterns (parts working together, such as navigation), templates (a whole page type), and pages: the live site itself, shown as a specimen on each template page and linked from there.

Examples are taken from the live pages by selector and rendered, each in its own frame at its real width, with the live stylesheet and scripts copied into site/ by scripts/sync-from-site.sh. A few examples that a script creates or that need a forced state are composed from the live classes and say so. Component examples show the relevant widths in light and dark; template specimens follow your system’s light or dark setting. Pattern recordings are made from the live code by scripts/record-patterns.py.

scripts/check.sh fails when the site has moved on and site/ has not been synced (it needs a clone of the website beside this repo), when the catalogue is not rebuilt from its sources, when an example no longer matches its page, when a link is broken, when a token pair falls below its contrast, or when the recordings are older than the scripts they show. It cannot judge whether the prose still describes the site correctly: that is what the review before each release is for.

This build: site commit 33deff2 (“site.css: offer heading sets its size once; drop unused .tldr and .close-links-2”), synced 12 November 2026.

02

Foundations

ColourOne accent, indigo, on warm neutrals. Light and dark follow the system; the band stays indigo in both.TypeInstrument Sans to navigate and scan, Newsreader to read. One scale, three widths.Space and layoutA 14-step space scale, a centred 1060 column, and three layouts that react to their container, not the screen.MotionMotion explains where you are and what is a door. 400ms or less, transform, opacity, and colour, off under reduced motion.AccessibilityThe floor every component meets, checked before every commit on the site.
03

Components

Navigation

Skip linkThe first thing on every page: one link that jumps keyboard and screen reader users past everything to the content.Breadcrumb and way backHow every page says where it sits and how to get back to the Index. There is no top bar: the way back travels with the reader.RailThe numbered list of a page’s sections: where you are in a long page, and a way to jump.Index tileThe door to a page: its name, one quiet word for what it is, and the real top of the page at its own layout, scaled down.Playground listA directory of outside projects: name, one descriptor sentence, hairline. Two by two on wider screens.Thoughts listThe list of essays: number, title, one sentence. Groups under a strong rule.FiltersToggle buttons that narrow a long list, with the state kept in the address.Scroll-up way backA small indigo block that repeats the band’s way back when the reader scrolls up in the middle of a page.

Page structure

Header bandThe full-bleed indigo header of every page except the home: the way back, the title, and one sentence that states what the page claims.SectionThe unit of every content page: a 1px ink rule, a number in the label column, a heading beside it.Home headThe top of the home: name and role, the 5px rule, the statement, and the intro.FooterContact and the © line. Nothing else.Night pageThe one dark page: 404 and /blackhole/. Seven slow rings, “← Index”, and six ways back.

Content

Reading textEverything you read: intro, say line, paragraphs, quotes, lists. Newsreader, 640px wide, 700px in articles from 1024.Closing lineOne sentence set large at the end of a page: what the reader should take away.RowsA definition list with an ink rule on top and hairlines between: a term and what it means.Steps, parts, and offersNumbered groups under a strong ink rule: steps in order, parts of a whole, offers with a price.QuestionsQuestions and answers as native disclosure: one question per row, the answer opens below.Praise and excerptQuoted praise with who said it, and a passage from a book with its source.App page blocksThe parts of a product page: kinds, beats, samples, screens, and devices.

Actions

Buttons and linksOne button style and one link style. No radius, no shadow, no second accent.Closing call to actionThe end of a book or app page: the claim once more, the one action, and the small print.

Illustration

Agent figureAn illustration of how an agent works, played step by step. Full spec, standalone files, and every live example in web/components/agent-figure/.

Accessibility

Visually hidden textText for screen readers only: a transcript, a separator in a tile name, a label that the design shows another way.
04

Patterns

Navigation modelThere is no menu. The Index is the hub, every page ends on it, and the way back travels with the reader.Page transitionsThe tile is the page: a tile grows into its page, the page shrinks back into its tile, and Back and Forward replay the same moves.Current sectionThe rail always shows where you are in a long page, and lets you jump.Scroll-up way backOn phones the way back appears after a short scroll up, and gets out of the way when the reader reads on.Filtering a listToggle filters narrow a long list; the state lives in the address, so a filtered view can be shared and survives Back.Questions and answersNative disclosure: questions open in place, with a short fade, and work without any script.Agent figure playbackAn illustration that plays once, step by step, when it comes into view, and can be paused or replayed.External linksLinks that leave the site open in a new tab and say so with an arrow when they are a call to action.Images and mediaOnly images that carry information, served small and sharp, with their size reserved so nothing moves.Page head and metadataWhat every page tells browsers, search engines, social networks, and agents: one title, one description, one card.Modes and fallbacksThe same page in light, dark, higher contrast, forced colours, print, reduced motion, and without JavaScript.
05

Templates

HomeThe Index: who, what the work is, six doors, the Playground, contact.Content pageA top-level page with numbered sections: the standard long page.Story pageOne experiment per section, newest proof first, each with its agent figure.App pageA product page: claim, real screens, how it works, questions, and one call to action.Book pageA book: the cover on the band edge, what it is about, its parts, an excerpt, praise, and where to buy.Thoughts listThe essays: an intro, then every article as a row, grouped.ArticleOne essay: a summary first, then numbered sections.Utility pageSupport, privacy, legal: plain, short sections a reader scans for one answer.Filterable listA long list with facets: the Bookshelf.Night page404 and Blackhole: one dark page with slow rings and six ways back.