---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [For developers](https://academy.laioutr.com/en/bereiche/for-developers)
- [Platform and APIs](https://academy.laioutr.com/en/leitfaeden/platform-and-apis)
- [Design System 1.0: tokens, colour scales and themes](https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes)
In preparation
# Design System 1.0: tokens, colour scales and themes
The Laioutr Design System 1.0 is the shared foundation for the UI Kit and themes. It is built entirely on design tokens that exist as variables in Figma and in the UI Kit, so a theme changes the whole look without touching components.
## Before you start
- Duration
- 7 min
Last reviewed on October 15, 2026
The design system defines how colours, fonts, spacing and radii are created in Laioutr. Components use no fixed values but **tokens**. Themes set these tokens through aliases: one variable points to another, and the system picks the right value per theme.
Colours follow a **12-step scale**: 1 to 3 for pale backgrounds, 3 to 5 for interactive surfaces, 6 to 8 for borders and separators, 9 and 10 for solid colours, 11 and 12 for readable text. Every colour exists as Solid, Alpha, Dark Solid and Dark Alpha. The groups Greys, Normal Colors, Bright Colors and Overlays cover neutrals, brand colours, neon colours and transparencies, each with built-in dark mode.
Text colours are linked to theme colours: when an accent colour is set, the matching text colour adjusts for sufficient contrast. The Laioutr themes build on this, as do the Laioutr UI Sections and the Figma Kit, which uses the same variable structure.
## Step by step
1. 1 ### Step 1: Read the colour scale
Pick the matching step for each surface, for example step 2 for a card background, step 7 for a separator and step 11 for body text.
2. 2 ### Step 2: Adjust the theme
For a quick brand match, swap the values of the **Base Theme Variables**. For a full brand identity, edit the **Detailed Theme Variables**, including font families, weights, backgrounds and radii.
3. 3 ### Step 3: Use semantic tokens
Use semantic variables such as `color / text / accent` in custom components instead of fixed colour values. Theme switches and dark mode then apply automatically.
## Frequently asked questions
What happens in dark mode?
Every colour group has a dark counterpart that applies automatically when the mode switches. Components using semantic tokens need no changes for it.
What is the difference between a theme and a Blueprint?
A theme defines the look through tokens. A Blueprint is a pre-composed starting site with pages and Sections for a business model.
Why is white always #FFFFFF?
Standard white is fixed across the whole system, so contrast on step 9 solid colours is calculated reliably.
## Related
- [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.
- [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.
## Learn it in a lesson
- [Figma kit and handover to development](https://academy.laioutr.com/en/lektionen/ux-designer-figma-kit-and-handover)12 min
## [Platform and APIs](https://academy.laioutr.com/en/leitfaeden/platform-and-apis)
Search this guide
1. [Delivery API, Management API and Assets API](https://academy.laioutr.com/en/artikel/delivery-management-and-assets-api)8 min
2. [Design System 1.0: tokens, colour scales and themes](https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes)7 min In preparation
## 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/design-system-1-0-tokens-colour-scales-and-themes#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "For developers",
"item": "https://academy.laioutr.com/en/bereiche/for-developers",
"position": 2
},
{
"@type": "ListItem",
"name": "Platform and APIs",
"item": "https://academy.laioutr.com/en/leitfaeden/platform-and-apis",
"position": 3
},
{
"@type": "ListItem",
"name": "Design System 1.0: tokens, colour scales and themes",
"item": "https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "What happens in dark mode?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Every colour group has a dark counterpart that applies automatically when the mode switches. Components using semantic tokens need no changes for it.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "What is the difference between a theme and a Blueprint?",
"acceptedAnswer": {
"@type": "Answer",
"text": "A theme defines the look through tokens. A Blueprint is a pre-composed starting site with pages and Sections for a business model.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Why is white always #FFFFFF?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Standard white is fixed across the whole system, so contrast on step 9 solid colours is calculated reliably.
"
}
}
]
}
```