Designsystemet is a collection of important design elements, components and patterns that can be used to build public services.
Our goal is to create consistent and user-friendly experiences in digital solutions for public services, making them more efficient and reliable.
Storybook - Preview for React components.
Storefront - General documentation about the design system.
Theme - Theme builder.
@digdir/designsystemet - CLI for Designsystemet.
@digdir/designsystemet-theme - Themes for Designsystemet.
@digdir/designsystemet-css - Styling for components.
@digdir/designsystemet-react - React implementation of Designsystemet components.
Follow these steps to get started with the React components.
Depending on your needs and technology stack install the relevant packages
npm i @digdir/designsystemet
npm i @digdir/designsystemet-css
npm i @digdir/designsystemet-theme
npm i @digdir/designsystemet-react You can create your own theme to use with the Designsystemet packages by going to our theme-builder.
Designsystemet theming is defined using design-tokens. This is done so that you can use Token Studio to sync your theme in code with Designsystemet Figma UI kit, in addition to provide future flexibility.
Run npx @digdir/designsystemet tokens build to build CSS files for your custom theme (from the design-tokens).
Using your own built CSS theme file you can skip using the @digdir/designsystemet-theme package.
You are free to use any font-family with the components.
The components are designed and developed using the Inter font so variations might occur if a different font is used.
Add the <link> tag in <head>, and set font-family to Inter in your global css file.
The font-feature-settings adds a tail to lowercase L's.
<link
rel="stylesheet"
href="https://altinncdn.no/fonts/inter/inter.css"
/>body {
font-family: 'Inter', sans-serif;
font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */
}If you choose to install the font in a different way, remember to include the 400, 500 and 600 font weights.
import '@digdir/designsystemet-theme';
import '@digdir/designsystemet-css';
import { Button } from '@digdir/designsystemet-react';
<Button variant='secondary'>I am a button!</Button>;@digdir/designsystemet-theme and @digdir/designsystemet-css only needs to be imported once.
Learn how you can contribute to this project by reading our Code of Conduct and Contributing Guide.
We are lucky to have a great group of people who help with the design system.
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.