Designsystemet is a set of building blocks for making better web solutions and creating design systems.

Our goal is to create consistent and user-friendly experiences in digital solutions for public services, making them more efficient and reliable.

designsystemet.no - Documentation.

Theme Builder - Create your theme and get a config file for Figma and code.

@digdir/designsystemet - CLI that creates CSS and optionally design tokens for your theme from the config file.

@digdir/designsystemet-css - CSS implementation of Designsystemet components. Used by the React package. Contains a default theme.

@digdir/designsystemet-web - Framework-agnostic implementations of some Designsystemet web components and helpers.

@digdir/designsystemet-react - React implementation of Designsystemet components.

@digdir/designsystemet-types - Types for Designsystemet.

Please refer to our setup guide for getting started in code.

Core UI Kit - The component library for Figma.

Designsystemet plugin - Import your theme into Figma.

Learn how you can contribute to this project by reading our Code of Conduct and Contributing Guide.

Our documentation and patterns are available as Markdown. Append .md to a page URL or request it with Accept: text/markdown. See llms.txt for a documentation index.

We are lucky to have a great group of people who have contributed to Designsystemet.

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.