Design Tokens
Design Tokens sind benannte Werte für die grundlegenden Designentscheide einer Marke, etwa Farben, Schriftgrössen, Abstände und Eckenradien, die einmal festgelegt und überall wiederverwendet werden, statt sie von Hand einzutippen.
Ein Token hat einen Namen und einen Wert, zum Beispiel color-text-primary = #0F0F0F oder space-m = 24px. Ändert sich der Wert, ändert sich alles mit, was den Token nutzt.
Warum sie wichtig sind
Konsistenz: Dasselbe Blau ist auf jeder Seite dasselbe Blau.
Tempo: Ein Rebranding oder ein Dark Mode ändert Tokens, nicht Hunderte Ebenen.
Eine gemeinsame Sprache: Design und Entwicklung nutzen dieselben Namen.
Tokens in der Praxis
Tokens sind oft in Ebenen aufgebaut. Basis-Tokens enthalten Rohwerte (blue-600). Semantische Tokens beschreiben einen Zweck (color-button-background) und verweisen auf einen Basis-Token. Eine W3C-Community-Gruppe arbeitet an einem gemeinsamen Dateiformat, damit Tools Tokens austauschen können.
In Framer leben Tokens meist als Color Styles und Text Styles. Sie sind die Grundlage eines Design Systems und der wiederverwendbaren Sections in einer Komponentenbibliothek. Trueform legt sie zu Beginn jedes Builds an, damit das Brand System auf jeder Seite ankommt, die das Team später ergänzt.
FAQ
Was ist der Unterschied zwischen Design Tokens und einem Styleguide?
Ein Styleguide dokumentiert die Regeln. Design Tokens sind die tatsächlichen Werte, die das Design-Tool oder der Code nutzt, sodass die Regeln automatisch angewendet werden.
Braucht eine Marketing-Website Design Tokens?
Ja, in einer schlanken Form. Benannte Farben, Textstile und Abstände machen jede neue Seite schneller und halten die Marke konsistent.
Verwandte Begriffe
Designsystem
Ein Designsystem ist ein gemeinsamer Satz wiederverwendbarer Komponenten, Stile und Regeln, etwa Farben, Typografie, Abstände, Buttons und Sections, der eine Website oder ein Produkt beim Wachsen einheitlich hält.
Brand System
Ein Brand System ist das vollständige Set an Elementen, das definiert, wie eine Marke aussieht und klingt, inklusive Logo, Farben, Typografie, Bildwelt, Motion, Tonalität und Regeln für deren Einsatz auf Website, Produkt und Marketing.
Komponentenbibliothek
Eine Komponentenbibliothek ist eine Sammlung fertiger, wiederverwendbarer Bausteine wie Buttons, Cards, Navigation und ganzer Seitenabschnitte, aus denen Teams neue Seiten zusammensetzen, ohne jede von Grund auf zu gestalten.
Passend bei Trueform:
