Skip to content

digdir/designsystemet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Designsystemet logo

Designsystemet

📖 About Designsystemet

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.

🔗 Links

Storybook - Preview for React components.

Storefront - General documentation about the design system.

Theme - Theme builder.

📦 Packages

@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.

Deprecated

@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

🚀 Get started

Follow these steps to get started with the React components.

1. Install the packages

npm i @digdir/designsystemet-react @digdir/designsystemet-theme @digdir/designsystemet-css

Typescript

If you use Typescript, make sure you have typescript >= 3.8 as devDependencies:

npm i typescript --save-dev

2. Font

You 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 Inter font (optional)

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.

HTML
<link
  rel="stylesheet"
  href="https://altinncdn.no/fonts/inter/inter.css"
/>
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.

3. Use a React component

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.

🫶 Contributing

Learn how you can contribute to this project by reading our Code of Conduct and Contributing Guide.

💪 Contributors

We are lucky to have a great group of people who help with the design system.



Chromatic

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.