Ein Wert ändern — alles zieht mit.

Ein Designsystem ist der Baukasten hinter deinem Auftritt: wenige Grundwerte, aus denen sich Knöpfe, Karten und Eingabefelder ableiten. Unten kannst du die Grundwerte selbst verstellen und siehst sofort, wie sich die ganze Vorschau verändert.

EBENE 1 · ROHWERT

Die Farbe selbst

Ein nackter Wert ohne Bedeutung.

--blau-600: #2563EB

EBENE 2 · BEDEUTUNG

Wofür sie steht

„Das ist die Hauptfarbe.“

--primär: var(--blau-600)

EBENE 3 · BAUSTEIN

Wo sie gebraucht wird

„Der Knopf nutzt die Hauptfarbe.“

--knopf-bg: var(--primär)

So antwortest du: Stell dir deine Kombination ein und schreib sie mir, z. B. „Farbwelt Grün, Ecken rund, Dichte luftig, Skala 1.25, hell." Die Einstellung steht unter der Vorschau als fertiger Code.

D1 Farbwelt

D2 Ecken

D3 Dichte

D4 Schrift-Skala

D5 Modus

D6 Schatten

Vorschau · Neu

Technik, klar erklärt.

So sehen Überschrift und Fließtext in der gewählten Schrift-Skala aus. Ein Absatz zeigt, wie viel Luft zwischen den Zeilen und Elementen bleibt.

Zwischenüberschrift

E-Mail-Adresse

Lüftung

Konzept, Planung und Abnahme aus einer Hand.

Heizung

Systeme, die zusammenarbeiten statt gegeneinander.

Hinweis: Alle Bausteine hier stammen aus denselben Grundwerten.

Deine Einstellung als Code (Ebene 2: Bedeutung)