---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/lektionen/ux-designer-design-tokens-und-themes"
locale: de
meta:
  "og:title": "Academy Lesson"
---

[Zur Startseite](https://academy.laioutr.com/)

- [Agentic UX Designer](https://academy.laioutr.com/lernpfade/lernpfad-ux-designer)

- [Design-Tokens und Themes](https://academy.laioutr.com/lektionen/ux-designer-design-tokens-und-themes)

Design-Tokens und Themes

# Design-Tokens und Themes

12 Min.

Das Design System von Laioutr basiert vollständig auf Design-Tokens, bis zu den kleinsten Elementen. Diese Lektion zeigt, wie Tokens Farben, Schriften, Abstände und Radien steuern, wie Themes darauf aufbauen, wie UI-Kit-Einstellungen gepflegt werden und wie der Farbwähler in Studio auf Markenfarben begrenzt wird.

## Das Wichtigste in Kürze

- Tokens steuern das Aussehen aller Komponenten.
- Themes bündeln Token-Werte für eine Marke.
- Begrenzte Farbwähler schützen die Marke in Studio.

## Weiterlesen

- [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.

## 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/lektionen/ux-designer-design-tokens-und-themes#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/lektionen/ux-designer-design-tokens-und-themes",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/lektionen/ux-designer-design-tokens-und-themes#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/lektionen/ux-designer-design-tokens-und-themes"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/lektionen/ux-designer-design-tokens-und-themes#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic UX Designer",
          "item": "https://academy.laioutr.com/lernpfade/lernpfad-ux-designer",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Design-Tokens und Themes",
          "item": "https://academy.laioutr.com/lektionen/ux-designer-design-tokens-und-themes",
          "position": 3
        }
      ]
    }
  ]
}
```