designsystemet
designsystemet copied to clipboard
digdir
Designsystemet
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.
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.
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.
digdir