Designsystemet is a suite of tools used to create design systems.
Our goal is to create consistent and user-friendly experiences in digital solutions for public services, making them more efficient and reliable.
www - Documentation.
Storybook - Preview for HTML, CSS & React components.
Theme builder - Theme builder.
@digdir/designsystemet - CLI for Designsystemet.
@digdir/designsystemet-css - CSS implementation of Designsystemet components.
@digdir/designsystemet-react - React implementation of Designsystemet components.
@digdir/designsystemet-theme - Digdir themes for Designsystemet.
Follow these steps to get started with Designsystemet in code.
Install the essential packages to get started with Designsystemet:
@digdir/designsystemet-css
@digdir/designsystemet-theme # or custom theme Install @digdir/designsystemet-theme if you need any of the Digdir themes. Uses digdir theme by default.
Create your own theme for Designsystemet 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 a CSS file for your custom theme (from your design-tokens) which you can then import to theme Designsystemet.
** Using a custom theme you can skip the @digdir/designsystemet-theme **
Install @digdir/designsystemet-react if you want to use the React components.
import '@digdir/designsystemet-css/index.css';
import '@digdir/designsystemet-theme'; // or custom theme CSS file
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.
If you are using React and Typescript you can enable editor hints on any HTML elements for data-color based on your theme.
This requires augmenting React's built-in types, and is therefore opt-in.
If you want this, add the following to your tsconfig.json:
Designsystemet uses popover. Since this api is still classified as Baseline: Newly available, consider adding the polyfill for this feature.
You are free to use any font-family.
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.
<link
rel="stylesheet"
href="https://altinncdn.no/fonts/inter/v4.1/inter.css"
integrity="sha384-OcHzc/By/OPw9uJREawUCjP2inbOGKtKb4A/I2iXxmknUfog2H8Adx71tWVZRscD"
crossorigin="anonymous"
/>body {
font-family: 'Inter', sans-serif;
font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */
}The font-feature-settings adds a tail to lowercase L's.
If you install the font in a different way, remember to include the 400, 500 and 600 font weights.
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 have contributed to Designsystemet
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}
![@renovate[bot]](https://avatars.githubusercontent.com/in/2740?s=64&v=4){kind=small}
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
{ // ...other settings "compilerOptions": { // ...other compilerOptions "types": [ // ...other types "<custom-theme>/colors.d.ts" or "@digdir/designsystemet-theme" , "@digdir/designsystemet-react/react-types", ] }, }