Spacing Scale Generator
Erstelle ein konsistentes, skalierbares Abstands-System für UI-Designs.
Was ist eine Spacing Scale?
Eine Spacing Scale ist ein festgelegtes System von Abstandswerten (z.B. 8, 12, 18, 27, 40px), die auf einem gemeinsamen Multiplikator basieren, statt beliebiger Einzelwerte pro Komponente. Das sorgt für visuelle Konsistenz über ein ganzes Projekt hinweg – Margins, Paddings und Gaps folgen erkennbar demselben Rhythmus.
Wofür brauchst du das in der Praxis?
Statt bei jeder neuen Komponente einen neuen Abstandswert zu erfinden, greifst du auf immer dieselbe Skala zurück – ideal als Grundlage für CSS Custom Properties oder ein Design-Token-System. Der Scale Factor bestimmt, wie stark die Werte von Stufe zu Stufe wachsen: kleine Faktoren (1.2–1.3) ergeben feine Abstufungen, grössere (1.5 und mehr) deutlichere Sprünge.