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.
@digdir/design-system-react – Replaced by @digdir/designsystemet-react. Contains legacy components that are no longer maintained
@digdir/design-system-tokens – Renamed to @digdir/designsystemet-theme
Follow these steps to get started with the React components.
npm i @digdir/designsystemet-react @digdir/designsystemet-theme @digdir/designsystemet-cssIf you use Typescript, make sure you have typescript >= 3.8 as devDependencies:
npm i typescript --save-devYou 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.