About Designsystemet

What is Designsystemet?

Designsystemet is a shared toolbox of foundational UI components, guidelines, and patterns. It helps create cohesive user experiences and supports efficient product development.

Designsystemet is a public good offered as open source, and anyone is welcome to use it to the extent they wish.

Why a shared design system?

More than 1 million people in Norway struggle to use digital services. One reason is that components and interaction patterns behave differently across services. We want to make it easier to create accessible, consistent, and user-friendly services across the public sector. We achieve this by sharing guidelines, interaction patterns, and basic components that can be used alongside each organization’s visual identity. The goal of Designsystemet is not that all services should look exactly the same, but that components should behave the same—for example, in screen readers and assistive technologies. This promotes recognizable and predictable interactions, even across visually distinct services.

Three key reasons for having a shared design system:

1. Coherent services across sectors
   By collaborating on a shared design system, we can provide more consistent, accessible, and recognizable user experiences across government services. The Norwegian government aims for “public digital services to have user-friendly and consistent design across agencies, so that citizens with low digital skills can use them”. ¹

2. Less duplicated work
   Instead of creating the same foundational components repeatedly, we can build them properly once—with high quality, accessibility, and testing in place. Best of all, we only have one place to maintain them as technologies, standards, and needs evolve. This leads to optimized use of resources, reduced development costs, and more time to solve actual user problems.

3. Accessibility by default
   By providing components that meet accessibility standards—along with WCAG-aligned guidance—we make it easier for everyone to build inclusive services. Universal design often requires detailed technical and design decisions. Components may need specific HTML and ARIA attributes, correct focus handling, and screen reader announcements. On top of that, developers must account for how different browsers and screen readers interpret these combinations. These are complex challenges no one should solve alone. When we solve them together, everyone can benefit. Any bugs or improvements are shared with all who use Designsystemet.

What does Designsystemet solve?

Designsystemet provides a shared foundation, but we know every service has its own needs. The goal is not to cover everything—but to offer flexible building blocks that work across services and agencies. When something more specialized is needed, each organization can build it themselves or extend the system.

Designsystemet is made to work with your own visual identity and specific service needs. It offers a shared structure for design and development—while allowing local customization.

By reusing common building blocks, we avoid solving the same problems over and over again. This saves time, strengthens quality, and frees up resources to address more specialized challenges.

What does Designsystemet include?

Designsystemet consists of multiple building blocks and tools. You can use what you need, to the extent it makes sense for you:

• Design Tokens
  Design Tokens are variables for colors, typography, spacing, sizes, and shapes. They are theme-based, meaning they reflect your brand via the preferences you set in the Theme Builder. The color system ensures text and background always have sufficient contrast—no matter your brand colors. Token structure supports multiple themes and modes (light, dark, contrast, etc.). Tokens keep design and code in sync—this is where the magic happens.

• UI components
  Designsystemet offers essential components worth sharing across services. They are available in Figma, CSS, and React. Usage guidelines are included and continuously updated as we learn more.

• Theme Builder
  The Theme Builder helps you customize Designsystemet to match your organization’s brand. After configuration, you copy a code snippet and paste it into your terminal or Figma. In just minutes, all components reflect your brand colors in both design and code.

• Command-line interface (CLI)
  The CLI helps you set up new projects, generate structure, configure themes, and install dependencies.

• Patterns and best practices
  Designsystemet is also a collaboration space for developing shared patterns and recommendations. Patterns include layout, navigation, error handling, and repeated user tasks. We can collaborate on patterns even if we don’t use the same tools or technologies.

• Blog
  The blog is where we share updates and stories. We encourage contributions—tell us how you use Designsystemet!

• Community
  Join the discussion on Slack and GitHub. Designsystemet aims to foster shared learning and collaboration across sectors.

How is the work organized?

Designsystemet is a product within The Norwegian Digitalisation Agency (Digdir), under the “Portals and user experience” product group. The product council includes 16 public organizations.

The core development team includes designers and developers from Digdir, the Brønnøysund Register Centre, the Norwegian Food Safety Authority, the Directorate for Education and Training, and KS Digital. We also collaborate with the design system teams at NAV, the Tax Administration, Oslo Municipality, the Police, and Entur on shared interaction patterns. Many other contributors help shape Designsystemet. Read more about collaboration.

Who can use Designsystemet?

Anyone building digital services can use Designsystemet. It’s open source, and we welcome your help to make it better. Let us know if you find a bug or have a suggestion. You can also ask questions in our Slack channel—we help each other there.

Who uses Designsystemet today?

Designsystemet is integrated into Altinn Studio, used by over 70 agencies to build digital services. If you’re building services in Altinn Studio, you’re already using components from Designsystemet.

Several other organizations also use Designsystemet in their services:

---

Sources

[1] The government’s strategy “Digital for life” (in Norwegian)
and the action plan for “Increased inclusion in a digital society”

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