Ton: ein Designsystem gegen den KI-Mittelwert

Links steht ein Screen, wie ihn eine KI ohne Vorgaben gern baut. Ich habe ihn selbst nachgebaut, mit allem, was dazugehört. Rechts steht derselbe Inhalt in Ton.

Der linke Screen ist nicht falsch. Er ist nur austauschbar. Jede Marke, die so aussieht, sieht aus wie alle anderen.

Eine Verbotsliste in einer Textdatei hilft wenig, wenn niemand sie prüft. In Ton gibt es dafür zwei Stellen. Der Token-Build bricht ab, wenn ein Farbpaar zu wenig Kontrast hat, eine Fläche im falschen Farbton liegt oder eine Feder zu lange zum Einschwingen braucht. Ein Scan in den Tests prüft den Code der Referenz auf Verläufe, Glas, feste Zeiten, bestimmte Schriften und Rahmen.

Alle Ausschnitte hier liest die Seite beim Bauen aus den echten Dateien. Ändert sich eine Datei, ändert sich die Seite.

Alle Farben sind in OKLCH angelegt. Der Raum ist so gebaut, dass gleiche Helligkeitswerte auch annähernd gleich hell wirken. Das macht Abstufungen planbar.

Jede Textfarbe nennt die Flächen, auf denen sie stehen darf. Der Kontrast unten wird beim Bauen der Seite aus den Tokens gerechnet, nicht abgetippt.

Die meisten Oberflächen bewegen sich mit einer festen Dauer und einer festen Kurve, etwa 0,3 Sekunden ease-in-out. Das wirkt glatt, aber nicht nach Material. Ton beschreibt Bewegung als Feder: Masse, Steifigkeit, Dämpfung.

Daraus folgen zwei Werte. Die Eigenfrequenz ω₀ = √(k/m) sagt, wie schnell die Feder schwingen will. Der Dämpfungsgrad ζ = c / (2·√(k·m)) sagt, wie stark sie gebremst wird. Liegt ζ unter 1, schwingt sie mit ω_d = ω₀·√(1−ζ²) nach.

Viele Teams nehmen dafür Motion, früher Framer Motion. Ton nutzt bewusst keine Bibliothek. Der Build rechnet die Federn für CSS vor, und für Ziehen und Loslassen gibt es einen kleinen Hook.

Das Bento ist absichtlich ungleich: ein dichter Cluster, eine leere Spalte und eine große Karte. Die Schale bricht aus ihr heraus und liegt auf einer eigenen Ebene. Sie bewegt sich leicht gegen Zeiger und Scrollen.

Mit reduzierter Bewegung bleibt sie stehen. Die Karte „Wet clay“ lässt sich ziehen, auch mit den Pfeiltasten.

Ton klingt leise: ein gedämpfter Klick, zwei steigende Töne für Erfolg, ein tiefer Ton für Fehler. Alles entsteht aus Oszillatoren, Rauschen und Filtern. Es gibt keine Audiodateien.

Klang ist aus, bis du ihn einschaltest. Erst danach, bei der nächsten Geste, entsteht der Audio-Kontext. Der Klang wiederholt nur, was du auch siehst.

Eine Media Query für reduzierten Klang gibt es nicht. prefers-reduced-sound ist ein oft genannter Wunsch, aber kein Standard. Deshalb ist Klang hier standardmäßig aus und bleibt es, bis du ihn ausdrücklich einschaltest.

• Eine Verbotsliste allein erzeugt nur einen neuen Mittelwert. Weiche Flächen, Bento und herausragende 3D-Objekte sind selbst auf dem Weg zum Standard. Was hilft, ist eine Richtung, die aus der Marke kommt, und Prüfungen, die sie halten.
• Ich habe mit Ton keine KI-Durchläufe gemessen. Wie gut eine KI mit einem solchen System arbeitet, habe ich bei Kante gemessen.
• Die Prüfungen finden Werte und Muster im Code. Ob eine Seite gut gestaltet ist, entscheidet kein Skript.
• Klang lässt sich nicht automatisch an Vorlieben anpassen, weil Browser dafür keine Einstellung kennen.

Zum Kante-Case mit den gemessenen Durchläufen

Mit KI gestalte ich weniger einzelne Screens und mehr die Regeln, nach denen sie entstehen. Ton war dafür mein Übungsfeld. Jede Entscheidung, die als Token oder Prüfung vorliegt, hält der Build fest. Ich muss sie dann nicht in jedem Ergebnis neu einfordern.