Technorama Design System — digital
Das System, das sich selbst zeigt.
Diese Seite listet keine Werte auf — sie rendert sie. Jede Fläche, jede Kante und jeder Schriftgrad hier ist ein echter Token des Web-Designsystems. Was Sie sehen, ist das System, keine Abbildung davon.
Zwei Stufen, nicht eine
Das digitale System trennt rohe Palette von gemappter Bedeutung. Komponenten fassen nur die zweite Stufe an. Der Grund zeigt sich beim hellen Modus: umgebunden wird eine Ebene tiefer, deshalb braucht diese Seite dafür keine einzige Extraregel.
--neutral-900wird zu--surface-regular-primary— und nur das benutzt die Komponente--red-red-500wird zu--surface-regular-color-red— nie direkt gegriffenTiefe aus Fläche, nicht aus Schatten
Analog hebt sich eine Fläche über Weiss-Alpha ab. Digital sind die Stufen deckend — dadurch lässt sich ihr Kontrast exakt rechnen, statt ihn gegen einen wechselnden Untergrund zu schätzen. Flach bleiben beide Domänen.
Vier Marken gleichzeitig — hier erlaubt
Analog gilt die Eine-Farbe-Regel absolut. Digital tragen die Markenrampen zusätzlich Status: Rot meldet Fehler, Orange warnt, Grün bestätigt, Blau weist hin. Das sind Signale, keine Markenaussage — deshalb dürfen sie nebeneinander stehen.
Auf der Markenfläche
Die Schwarz-Text-Regel überlebt digital — aber sie wird nicht von Hand gesetzt, sondern vom Token-Paar entschieden: --text-regular-on-color gehört zu jeder --surface-regular-color-*.
Die Schrift — mit echtem Halbfett
Dieselbe Familie wie analog, andere Gewichts-Auswahl. Die vierte Zeile steht in 600 — dem Schnitt, der bis vor Kurzem still auf Bold durchfiel, weil seine Datei falsch angeschrieben war.
Die Kanten laufen weiter
Analog endet die Rampe bei 4 px — die knappe Kante ist die Präzisionsgeste der gedruckten Marke. Digital läuft sie bis 24 px und zur Pille: die Website setzt auf die weichere, berührbare Form.
Der Knopf — jetzt mit API
Bis hierher war der Knopf eine Klasse, die man von Hand schrieb. Seit Oktober 2026 folgt er dem Quellcode des Storybooks: gefüllt, umrandet oder tonal, in zwei Grössen (Radius 20 px bzw. 12 px, Schrift Bold 18 px bzw. 16 px), mit nachgestelltem Pfeil; überfahren wird die Fläche blau. Das ist jetzt eine Komponente — dieselbe Klasse .btn, die das Portal an 122 Stellen trägt, nur nicht mehr von Hand zusammengesetzt.
Die tonale Fläche gibt es nur hier. Analog ist sie ein Regelbruch: eine abgetönte Fläche, und der gedruckte Master tönt nicht ab.
Ebenfalls nur digital: der schlichte Knopf (im Storybook «Ghost») — Beschriftung ohne Fläche, der Pfeil in einem runden Feld — und jede Variante auf einer Markenfläche (im Storybook «On Color»).
Diese Seite ist die erste Oberfläche der digitalen Domäne; das übrige Portal folgt weiter der Brand Guideline. Welches Regelwerk wann gilt, erklärt Zwei Domänen. Herleitung und Messprotokoll stehen in docs/designsystem-abgleich.md.