{"id":21933104,"url":"https://github.com/digdir/designsystemet","last_synced_at":"2026-02-24T09:18:55.206Z","repository":{"id":64430495,"uuid":"530557416","full_name":"digdir/designsystemet","owner":"digdir","description":"Designsystemet","archived":false,"fork":false,"pushed_at":"2025-04-07T13:12:49.000Z","size":209221,"stargazers_count":112,"open_issues_count":241,"forks_count":42,"subscribers_count":6,"default_branch":"next","last_synced_at":"2025-04-07T13:22:58.067Z","etag":null,"topics":["components","css","designsystem","react","storybook","tokens","typescript"],"latest_commit_sha":null,"homepage":"https://designsystemet.no","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/digdir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-30T08:05:21.000Z","updated_at":"2025-04-07T10:48:55.000Z","dependencies_parsed_at":"2023-10-03T16:58:48.029Z","dependency_job_id":"8c89501b-891c-481b-9936-dc9124a9afa0","html_url":"https://github.com/digdir/designsystemet","commit_stats":{"total_commits":1809,"total_committers":38,"mean_commits":47.60526315789474,"dds":0.6705362078496406,"last_synced_commit":"b0c3122df526c6d7326002b666ee93b53f73dda5"},"previous_names":["digdir/designsystemet","digdir/designsystem"],"tags_count":349,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digdir%2Fdesignsystemet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digdir%2Fdesignsystemet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digdir%2Fdesignsystemet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digdir%2Fdesignsystemet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digdir","download_url":"https://codeload.github.com/digdir/designsystemet/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247801155,"owners_count":20998338,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","css","designsystem","react","storybook","tokens","typescript"],"created_at":"2024-11-29T00:07:46.650Z","updated_at":"2026-02-24T09:18:55.165Z","avatar_url":"https://github.com/digdir.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003cimg alt=\"Designsystemet logo\" src=\"apps/storybook/assets/img/logo.svg\"\u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003e\n    Designsystemet\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n\u003c/div\u003e\n\n## 📖 About Designsystemet\n\nDesignsystemet is a collection of important design elements, components and patterns that can be used to build public services.\n\nOur goal is to create consistent and user-friendly experiences in digital solutions for public services, making them more efficient and reliable.\n\n## 🔗 Links\n\n[Storybook](https://storybook.designsystemet.no/) - Preview for React components.\n\n[Storefront](https://designsystemet.no/) - General documentation about the design system.\n\n[Theme](https://theme.designsystemet.no/) - Theme builder.\n\n## 📦 Packages\n\n[`@digdir/designsystemet`](https://www.npmjs.com/package/@digdir/designsystemet) - CLI for Designsystemet.\n\n[`@digdir/designsystemet-theme`](https://www.npmjs.com/package/@digdir/designsystemet-theme) - Themes for Designsystemet.\n\n[`@digdir/designsystemet-css`](https://www.npmjs.com/package/@digdir/designsystemet-css) - Styling for components.\n\n[`@digdir/designsystemet-react`](https://www.npmjs.com/package/@digdir/designsystemet-react) - React implementation of Designsystemet components.\n\n\n## 🚀 Get started\n\nFollow these steps to get started with the React components.\n\n### 1. Install the packages\n\nDepending on your needs and technology stack install the relevant packages\n\n```sh\nnpm i @digdir/designsystemet\nnpm i @digdir/designsystemet-css\nnpm i @digdir/designsystemet-theme \nnpm i @digdir/designsystemet-react \n```\n\n#### 1.1 Custom theme\n\n\nYou can create your own theme to use with the Designsystemet packages by going to our [theme-builder](https://theme.designsystemet.no/).\n\nDesignsystemet theming is defined using [design-tokens](https://www.uxpin.com/studio/blog/what-are-design-tokens). \nThis is done so that you can use [Token Studio](https://tokens.studio/) to sync your theme in code with [Designsystemet Figma UI kit](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit), in addition to provide future flexibility.\n\nRun `npx @digdir/designsystemet tokens build` to build CSS files for your custom theme (from the design-tokens).\nUsing your own built CSS theme file you can skip using the `@digdir/designsystemet-theme` package.\n\n### 2. Font\n\nYou are free to use any font-family with the components.\n\nThe components are designed and developed using the [Inter font](https://github.com/rsms/inter) so variations might occur if a different font is used.\n\n#### Add the Inter font (optional)\n\nAdd the `\u003clink\u003e` tag in `\u003chead\u003e`, and set `font-family` to `Inter` in your global css file.\n\nThe `font-feature-settings` adds a tail to lowercase `L`'s.\n\n##### HTML\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://altinncdn.no/fonts/inter/v4/inter.css\"\n/\u003e\n```\n\n##### CSS\n\n```css\nbody {\n  font-family: 'Inter', sans-serif;\n  font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */\n}\n```\n\nIf you choose to install the font in a different way, remember to include the `400`, `500` and `600` font weights.\n\n### 3. Use a React component\n\n```jsx\nimport '@digdir/designsystemet-theme';\nimport '@digdir/designsystemet-css';\n\nimport { Button } from '@digdir/designsystemet-react';\n\n\u003cButton variant='secondary'\u003eI am a button!\u003c/Button\u003e;\n```\n\n`@digdir/designsystemet-theme` and `@digdir/designsystemet-css` only needs to be imported once.\n\n### 4. Add TypeScript types for colors\n\nBecause color names depend on which theme is being used, you have to add the following to your `tsconfig.json` to\nuse all your colors in the components which have a `data-color` prop:\n\n#### When using `@digdir/designsystemet-theme`\n\n```jsonc\n{\n  // ...other settings\n  \"compilerOptions\": {\n    // ...other compilerOptions\n    \"types\": [\n      // ...other types\n      \"@digdir/designsystemet-theme\"\n      ]\n  },\n}\n```\n\n#### When using a custom theme\nThe CLI `designsystemet tokens build` command will output a `colors.d.ts` file to your chosen output directory.\nIn the example, replace `\u003cyour-path\u003e` with the actual path you used when running the command.\n\n```jsonc\n{\n  // ...other settings\n  \"compilerOptions\": {\n    // ...other compilerOptions\n    \"types\": [\n      // ...other types\n      \"\u003cyour-path\u003e/colors.d.ts\"\n      ]\n  },\n}\n```\n\n### 5. Add editor hints for data-color \u0026 data-size on HTML elements (optional)\n\nYou may want editor hints for `data-color` and `data-size` attributes on HTML elements\nlike `\u003cspan\u003e` or `\u003cdiv\u003e`, since these attributes can affect components nested within\nthese elements.\n\nThis requires augmenting React's built-in types, and is therefore opt-in. If you want this,\nadd the following to your `tsconfig.json`:\n\n```jsonc\n{\n  // ...other settings\n  \"compilerOptions\": {\n    // ...other compilerOptions\n    \"types\": [\n      // ...other types\n      \"@digdir/designsystemet-react/react-types\"\n      ]\n  },\n}\n```\n\n\n\n## 🫶 Contributing\n\nLearn how you can contribute to this project by reading our [Code of Conduct](./CODE_OF_CONDUCT.md) and [Contributing Guide](./CONTRIBUTING.md).\n\n## 💪 Contributors\n\nWe are lucky to have a great group of people who help with the design system.\n\n\u003ca style=\"margin-top: 32px; display: block;\" href=\"https://github.com/digdir/designsystemet/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=digdir/designsystem\" /\u003e\n\u003c/a\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003ca href=\"https://www.chromatic.com/\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png\" width=\"153\" height=\"30\" alt=\"Chromatic\" /\u003e\u003c/a\u003e\n\nThanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigdir%2Fdesignsystemet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigdir%2Fdesignsystemet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigdir%2Fdesignsystemet/lists"}