---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen"
locale: de
meta:
"og:title": "Academy Article"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Studio](https://academy.laioutr.com/bereiche/studio)
- [Design und Marke](https://academy.laioutr.com/leitfaeden/design-und-marke)
- [Design-Tokens und Themes verstehen](https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen)
# Design-Tokens und Themes verstehen
Design-Tokens sind benannte Variablen für Farben, Schriften, Abstände, Radien und Effekte, auf denen jede Komponente von Laioutr UI aufbaut. Ein Theme belegt diese Tokens mit konkreten Werten und ändert so das Aussehen der gesamten Storefront, ohne Komponenten anzufassen.
## Bevor du startest
- Tarif
- Alle Pläne
- Dauer
- 6 Min.
Zuletzt geprüft am 15. Oktober 2026
Das Design System von Laioutr basiert vollständig auf **Design-Tokens**. Ein Token ist eine benannte Variable, zum Beispiel für eine Farbe, eine Schriftgröße, einen Abstand oder einen Eckenradius. Im Figma-Kit liegen die Tokens als Figma Variables im Laioutr UI Kit, im Code als CSS Custom Properties. Studio spiegelt das System 1:1, deshalb sieht eine Section in Figma, in der Vorschau und in der Storefront gleich aus.
### Aufbau der Farben
Jede Farbe besteht aus einer **Skala mit 12 Stufen**: Stufen 1 bis 3 für helle Hintergründe, 3 bis 5 für interaktive Elemente, 6 bis 8 für Linien und Rahmen, 9 und 10 für die Volltonfarbe, 11 und 12 für gut lesbaren Text. Jede Skala gibt es als Solid, Alpha, Dark Solid und Dark Alpha. Semantische Tokens wie `color / text / accent` verweisen auf Stufen dieser Skalen, so passt sich die Textfarbe automatisch an, wenn die Akzentfarbe wechselt.
### Themes und Modi
Ein **Theme** ist eine vollständige Belegung aller Tokens. Dazu kommen Modi für Hell und Dunkel sowie für Mobile und Desktop. Ein Theme bestimmt das Aussehen; ein Blueprint dagegen ist eine vorkomponierte Start-Site mit Seiten und Sections und nutzt das aktive Theme.
## Schritt für Schritt
1. 1 ### Schritt 1: Skalen bilden die Basis
Farbgruppen wie Greys, Normal Colors, Bright Colors und Overlays liefern je eine zwölfstufige Skala. Normal Colors sind für weiße Schrift auf Stufe 9 ausgelegt, Bright Colors für schwarze Schrift.
2. 2 ### Schritt 2: Semantische Tokens verweisen auf Stufen
Komponenten verwenden nur semantische Tokens wie Akzent, Text oder Hintergrund. Welche Stufe dahinter steht, legt das Theme fest.
3. 3 ### Schritt 3: Theme schnell oder vollständig anpassen
Für einen schnellen Wechsel reicht es, die Werte der **Base Theme Variables** zu tauschen. Für eine detaillierte Markenumsetzung lassen sich in den **Detailed Theme Variables** Schriftfamilien, Schriftschnitte, Hintergründe und Radien einzeln festlegen.
4. 4 ### Schritt 4: Oberflächenton steuert Lesbarkeit
Jede Section kennt ihren Oberflächenton: hell, dunkel oder bright. Text, Icons, Rahmen und Fokusrahmen wählen danach automatisch eine lesbare Farbe.
## Häufige Fragen
Was ist der Unterschied zwischen einem Theme und einem Blueprint?
Ein Theme legt Farben, Schriften, Abstände und Radien über Tokens fest. Ein Blueprint ist eine vorkomponierte Start-Site mit Seiten und Sections für ein Geschäftsmodell. Ein Blueprint übernimmt immer das aktive Theme des Projekts.
Dürfen Tokens umbenannt werden?
Nein. Die Namen bestehender Variablen und Komponenten sind mit CSS Custom Properties und der Studio-Architektur verknüpft. Neue Tokens lassen sich jederzeit ergänzen, bestehende Namen bleiben stabil.
Muss für den Dunkelmodus ein eigenes Theme gebaut werden?
Nein. Jede Farbgruppe enthält bereits eine dunkle Entsprechung, die beim Wechsel des Modus automatisch greift.
Wie hängen UI Kit und Laioutr UI zusammen?
Das UI Kit ist die technische Basis mit Tokens und Grundkomponenten wie Buttons und Eingabefeldern. Laioutr UI baut darauf auf und stellt die Sections und Blocks bereit, die in Studio zu Seiten kombiniert werden.
## Passend dazu
- [UI-Kit-Einstellungen: Farben, Schriften, Icons und Versionen](https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen)7 Min.
In den UI-Kit-Einstellungen in Studio legt das Team Farbskalen, Schriften und Icon-Bibliotheken des Projekts fest und sieht jede Änderung sofort in der Vorschau. Der Stand wird als Version gespeichert und gilt nach dem Veröffentlichen in der Storefront.
- [Mit dem Figma-Kit arbeiten und an die Entwicklung übergeben](https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben)10 Min.
Das Laioutr Figma-Kit wird als Bibliothek im eigenen Figma-Team veröffentlicht, zuerst das UI Kit mit den Tokens, danach die spezialisierten Bibliotheken. Weil Namen von Variablen und Komponenten 1:1 dem Code und Studio entsprechen, lassen sich Entwürfe ohne Übersetzungsschritt an die Entwicklung übergeben.
- [Barrierefreiheit nach WCAG 2.1 AA](https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa)6 Min.
Die Komponenten von Laioutr UI sind auf WCAG 2.1 AA ausgelegt: Kontraste, Tastaturbedienung, Fokuszustände und semantische Struktur sind eingebaut. Für eine barrierefreie Storefront sorgen zusätzlich die Inhalte, etwa Alternativtexte, Überschriftenfolge und verständliche Linktexte.
- [Projekt aus einem Blueprint starten](https://academy.laioutr.com/artikel/projekt-aus-einem-blueprint-starten)5 Min.
Beim Anlegen eines Projekts wird ein Blueprint gewählt, eine vorkomponierte Start-Site passend zu Branche und Geschäftsmodell, deren Seiten danach in Studio angepasst werden.
## In einer Lektion lernen
- [Barrierefreiheit nach WCAG 2.1 AA](https://academy.laioutr.com/lektionen/ux-designer-barrierefreiheit)12 Min.
- [Design-Tokens und Themes](https://academy.laioutr.com/lektionen/ux-designer-design-tokens-und-themes)12 Min.
- [Die Rolle Agentic UX Designer](https://academy.laioutr.com/lektionen/ux-designer-einfuehrung)4 Min.
## [Design und Marke](https://academy.laioutr.com/leitfaeden/design-und-marke)
In diesem Leitfaden suchen
1. [Design-Tokens und Themes verstehen](https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen)6 Min.
2. [UI-Kit-Einstellungen: Farben, Schriften, Icons und Versionen](https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen)7 Min.
3. [Mit dem Figma-Kit arbeiten und an die Entwicklung übergeben](https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben)10 Min.
4. [Barrierefreiheit nach WCAG 2.1 AA](https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa)6 Min.
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "de",
"name": "Default",
"url": "https://academy.laioutr.com/",
"workTranslation": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Studio",
"item": "https://academy.laioutr.com/bereiche/studio",
"position": 2
},
{
"@type": "ListItem",
"name": "Design und Marke",
"item": "https://academy.laioutr.com/leitfaeden/design-und-marke",
"position": 3
},
{
"@type": "ListItem",
"name": "Design-Tokens und Themes verstehen",
"item": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Was ist der Unterschied zwischen einem Theme und einem Blueprint?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ein Theme legt Farben, Schriften, Abstände und Radien über Tokens fest. Ein Blueprint ist eine vorkomponierte Start-Site mit Seiten und Sections für ein Geschäftsmodell. Ein Blueprint übernimmt immer das aktive Theme des Projekts.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Dürfen Tokens umbenannt werden?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Nein. Die Namen bestehender Variablen und Komponenten sind mit CSS Custom Properties und der Studio-Architektur verknüpft. Neue Tokens lassen sich jederzeit ergänzen, bestehende Namen bleiben stabil.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Muss für den Dunkelmodus ein eigenes Theme gebaut werden?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Nein. Jede Farbgruppe enthält bereits eine dunkle Entsprechung, die beim Wechsel des Modus automatisch greift.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen#/schema/question/4",
"@type": "Question",
"inLanguage": "de",
"name": "Wie hängen UI Kit und Laioutr UI zusammen?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Das UI Kit ist die technische Basis mit Tokens und Grundkomponenten wie Buttons und Eingabefeldern. Laioutr UI baut darauf auf und stellt die Sections und Blocks bereit, die in Studio zu Seiten kombiniert werden.
"
}
}
]
}
```