Designsystemet is a collection of important design elements, componenents 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 - For developing and testing our React components.
Storefront - General documentation about the design system.
@digdir/design-system-react – React library with common UI components like Buttons and Checkboxes.
@digdir/design-system-tokens – Tokens that contain UI data like colors and spacing for building user interfaces.
Follow these steps to get started with the React components.
npm install @digdir/design-system-react @digdir/design-system-tokens
Add the <link> tag to your application and set the font-family to Inter.
The font-feature-settings adds a tail to lowecase L's and must be set with the !important flag.
<link
rel="stylesheet"
href="https://altinncdn.no/fonts/inter/inter.css"
/>body {
font-family: 'Inter', sans-serif;
font-feature-settings: 'cv05' 1 !important; /* 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/design-system-tokens/brand/digdir/tokens.css';
import { Button } from '@digdir/design-system-react';
<Button variant='secondary'>I am a button!</Button>;The tokens.css file only has to be imported once in your application.
Learn how you can contribute to this project by reading our Code of Conduct and Contributing Guide.
The Code of Conduct emphasizes the importance of respectful communication and the avoidance of discrimination, harassment, or any harmful behavior, promoting a positive and diverse community.
Our Contributing Guide provides clear instructions on how to participate in the project, ensuring that developers can efficiently contribute their skills and ideas to the community.
We are lucky to have a great group of people who help with the design system.
Designsystemet is MIT licensed.