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

[Go to home](https://academy.laioutr.com/en)

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

- [Design tokens and themes](https://academy.laioutr.com/en/lektionen/ux-designer-design-tokens-and-themes)

Design tokens and themes

# Design tokens and themes

12 min

The Laioutr design system is fully based on design tokens, down to the smallest elements. This lesson shows how tokens control colours, fonts, spacing and radii, how themes build on them, how UI kit settings are maintained and how the colour picker in Studio is limited to brand colours.

## Key takeaways

- Tokens control the look of all components.
- Themes bundle token values for a brand.
- Limited colour pickers protect the brand in Studio.

## Read more

- [Understanding design tokens and themes](https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes)6 min

  Design tokens are named variables for colours, fonts, spacing, radii and effects that every Laioutr UI component is built on. A theme assigns concrete values to these tokens and changes the look of the whole storefront without touching any component.
- [UI Kit settings: colours, fonts, icons and versions](https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions)7 min

  In the UI Kit settings in Studio, the team defines the project's colour scales, fonts and icon libraries and sees every change in the preview right away. The state is saved as a version and applies to the storefront once published.

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "en",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "translationOfWork": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/ux-designer-design-tokens-and-themes#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/en/lektionen/ux-designer-design-tokens-and-themes",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/lektionen/ux-designer-design-tokens-and-themes#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/lektionen/ux-designer-design-tokens-and-themes"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/ux-designer-design-tokens-and-themes#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic UX Designer",
          "item": "https://academy.laioutr.com/en/lernpfade/ux-designer-learning-path",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Design tokens and themes",
          "item": "https://academy.laioutr.com/en/lektionen/ux-designer-design-tokens-and-themes",
          "position": 3
        }
      ]
    }
  ]
}
```