Skip to content

digdir/designsystemet

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date
Sep 16, 2024
Sep 16, 2024
Sep 13, 2024
May 27, 2024
Sep 16, 2024
Aug 28, 2024
Sep 15, 2024
Aug 7, 2024
Sep 11, 2024
Apr 29, 2024
Mar 14, 2024
Aug 27, 2024
Apr 18, 2024
Jun 6, 2024
Sep 13, 2024
May 27, 2024
Aug 8, 2024
Nov 16, 2023
Jul 29, 2024
May 13, 2024
Mar 13, 2024
Jul 29, 2024
Aug 15, 2024
Aug 1, 2024
Sep 16, 2024
Jun 5, 2024
Jun 5, 2024
Apr 4, 2024
May 10, 2023
Aug 1, 2024
Aug 30, 2024
Jun 19, 2024
Sep 16, 2024

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.


πŸ“ƒ License

Designsystemet is MIT licensed.