---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Studio](https://academy.laioutr.com/en/bereiche/studio)
- [Design and brand](https://academy.laioutr.com/en/leitfaeden/design-and-brand)
- [Understanding design tokens and themes](https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes)
# Understanding design tokens and themes
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.
## Before you start
- Plan
- All plans
- Duration
- 6 min
Last reviewed on October 15, 2026
The Laioutr design system is built entirely on **design tokens**. A token is a named variable, for example for a colour, a font size, a spacing value or a corner radius. In the Figma Kit, tokens live as Figma Variables in the Laioutr UI Kit; in code they are CSS custom properties. Studio mirrors the system 1:1, so a section looks the same in Figma, in the preview and in the storefront.
### How colours are structured
Every colour is a **12-step scale**: steps 1 to 3 for pale backgrounds, 3 to 5 for interactive elements, 6 to 8 for lines and borders, 9 and 10 for the solid colour, 11 and 12 for readable text. Each scale comes as Solid, Alpha, Dark Solid and Dark Alpha. Semantic tokens such as `color / text / accent` point to steps of these scales, so the text colour adapts automatically when the accent colour changes.
### Themes and modes
A **theme** is a complete set of values for all tokens. On top of that there are modes for light and dark and for mobile and desktop. A theme defines the look; a Blueprint, by contrast, is a pre-composed starter site with pages and sections that uses the active theme.
## Step by step
1. 1 ### Step 1: Scales form the base
Colour groups such as Greys, Normal Colors, Bright Colors and Overlays each provide a 12-step scale. Normal Colors are designed for white text on step 9, Bright Colors for black text.
2. 2 ### Step 2: Semantic tokens point to steps
Components only use semantic tokens such as accent, text or background. The theme decides which step sits behind each of them.
3. 3 ### Step 3: Adjust a theme quickly or in full
For a quick change, swapping the values of the **Base Theme Variables** is enough. For a detailed brand implementation, the **Detailed Theme Variables** let teams set font families, font weights, backgrounds and radii individually.
4. 4 ### Step 4: Surface tone controls legibility
Every section knows its surface tone: light, dark or bright. Text, icons, borders and focus rings automatically pick a legible colour based on it.
## Frequently asked questions
What is the difference between a theme and a Blueprint?
A theme defines colours, fonts, spacing and radii through tokens. A Blueprint is a pre-composed starter site with pages and sections for a business model. A Blueprint always uses the project's active theme.
Can tokens be renamed?
No. The names of existing variables and components are linked to CSS custom properties and the Studio architecture. New tokens can be added at any time, while existing names stay stable.
Does dark mode need its own theme?
No. Every colour group already contains a dark equivalent that applies automatically when the mode is switched.
How do the UI Kit and Laioutr UI relate?
The UI Kit is the technical base with tokens and foundation components such as buttons and inputs. Laioutr UI builds on it and provides the sections and blocks that are combined into pages in Studio.
## Related
- [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.
- [Work with the Figma Kit and hand off to development](https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development)10 min
The Laioutr Figma Kit is published as a library in the team's own Figma workspace, first the UI Kit with the tokens, then the specialised libraries. Because variable and component names match code and Studio 1:1, designs can be handed off to development without a translation step.
- [Accessibility according to WCAG 2.1 AA](https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa)6 min
Laioutr UI components are designed for WCAG 2.1 AA: contrast, keyboard operation, focus states and semantic structure are built in. An accessible storefront also depends on the content, such as alt texts, heading order and clear link texts.
- [Start a project from a Blueprint](https://academy.laioutr.com/en/artikel/start-a-project-from-a-blueprint)5 min
When creating a project, a Blueprint is chosen, a pre-composed starter site matching industry and business model, whose pages are then adapted in Studio.
## Learn it in a lesson
- [Accessibility to WCAG 2.1 AA](https://academy.laioutr.com/en/lektionen/ux-designer-accessibility)12 min
- [Design tokens and themes](https://academy.laioutr.com/en/lektionen/ux-designer-design-tokens-and-themes)12 min
- [The Agentic UX Designer role](https://academy.laioutr.com/en/lektionen/ux-designer-introduction)4 min
## [Design and brand](https://academy.laioutr.com/en/leitfaeden/design-and-brand)
Search this guide
1. [Understanding design tokens and themes](https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes)6 min
2. [UI Kit settings: colours, fonts, icons and versions](https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions)7 min
3. [Work with the Figma Kit and hand off to development](https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development)10 min
4. [Accessibility according to WCAG 2.1 AA](https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa)6 min
## 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/artikel/understanding-design-tokens-and-themes#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Studio",
"item": "https://academy.laioutr.com/en/bereiche/studio",
"position": 2
},
{
"@type": "ListItem",
"name": "Design and brand",
"item": "https://academy.laioutr.com/en/leitfaeden/design-and-brand",
"position": 3
},
{
"@type": "ListItem",
"name": "Understanding design tokens and themes",
"item": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "What is the difference between a theme and a Blueprint?",
"acceptedAnswer": {
"@type": "Answer",
"text": "A theme defines colours, fonts, spacing and radii through tokens. A Blueprint is a pre-composed starter site with pages and sections for a business model. A Blueprint always uses the project's active theme.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Can tokens be renamed?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. The names of existing variables and components are linked to CSS custom properties and the Studio architecture. New tokens can be added at any time, while existing names stay stable.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Does dark mode need its own theme?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. Every colour group already contains a dark equivalent that applies automatically when the mode is switched.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes#/schema/question/4",
"@type": "Question",
"inLanguage": "en",
"name": "How do the UI Kit and Laioutr UI relate?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The UI Kit is the technical base with tokens and foundation components such as buttons and inputs. Laioutr UI builds on it and provides the sections and blocks that are combined into pages in Studio.
"
}
}
]
}
```