Digitaliseringsstyrelsen & Erhvervsstyrelsen — Denmark's shared SCSS/JS design system for self-service government solutions.
DKFDS's own package.json describes it as "the common guide for self-service solutions" on Borger.dk and Virk.dk — Denmark's citizen and business portals — with author field "Erhvervsstyrelsen og Digitaliseringsstyrelsen." The npm package (dkfds) has release history since at least October 2018 and is licensed under a combination of MIT, OFL-1.1 (for the bundled IBM Plex Sans font), and Apache-2.0.
Jointly steered by Digitaliseringsstyrelsen (Agency for Digital Government, which runs Borger.dk) and Erhvervsstyrelsen (Danish Business Authority, which runs Virk.dk) through a shared steering group; a dedicated FDS team drawn from both agencies handles day-to-day support and development. Community input happens through GitHub issues and discussions.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
gray-600
Primary theme/text color
green-700
Success/positive text
red-700
Error/negative text
blue-800
Link color
$spacer
Base spacing unit (the $spacers scale is multiples of this)
fds-border-radius: medium
Default component radius (resolves via the spacing scale)
Exactly what ships in denmark-dkfds-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.
# DKFDS — Design Style Reference > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Digitaliseringsstyrelsen & Erhvervsstyrelsen. "DKFDS" 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:** DKFDS **Owner:** Digitaliseringsstyrelsen & Erhvervsstyrelsen **Official documentation:** https://designsystem.dk/ --- ## Summary Denmark's shared SCSS/JS design system for self-service government solutions. ## Design tokens (illustrative) | Token | Value | Role | | --- | --- | --- | | `gray-600` | `#454545` | Primary theme/text color | | `green-700` | `#358000` | Success/positive text | | `red-700` | `#CC0000` | Error/negative text | | `blue-800` | `#004D99` | Link color | | `$spacer` | `8px` | Base spacing unit (the $spacers scale is multiples of this) | | `fds-border-radius: medium` | `8px` | Default component radius (resolves via the spacing scale) | ## Origin DKFDS's own package.json describes it as "the common guide for self-service solutions" on Borger.dk and Virk.dk — Denmark's citizen and business portals — with author field "Erhvervsstyrelsen og Digitaliseringsstyrelsen." The npm package (dkfds) has release history since at least October 2018 and is licensed under a combination of MIT, OFL-1.1 (for the bundled IBM Plex Sans font), and Apache-2.0. ## Governance Jointly steered by Digitaliseringsstyrelsen (Agency for Digital Government, which runs Borger.dk) and Erhvervsstyrelsen (Danish Business Authority, which runs Virk.dk) through a shared steering group; a dedicated FDS team drawn from both agencies handles day-to-day support and development. Community input happens through GitHub issues and discussions. ## Known for - Component-level theming for its two flagship consumers baked in as separate stylesheet entry points — dkfds-borgerdk.scss and dkfds-virkdk.scss — rather than one generic default theme. - A cookie-consent component shipped as a first-class, documented component with required heading/message/accept/decline params — treating a legal-compliance UI as a designed pattern, not an afterthought. - A stepguide component built for Denmark's multi-step self-service flows, with per-step active/disabled/error states and a responsive collapsing variant. ## Underrated - The border-radius scale is deliberately derived from the spacing scale rather than defined independently, so radius and spacing stay proportionally linked as the base unit changes. - structured-list is a purpose-built pattern for the "read-only summary with an edit link per row" UI that's extremely common in government form review steps, but rarely gets its own named component elsewhere. ## Watch out for - There's no official Vue, React, or Angular wrapper — the framework-agnostic CSS/JS package is the only first-party integration path. - Color tokens are exposed as named SCSS map keys, not as a flat token file — there's no separate JSON/Style-Dictionary token export to consume outside Sass. ## Components worth studying - **cookie-message** — Cookie-consent banner component taking required heading, message, accept-button, and decline-button text as parameters. - **stepguide** — Multi-step flow navigation listing steps with active/disabled/error states and per-step help text, with a companion variant that collapses at a chosen breakpoint. - **structured-list** — Label/value summary table with an optional per-row edit link and a configurable breakpoint at which it reflows for small screens. ## When to choose DKFDS Pick DKFDS if you're building a Danish public self-service flow and want components already shaped for that (cookie consent, step guides, structured summary-and-edit lists). Don't expect a modern token pipeline or non-Sass integration path. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of DKFDS by Digitaliseringsstyrelsen & Erhvervsstyrelsen — Denmark's shared SCSS/JS design system for self-service government solutions. Lean into what it's known for: Component-level theming for its two flagship consumers baked in as separate stylesheet entry points — dkfds-borgerdk.scss and dkfds-virkdk.scss — rather than one generic default theme. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [DKFDS docs](https://designsystem.dk/) - [dkfds-components on GitHub](https://github.com/detfaellesdesignsystem/dkfds-components) - [dkfds on npm](https://www.npmjs.com/package/dkfds) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/denmark-dkfds) — 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 DKFDS if you're building a Danish public self-service flow and want components already shaped for that (cookie consent, step guides, structured summary-and-edit lists). Don't expect a modern token pipeline or non-Sass integration path.
Where next
