---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions"
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)
- [UI Kit settings: colours, fonts, icons and versions](https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions)
# UI Kit settings: colours, fonts, icons and versions
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.
## Before you start
- Plan
- All plans
- Role
- Edit access to Studio in the project
- Duration
- 7 min
### Prerequisites
- Brand colours as hex values
- Font files as WOFF2 or TTF with a valid web licence
Last reviewed on October 15, 2026
The **UI Kit settings** bring everything that defines a project's look into one place in Studio. Changes show up in the live preview immediately, without code; they reach the storefront when published.
- **Colours:** Semantic colours such as Primary, Surface, Text or Success are bound to steps of 12-step scales, for light and dark. Studio derives the whole scale from one base colour. Each colour shows its contrast value, and text below 4.5:1 is flagged.
- **Fonts:** The roles Display, Body and Mono each get a font from the library or from a custom upload.
- **Icons:** Icon libraries are sorted by priority, and custom sets can be added.
- **UI Kit version:** The chain of Laioutr UI, UI Kit and project theme is saved as a version per environment, with preview and export as tokens.
Laioutr UI provides the components, the UI Kit provides the configuration. The settings only change the configuration; the sections and blocks on the pages stay as they are.
## Step by step
1. 1 ### Step 1: Open the settings
Open the project in Studio and click the **colour palette icon** in the top bar. The UI Kit settings window opens.
2. 2 ### Step 2: Set the colours
In the **Colours** area, select a semantic colour such as Primary and enter the base colour as a hex value. Studio generates the twelve steps; individual steps can be fine-tuned in the colour picker.
3. 3 ### Step 3: Check contrast and dark mode
Check the contrast value shown for each colour and fix flagged values below 4.5:1. Then switch the view to dark and check the dark scale in the same way.
4. 4 ### Step 4: Assign fonts
In the **Fonts** area, assign a font to each of the roles Display, Body and Mono. Upload custom fonts as WOFF2 or TTF and confirm the licence notice.
5. 5 ### Step 5: Choose icon libraries
In the **Icons** area, enable the libraries needed and set their order. When icon names overlap, the library with the higher priority wins.
6. 6 ### Step 6: Save a version
In the **UI Kit version** area, save the current state as a version. If needed, export the version as a token file, for example for the development team.
7. 7 ### Step 7: Publish
Click **Publish** in the top bar. From then on, the version applies to the storefront of the current environment.
## Check the result
In the Studio preview, buttons, links and accent areas show the new primary colour, and headings and body text use the selected fonts. After publishing, open the storefront in a private browser window and check that the same colours and fonts appear.
## Frequently asked questions
Are changes visible to visitors right away?
No. Changes are visible in the Studio preview at once, but reach the storefront only after publishing.
Can an earlier state be restored?
Yes. Every saved UI Kit version can be previewed, restored and published again.
Do the settings apply to all environments?
Versions are kept per environment. A new colour scheme can therefore be tested in dev or stage first, before it is published in main.
Why is a colour flagged?
The contrast between text and background is below 4.5:1, the minimum for normal text under WCAG 2.1 AA. Choose a darker or lighter step until the flag disappears.
## 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.
- [Preview and publish changes in Studio](https://academy.laioutr.com/en/artikel/preview-and-publish-changes-in-studio)5 min
Studio saves changes as a draft and shows them instantly in the live preview. Publish in the top bar takes the saved state to the storefront through a deployment of the environment.
## Learn it in a lesson
- [Design tokens and themes](https://academy.laioutr.com/en/lektionen/ux-designer-design-tokens-and-themes)12 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/ui-kit-settings-colours-fonts-icons-versions#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions#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": "UI Kit settings: colours, fonts, icons and versions",
"item": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Are changes visible to visitors right away?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. Changes are visible in the Studio preview at once, but reach the storefront only after publishing.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Can an earlier state be restored?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Every saved UI Kit version can be previewed, restored and published again.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Do the settings apply to all environments?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Versions are kept per environment. A new colour scheme can therefore be tested in dev or stage first, before it is published in main.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions#/schema/question/4",
"@type": "Question",
"inLanguage": "en",
"name": "Why is a colour flagged?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The contrast between text and background is below 4.5:1, the minimum for normal text under WCAG 2.1 AA. Choose a darker or lighter step until the flag disappears.
"
}
}
]
}
```