Über Scale Composer

Scale Composer leitet ein komplettes Designsystem — Schriftgrößen­skala, Farbrampen, Abstände und Raster — aus einer Basisgröße, einem Verhältnis und einer Notenzahl ab. Ändere das Verhältnis und alles bewegt sich zusammen, weil alles aus denselben drei Zahlen berechnet wird.

Warum eine einzige Skala?

Die meisten Designsysteme werden aus getrennten Werkzeugen zusammengesetzt: ein Skalen-Rechner hier, ein Paletten-Generator dort, Abstände nach Gefühl. Jedes Teil kann für sich stimmig sein und trotzdem nicht zu den anderen gehören. Die Prämisse dieses Werkzeugs ist, dass die Beziehungen das System sind — die Zahlen, die deine Überschriften rhythmisieren, sollten dieselben sein, die deine Farbrampen und dein Raster formen.

Wie es funktioniert

Die Skala ist die musikalische: ein Basiswert, multipliziert mit einem konstanten Verhältnis, unterteilt in Noten, so wie eine Oktave in Töne zerfällt. Die Typografie liest ihre Größen direkt aus der Skala. Farbrampen nutzen sie, um ihre Helligkeitskurven zu formen. Abstände und Layout-Raster nehmen ihre Schritte aus derselben Folge. Semantische Farbrollen — Text, Rahmen, Buttons, Zustände — werden automatisch abgeleitet, mit WCAG-Kontrastuntergrenzen, die beim Arbeiten geprüft werden, und der Dark Mode wird als eigene Ableitung erzeugt statt als Umkehrung.

Alles exportiert ohne Lock-in: CSS-Custom-Properties, Tailwind (v4 und v3), shadcn/ui-Themes und Figma Variables. Sitzungen werden als Links geteilt — der gesamte Zustand ist in der URL kodiert, ganz ohne Konto.

Diese Seite läuft mit ihrer eigenen Ausgabe

Die Seiten, die du liest, sind mit dem eigenen Export des Werkzeugs gestaltet: Basis 16, Verhältnis 1,333, zwei Noten. Die Grüntöne, die Neutraltöne, die Radien, die Schatten und die Schriftgrößen kommen alle aus einer generierten Tokens-Datei. Wenn das Design zusammenhält, ist das das Argument in Aktion.

Wer es macht

Scale Composer wird in Schweden gebaut, als Teil einer größeren Werkzeugkette zum Aufbau von Marken- und Designsystemen — das Werkzeug ist das öffentliche Gesicht der Maschinerie hinter echter Kundenarbeit. Die Anleitungen unter Lernen sind so geschrieben, dass sie für sich nützlich sind; das Werkzeug ist da, wenn du die Ideen mit deinen eigenen Zahlen ausprobieren willst.

Scale Composer öffnen — kostenlos, im Browser, ohne Anmeldung.