About Designsystemet

What is Designsystemet?

Designsystemet is a shared toolbox of basic UI components, guidelines, and patterns. Designsystemet aims to contribute to cohesive user experiences and efficient product development.

Designsystemet is a collective good through open source, and can be used by anyone to the extent they wish.

Why a shared design system?

There are many reasons to have a shared design system, here are two of the most important.

1. Cohesive services across organizations
   By collaborating on a shared design system, we can better ensure cohesive, accessible, and recognizable user experiences across agencies. The Norwegian government aims to ensure that "public digital services should have a user-friendly and recognizable design across different agencies so that citizens with low digital competence can use the service". ¹

2. Less duplicate work
   Instead of creating the same basic components over and over again, we can create them properly once and ensure good quality by maintaining accessibility requirements and testing. Best of all - we then have only one place to maintain them when new technologies, standards, requirements, and needs emerge. This means optimized resource use in the public sector and reduced development costs. It also means more time to solve more important problems for our users.

How to use Designsystemet?

Designsystemet should be used as a foundation, where you have your own visual profile on top. By using basic building blocks from Designsystemet, you can build more complex components that meet your specific needs.

What does Designsystemet consist of?

Designsystemet consists of several building blocks and tools. You can use what you need, to the extent you wish.

• Design Tokens
  Design Tokens are variables that control colors, typography, sizes, spacing, and shapes. The variables are set up to be theme-based, meaning they are based on your brand with the colors and preferences you choose in the Theme Builder. The color system ensures good contrast between text and background colors, regardless of your profile colors. The token structure supports having both multiple themes and multiple "modes" (dark-mode, light-mode, contrast-mode, etc.). Design Tokens also ensure that we work with the same values in design and code. Design tokens are the magic!

• UI Components
  Designsystemet contains the most basic UI components that provide value to share across organizations. The UI components are available in libraries for Figma, CSS, and React. We document how the components should be used and update the guidelines as we gain more insights.

• Theme Builder
  The Theme Builder makes it easy to use Designsystemet in your own organization with your own brand colors and preferences. After customizing the theme, you copy a code snippet and paste it into the terminal or Figma. In just a few minutes, you have all the components in Figma and code with your own design.

• Command Line Tool (CLI)
  Designsystemet's CLI helps with setting up new projects, generating basic structures, configuring themes, necessary dependencies, and configuration.

• Patterns and Best Practices
  Designsystemet is a collaboration arena for developing recognizable patterns and shared recommendations. By patterns, we mean, for example, where key elements should be placed in the interface, and how navigation, error messages, and other recurring user tasks should behave. We can collaborate on patterns even if we don't use the same technical components or design elements.

• Blog
  In the blog, we can communicate about new updates and share stories. We hope more people will use the blog to write about how they have implemented Designsystemet.

• Community
  Designsystemet aims to facilitate broad knowledge sharing around design systems and everything related. You can join us on Slack and on Github.

Who can use and contribute to Designsystemet?

Anyone who creates digital solutions can use Designsystemet. It is open source, and we appreciate your contributions to make Designsystemet better. Let us know if you find an error or want to suggest an improvement. You can ask questions in the Slack channel #Designsystemet, where we help each other.

How can you contribute?

We don't have a specific approach you must follow to contribute, but please contact us on Slack when you have a need, and we can assess the need together.

• Contribute with design
• Contribute with development
• Contribute with insights
• Write an article

Who uses Designsystemet today?

Designsystemet is used in Altinn Studio, where 70 different agencies develop their services. If you use Altinn Studio to develop services, you automatically use components from Designsystemet.

Several public organizations have also implemented Designsystemet in their own services.

How do we collaborate across organizations?

Once a month, we have a "Demo and Collaboration Forum" that is open to all stakeholders. Here we share what we have worked on since the last meeting. Contact us if you would like to receive a meeting invitation.

The current development team consists primarily of a team from The Norwegian Digitalisation Agency (Digdir), along with designers and developers from Brønnøysundregistrene, Mattilsynet, Utdanningsdirektoratet, and KS Digital. We hope the team will grow into an even broader cross-agency collaboration. Would your organization like to be more closely involved? Feel free to contact us at:: designsystem@digdir.no

In addition, we have a pattern collaboration, where Digdir, Nav, Skatteetaten, Oslo Kommune, Entur, Politiet, and Brønnøysunddregistrene, among others, participate in working groups to establish common patterns across organizations.

Being open and transparent is an important value for us.

We share everything we do openly:

• Source code
• Backlog
• Roadmap
• Figma
• Storybook
• Discussions on Github
• Discussions on Slack

---

Sources

[1] The Government's strategy «Digital throughout life» and the action plan for «Increased inclusion in a digital society»)

Rediger denne siden på Github (åpnes i ny fane)