---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen"
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)
- [UI-Kit-Einstellungen: Farben, Schriften, Icons und Versionen](https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen)
# UI-Kit-Einstellungen: Farben, Schriften, Icons und Versionen
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.
## Bevor du startest
- Tarif
- Alle Pläne
- Rolle
- Bearbeitungsrecht für Studio im Projekt
- Dauer
- 7 Min.
### Voraussetzungen
- Markenfarben als Hex-Werte
- Schriftdateien als WOFF2 oder TTF mit gültiger Weblizenz
Zuletzt geprüft am 15. Oktober 2026
Die **UI-Kit-Einstellungen** bündeln alles, was das Aussehen eines Projekts bestimmt, an einer Stelle in Studio. Änderungen wirken sofort in der Live-Vorschau, ohne Code; in die Storefront gelangen sie mit dem Veröffentlichen.
- **Farben:** Semantische Farben wie Primary, Surface, Text oder Success sind an Stufen zwölfstufiger Skalen gebunden, jeweils für Hell und Dunkel. Aus einer Basisfarbe leitet Studio die ganze Skala ab. Jede Farbe zeigt ihren Kontrastwert, Text unter 4,5:1 wird markiert.
- **Schriften:** Die Rollen Display, Body und Mono erhalten je eine Schrift aus der Bibliothek oder aus einem eigenen Upload.
- **Icons:** Icon-Bibliotheken werden mit Vorrang sortiert, eigene Sets lassen sich ergänzen.
- **UI-Kit-Version:** Die Kette Laioutr UI, UI Kit und Projekt-Theme wird als Version gespeichert, je Umgebung, mit Vorschau und Export als Tokens.
Laioutr UI liefert die Komponenten, das UI Kit die Konfiguration. Die Einstellungen ändern nur die Konfiguration, die Sections und Blocks auf den Seiten bleiben unverändert.
## Schritt für Schritt
1. 1 ### Schritt 1: Einstellungen öffnen
Das Projekt in Studio öffnen und in der oberen Leiste auf das **Farbpaletten-Symbol** klicken. Das Fenster der UI-Kit-Einstellungen öffnet sich.
2. 2 ### Schritt 2: Farben festlegen
Im Bereich **Farben** eine semantische Farbe wie Primary wählen und die Basisfarbe als Hex-Wert eintragen. Studio erzeugt die zwölf Stufen; einzelne Stufen lassen sich im Farbwähler nachjustieren.
3. 3 ### Schritt 3: Kontrast und Dunkelmodus prüfen
Den angezeigten Kontrastwert jeder Farbe prüfen und markierte Werte unter 4,5:1 korrigieren. Danach die Ansicht auf Dunkel umschalten und die dunkle Skala ebenso prüfen.
4. 4 ### Schritt 4: Schriften zuweisen
Im Bereich **Schriften** den Rollen Display, Body und Mono je eine Schrift zuweisen. Eigene Schriften als WOFF2 oder TTF hochladen und den Lizenzhinweis bestätigen.
5. 5 ### Schritt 5: Icon-Bibliotheken wählen
Im Bereich **Icons** die gewünschten Bibliotheken aktivieren und die Reihenfolge festlegen. Bei gleichen Icon-Namen gewinnt die Bibliothek mit höherem Vorrang.
6. 6 ### Schritt 6: Version speichern
Im Bereich **UI-Kit-Version** den aktuellen Stand als Version speichern. Bei Bedarf die Version als Token-Datei exportieren, etwa für das Entwicklungsteam.
7. 7 ### Schritt 7: Veröffentlichen
In der oberen Leiste auf **Publish** klicken. Die Version gilt ab diesem Zeitpunkt in der Storefront der aktuellen Umgebung.
## Ergebnis prüfen
In der Studio-Vorschau zeigen Buttons, Links und Akzentflächen die neue Primärfarbe, Überschriften und Fließtext die gewählten Schriften. Nach dem Veröffentlichen die Storefront in einem privaten Browserfenster öffnen und prüfen, ob dieselben Farben und Schriften erscheinen.
## Häufige Fragen
Sind Änderungen sofort für Besucher sichtbar?
Nein. Änderungen sind sofort in der Studio-Vorschau zu sehen, in der Storefront aber erst nach dem Veröffentlichen.
Lässt sich ein früherer Stand wiederherstellen?
Ja. Jede gespeicherte UI-Kit-Version lässt sich in der Vorschau ansehen, wiederherstellen und erneut veröffentlichen.
Gelten die Einstellungen für alle Umgebungen?
Versionen werden je Umgebung geführt. So lässt sich ein neues Farbschema zuerst in dev oder stage testen, bevor es in main veröffentlicht wird.
Warum wird eine Farbe markiert?
Der Kontrast zwischen Text und Hintergrund liegt unter 4,5:1, dem Mindestwert für normalen Text nach WCAG 2.1 AA. Eine dunklere oder hellere Stufe wählen, bis die Markierung verschwindet.
## 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.
- [Vorschau prüfen und in Studio veröffentlichen](https://academy.laioutr.com/artikel/vorschau-pruefen-und-in-studio-veroeffentlichen)5 Min.
Studio speichert Änderungen als Entwurf und zeigt sie sofort in der Live-Vorschau. Publish in der oberen Leiste bringt den gespeicherten Stand über ein Deployment der Umgebung auf die Storefront.
## In einer Lektion lernen
- [Design-Tokens und Themes](https://academy.laioutr.com/lektionen/ux-designer-design-tokens-und-themes)12 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/ui-kit-einstellungen-farben-schriften-icons-versionen#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen#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": "UI-Kit-Einstellungen: Farben, Schriften, Icons und Versionen",
"item": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Sind Änderungen sofort für Besucher sichtbar?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Nein. Änderungen sind sofort in der Studio-Vorschau zu sehen, in der Storefront aber erst nach dem Veröffentlichen.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Lässt sich ein früherer Stand wiederherstellen?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ja. Jede gespeicherte UI-Kit-Version lässt sich in der Vorschau ansehen, wiederherstellen und erneut veröffentlichen.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Gelten die Einstellungen für alle Umgebungen?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Versionen werden je Umgebung geführt. So lässt sich ein neues Farbschema zuerst in dev oder stage testen, bevor es in main veröffentlicht wird.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen#/schema/question/4",
"@type": "Question",
"inLanguage": "de",
"name": "Warum wird eine Farbe markiert?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Der Kontrast zwischen Text und Hintergrund liegt unter 4,5:1, dem Mindestwert für normalen Text nach WCAG 2.1 AA. Eine dunklere oder hellere Stufe wählen, bis die Markierung verschwindet.
"
}
}
]
}
```