A family of small opinionated design systems. Each system is a kit, not a library. Paper-dominant, ink for type, one accent per surface. Hairline borders, near-square corners, nothing decorative.
// each has its own metaphor. dieter = the kit-as-instrument à la Dieter Rams. touchline = the editorial-sport tableau. shared rules: paper-dominant, one accent per surface, nothing decorative.
A kit, not a library.
Rams-inspired restraint applied as code. Instrument vocabulary: knobs, LCDs, status codes. For interfaces that want to feel like physical objects rather than widgets.
An editorial-sport system.
Swiss grid, condensed Anton typography, a single signal color. For match tableaus, standings, brackets, and dense sports data interfaces.
// both systems obey the same rules. the difference lies in the metaphor and the palette, never in the respect for the code.
Every primitive carries a product code. "Use b-001" beats "use the dark button". Object permanence, no evanescent widget. Components are objects, not functions.
Paper-dominant, ink for type. Never two vivid colors competing on the same screen. Color is for announcing (qualified, live, focus), never for decorating a heading.
A sans-display for impact + a mono for data. Inter+JetBrains in dieter, Anton+DM Sans+Plex Mono in touchline. No Arial, no Roboto. Mono carries numbers and codes.
1px borders. 2/3/6px radius (reserved for circles). No drop shadows. No gradients. Rigor comes through clean angles, not mushy roundness.
// the touchline demo is a u13 tournament page rebuilt 100% with the system's primitives. matchcard, bracket, standings, sponsors, prizes. zero custom component CSS in the page.
Complexe sportif des Bruyères · 31 May 2026 · 8 teams · 16 matches · world cup bracket · live standings. All touchline primitives composed on a real page.