Scale Composer Dokumentation

Scale Composer leitet ein komplettes Design-System — Schriftgrößenskala, Farbrampen, Abstände, Layout-Raster und System-Effekte — aus drei Zahlen ab: einer Basis, einem Verhältnis und einer Notenzahl. Ändere eine der drei, und alles Nachgelagerte berechnet sich gemeinsam neu. Diese Seite erklärt die Theorie und die Überlegungen dahinter; der Rest der Dokumentation führt dich Ansicht für Ansicht durch das Tool.

Ein bisschen Skalentheorie

Eine modulare Skala ist eine feste Menge von Werten, bei der jeder Wert dem vorherigen multipliziert mit einem konstanten Verhältnis entspricht:

size(i) = base × ratio^i

Mit einer Basis von 16 und einem Verhältnis von 1,5 verläuft die Skala 16 · 24 · 36 · 54 … Die Idee ist alt — sie stammt aus der Drucktypografie und, davor, aus der Musik. Die Verhältnisse selbst sind musikalischen Intervallen entlehnt: 1,5 ist eine reine Quinte (das Frequenzverhältnis 3:2), 1,333 eine reine Quarte (4:3), 1,618 der Goldene Schnitt. Das ist keine Zahlenmystik — es spiegelt wider, wie Wahrnehmung funktioniert. Wir beurteilen Größen (und Klangintervalle) proportional: der Sprung von 16 auf 24 fühlt sich an wie der Sprung von 24 auf 36, weil beide ×1,5 sind. Eine auf Multiplikation aufgebaute Skala erzeugt Schritte, die gleichmäßig wirken — was von Hand ausgewählte Pixelwerte selten tun.

Die reine Formel hat einen praktischen Haken: die Abstände wachsen genau dort zu schnell, wo Interfaces Präzision brauchen. Mit Basis 16 und Verhältnis 1,333 gibt es nichts zwischen 16 und 21 — aber echte UIs brauchen ständig eine 18. Scale Composer unterteilt deshalb jeden Verhältnissprung in Noten, so wie sich eine Oktave in Töne unterteilt:

size(i) = base × ratio^(i/notes)

Mit zwei Noten pro Intervall liegen die Zwischengrößen weiterhin auf der Skala — sie sind Halbtöne, keine Ausnahmen — sodass die proportionale Konsistenz erhalten bleibt, während die Skala dicht genug wird, um wirklich brauchbar zu sein. Das ist das zentrale Steuerelement des Tools: voreingestelltes oder eigenes Verhältnis, Notenzahl und Basis, immer sichtbar in der Topbar.

Die vier Ansichten: Farbe, Typografie, Raster und System

Warum eine Skala für alles

Die meisten Design-Systeme werden aus getrennten Werkzeugen zusammengesetzt — einem Rechner für die Schriftgrößenskala, einem Paletten-Generator, Abständen nach Konvention. Jeder Teil kann für sich genommen sinnvoll sein, und das Ganze wirkt trotzdem zusammenhanglos, weil nichts die Teile miteinander verbindet.

Die Prämisse von Scale Composer lautet: die Beziehungen sind das System. Dieselben drei Zahlen steuern:

  • Typografie — jede Schriftgröße ist ein Skalenschritt; Zeilenhöhen sitzen auf einem Grundlinienraster, das aus der Basis abgeleitet ist (Grundlinie = Basis ÷ 2).
  • Farbe — das Verhältnis formt die Helligkeitskurve jeder Rampe, sodass der Abstand zwischen Farbstufen derselben Progression folgt wie der Abstand zwischen Schriftgrößen.
  • Abstände und Raster — Ränder, Stege und Abstandsschritte sind Skalenwerte; wenn du einen Steg verschiebst, landest du auf dem nächsten Skalenwert, nie auf einem beliebigen Pixel.
  • System-Effekte — Eckenradien, Rahmenbreiten, Elevation und Animationsdauern werden aus derselben Basis und demselben Verhältnis abgeleitet (eine Dauer ist Basis × Verhältnis^n Millisekunden).

Kohärenz ist keine Frage der Disziplin mehr, sondern wird zu einer Eigenschaft des Systems: es ist nicht so, dass jemand daran gedacht hat, die Teile aufeinander abzustimmen — sie können gar nicht auseinanderdriften.

Abgeleitete Semantik, keine ausgewählten Farben

Du wählst nicht siebzehn Farben aus; du wählst eine (oder ein paar) und der Rest wird abgeleitet. Aus jeder Ausgangsfarbe erzeugt das Tool eine vollständige OKLCH-Rampe, und aus den Rampen leitet es semantische Rollen ab — Text auf Hintergrund, gedämpfter Text, Rahmen, Button-Zustände, Fokusring, die vier Funktionsfarben — wobei WCAG-Kontrast-Untergrenzen erzwungen werden und APCA daneben angezeigt wird. Dark Mode wird als eigene Ableitung mit eigener Helligkeitskurve erzeugt, nicht als Umkehrung des hellen Themes. Die Farb-Dokumentation behandelt die Mechanik; die Theorie steht im Learn-Bereich.

Wie das Tool aufgebaut ist, und warum

Zwei Entscheidungen prägen alles Weitere:

Die Skala ist primär. Die Skalen-Steuerelemente sitzen in der Topbar, über allen vier Ansichten, weil sie keine Typografie-Einstellung sind — sie sind die Einstellung. Alles andere bearbeitet Interpretationen der Skala.

Der Client stellt dar; der Server rechnet. Jede Rampe, jede semantische Ableitung, jeder Export wird serverseitig aus deinem Session-Zustand berechnet. Dein Browser erhält fertige Werte. Das bewahrt eine einzige Quelle der Wahrheit für die Mathematik — die Zahlen im Tool, in den Exporten und in den Screenshots der Dokumentation können nie voneinander abweichen, weil sie alle aus derselben Engine stammen. Deine Arbeit verlässt deinen Browser nie, außer als Berechnungsanfragen: Sessions werden als Links gespeichert und geteilt, wobei der gesamte Zustand in der URL selbst kodiert ist (siehe Teilen).

Eine Konvention, die man von Anfang an kennen sollte: fast alles lässt sich mit den Pfeiltasten schrittweise verstellen, und ein Schritt bewegt sich immer entlang der Skala. Wähle einen Textblock und drücke ↑/↓ — die Größe springt auf den nächsten Skalenwert. Wähle einen Steg — dasselbe. Die Tastatur-Referenz findest du unter dem ?-Button in der Topbar.

Wie es weitergeht