Gnist, the Norwegian Labour Inspection Authority's design system, based on designsystemet.no.
Storybook: gnist.arbeidstilsynet.no
- @arbeidstilsynet/design-react - React implementation of components
- @arbeidstilsynet/design-css - Styling for components
- @arbeidstilsynet/design-theme - Arbeidstilsynets styling theme(s)
npm i @arbeidstilsynet/design-react @arbeidstilsynet/design-css @arbeidstilsynet/design-theme
// layout.tsx or other top level component.
// These only have to be imported once.
import "@arbeidstilsynet/design-css";
import "@arbeidstilsynet/design-theme";// myComponent.tsx
import { Button } from "@arbeidstilsynet/design-react";
export function MyComponent() {
return (
<div>
<Button variant="primary">Click me</Button>
</div>
);
}The design system is developed with the fonts Inter and Literata, but you can choose any font.
/* globals.css */
body {
font-family: "Inter", sans-serif;
font-feature-settings: "cv05" 1; /* Enable lowercase l with tail */
}// layout.tsx or other top level component
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<link
rel="preconnect"
href="https://at-static.arbeidstilsynet.no"
crossOrigin=""
/>
<link
rel="stylesheet"
href="https://at-static.arbeidstilsynet.no/fonts/inter/v4.1/inter.css"
crossOrigin=""
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap"
/>
</head>
<body>{children}</body>
</html>
);
}- Install all packages
pnpm i
- Project structure
/apps/storybook contains the web ui and configuration for Storybook.
/packages/react/ contains the code for our custom React components. Add new React components here.
/packages/css/ contains styling for the custom React components. Add styling files here. Remember to add container queries for small screens.
You need to manually add the new component to the index.ts file as an export. And you need to manually add the css file to the index.css file as an export.
See TOKENS.md for how to update design-tokens.