Getting started

Learn more about Designsystemet, the basic design elements, and how to get started as a designer or developer.

Start here

What to consider when adopting Designsystemet in your organisation and solutions.

How to set up your theme in Designsystemet with Design Tokens for design and code.

Get started with CSS including layers, data attributes and helpers.

Get started with React, including setup and component usage.

Using Designsystemet with other frameworks and plain HTML.

Information on how to use the CLI config file.

Information on how to use sizes in frontend.

Information about how to use colors in frontend.

Information and use of asChild to solve composition.

Learn how to have multiple themes in the same project.

How the colours are structured and how you use them.

How sizes and spacing are defined and used in Designsystemet.

How typographic styles are used to present content correctly.

How shadows are defined and used in Designsystemet.

Designsystemet lets you choose the icon pack that suits your needs.

All variables generated by the command line tool.

Learn how you can change sizes, colors, and typography with modes in Figma

Learn how to use the swap feature in Figma to customise components without detaching them.

How variables are used in Figma and how to find the right variable.

What do you do when there's a new version of the Figma community file?

What to consider when creating a new component in Figma.