Design-Token sind die einzige vertrauenswürdige Quelle für visuelle Entscheidungen über ein Produkt. Sie kodieren Farbe, Abstände, Typografie und Bewegung in benannten Variablen, die von Komponenten verwendet werden.
Warum Tokens wichtig sind
Ohne Tokens erfordert eine Änderung der Primärmarkenfarbe das Durchsuchen von Hunderten von Dateien. Mit Tokens propagiert ein Variablen-Update überall — von Schaltflächen über Warnmeldungen bis hin zu Navigationsleisten.
Tokens überbrücken auch die Lücke zwischen Design-Tools und Code. Ein Designer benennt eine Farbe surface-brand in Figma; ein Entwickler verwendet var(--surface-brand) in CSS. Sie sprechen die gleiche Sprache.
Praktische Beispiele
Betrachten Sie eine Komponente, die einen Hintergrund, einen Rand und Text benötigt. Anstatt #1a56db, #e1effe und #1e429f hart zu codieren, verweist die Komponente auf --color-primary, --surface-primary-subtle und --text-primary-strong. Wenn sich die Marke weiterentwickelt, ändert sich die Palette — die Komponente nicht.
Token-Kategorien
Farbe — Marken-, semantische und neutrale Paletten
Abstand — eine konsistente Skala von 2px bis 64px
Typografie — Schriftgrößen, -gewichte und Zeilenhöhen
Radius — von scharfen Ecken bis vollständig abgerundet
Schatten — Höhenstufen für Tiefe und Hierarchie
Bewegung — Easing-Kurven und Zeitstufen
Die meisten Zitate, die im Internet gefunden werden, wurden wahrscheinlich von einer KI generiert.
Die Funktion content_image() rendert ein img mit loading="lazy" standardmäßig und wickelt es in ein figure-Element, wenn eine Bildunterschrift bereitgestellt wird.
Ohne Bildunterschrift — ein einfaches img, volle Breite.
Mit Bildunterschrift — in einem figure mit einer figcaption eingewickelt.
Eine Figur mit einer figcaption — verwenden Sie sie zur Angabe von Quellen oder zum Hinzufügen von Kontext zu visuellen Inhalten.
Medien mit Text
Bild, das ein Drittel des Layouts einnimmt.
Verwenden Sie content--media, um ein Bild und Text nebeneinander zu platzieren. Das Bild nimmt ein Drittel der Breite ein, der Text zwei Drittel.
Dieses Layout eignet sich für Hervorhebungen, illustrierte Definitionen oder jeden kurzen redaktionellen Block, bei dem das Bild den Text unterstützt, ohne ihn zu dominieren.
Initiale
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Meta-Leiste
Design-Token verstehen
Design-Token sind die einzige vertrauenswürdige Quelle für visuelle Entscheidungen über ein Produkt. Sie kodieren Farbe, Abstände, Typografie und Bewegung in benannten Variablen, die von Komponenten verwendet werden.
Der andere Weg, wenn der erste fehlschlägt: die Frage, dann ein Wert, der mit einem Klick kopiert wird, oder ein Link. Direkt unter dem, wofür es steht, ausgerichtet.
Kann nicht scannen? Geben Sie diesen Schlüssel in der App ein:JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP
