Radix Designsystemet

Radix Designsystemet brings Designsystemet, the design system of the Norwegian public sector, to Drupal 11. It is a base theme on Radix: your site's theme, generated from its starterkit, gets Designsystemet's components and Drupal's own output in Designsystemet's markup, with your organization's colors.

Features

• Designsystemet's components as Single Directory Components: alert, avatar, badge, breadcrumbs, button, card, chip, details, dialog, divider, dropdown, error summary, file upload, heading, link, list, pagination, paragraph, popover, search, skeleton, spinner, suggestion, switch, table, tabs, tag, toggle group and tooltip. Each has a props schema, stories and documentation.
• Drupal's own output in Designsystemet's markup: forms and Webforms (fields, fieldsets, validation messages, an error summary at the top of a form with errors, and required and optional fields marked as Designsystemet recommends), status messages, pagers, tables, Views grids and tables, breadcrumbs, dropbuttons, dialogs and progress bars.
• Your colors, sizes and font, set in Designsystemet's own configuration and built with its command line, in light and dark mode.
• Light and dark mode, following the visitor's system setting, with a toggle in the header.
• A components library for UI Patterns Library: every component's stories and props, grouped and searchable.
• Accessibility as Designsystemet specifies it: landmarks, labels, error handling and keyboard behavior, checked against Designsystemet's markup and documentation.
• The Aksel icons, Designsystemet's icon set, as an icon pack in Drupal core's Icon API.
• Norwegian (bokmål) translations of the theme's own texts.

How it works

Radix Designsystemet is a base theme and doesn't work on its own. You generate your site's theme from its starterkit. Your theme holds what is your own: your colors (Designsystemet's configuration), your logo and your content components. It installs Designsystemet's CSS and web components, the Inter font and Bootstrap's grid from npm, and builds them. Updates to the components and the Drupal integration then reach you through Composer.

Radix stays the base theme underneath: its page structure, Bootstrap's grid and layout classes, and its conventions for components, such as *_utility_classes. Everything visible is Designsystemet's.

Getting started

composer require drupal/radix_designsystemet
cd web
../vendor/bin/dr generate-theme my_theme --name "My theme" \
  --starterkit radix_designsystemet_starterkit --path themes/custom
cd themes/custom/my_theme
npm install
npm run build
drush theme:enable my_theme
drush config:set system.theme default my_theme

Before Drupal 11.4, use php core/scripts/drupal generate-theme instead of ../vendor/bin/dr generate-theme. Then set your colors in designsystemet.config.jsonc, run npm run build, and replace logo.svg. The README and your theme's own README have the details, and components/README.mdx is the guide to the components.

Requirements

• Drupal 11.1 or later (the Icon API)
• Radix 6
• Node.js 22 and npm, to build your site's theme
• Recommended: UI Patterns 2 with UI Patterns Library, for the components library at /admin/appearance/ui/components

Status

The 1.0.x branch is in alpha. It is built on Designsystemet 1.24 and tested on Drupal 11.4. The components are ready to use; their props may still change before the first beta. Feedback and issues are welcome in the issue queue.

Similar projects

• Designsystemet is a standalone theme for Designsystemet. Radix Designsystemet builds on Radix instead, and adds the Drupal integration (forms, messages, pagers, tables) and a starterkit for your organization's own theme.
• Radix is the base theme underneath, with Bootstrap's components; Radix Designsystemet replaces those with Designsystemet's.