Tokenlabor

Abstands-Skala erzeugen

Die Abstands-Skala erzeugt Spacing-Werte im 4- oder 8-Punkt-Raster, geometrisch oder nach Fibonacci und gibt sie als CSS-Variablen, SCSS, Design Tokens oder Tailwind-Konfiguration aus.

    Skala
    Namepxrem
    Ausgabe

    Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

    Spacing-Skala und 8-Punkt-Raster

    Die Abstands-Skala erzeugt eine feste Reihe von Abständen für Ränder, Innenabstände und Lücken in Layouts. Statt bei jedem Element neu zu überlegen, ob 13 oder 15 Pixel besser aussehen, wählen Sie aus wenigen Stufen. Am verbreitetsten ist das 8-Punkt-Raster: Alle Abstände sind Vielfache von 8 px, für feine Abstufungen auch von 4 px. Eine solche Spacing-Skala macht Layouts ruhiger und erleichtert die Abstimmung zwischen Design und Entwicklung, weil beide dieselben Namen verwenden.

    Drei Aufbauarten stehen zur Wahl: Vielfache einer Grundeinheit (Sie bestimmen die Faktoren), eine geometrische Reihe, bei der jede Stufe um dasselbe Verhältnis wächst, und eine Fibonacci-Folge, deren Abstände sich ähnlich dem Goldenen Schnitt vergrößern. Die Ausgabe gibt es als CSS-Variablen, als SCSS-Map, als Design Tokens im JSON-Format der W3C Design Tokens Community Group ($value, $type) und als Tailwind-Konfiguration für theme.extend.spacing. Die Benennung „nach Faktor“ entspricht der Spacing Scale von Tailwind, in der 4 für 4 × 4 px = 1 rem steht.

    Tipp: Wenige Stufen genügen. Zehn bis vierzehn Werte decken die meisten Oberflächen ab; mehr führen wieder zu Beliebigkeit. Die erzeugten CSS-Variablen nutzen Sie mit var(--space-4) für margin, padding und gap. Für Raster-Layouts mit diesen Abständen eignet sich der CSS-Grid-Generator; die passende Typo-Skala liefert die Schriftgrößen-Skala.

    Anleitung: Abstands-Skala in 4 Schritten

    1. Bei „Grundeinheit“ die kleinste Abstandseinheit eintragen, meist 4 oder 8 Pixel.
    2. Unter „Aufbau“ zwischen Vielfachen, geometrischer Reihe und Fibonacci wählen.
    3. Bei Vielfachen die Liste der Faktoren anpassen, sonst Verhältnis und Anzahl der Stufen festlegen.
    4. Benennung und „Ausgabe als“ wählen und CSS, SCSS, JSON oder Tailwind-Konfiguration kopieren.

    Typische Anwendungsfälle

    • Feste Abstände für Ränder, Lücken in Grids und Innenabstände von Komponenten vereinheitlichen.
    • Design und Code mit denselben Token-Namen wie space-4 oder space-lg abgleichen.
    • Eine Tailwind-Konfiguration um eigene Abstände ergänzen, ohne Werte von Hand umzurechnen.
    • Für eine Präsentation zeigen, wie ein 8-Punkt-Raster aufgebaut ist.
    Fragen

    Häufige Fragen

    Was ist ein 8-Punkt-Raster?

    Eine Regel, nach der alle Abstände und Größen Vielfache von 8 Pixeln sind, also 8, 16, 24, 32 und so weiter. Für feine Abstände wie zwischen Symbol und Text ergänzt man oft 4 Pixel. Die Werte lassen sich auf gängigen Bildschirmen sauber darstellen.

    Wie viele Stufen sollte eine Abstands-Skala haben?

    Meist zehn bis vierzehn. Kleine Stufen für Abstände innerhalb von Komponenten, mittlere für Abstände zwischen Elementen und wenige große für Abschnitte einer Seite.

    Kann ich die Werte direkt in Tailwind verwenden?

    Ja. Die Tailwind-Ausgabe erzeugt ein Objekt für theme.extend.spacing. Klassen wie p-4 oder gap-6 greifen dann auf Ihre Werte zu; mit theme.spacing statt extend ersetzen Sie die Standardskala vollständig.

    Was sind Design Tokens?

    Benannte Gestaltungswerte wie Farben, Schriftgrößen oder Abstände, gespeichert in einem neutralen Format wie JSON. Werkzeuge wie Style Dictionary erzeugen daraus CSS, iOS- oder Android-Code, sodass alle Plattformen dieselben Werte nutzen.

    Sollten Abstände in px oder rem angegeben werden?

    rem-Werte wachsen mit, wenn Nutzer im Browser eine größere Grundschrift einstellen; Layouts bleiben dann ausgewogen. px sind vorhersehbarer, etwa für Rahmen. Der Generator gibt auf Wunsch beides aus.

    Wie passen Abstands-Skala und Typo-Skala zusammen?

    Häufig ist die Grundeinheit der Abstände ein Teiler der Zeilenhöhe des Fließtexts, etwa 4 px bei 24 px Zeilenhöhe. So landen Text und Abstände auf demselben Raster, und vertikale Rhythmen bleiben gleichmäßig.

    Weitere Werkzeuge

    Das könnte auch helfen

    Alle 558 Werkzeuge

    Farbumwandler

    HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

    Öffnen

    Farbpalette aus Bild

    Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

    Öffnen

    Kontrast prüfen (WCAG)

    Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

    Öffnen

    CSS-Gradient-Generator

    Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

    Öffnen

    Box-Shadow-Generator

    CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

    Öffnen

    Flexbox-Generator

    Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

    Öffnen