Niklaus Gerber
Design System
One system for the website, the personal brand, and slides for web and PowerPoint: one accent, two typefaces, rules instead of boxes.
A one-page summary. The full system, with every component, interaction pattern, and page template rendered from the live code, is in the catalogue.
Principles
- 01One accent: indigo. Everything else is warm neutral.
- 02Instrument Sans to navigate, Newsreader to read.
- 03Rules, not boxes. No cards, shadows, or radius.
- 04Light and dark follow the system. Indigo stays indigo.
- 05Motion explains something, or it goes.
- 06Words are plain, British, and exact.
Colour
Light
Dark
On indigo, both modes
No second hue, no gradients, no red or green for status: use bold or a sign. Charts run indigo first, then the neutrals.
Type
Twenty years making digital stick.
Section heading
One sentence that states what the page claims.
Reading text is set in Newsreader, never wider than 640 pixels (700 in articles on desktop), with links in indigo, underlined.
Buttons, rows, navigation
Dates, sources, numbers
Weights: Instrument Sans 400 and 500; Newsreader 400 to 600 and italic 400. Display tracking -0.022em, never tighter than -0.025em. Sentence case labels, no letter-spaced capitals.
Space and layout
- Phone, under 768
- 20px gutters, one column, rail hidden, square tiles showing the page at 390.
- Tablet, 768 to 1023
- 48px gutters, 160 label column, the rail becomes a sticky row of numbers.
- Desktop, 1024 and up
- A centred 1060 column, fluid label column beside a 700 content column, sticky rail.
Breakpoints are container queries on the page, so a tile can render the real page at its own width and scale it.
Components
Header band
Page Title
One sentence that says what the page is.
Rows
- Term
- Definition in Newsreader, one or two sentences.
- Another term
- Hairlines between rows, an ink rule on top.
Buttons and links
Directory
The full catalogue, from breadcrumb to agent figure, is in the catalogue. The agent figure has its own spec and a page with every live example. Every component, pattern, and page template, rendered from the live code: the catalogue.
Brand
- Name
- Niklaus Gerber
- Role label
- Digital & Platform Executive
- Tagline
- Twenty years making digital stick in organisations not built for it.
- Voice
- Direct, calm, concrete. British spelling, full forms, serial comma, no em dashes, no hype, no invented facts.
- Imagery
- Only images that carry information. No stock, no decorative headers.
Mark, icons, fonts, share card, and the full house style: brand/README.md.
Slides
Dark cover, indigo chapters, canvas content. The claim in ink, the turn in ghost.
Web deck
Scrolls as a page, reflows on phones, prints one slide per page, and presents full screen with P. Open the template or the Game Mechanics example.
PowerPoint
Eleven layouts with placeholders and the theme. Install the fonts from brand/fonts/static first. Download the template (from the repository).
Files
catalogue/the living catalogue: foundations, components, patterns, and templates, rendered from the live codesite/a mirror of the website’s code (never edited here)tokens/CSS, JSON, Office, and Sheets themesbrand/positioning, mark, icons, fonts, and voiceweb/principles, and the agent figure’s standalone filespresentation/web deck, PowerPoint template, and generatorscripts/sync, build, check, record, and screenshotsAGENTS.md,CONTRIBUTING.mdsettled decisions, and how the system changesarchive/v1/everything before version 2