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.
Because color names depend on which theme is being used, you have to add the following to your tsconfig.json to
use all your colors in the components which have a data-color prop:
{
// ...other settings
"compilerOptions": {
// ...other compilerOptions
"types": [
// ...other types
"@digdir/designsystemet-theme/colors.d.ts"
]
},
}The CLI designsystemet tokens build command will output a colors.d.ts file to your chosen output directory.
In the example, replace <your-path> with the actual path you used when running the command.
{
// ...other settings
"compilerOptions": {
// ...other compilerOptions
"types": [
// ...other types
"<your-path>/colors.d.ts"
]
},
}You may want editor hints for data-color and data-size attributes on HTML elements
like <span> or <div>, since these attributes can affect components nested within
these elements.
This requires augmenting React's built-in types, and is therefore opt-in. If you want this,
add the following to your tsconfig.json:
{
// ...other settings
"compilerOptions": {
// ...other compilerOptions
"types": [
// ...other types
"@digdir/designsystemet-react/react-types.d.ts"
]
},
}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.