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.
We don't provide any AI tools such as SKILLS.md or an MCP server.
Our website, designsystemet.no, delivers all content as Markdown when you request it with the Accept: text/markdown header.
If you want your AI to make better use of Designsystemet, we recommend adding something like this to your prompt or skills:
- Use https://designsystemet.no for patterns, tips and Designsystemet documentation
- Use Designsystemet variables when setting colors and spacing (padding/margin)
- Use semantically correct components or elements
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.