Une famille de petits systèmes de design opinionés. Chaque système est un kit, pas une librairie. Papier dominant, encre pour le texte, un seul accent par surface. Bordures hairline, coins quasi droits, rien de décoratif.
// chacun a sa métaphore. dieter = le kit-instrument à la Dieter Rams. touchline = la maquette éditoriale-sportive. règles partagées : papier dominant, un accent par surface, rien de décoratif.
Un kit, pas une librairie.
Restraint à la Rams, appliqué comme code. Vocabulaire d'instrument : knobs, LCD, status codes. Pour les interfaces qui se veulent objets physiques plus que widgets.
Un système éditorial-sportif.
Grille suisse, typographie condensée Anton, une seule couleur de signal. Pour les tableaux de match, classements, brackets et interfaces de données sportives denses.
// les deux systèmes obéissent aux mêmes règles. la différence est dans la métaphore et la palette, jamais dans le respect du code.
Chaque primitive a un code produit. "utilise b-001" gagne contre "utilise le bouton sombre". Object permanence, pas de widget évanescent. Les composants sont des objets, pas des fonctions.
Papier dominant, encre pour le texte. Jamais deux couleurs vives en compétition sur le même écran. La couleur sert à annoncer (qualifié, live, focus), jamais à décorer un titre.
Une sans-display pour l'impact + un mono pour la donnée. Inter+JetBrains chez dieter, Anton+DM Sans+Plex Mono chez touchline. Pas d'Arial, pas de Roboto. Le mono porte les chiffres et les codes.
1px de bordure. 2/3/6px de radius (réservé aux circles). Pas d'ombres portées. Pas de dégradés. La rigueur passe par les angles francs, pas par les arrondis mous.
// la démo touchline est une page de tournoi u13 reconstruite à 100% avec les primitives du système. matchcard, bracket, classements, sponsors, dotation. zéro CSS de composant custom dans la page.
Complexe sportif des Bruyères · 31 mai 2026 · 8 équipes · 16 matchs · bracket coupe du monde · classements live. Toutes les primitives touchline composées sur une vraie page.