---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes"
locale: de
meta:
"og:title": "Academy Article"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Für Entwickler](https://academy.laioutr.com/bereiche/fuer-entwickler)
- [Plattform und APIs](https://academy.laioutr.com/leitfaeden/plattform-und-apis)
- [Design System 1.0: Tokens, Farbskalen und Themes](https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes)
In Vorbereitung
# Design System 1.0: Tokens, Farbskalen und Themes
Das Laioutr Design System 1.0 ist die gemeinsame Grundlage für UI-Kit und Themes. Es baut vollständig auf Design-Tokens auf, die in Figma als Variablen und im UI-Kit als Variablen vorliegen, sodass ein Theme das ganze Erscheinungsbild ändert, ohne Komponenten anzufassen.
## Bevor du startest
- Dauer
- 7 Min.
Zuletzt geprüft am 15. Oktober 2026
Das Design System legt fest, wie Farben, Schriften, Abstände und Radien in Laioutr entstehen. Komponenten verwenden keine festen Werte, sondern **Tokens**. Themes setzen diese Tokens über Aliase: Eine Variable verweist auf eine andere, und das System wählt je Theme den passenden Wert.
Farben folgen einer **Skala mit 12 Stufen**: 1 bis 3 für helle Hintergründe, 3 bis 5 für interaktive Flächen, 6 bis 8 für Linien und Trenner, 9 und 10 für Vollfarben, 11 und 12 für gut lesbaren Text. Jede Farbe gibt es als Solid, Alpha, Dark Solid und Dark Alpha. Die Gruppen Greys, Normal Colors, Bright Colors und Overlays decken Neutraltöne, Markenfarben, Neonfarben und Transparenzen ab, jeweils mit eingebautem Dark Mode.
Textfarben sind an Theme-Farben gekoppelt: Wird eine Akzentfarbe gesetzt, passt sich die zugehörige Textfarbe für ausreichenden Kontrast an. Die Laioutr-Themes bauen darauf auf, ebenso die Sections von Laioutr UI und das Figma-Kit, das dieselbe Variablenstruktur nutzt.
## Schritt für Schritt
1. 1 ### Schritt 1: Farbskala lesen
Für jede Fläche die passende Stufe wählen, etwa Stufe 2 für einen Kartenhintergrund, Stufe 7 für eine Trennlinie und Stufe 11 für Fließtext.
2. 2 ### Schritt 2: Theme anpassen
Für einen schnellen Markenabgleich die Werte der **Base Theme Variables** tauschen. Für eine vollständige Markenidentität die **Detailed Theme Variables** bearbeiten, inklusive Schriftfamilien, Schriftstärken, Hintergründe und Radien.
3. 3 ### Schritt 3: Semantische Tokens verwenden
In eigenen Komponenten semantische Variablen wie `color / text / accent` nutzen statt fester Farbwerte. So greifen Theme-Wechsel und Dark Mode automatisch.
## Häufige Fragen
Was passiert im Dark Mode?
Jede Farbgruppe hat ein dunkles Gegenstück, das beim Moduswechsel automatisch greift. Komponenten mit semantischen Tokens brauchen dafür keine Anpassung.
Was unterscheidet ein Theme von einem Blueprint?
Ein Theme bestimmt das Erscheinungsbild über Tokens. Ein Blueprint ist eine vorkomponierte Start-Site mit Seiten und Sections für ein Geschäftsmodell.
Warum gilt Weiß überall als #FFFFFF?
Standard-Weiß ist im gesamten System fest definiert, damit Kontraste auf Vollfarben der Stufe 9 verlässlich berechnet werden.
## Passend dazu
- [Design-Tokens und Themes verstehen](https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen)6 Min.
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.
- [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.
## In einer Lektion lernen
- [Figma-Kit und Übergabe an die Entwicklung](https://academy.laioutr.com/lektionen/ux-designer-figma-kit-und-uebergabe)12 Min.
## [Plattform und APIs](https://academy.laioutr.com/leitfaeden/plattform-und-apis)
In diesem Leitfaden suchen
1. [Delivery API, Management API und Assets API](https://academy.laioutr.com/artikel/delivery-management-und-assets-api)8 Min.
2. [Design System 1.0: Tokens, Farbskalen und Themes](https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes)7 Min. In Vorbereitung
## 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-system-1-0-tokens-farbskalen-und-themes#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Für Entwickler",
"item": "https://academy.laioutr.com/bereiche/fuer-entwickler",
"position": 2
},
{
"@type": "ListItem",
"name": "Plattform und APIs",
"item": "https://academy.laioutr.com/leitfaeden/plattform-und-apis",
"position": 3
},
{
"@type": "ListItem",
"name": "Design System 1.0: Tokens, Farbskalen und Themes",
"item": "https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Was passiert im Dark Mode?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Jede Farbgruppe hat ein dunkles Gegenstück, das beim Moduswechsel automatisch greift. Komponenten mit semantischen Tokens brauchen dafür keine Anpassung.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Was unterscheidet ein Theme von einem Blueprint?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ein Theme bestimmt das Erscheinungsbild über Tokens. Ein Blueprint ist eine vorkomponierte Start-Site mit Seiten und Sections für ein Geschäftsmodell.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Warum gilt Weiß überall als #FFFFFF?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Standard-Weiß ist im gesamten System fest definiert, damit Kontraste auf Vollfarben der Stufe 9 verlässlich berechnet werden.
"
}
}
]
}
```