Designsystemet

Designsystemet is a suite of tools designed to create consistent and user-friendly digital experiences for public services. It provides several packages depending on your technical requirements:

• @digdir/designsystemet: The Command Line Interface (CLI) for Designsystemet.
• @digdir/designsystemet-react: React-specific implementation of Designsystemet components.
• @digdir/designsystemet-web: Framework-agnostic implementations of web components and helpers.
• @digdir/designsystemet-css: CSS implementation of components (used by the React package) and contains the default theme.
• @digdir/designsystemet-types: TypeScript definitions and types for the system.

Note: @digdir/designsystemet-theme is deprecated.

The @digdir/designsystemet-css package provides the CSS implementation of Designsystemet components.

Key technical details:

• It utilizes the CSS @layer directive with the layer name ds to manage specificity.
• It exports a default theme located under /theme.
• You can also use a CSS file generated via the @digdir/designsystemet tokens build command for custom theming.
• Custom themes can be built using the official web tool at https://theme.designsystemet.no/en.

Designsystemet provides foundational components designed to meet the WCAG requirements included in Norwegian legislation. The system aims to support accessibility through:

• Accessible Components: Components are built with specific HTML and ARIA attributes, proper focus handling, and dynamic announcements for screen readers.
• Guidance and Best Practices: Beyond technical implementation, the system provides recommendations to ensure digital solutions are user-friendly for people with permanent or temporary impairments.
• Continuous Improvement: Accessibility is integrated into the development lifecycle. Issues or limitations affecting a component's accessibility are prioritized for fixes to benefit all users of the system.

The Label is a typography component designed to describe the content of form fields. It provides short, precise, and understandable information about what a field contains or what action is expected from the user. Use it to label inputs, radio buttons, checkboxes, and other interactive elements.

<Story story="PreviewEn" />

The @web/themebuilder is a tool for customizing Designsystemet themes. It is hosted online and can be accessed directly via the web interface.

https://theme.designsystemet.no

Designsystemet is built to meet WCAG AA requirements (and aims for AAA where appropriate).

Contrast Ratios

To meet AA standards, you must ensure the following contrast ratios between text and background:

• Small text: Minimum 4.5:1.
• Large text (≥ 18px): Minimum 3:1.
• Interactive/Graphical elements: Minimum 3:1.

Relative Luminance

WCAG calculates contrast based on relative luminance, a normalized value between 0 (black) and 1 (white). This value is derived from the RGB components, where the green channel contributes most to perceived brightness. The contrast score ranges from 1:1 (no contrast) to 21:1 (maximum contrast).

The Tag component's appearance is controlled via data-size and data-color attributes. The component inherits these values from the nearest parent element that defines them, allowing for scoped styling.

<!-- Example of scoping size and color to a container -->
<div data-size="small" data-color="primary">
  <div class="ds-tag">Scoped Tag</div>
</div>

Use the List component to improve content scannability and clarity in the following scenarios:

• Summarising key points.
• Showing multiple steps in a process.
• Listing criteria, options, or prerequisites.

Avoid using a List when:

• The items are so long that readability suffers. In this case, consider breaking the content into several shorter lists.
• Information needs to be structured for comparison. Use the Table component instead.

Use radio buttons when a user must choose exactly one option from a set of several mutually exclusive options in a form.

Do not use radio buttons if:

• The user should be able to select multiple options (use checkbox instead).
• There is only one choice to make (consider using switch or checkbox).
• There are more than seven options in a group (consider using suggestion or select).