Digdir (Norwegian Digitalisation Agency) — Norway's shared, MIT-licensed design system for public-sector digital services.
Designsystemet is owned and coordinated by Digdir (Digitaliseringsdirektoratet), the Norwegian Digitalisation Agency, with other public bodies (NAV, Skatteetaten, Oslo kommune, Entur among them) contributing patterns. It's MIT-licensed and ships five npm packages: a CLI, CSS, framework-agnostic web components, React bindings, and shared TypeScript types.
A core team at Digdir owns the canonical components and tokens and runs a public feature-request process on GitHub: proposals are filed as issues, the team assesses fit, and accepted work is tracked to completion. The project explicitly declines to ship AI-specific tooling and instead points integrators at its own docs site and token variables.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
--ds-color-accent-base-default
Primary interactive/accent color (Digdir theme, light mode)
--ds-color-success-base-default
Success feedback
--ds-color-danger-base-default
Destructive/error emphasis
--ds-border-radius-base
Base control radius
--ds-border-radius-full
Pill/avatar radius
--ds-size-base
Root sizing-scale base (paired with --ds-size-step: 4 to generate the spacing scale)
Exactly what ships in norway-designsystemet-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
# Designsystemet — Design Style Reference > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Digdir (Norwegian Digitalisation Agency). "Designsystemet" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values. **System:** Designsystemet **Owner:** Digdir (Norwegian Digitalisation Agency) **Official documentation:** https://designsystemet.no/en/ --- ## Summary Norway's shared, MIT-licensed design system for public-sector digital services. ## Design tokens (illustrative) | Token | Value | Role | | --- | --- | --- | | `--ds-color-accent-base-default` | `#0062BA` | Primary interactive/accent color (Digdir theme, light mode) | | `--ds-color-success-base-default` | `#068718` | Success feedback | | `--ds-color-danger-base-default` | `#C01B1B` | Destructive/error emphasis | | `--ds-border-radius-base` | `0.25rem` | Base control radius | | `--ds-border-radius-full` | `624.9375rem` | Pill/avatar radius | | `--ds-size-base` | `18` | Root sizing-scale base (paired with --ds-size-step: 4 to generate the spacing scale) | ## Origin Designsystemet is owned and coordinated by Digdir (Digitaliseringsdirektoratet), the Norwegian Digitalisation Agency, with other public bodies (NAV, Skatteetaten, Oslo kommune, Entur among them) contributing patterns. It's MIT-licensed and ships five npm packages: a CLI, CSS, framework-agnostic web components, React bindings, and shared TypeScript types. ## Governance A core team at Digdir owns the canonical components and tokens and runs a public feature-request process on GitHub: proposals are filed as issues, the team assesses fit, and accepted work is tracked to completion. The project explicitly declines to ship AI-specific tooling and instead points integrators at its own docs site and token variables. ## Known for - A real cross-agency governance model — a shared system multiple Norwegian public bodies contribute components and feedback to, not just Digdir's own product. - Native web components (@digdir/designsystemet-web) — custom elements like ds-error-summary, ds-pagination, and ds-tabs ship a machine-readable custom-elements.json manifest, not just a CSS class API. - Tokens authored in the Tokens Studio for Figma format and compiled into CSS via a first-party CLI, so Figma and code stay traceably in sync. ## Underrated - The error-summary and field components exist specifically to satisfy WCAG's error-identification requirements in long government forms. - The brand theme package ships four ready themes (Digdir, Altinn, Tilsynet, Portal) as literal CSS files with light/dark variants, so a new agency site can reskin by picking one file. ## Watch out for - The framework surface is narrower than it looks: only React has an official component wrapper today — no maintained Vue, Angular, or Svelte package from Digdir itself. - Its component set and content voice are shaped by Norwegian public-service forms and self-service flows; adapting it to a marketing site or non-government product means overriding a lot of that context. ## Components worth studying - **ErrorSummary** — Renders a list of form validation errors above a form, per WCAG's error-summary pattern; ships as both React and a ds-error-summary custom element. - **Combobox** — Single- or multi-select searchable dropdown with an aria-busy loading state and chip-based display of selected values in multi-select mode. - **Suggestion** — Typeahead/autocomplete component that the library's own docs mark as the successor to the deprecated Combobox component. ## When to choose Designsystemet Pick Designsystemet if you're building a Norwegian (or Nordic-style) public-sector service and want accessibility-first form components with a governance model built for multi-agency reuse. Don't expect first-party support if your stack is Vue or Angular. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of Designsystemet by Digdir (Norwegian Digitalisation Agency) — Norway's shared, MIT-licensed design system for public-sector digital services. Lean into what it's known for: A real cross-agency governance model — a shared system multiple Norwegian public bodies contribute components and feedback to, not just Digdir's own product. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [Designsystemet docs](https://designsystemet.no/en/) - [Designsystemet on GitHub](https://github.com/digdir/designsystemet) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/norway-designsystemet) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
If you're evaluating this system
Pick Designsystemet if you're building a Norwegian (or Nordic-style) public-sector service and want accessibility-first form components with a governance model built for multi-agency reuse. Don't expect first-party support if your stack is Vue or Angular.
Where next
