One scale. A whole design system.
Wähle eine Basis, ein Verhältnis und in wie viele Noten du es teilst. Scale Composer leitet den Rest ab — Schriftgrößen, Farbrampen, Abstände und Raster — aus denselben drei Zahlen, damit alles zusammengehört.
Den Composer öffnen — kostenlos, ohne Anmeldung So funktioniert es
Ein Verhältnis. Jedes Panel antwortet gleichzeitig — das ist die ganze Idee.
Drei Werkzeuge, drei Logiken, ein System, das nicht zusammenpasst
Eine Schriftgrößenskala aus einem Rechner, eine Palette aus einem anderen, Abstände nach Gefühl. Jede Wahl kann für sich vernünftig sein und das Ganze driftet trotzdem — weil nichts die Teile miteinander verbindet. Wenn die Größen, die Rampen und die Abstände aus einer Skala kommen, ist Kohärenz keine Frage der Disziplin mehr, sondern eine Eigenschaft des Systems.
Drei Ansichten, eine Skala darunter
-
Farbe
Gib eine Markenfarbe vor und erhalte vollständige OKLCH-Rampen — Marke, getönte Neutraltöne und die vier Funktionsfarben — mit semantischen Rollen und automatisch abgeleiteten WCAG-Untergrenzen.
Live-Rampe ausprobieren ↗ -
Typografie
Jede Schriftgröße kommt aus der Skala, Zeilenhöhen sitzen auf dem Grundlinienraster, und Abstände zwischen Elementen nutzen dieselben Schritte — ein durchgängiger vertikaler Rhythmus.
Live-Skala ausprobieren ↗ -
Raster
Breakpoints, Spalten, Stege und Ränder durchlaufen dieselbe Skala. Stupse einen Steg mit den Pfeiltasten an und er landet auf einem Skalenwert, nie auf einem beliebigen Pixel.
Live-Raster ausprobieren ↗
Zum Vertiefen: Farbskalen · Schriftgrößenskala · Layout-Raster
Du wählst nicht 17 Farben. Du wählst eine — der Rest wird abgeleitet.
Text auf Hintergrund, gedämpfter Text, Rahmen, Button-Zustände, Fokusringe, die vier Funktionsfarben: alles benannte Rollen, abgeleitet aus deiner Ausgangsfarbe mit erzwungenen WCAG-Kontrastuntergrenzen und APCA daneben angezeigt. Der Dark Mode wird als eigene Ableitung erzeugt — mit eigener Helligkeitskurve, nicht als Umkehrung. Wie die Kontrast-Mathematik funktioniert · warum Dark Mode eine Ableitung ist.
Eine Sitzung, jedes Format, das dein Stack liest
Dieselben Tokens verlassen das Werkzeug als jedes davon — generiert, vollständig und untereinander konsistent:
CSS custom propertiesTailwind v4 @themeTailwind v3 configshadcn/ui themeFigma VariablesGrid CSS
Mehr zur Token-Ebene: Anleitung zu Design-Tokens
Die Theorie hinter dem Werkzeug, in 152 Anleitungen
schriftgrößenskala
Was eine Schriftgrößenskala ist, wie du ein Verhältnis wählst und wie eine einzige Skala dein ganzes Design-System steuern kann. Leitfäden, durchgerechnete Beispiele und ein Live-Tool.
16 Anleitungenabstandssystem
Wie Abstandssysteme funktionieren — das 8pt-Raster, 4pt-Halbschritte, Grundlinienraster und Abstandsskalen, die aus einer Formel wachsen. Leitfäden und ein Live-Tool.
14 Anleitungenoklch
OKLCH erklärt für Designer und Entwickler — Helligkeit, Chroma, Farbton, Farbräume (Gamut) und warum moderne Farb-Tools ihre Paletten damit erzeugen. Anleitungen und ein Live-Tool.
15 Anleitungenfarbskala
Wie Farbskalen funktionieren — die Schritte von 50–900, Farbrampen aus einer Markenfarbe, semantische Rollen und Paletten, die per Konstruktion den Kontrast bestehen. Anleitungen und ein Live-Tool.
17 Anleitungenwcag kontrastverhältnis
WCAG-Kontrastverhältnisse, APCA, Farbenblindheit und barrierefreie Paletten — was die Regeln verlangen, warum es sie gibt und wie du sie schon beim Bauen erfüllst.
13 Anleitungendesign tokens
Was Design Tokens sind, das DTCG-Format, Benennungsschichten, Theming und der Export-Weg von einer Quelle zu CSS, Tailwind und Figma. Leitfäden und ein Live-Werkzeug.
12 Anleitungen12-Spalten-Raster
Wie Layout-Raster funktionieren — 4/8/12 Spalten, Stege, Ränder, Breakpoints und Containerbreiten, gebaut mit modernem CSS statt mit Framework-Klassen.
9 Anleitungenfluide typografie
Fluide Typografie mit clamp() — Größen, die sanft mit dem Viewport skalieren, statt an Breakpoints zu springen. Die Mathematik, die Barrierefreiheits-Regeln, die Anleitungen.
11 AnleitungenDark Mode Design
Wie Dark Mode wirklich funktioniert — abgeleitete Paletten statt Invertierung, Chroma-Verlust, Elevation, Kontrast-Fallen und Theme-Tokens. Leitfäden und ein Live-Tool.
11 Anleitungenmarkenfarben
Wie Markenfarben zu funktionierenden Systemen werden — eine Farbe wählen, Barrierefreiheit überstehen, Übersetzung von Druck zu Bildschirm, Rebrands und Audits. Anleitungen und ein Live-Tool.
12 AnleitungenSchriften kombinieren
Die handwerkliche Seite der Web-Typografie — Schriften kombinieren, Serif vs. serifenlos, Zeilenlänge, Lesbarkeit und was eine Schriftart signalisiert. Leitfäden und ein Live-Tool.
13 Anleitungenki design-system
KI-Tools bauen Interfaces und Bilder schnell, halten aber kein System. Wie design tokens und eine benannte Palette KI-Output markenkonform halten — Leitfäden und ein Live-Tool.
9 AnleitungenHäufige Fragen
Ist es kostenlos?
Ja. Das Werkzeug ist kostenlos und erfordert kein Konto. Deine Arbeit lebt in deinem Browser, und eine Sitzung wird geteilt, indem man einen Link kopiert — der gesamte Zustand reist in der URL.
Was ist ein Design-Token?
Eine benannte Design-Entscheidung — wie color.brand.500 oder spacing.md — als Daten gespeichert, damit jedes Werkzeug und jede Plattform denselben Wert liest. Unsere Anleitung zu Design-Tokens behandelt die Idee ausführlich.
Welche Formate kann ich exportieren?
CSS-Custom-Properties, Tailwind-v4-@theme und Tailwind-v3-Konfiguration, ein shadcn/ui-Theme, Figma Variables und Raster-CSS mit Media Queries — alles aus derselben Sitzung generiert.
Was unterscheidet das von einem Paletten-Generator?
Ein Paletten-Generator gibt dir Farben; dies leitet ein System ab. Eine Skala formt die Farbrampen, die Schriftgrößen, die Abstände und das Raster zusammen, und semantische Rollen mit WCAG-Kontrastuntergrenzen werden aus deinen Entscheidungen abgeleitet statt von Hand gewählt.
Funktioniert es für den Dark Mode?
Ja — der Dark Mode wird als eigene Ableitung mit eigener Helligkeitskurve erzeugt, nicht als Umkehrung des hellen Themes. Die Dark-Mode-Anleitung erklärt, warum diese Unterscheidung wichtig ist.
Kann ich es für eine bestehende Marke nutzen?
Ja. Gib die Palette mit deiner exakten Markenfarbe vor, und die Rampen, Neutraltöne und semantischen Rollen werden darum herum abgeleitet — die Skala passt sich deiner Farbe an, nicht umgekehrt.