Designsystemet Theme Builder
What it is
Designsystemet Theme Builder is a free web tool for shaping Designsystemet around an organization’s visual identity. It lets teams set colors, sizes, typography, border radius, and other theme properties, then create a semantic token structure for use in design tools and code. Color controls include overrides for light and dark modes, while the token structure can accommodate multiple themes and light, dark, and contrast modes. Its color system is described as helping preserve sufficient contrast between text and backgrounds across brand colors.
After configuring a theme, users can run a code snippet in a terminal to apply brand colors to components. The documented command-line workflow generates design tokens and CSS; its setup requires Node.js version 20 or higher and a Git repository for the tokens. For design work in Figma, teams can use the Figma Community component library and Tokens Studio to synchronize tokens, or import theme variables into the Designsystemet Core UI Kit. Components are available for Figma, CSS, a framework-independent web package, and React. Designsystemet says its components are tested against accessibility requirements, with guidance aligned to WCAG. It is a shared foundation, so organizations may add their own components and patterns for needs it does not cover.
For and against
For
- Free for public and private organizations.
- Generates design tokens and CSS from a theme.
- Supports color overrides for light and dark modes.
- Token structure supports light, dark, and contrast modes.
- Includes accessibility guidance aligned to WCAG.
Against
- Token generation requires Node.js version 20 or higher and a Git repository.
- Maintaining a custom design system requires a dedicated designer and frontend developer.
- The shared foundation may need custom components and patterns for a solution.
Who it suits
It suits public or private organizations building digital services that want to adapt Designsystemet’s colors and other visual properties to their brand. Teams planning to create and maintain their own design system need a dedicated designer and frontend developer.
Getting started
- Open the Theme Builder website.
- Configure the theme’s colors, sizes, typography, and other visual properties.
- Use the color controls to set overrides and modes as needed.
- Set up the documented token workflow with Node.js version 20 or higher and a Git repository.
- Run the generated code snippet in a terminal to apply brand colors to components.
- For Figma, use the Figma Community component library and Tokens Studio, or import theme variables into the Core UI Kit.
The verdict
Choose Theme Builder if your organization wants a free way to adapt Designsystemet’s visual properties and create tokens for design tools and code. Look elsewhere or plan to add your own components and patterns if the shared foundation does not cover your solution’s needs; custom system maintenance calls for a dedicated designer and frontend developer.
Questions
Does Designsystemet Theme Builder cost anything?
It is free for public and private organizations.
Which platforms are available?
The Theme Builder is available on the web. Designsystemet components are available for Figma, CSS, a framework-independent web package, and React.
What can it generate?
The documented command-line workflow can generate design tokens and CSS from a theme configuration. JSON and CSS are listed as export formats.
Can a team use its theme in Figma?
Yes. The setup guide describes using the Figma Community component library and Tokens Studio to synchronize tokens. Teams can also import theme variables into the Designsystemet Core UI Kit.
What does the token workflow require?
The documented token-generation workflow requires Node.js version 20 or higher and a Git repository for the tokens.
Who makes Designsystemet, and where can users get support?
Designsystemet directs users to its community Slack channel for questions and to GitHub for bug reports and suggestions.
Facts on the record
- Accessibility
- Designsystemet says its components are tested and meet accessibility requirements, with guidance aligned to WCAG.designsystemet.no · read 7 Oct 2026
- Code output
- The documented CLI can generate design tokens and CSS from the theme configuration.designsystemet.no · read 7 Oct 2026
- Color contrast
- The color system is described as ensuring sufficient text and background contrast across brand colors.designsystemet.no · read 7 Oct 2026
- Color controls
- The builder includes color controls and token color overrides for light and dark modes.theme.designsystemet.no · read 7 Oct 2026
- Developer requirements
- The documented token-generation workflow requires Node.js version 20 or higher and a Git repository for the tokens.designsystemet.no · read 7 Oct 2026
- Development options
- Designsystemet components are available for Figma, CSS, a framework-independent web package, and React.designsystemet.no · read 7 Oct 2026
- Figma integration
- The setup guide describes using the Figma Community component library and Tokens Studio to synchronize design tokens between Figma and code.designsystemet.no · read 7 Oct 2026
- Figma workflow
- Teams can import variables from their theme into the Designsystemet Core UI Kit in Figma.designsystemet.no · read 7 Oct 2026
- Founded
- 2025theme.designsystemet.no · read 28 Sept 2026
- Generated output
- After configuring a theme, users copy a code snippet into a terminal to apply their brand colors to components.designsystemet.no · read 7 Oct 2026
- Headquarters
- Norwaytheme.designsystemet.no · read 28 Sept 2026
- Intended users
- Designsystemet is open to anyone building digital services and is free for public and private organizations.designsystemet.no · read 7 Oct 2026
- Known scope limit
- Designsystemet is a shared foundation and is not intended to cover every need within a solution.designsystemet.no · read 7 Oct 2026
- Maintenance requirement
- Organizations creating their own design system need a dedicated designer and frontend developer to set it up and maintain it.designsystemet.no · read 7 Oct 2026
- Modes
- The token structure supports multiple themes and modes, including light, dark, and contrast.designsystemet.no · read 7 Oct 2026
- Purpose
- Theme Builder helps organizations customize Designsystemet to match their brand.designsystemet.no · read 7 Oct 2026
- Scope
- Designsystemet is a shared foundation and does not cover every need in every solution, so organizations may build their own components and patterns on top.designsystemet.no · read 7 Oct 2026
- Support
- Users can ask questions in the community Slack channel or report bugs and suggestions on GitHub.designsystemet.no · read 7 Oct 2026
- Support and community
- The maker directs users to its Slack community and invites bug reports and suggestions through GitHub.designsystemet.no · read 7 Oct 2026
- Theme configuration
- A theme can define colors, sizes, typography, and other visual properties.designsystemet.no · read 7 Oct 2026
- Theme options
- The builder exposes color and dimension controls, including border radius, and offers color-system and example tabs.theme.designsystemet.no · read 7 Oct 2026
- Theme setup
- It lets users configure a theme and generate design tokens for use in design tools and code.designsystemet.no · read 7 Oct 2026
- Token modes
- The token structure supports multiple themes and modes, including light, dark, and contrast.designsystemet.no · read 7 Oct 2026
- Token structure
- The theme builder helps create a semantic token structure that organizations can adapt to their visual profile.designsystemet.no · read 7 Oct 2026
- Who it serves
- Anyone building digital services can use Designsystemet, which is free for public and private organizations.designsystemet.no · read 7 Oct 2026