About Designsystemet
Why it exists, what it solves, what it consists of and who uses it.
Introduction
Get started
How to use Designsystemet and how to get started.
Collaboration
How cross-sector collaboration works and how you can contribute.
Values
Our core values are, why they matter and how they guide our work.
Accessibility
What accessibility means and how we ensure it for everyone.
Design Tokens
Overview
All variables generated by the command line tool.
Colors
How the colours are structured and how you use them.
Sizes and Spacing
How sizes and spacing are defined and used in Designsystemet.
Typography
How typographic styles are used to present content correctly.
Shadows
How shadows are defined and used in Designsystemet.
Theme Builder
Build your theme
How to create your own theme with your profile colours and preferences.
Contrast
How the theme builder helps you with contrast and how to use it correctly.
Multiple themes
Learn how to have multiple themes in the same project.
Code
Get started in code
All the information you need to get started as a developer.
Colors in code
Information about how to use colors in frontend.
Sizes in code
Information on how to use sizes in frontend.
Composition
Information and use of asChild to solve composition.
CLI Config
Information on how to use the CLI config file.
Figma
Get started in Figma
How to use Designsystemet in Figma and how to activate the libraries.
Modes in Figma
Learn how you can change sizes, colors, and typography with modes in Figma
Colors in Figma
Main and Support colors in Figma Dev Mode, and how they are used.
Get updates
What do you do when there's a new version of the Figma community file?
New component in Figma
What to consider when creating a new component in Figma.
Resources
Icons
Designsystemet lets you choose the icon pack that suits your needs.