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 - For developing and testing our React components.

Storefront - General documentation about the design system.

📦 Packages

@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 and must be set with the !important flag.

HTML

<link
  rel="stylesheet"
  href="https://altinncdn.no/fonts/inter/inter.css"
/>

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.

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.

Code of Conduct

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.

Contributing Guide

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.

💪 Contributors

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

📃 License

Designsystemet is MIT licensed.

SarthakSanjay/designsystemet