About Designsystemet
Designsystemet contains foundational UI components, guidelines, and patterns that are valuable to share across organizations.
Fundamentals
Learn more about Designsystemet, the basic design elements, and how to get started as a designer or developer.
Introduction
Get started
Information about how to get started and what you can expect.
Collaboration
How do we collaborate on Designsystemet?
Accessibility
Designsystemet should be accessible to everyone, regardless of permanent or temporary impairments.
Values
Designsystemet is built upon these values.
Design Tokens
Variables
Design tokens are reusable values that serve as a bridge across all platforms.
Colors
The color system consists of global colors and a semantic level that describes what the color should be used for.
Sizes and Spacing
Sizes and spacing in Designsystemet
Typography
To present content correctly, we use styles and components for typography.
Shadows
How shadows are used in Designsystemet
Theme Builder
Build your theme
Learn how to use Designsystemet with your own brand colors and preferences.
Contrast
Contrast in the theme builder
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.
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
How to create a new component in Figma
Resources
Icons
How we use icons in components