Design Tokens

TL;DR

Design Tokens sind die kleinsten Bausteine eines Design Systems – benannte Werte für Farben, Schriften und Abstände, die plattformübergreifend funktionieren.

Was sind Design Tokens?

Design Tokens sind Variablen, die Design-Entscheidungen speichern. Statt einer Farbe "#2563EB" zu verwenden, nutzt man einen Token wie "color-primary-500". Dieser Token kann dann in CSS, iOS, Android oder anderen Plattformen denselben Wert repräsentieren.

Arten von Design Tokens

• Farben: color-primary, color-text, color-background
• Typografie: font-family, font-size-lg, line-height-body
• Spacing: spacing-xs, spacing-md, spacing-xl
• Radien: border-radius-sm, border-radius-full
• Schatten: shadow-sm, shadow-lg
• Animationen: duration-fast, easing-default

Vorteile von Design Tokens

• Konsistenz: Gleiche Werte überall, ohne Copy-Paste
• Wartbarkeit: Farbe ändern = 1 Stelle, wirkt überall
• Plattformübergreifend: Web, iOS, Android aus einer Quelle
• Theming: Dark Mode durch Token-Switch
• Dokumentation: Tokens sind selbsterklärend

Design Tokens und Nachhaltigkeit

Tokens fördern Wiederverwendung und verhindern "Magic Numbers" im Code. Das Ergebnis: weniger CSS, kleinere Bundles, einfachere Wartung. Eine Änderung am Token propagiert automatisch – keine manuellen Updates an hundert Stellen.

Tokens in der Praxis

In CSS werden Tokens oft als Custom Properties umgesetzt:

• --color-primary: #2563EB;
• --spacing-md: 16px;
• --font-size-body: 1rem;

Fazit

Design Tokens sind das Fundament moderner Design Systems. Sie ermöglichen konsistentes, wartbares und skalierbares Design – und sparen langfristig Entwicklungszeit und Ressourcen.