docs: rearrange-fundamental-pages (#4282)

mrosvik · Barsnes · web-flow · commit d36bbf4a0881 · 2025-12-09T14:42:40.000+01:00
Co-authored-by: Tobias Barsnes &lt;tobias.barsnes@digdir.no&gt;
diff --git a/apps/storybook/stories/Overview.mdx b/apps/storybook/stories/Overview.mdx
@@ -70,7 +70,7 @@ som kan brukes til å videreutvikle og lage mer avanserte og sammensatte kompone
     >
       <h2 className='sb-unstyled'>
         <a
-          href='https://www.designsystemet.no/no/fundamentals/design-tokens/design-tokens'
+          href='https://www.designsystemet.no/no/fundamentals/design-elements/design-tokens'
           target='_blank'
           rel='noreferrer'
           className='sb-unstyled'
diff --git a/apps/www/app/_components/fundamentals-card/fundamentals-card.tsx b/apps/www/app/_components/fundamentals-card/fundamentals-card.tsx
@@ -20,7 +20,7 @@ const FundamentalsCard = ({
   color = 'red',
   icon,
   description,
-  url = '/fundamentals/design-tokens',
+  url = '/fundamentals/design-elements',
   level = 3,
 }: FundamentalsCardProps) => {
   const iconColor =
diff --git a/apps/www/app/_utils/redirects.server.ts b/apps/www/app/_utils/redirects.server.ts
@@ -35,4 +35,56 @@ const redirects = [
     from: '/grunnleggende',
     to: '/no/fundamentals',
   },
+  {
+    from: '/no/fundamentals/introduction/values',
+    to: '/no/fundamentals/introduction/about-the-design-system#verdier',
+  },
+  {
+    from: '/no/fundamentals/design-tokens/variables',
+    to: '/no/fundamentals/design-elements/variables',
+  },
+  {
+    from: '/en/fundamentals/design-tokens/variables',
+    to: '/en/fundamentals/design-elements/variables',
+  },
+  {
+    from: '/no/fundamentals/design-tokens/colors',
+    to: '/no/fundamentals/design-elements/colors',
+  },
+  {
+    from: '/en/fundamentals/design-tokens/colors',
+    to: '/en/fundamentals/design-elements/colors',
+  },
+  {
+    from: '/no/fundamentals/design-tokens/sizes-and-spacing',
+    to: '/no/fundamentals/design-elements/sizes-and-spacing',
+  },
+  {
+    from: '/en/fundamentals/design-tokens/sizes-and-spacing',
+    to: '/en/fundamentals/design-elements/sizes-and-spacing',
+  },
+  {
+    from: '/no/fundamentals/design-tokens/typography',
+    to: '/no/fundamentals/design-elements/typography',
+  },
+  {
+    from: '/en/fundamentals/design-tokens/typography',
+    to: '/en/fundamentals/design-elements/typography',
+  },
+  {
+    from: '/no/fundamentals/design-tokens/shadows',
+    to: '/no/fundamentals/design-elements/shadows',
+  },
+  {
+    from: '/en/fundamentals/design-tokens/shadows',
+    to: '/en/fundamentals/design-elements/shadows',
+  },
+  {
+    from: '/no/fundamentals/resources/icons/',
+    to: '/no/fundamentals/design-elements/icons',
+  },
+  {
+    from: '/en/fundamentals/resources/icons/',
+    to: '/en/fundamentals/design-elements/icons',
+  },
 ];
diff --git a/apps/www/app/content/blog/en/fluid-typography.mdx b/apps/www/app/content/blog/en/fluid-typography.mdx
@@ -34,7 +34,7 @@ The text sizes increase gradually from a viewport width of 320px until it reache
 
 <br />
 
-Based on [the disadvantages this caused](https://github.com/digdir/designsystemet/issues/1444), we chose to go with a [static typography scale](/en/fundamentals/design-tokens/typography#text-size) as the standard for Designsystemet.
+Based on [the disadvantages this caused](https://github.com/digdir/designsystemet/issues/1444), we chose to go with a [static typography scale](/en/fundamentals/design-elements/typography#text-size) as the standard for Designsystemet.
 
 ## Do you need dynamic typography?
 
diff --git a/apps/www/app/content/blog/no/fluid-typography.mdx b/apps/www/app/content/blog/no/fluid-typography.mdx
@@ -34,7 +34,7 @@ Tekststørrelsene øker gradvis fra viewport-bredde 320px helt til det treffer m
 
 <br />
 
-Basert på [ulempene dette medførte](https://github.com/digdir/designsystemet/issues/1444), valgte vi å gå for en [statisk typografi-skala](/no/fundamentals/design-tokens/typography#tekststørrelse) som standard for designsystemet.
+Basert på [ulempene dette medførte](https://github.com/digdir/designsystemet/issues/1444), valgte vi å gå for en [statisk typografi-skala](/no/fundamentals/design-elements/typography#tekststørrelse) som standard for designsystemet.
 
 ## Har du behov for dynamisk typografi?
 
diff --git a/apps/www/app/content/fundamentals/en/code/get-started.mdx b/apps/www/app/content/fundamentals/en/code/get-started.mdx
@@ -12,5 +12,5 @@ order: 10
 
 Looking to get started with Designsystemet as a developer? Our [GitHub README](https://github.com/digdir/designsystemet#table-of-contents) contains everything you need — including installation, usage examples, and contribution guidelines.
 
-To understand how colors, spacing, and typography are handled in code, we also recommend reading about [design tokens](/en/fundamentals/design-tokens/variables).
+To understand how colors, spacing, and typography are handled in code, we also recommend reading about [design tokens](/en/fundamentals/design-elements/variables).
 
diff --git a/apps/www/app/content/fundamentals/en/design-elements/colors.mdx b/apps/www/app/content/fundamentals/en/design-elements/colors.mdx
@@ -3,7 +3,7 @@ title: Colors
 sidebar_title: Colors
 description: How the colours are structured and how you use them.
 date: 2024-05-30
-category: Design Tokens
+category: Design Elements
 color: red
 icon: PaletteIcon
 published: true
diff --git a/apps/www/app/content/fundamentals/en/design-elements/icons.mdx b/apps/www/app/content/fundamentals/en/design-elements/icons.mdx
@@ -3,11 +3,11 @@ title: Icons
 sidebar_title: Icons
 description: Designsystemet lets you choose the icon pack that suits your needs.
 date: 2025-09-30
-category: Resources
+category: Design Elements
 color: yellow
 icon: ImageIcon
 published: true
-order: 10
+order: 100
 ---
 
 ## Choose your own icon set
diff --git a/apps/www/app/content/fundamentals/en/design-elements/shadows.mdx b/apps/www/app/content/fundamentals/en/design-elements/shadows.mdx
@@ -3,7 +3,7 @@ title: Shadows
 sidebar_title: Shadows
 description: How shadows are defined and used in Designsystemet.
 date: 2023-04-10
-category: Design Tokens
+category: Design Elements
 color: red
 icon: MoonIcon
 published: true
diff --git a/apps/www/app/content/fundamentals/en/design-elements/sizes-and-spacing.mdx b/apps/www/app/content/fundamentals/en/design-elements/sizes-and-spacing.mdx
@@ -3,7 +3,7 @@ title: Sizes and Spacing
 sidebar_title: Sizes and Spacing
 description: How sizes and spacing are defined and used in Designsystemet.
 date: 2025-01-03
-category: Design Tokens
+category: Design Elements
 color: red
 icon: RulerIcon
 published: true
diff --git a/apps/www/app/content/fundamentals/en/design-elements/typography.mdx b/apps/www/app/content/fundamentals/en/design-elements/typography.mdx
@@ -3,7 +3,7 @@ title: Typography
 sidebar_title: Typography
 description: How typographic styles are used to present content correctly.
 date: 2024-04-28
-category: Design Tokens
+category: Design Elements
 color: red
 icon: LineHeightIcon
 published: true
diff --git a/apps/www/app/content/fundamentals/en/design-elements/variables.mdx b/apps/www/app/content/fundamentals/en/design-elements/variables.mdx
@@ -1,9 +1,9 @@
 ---
-title: Overview of variables
-sidebar_title: Overview
+title: Design Tokens
+sidebar_title: Design Tokens
 description: All variables generated by the command line tool.
 date: 2025-09-02
-category: Design Tokens
+category: Design Elements
 color: red
 icon: TokenIcon
 published: true
diff --git a/apps/www/app/content/fundamentals/en/figma/get-started.mdx b/apps/www/app/content/fundamentals/en/figma/get-started.mdx
@@ -107,8 +107,8 @@ Color variables are named according to what they are intended to be used for: `b
   aspectRatio="16-9"
 />
 
-Read more about [color tokens](/en/fundamentals/design-tokens/colors) and what they are used for.
+Read more about [color tokens](/en/fundamentals/design-elements/colors) and what they are used for.
 
 ### Typography styles
 
-For all text, you should use typography styles or typography components. This ensures that we have a consistent expression, correct use of spacing, sizes, and weights. Read more about [typography](/en/fundamentals/design-tokens/typography).
+For all text, you should use typography styles or typography components. This ensures that we have a consistent expression, correct use of spacing, sizes, and weights. Read more about [typography](/en/fundamentals/design-elements/typography).
diff --git a/apps/www/app/content/fundamentals/en/introduction/about-the-design-system.mdx b/apps/www/app/content/fundamentals/en/introduction/about-the-design-system.mdx
@@ -59,7 +59,7 @@ By reusing common building blocks, we avoid solving the same problems over and o
 Designsystemet consists of multiple building blocks and tools. You can use what you need, to the extent it makes sense for you:
 
 - **Design Tokens**  
-  [Design Tokens](/en/fundamentals/design-tokens/variables) are variables for colors, typography, spacing, sizes, and shapes. They are theme-based, meaning they reflect your brand via the preferences you set in the [Theme Builder](/en/fundamentals/themebuilder/own-theme). The color system ensures text and background always have sufficient contrast—no matter your brand colors. Token structure supports multiple themes and modes (light, dark, contrast, etc.). Tokens keep design and code in sync—this is where the magic happens.
+  [Design Tokens](/en/fundamentals/design-elements/variables) are variables for colors, typography, spacing, sizes, and shapes. They are theme-based, meaning they reflect your brand via the preferences you set in the [Theme Builder](/en/fundamentals/themebuilder/own-theme). The color system ensures text and background always have sufficient contrast—no matter your brand colors. Token structure supports multiple themes and modes (light, dark, contrast, etc.). Tokens keep design and code in sync—this is where the magic happens.
 
 - **UI components**  
   Designsystemet offers essential components worth sharing across services. They are available in [Figma](https://www.figma.com/@designsystemet), [CSS](https://www.npmjs.com/package/@digdir/designsystemet-css), and [React](https://www.npmjs.com/package/@digdir/designsystemet-react). Usage guidelines are included and continuously updated as we learn more.
@@ -79,10 +79,47 @@ Designsystemet consists of multiple building blocks and tools. You can use what
 - **Community**  
   Join the discussion on [Slack](https://designsystemet.no/slack) and [GitHub](https://github.com/digdir/designsystemet/discussions/categories/samarbeid-m%C3%B8nster-for-innbyggertjenester). Designsystemet aims to foster shared learning and collaboration across sectors.
 
-## How is the work organized?
-Designsystemet is a product within The Norwegian Digitalisation Agency (Digdir), under the “Portals and user experience” product group. The product council includes 16 public organizations.
+## How do we work with Designsystemet?
 
-The core development team includes designers and developers from Digdir, the Brønnøysund Register Centre, the Norwegian Food Safety Authority, the Directorate for Education and Training, and KS Digital. We also collaborate with the design system teams at NAV, the Tax Administration, Oslo Municipality, the Police, and Entur on shared interaction patterns. Many other contributors help shape Designsystemet. Read more about [collaboration](/en/fundamentals/introduction/collaboration).
+### Organisation and collaboration
+
+Designsystemet is established as a product in Digdir within the product group [Portaler og brukeropplevelse](https://baksia.digdir.no/produktgrupper/portaler-og-brukeropplevelse/). The product group has an associated product council with thirteen different organisations.
+
+The development team consists of designers and developers from Digdir, the Brønnøysund Register Centre, the Norwegian Food Safety Authority, the Norwegian Directorate for Education and Training and KS Digital. In addition, we collaborate with the design system teams at NAV, the Norwegian Tax Administration, the City of Oslo, the Police and Entur to establish [shared interaction patterns](/no/patterns) across organisations.
+
+Designsystemet aims to facilitate an active and inclusive community where everyone who wishes to contribute can do so, share experiences and learn from one another. The goal is to create an environment where both designers and developers can discuss challenges, share solutions and help improve Designsystemet. You can take part in the community through [Slack](http://designsystemet.no/slack) and [GitHub](https://github.com/digdir/designsystemet/discussions/categories/samarbeid-m%C3%B8nster-for-innbyggertjenester). Read more about the [collaboration](/no/fundamentals/introduction/collaboration).
+
+### Values
+Our values openness, quality, coherence and trust guide our work.
+
+<Card data-color='neutral' style={{ marginBottom: 'var(--ds-size-10)' }}>
+  <Details>
+    <DetailsSummary>Openness</DetailsSummary>
+    <DetailsContent>
+Designsystemet is built on a philosophy of collaboration. It must be developed openly and in interaction between public and private actors. Openness is an important guiding principle in everything we do. When we share our work along the way, including the unfinished parts, we always take a step forward. It should be easy for everyone to contribute and give input through open discussions, and the threshold for making changes should be low when proposals lead to better solutions. By collaborating openly we avoid unnecessary duplication of work and develop solutions that more people can reuse. In this way, we contribute to the sustainable development of digital services.
+</DetailsContent>
+  </Details>
+  <Details>
+    <DetailsSummary>Quality</DetailsSummary>
+    <DetailsContent>
+Designsystemet must maintain high quality and make it efficient to create digital products of good quality. By quality we mean both a good user experience and a solid technical foundation. All components must meet statutory requirements such as accessibility. Yet the requirements are only a minimum. We aim higher to create [accessible](/no/fundamentals/introduction/accessibility) solutions that work as well as possible for everyone. When something works for people with disabilities, it improves the experience for all users.
+</DetailsContent>
+  </Details>
+  <Details>
+    <DetailsSummary>Coherence</DetailsSummary>
+    <DetailsContent>
+The goal is for Designsystemet to contribute to coherent and consistent user experiences across solutions and organisations. Shared building blocks and recognisable patterns provide predictability and more intuitive solutions, and can also reduce digital exclusion. Designsystemet should accommodate different visual profiles while ensuring that components and interaction patterns behave consistently for screen readers and other assistive technologies.
+</DetailsContent>
+  </Details>
+  <Details>
+    <DetailsSummary>Trust</DetailsSummary>
+    <DetailsContent>
+Designsystemet must handle challenges and changes in a safe and predictable way to ensure high trust among users. The components must function reliably and behave as expected. Users should be confident that Designsystemet is well maintained and updated in line with new requirements and needs. Our aim is mutual trust, where trust in contributors is also essential.
+</DetailsContent>
+  </Details>
+</Card>
+
+In addition to these four values, we emphasise that Designsystemet should be easy to use for both developers and designers. It should be simple to navigate, understand what a component does and know when it should be used. The components must be adaptable and flexible enough to function as building blocks in more complex solutions. The technical solution must be predictable and easy to work with. If there are known challenges related to a component, these should be made visible and documented.
 
 ## Who can use Designsystemet?
 
diff --git a/apps/www/app/content/fundamentals/en/introduction/values.mdx b/apps/www/app/content/fundamentals/en/introduction/values.mdx
diff --git a/apps/www/app/content/fundamentals/no/code/get-started.mdx b/apps/www/app/content/fundamentals/no/code/get-started.mdx
@@ -12,4 +12,4 @@ order: 10
 
 I vår [README på GitHub](https://github.com/digdir/designsystemet#table-of-contents) finner du alt du trenger for å komme i gang med Designsystemet som utvikler - inkludert installasjon, eksempler og retningslinjer for å bidra.
 
-For å forstå hvordan farger, spacing og typografi håndteres i kode, anbefaler vi også å lese om [designtokens](/no/fundamentals/design-tokens/variables).
+For å forstå hvordan farger, spacing og typografi håndteres i kode, anbefaler vi også å lese om [designtokens](/no/fundamentals/design-elements/variables).
diff --git a/apps/www/app/content/fundamentals/no/design-elements/colors.mdx b/apps/www/app/content/fundamentals/no/design-elements/colors.mdx
@@ -3,7 +3,7 @@ title: Farger
 sidebar_title: Farger
 description: Hvordan fargene er strukturert og hvordan du bruker dem.
 date: 2025-06-30
-category: Design Tokens
+category: Designelementer
 color: red
 icon: PaletteIcon
 published: true
diff --git a/apps/www/app/content/fundamentals/no/design-elements/icons.mdx b/apps/www/app/content/fundamentals/no/design-elements/icons.mdx
@@ -3,11 +3,11 @@ title: Ikoner
 sidebar_title: Ikoner
 description: Med Designsystemet velger du selv hvilken ikonpakke du vil bruke
 date: 2025-09-30
-category: Ressurser
+category: Designelementer
 color: yellow
 icon: ImageIcon
 published: true
-order: 10
+order: 100
 ---
 
 ## Velg ikonpakke selv
diff --git a/apps/www/app/content/fundamentals/no/design-elements/shadows.mdx b/apps/www/app/content/fundamentals/no/design-elements/shadows.mdx
@@ -3,7 +3,7 @@ title: Skygger
 sidebar_title: Skygger
 description: Hvordan skygger er definert og brukes i Designsystemet.
 date: 2023-04-10
-category: Design Tokens
+category: Designelementer
 color: red
 icon: MoonIcon
 published: true
diff --git a/apps/www/app/content/fundamentals/no/design-elements/sizes-and-spacing.mdx b/apps/www/app/content/fundamentals/no/design-elements/sizes-and-spacing.mdx
@@ -3,7 +3,7 @@ title: Størrelser og avstander
 sidebar_title: Størrelser og avstander
 description: Hvordan størrelser og avstander er definert og brukt i Designsystemet.
 date: 2025-01-03
-category: Design Tokens
+category: Designelementer
 color: red
 icon: RulerIcon
 published: true
diff --git a/apps/www/app/content/fundamentals/no/design-elements/typography.mdx b/apps/www/app/content/fundamentals/no/design-elements/typography.mdx
@@ -3,7 +3,7 @@ title: Typografi
 sidebar_title: Typografi
 description: Hva du bør tenke på når du velger Font-family.
 date: 2024-04-28
-category: Design Tokens
+category: Designelementer
 color: red
 icon: LineHeightIcon
 published: true
diff --git a/apps/www/app/content/fundamentals/no/design-elements/variables.mdx b/apps/www/app/content/fundamentals/no/design-elements/variables.mdx
@@ -1,9 +1,9 @@
 ---
-title: Oversikt variabler
-sidebar_title: Oversikt variabler
+title: Design Tokens
+sidebar_title: Design Tokens
 description: Alle variablene som blir generert av kommandolinjeverktøyet.
 date: 2025-09-02
-category: Design Tokens
+category: Designelementer
 color: red
 icon: TokenIcon
 published: true
diff --git a/apps/www/app/content/fundamentals/no/figma/get-started.mdx b/apps/www/app/content/fundamentals/no/figma/get-started.mdx
@@ -107,11 +107,11 @@ Fargevariabler er navngitt etter hva de er tiltenkt å brukes til: `background`,
   aspectRatio='16-9'
 />
 
-Les mer om [farge-tokens](/no/fundamentals/design-tokens/colors) og hva de brukes til.
+Les mer om [farge-tokens](/no/fundamentals/design-elements/colors) og hva de brukes til.
 
 ### Typografi-stiler
 
-For all tekst bør du bruke typografi-stiler eller typografi-komponenter. Da sikrer vi at vi har et konsistent uttrykk, riktig bruk avstander, størrelser og vekting. Les mer om [typografi](/no/fundamentals/design-tokens/typography).
+For all tekst bør du bruke typografi-stiler eller typografi-komponenter. Da sikrer vi at vi har et konsistent uttrykk, riktig bruk avstander, størrelser og vekting. Les mer om [typografi](/no/fundamentals/design-elements/typography).
 
 <Image
   src='/img/typografistiler.png'
diff --git a/apps/www/app/content/fundamentals/no/introduction/about-the-design-system.mdx b/apps/www/app/content/fundamentals/no/introduction/about-the-design-system.mdx
diff --git a/apps/www/app/content/fundamentals/no/introduction/values.mdx b/apps/www/app/content/fundamentals/no/introduction/values.mdx
diff --git a/apps/www/app/layouts/fundamentals/layout.tsx b/apps/www/app/layouts/fundamentals/layout.tsx
diff --git a/packages/react/stories/typography.mdx b/packages/react/stories/typography.mdx

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ som kan brukes til å videreutvikle og lage mer avanserte og sammensatte kompone`
`70`	`70`	`>`
`71`	`71`	`<h2 className='sb-unstyled'>`
`72`	`72`	`<a`
`73`		`- href='https://www.designsystemet.no/no/fundamentals/design-tokens/design-tokens'`
	`73`	`+ href='https://www.designsystemet.no/no/fundamentals/design-elements/design-tokens'`
`74`	`74`	`target='_blank'`
`75`	`75`	`rel='noreferrer'`
`76`	`76`	`className='sb-unstyled'`
Original file line number	Diff line number	Diff line change
`@@ -12,5 +12,5 @@ order: 10`
`12`	`12`
`13`	`13`	`Looking to get started with Designsystemet as a developer? Our [GitHub README](https://github.com/digdir/designsystemet#table-of-contents) contains everything you need — including installation, usage examples, and contribution guidelines.`
`14`	`14`
`15`		`-To understand how colors, spacing, and typography are handled in code, we also recommend reading about [design tokens](/en/fundamentals/design-tokens/variables).`
	`15`	`+To understand how colors, spacing, and typography are handled in code, we also recommend reading about [design tokens](/en/fundamentals/design-elements/variables).`
`16`	`16`