Neues Design System

Token-basierte Layouts, Navigation und Footer — scrolle, um den Übergang der Navigation zu sehen.

Buttons auf hellem Grund

Graph-Band

Der Wissensgraph als Band-Hintergrund — <GraphBackground slot="background"> in einem Container surface="muted". Knoten und Kanten driften langsam, die Konstellation skaliert mit der Bandbreite.

Graph-Feld

Das Abhängigkeitsnetz in Bewegung — <GraphField slot="background"> zeichnet Knoten mit Ring, Hubs in Accent-Blau und Kanten zu den nächsten Nachbarn — Signale wandern von Knoten zu Knoten entlang der Kanten.

Graph-Feld, hell

Dieselbe Komponente auf surface="muted": hohle Knoten und Navy-Linien auf Graph Paper, density steuert die Knotendichte (hier 0.6 statt 0.9).

Buttons auf dunklem Grund

Dieselben Komponenten — data-surface="dark" bindet die Tokens um. Überschrift, Fliesstext und Buttons passen sich automatisch an.

Atome im Kontext

Neu Design System Zum Styleguide

Überschriften nutzen die .h1.h6-Klassen; Fliesstext folgt automatisch der Foundation-Skala (18 px, 160 %). Genug Höhe, damit die transparente Navigation beim Scrollen in einen weissen Balken mit dunkler Schrift übergeht.