Skip to content

AnInternetTroll/designsystemet

This branch is 2 commits ahead of, 68 commits behind digdir/designsystemet:next.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Nov 13, 2024
da9e24f Β· Nov 13, 2024
Nov 11, 2024
Nov 5, 2024
Oct 10, 2024
Oct 10, 2024
Nov 13, 2024
Oct 30, 2024
Nov 11, 2024
Nov 8, 2024
Oct 24, 2024
Apr 29, 2024
Mar 14, 2024
Nov 8, 2024
May 27, 2024
Oct 7, 2024
Nov 16, 2023
Jul 29, 2024
May 13, 2024
Mar 13, 2024
Nov 11, 2024
Oct 24, 2024
Aug 1, 2024
Oct 15, 2024
Jun 5, 2024
Apr 4, 2024
May 10, 2023
Nov 11, 2024
Sep 25, 2024
Jun 19, 2024
Nov 8, 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.

πŸš€ Get started

Follow these steps to get started with the React components.

1. Install the packages

Depending on your needs and technology stack install the relevant packages

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

1.1 Custom theme

You can create your own theme to use with the Designsystemet packages 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). Using your own built CSS theme file you can skip using the @digdir/designsystemet-theme package.

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.

Packages

No packages published

Languages

  • TypeScript 58.6%
  • CSS 28.5%
  • MDX 12.1%
  • Other 0.8%