What it does
Designsystemet is a Norwegian toolkit of UI components, patterns and guidance that can use an organization’s own visual identity. It provides Figma resources, CSS, web components, React components and a Theme Builder. The toolkit is free, and its implementation code uses the MIT licence.
Designsystemet shares underlying controls without imposing one organization’s brand. The Theme Builder produces a configuration for Figma and code; a command-line tool turns that configuration into theme CSS and optional design tokens. The Figma plugin imports the same theme into the design file.
In code, choose the CSS and web-component packages or the React route. Import the base CSS first and the theme afterwards. The setup guide shows three useful controls: data-color-scheme chooses light, dark or automatic mode; data-size selects small, medium or large; data-color selects a component colour. These correspond to Appearance controls in Figma.
You can adopt the packages separately, including CSS alone if you supply interaction behavior. The components were developed with Inter, so another typeface can change their appearance. Public installation requires no Designsystemet account, and the MIT licence permits reuse with its notices preserved.
Strengths
- A theme configuration can be shared between Figma and code
- Packages can be adopted independently
- Colour mode and component sizes have matching design and code controls
Watch out for
- Changing the Inter typeface can alter component appearance
- Theme styles must be imported after the base CSS
Best for
- Public-service teams wanting reusable controls with their own brand
Sources
- Designsystemet common digital toolkit (Oct 27, 2026)
- Designsystemet code setup (Oct 27, 2026)
- Designsystemet official repository (Oct 27, 2026)
- Designsystemet MIT licence (Oct 27, 2026)