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.
Storybook - Preview for React components.
Storefront - General documentation.
Theme - Themebuilder.
@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 CSS files for your custom theme (from the design-tokens) which you can then import and use with 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';
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:
{
// ...other settings
"compilerOptions": {
// ...other compilerOptions
"types": [
// ...other types
"@digdir/designsystemet-theme" or "<custom-theme>/colors.d.ts",
"@digdir/designsystemet-react/react-types",
]
},
}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}
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
![@renovate[bot]](https://avatars.githubusercontent.com/in/2740?s=64&v=4){kind=small}
