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 - For developing and testing our React components.
Storefront - General documentation about the design system.
@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.
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.