docs: blog post about Udirs design system

apps/www/app/_components/blockquote/blockquote.module.css

@@ -0,0 +1,12 @@
+.blockquote {
+  padding: var(--ds-size-4) var(--ds-size-6);
+  margin: 0;
+  margin-block-start: var(--ds-size-6);
+  margin-block-end: var(--ds-size-4);
+  margin-inline-start: var(--ds-size-4);
+  border-inline-start: 4px solid var(--ds-color-neutral-border-strong);
+
+  & p {
+    margin: 0 !important;
+  }
+}

apps/www/app/_components/blockquote/blockquote.tsx

@@ -0,0 +1,8 @@
+import cl from 'clsx/lite';
+import classes from './blockquote.module.css';
+
+type BlockquoteProps = React.HTMLAttributes<HTMLQuoteElement>;
+
+export const Blockquote = ({ className, ...rest }: BlockquoteProps) => {
+  return <blockquote className={cl(classes.blockquote, className)} {...rest} />;
+};

apps/www/app/_components/mdx-components/mdx-components.tsx

@@ -28,6 +28,7 @@ import { Contributors } from '~/_components/contributors/contributors';
 import { Image } from '~/_components/image/image';
 import { ResponsiveIframe } from '~/_components/responsive-iframe/responsive-iframe';
 import { TokenList } from '~/_components/tokens/token-list/token-list';
+import { Blockquote } from '../blockquote/blockquote';
 import { VideoCard } from '../video-card/video-card';
 import classes from './mdx-components.module.css';
 
@@ -48,6 +49,9 @@ const defaultComponents = {
   TableBody,
   TableFoot,
   TableCell,
+  blockquote: (props: JSX.IntrinsicElements['blockquote']) => (
+    <Blockquote {...props} />
+  ),
   h1: (props: JSX.IntrinsicElements['h1']) => (
     <Heading className={classes.heading} level={1} data-size='xl' {...props} />
   ),

apps/www/app/content/blog/en/udir.mdx

@@ -0,0 +1,105 @@
+---
+title: How Udir builds on top of Designsystemet
+description: The Norwegian Directorate for Education and Training (Udir) has created its own design system based on Designsystemet to ensure consistency in design, better user experiences, and more efficient development.
+date: 2025-07-01
+author: The Norwegian Directorate for Education and Training
+imageSrc: /img/blog/udir.png
+imageAlt: Illustration of three people pointing at digital surfaces and forms.
+imageCaption: In recent years, Udir has focused on strengthening and unifying its digital identity. With many different systems, projects, and communication channels, the need arose to coordinate design and development across the organization. The solution was to create its own design system built on top of Designsystemet.
+---
+
+## Why build our own design system?
+
+The Norwegian Directorate for Education and Training (Udir) previously had several different component libraries and inconsistent design expressions across its services. This led to challenges for both users and development teams trying to create coherent experiences. The goal of building a dedicated design system was to ensure:
+
+- A clear and recognizable identity for Udir  
+- User-friendly and accessible solutions  
+- Efficient development across projects and domains  
+
+The benefit of building our own design system on top of Designsystemet is that we can reuse the underlying structure and core components, while also offering custom Udir-specific components as part of our internal system.
+
+To succeed with this, a dedicated team was required. Today, the design team consists of a project manager, a designer, two developers, and additional support roles such as a system manager, test lead, and communications advisor.
+
+<br/>
+
+<VideoCard
+  videoUrl="https://vimeo.com/1087983500?share=copy"
+  title="How Udir uses Designsystemet"
+  description="In this video, Une Sofie Kinn Ekroll, Tech Lead of Udir’s design team, explains how they build on Designsystemet."
+  imageUrl="/img/blog/udir-video-img.png"
+/>
+
+## A close collaboration
+
+The timing in June 2024 couldn’t have been better—designsystemet.no was reaching maturity. For both Udir and Digdir, this marked the start of a close and valuable collaboration.
+
+_"Working with Digdir has honestly been a dream,"_ says Une. _"We’ve gained a solid and flexible technical foundation, as well as access to a broader professional community—both the Digdir team and other users of the Design System."_
+
+By building on a common foundation, Udir is able to contribute to the community while creating solutions tailored to its own needs.
+
+## Reuse and adaptation
+
+Udir’s design system is built from several key components. We reuse and adapt elements from designsystemet.no in a structured way, allowing us to offer a cohesive and efficient internal design and development system.
+
+<Image
+  src='/img/blog/udir-bruk.png'
+  alt='Diagram showing how Udir builds on top of Designsystemet.'
+  boxShadow={false}
+/>
+
+### Figma library
+
+Components from the Design System’s [Core UI KIT (figma.com)](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) are manually copied and adjusted in our own Figma library. Although there’s no fully automated way to do this, it works well since updates are relatively infrequent.
+
+### CLI and tokens
+
+Using the command-line interface (CLI), we generate tokens and CSS themes. This process is automated so that we’re notified of updates and can test how changes will affect our themes.
+
+We also make a few programmatic adjustments—such as changing default colors—where needed to tailor the look and feel.
+
+### Documentation in Storybook
+
+We’ve copied the documentation from designsystemet.no and customized it with our own theme and examples. This documentation is published in our internal Storybook and serves as the primary reference for Udir’s designers and developers.
+
+Internal teams never interact directly with Designsystemet, this is centrally handled by the design team. This makes it easier to adjust defaults, hide unused variants, or include Udir-specific components.
+
+### Quality assurance and testing
+
+Before anything is rolled out across the organization, it goes through several layers of quality assurance:
+
+- Feedback from internal system teams  
+- Real-world usage examples based on actual needs  
+- Automated testing, including:
+  - Interaction tests  
+  - Accessibility (a11y) tests  
+  - Visual regression tests  
+  - DOM structure tests  
+- Manual review of usage examples by accessibility experts
+
+## Open and accessible to all
+
+Udir’s design system is open source. You can explore how it’s structured, follow changes, and even find inspiration for your own projects.
+
+[Visit Udir’s design system on github.com](https://github.com/Utdanningsdirektoratet/designsystem)
+
+## Building better public services together
+
+By building on top of Designsystemet from Digdir, Udir has saved time, strengthened accessibility, and established a shared direction for design and development. At the same time, we’ve joined a professional community where we can share experiences and solutions with others working toward the same goal: better user experiences in the public sector.
+
+> "We’ve quickly ramped up the development of our design system by building on Digdir’s foundation. It’s valuable not only for creating better usability in our own services, but also because we contribute to more consistent user experiences—regardless of which agency the user is interacting with. I highly recommend others who need more unified design in their services to explore what designsystemet.no has to offer."  
+
+— *Kjersti Mikalsen, Service Owner for Udir’s Design System*
+
+<Image
+  src='/img/blog/udir-logo.png'
+  alt='Udir logo.'
+  boxShadow={false}
+/>
+
+<Contributors
+  authors={[
+    'Une Sofie Kinn Ekroll',
+    'Kjersti Mikalsen',
+    'Marianne Røsvik',
+  ]}
+/>

apps/www/app/content/blog/no/udir.mdx

@@ -0,0 +1,99 @@
+---
+title: Hvordan Udir bygger videre på Designsystemet
+description: Utdanningsdirektoratet har laget sitt eget designsystem basert på Designsystemet for å sikre helhetlig design, bedre brukeropplevelser og mer effektiv utvikling.
+date: 2025-06-03
+author: Utdanningsdirektoratet
+imageSrc: /img/blog/udir.png
+imageAlt: Illustrasjon av tre personer som peker på digitale flater og skjemaer. 
+imageCaption: Utdanningsdirektoratet  har de siste årene hatt et sterkt fokus på å samle og forbedre den digitale identiteten sin. Med mange ulike systemer, prosjekter og kommunikasjonsflater, oppsto behovet for å samordne design og utvikling på tvers. Løsningen ble å etablere et eget designsystem, bygget på toppen av Designsystemet.
+---
+
+
+## Hvorfor et eget designsystem?
+Utdanningsdirektoratet (Udir) har tidligere hatt flere ulike komponentbibliotek og inkonsekvente designuttrykk i sine tjenester. Det skapte utfordringer både for brukerne og for utviklingsteamene som skulle skape helhetlige opplevelser. Målet med å bygge et eget designsystem var å sikre:
+
+- En tydelig og gjenkjennelig identitet for Udir
+- Brukervennlige og tilgjengelige løsninger
+- Effektiv utvikling på tvers av prosjekter og fagområder
+
+Fordelen med å bygge eget designsystem på toppen av Designsystemet er at du kan gjenbruke den underliggende strukturen og alle de grunnleggende komponentene, samtidig som du kan tilby dine mer unike komponenter som en del av ditt eget designsystem. 
+
+For å få til dette, trengtes et dedikert team. I dag består designteamet av én prosjektleder, én designer, to utviklere og flere støttefunksjoner som systemforvalter, testleder og kommunikasjonsrådgiver.
+
+<br/>
+
+<VideoCard
+  videoUrl="https://vimeo.com/1087983500?share=copy"
+  title="Hvordan Udir bruker Designsystemet"
+  description="I denne filmen forklarer Une Sofie Kinn Ekroll, Tech Lead i designteamet hos Udir, hvordan de har brukt Designsystemet."
+  imageUrl="/img/blog/udir-video-img.png"
+/>
+
+## Et tett samarbeid 
+Oppstarten i juni 2024 kunne ikke vært bedre timet, da var nemlig designsystemet.no i ferd med å modnes. For både Udir og Digdir ble dette starten på et tett og verdifullt samarbeid.
+
+_«Å jobbe med Digdir har egentlig vært en drøm,»_ sier Une. _«Vi har fått en bunnsolid og fleksibel teknisk grunnmur, og vi har fått et større fagmiljø å spille på, både fra Digdir-teamet og fra andre brukere av Designsystemet.»_
+
+Ved å ta utgangspunkt i et felles fundament, kan Udir bidra til fellesskapet, samtidig som vi bygger løsninger som er tilpasset egne behov.
+
+## Gjenbruk og tilpasning
+Udir sitt designsystem består av flere byggesteiner. Vi gjenbruker og tilpasser elementer fra designsystemet.no på en strukturert måte for å kunne tilby et helhetlig og effektivt design- og utviklingssystem internt.
+
+<Image
+  src='/img/blog/udir-bruk.png'
+  alt='Viser oversikt over hvordan Udir bruker.'
+  boxShadow={false}
+
+/>
+
+### Figma-bibliotek
+Komponentene fra Designsystemets [Core UI KIT (figma.com)](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) kopieres over og justeres manuelt i vårt eget Figma-bibliotek. Selv om det ikke finnes en god måte å gjøre dette automatisk på, går det greit fordi det ikke skjer hyppige endringer.
+
+### Kommandolinjeverktøy og tokens
+Ved hjelp av kommandolinjeverktøyet (CLI) genererer vi tokens og CSS-tema. Dette har vi automatisert slik at vi varsles når det kommer nye oppdateringer, og kan teste hvordan endringene påvirker våre tema.
+
+Vi gjør noen programmatisk justeringer, for eksempel å endre hvilke farger som brukes som standard, og tilpasser utseende der det er nødvendig.
+
+### Dokumentasjon i Storybook
+Udir har kopiert over dokumentasjonen fra designsystemet.no og tilpasset den med eget tema og egne eksempler. Dokumentasjonen publiseres i vår egen Storybook, og er det sentrale stedet for alle utviklere og designere i Udir.
+
+De interne teamene forholder seg aldri direkte til Digdir sitt Designsystem – det er designteamet som håndterer det sentralt. Dette gjør det enklere å gjøre justeringer, endre standardvalg og legge til Udir-spesifikke komponenter.
+
+### Kvalitetssikring og testing
+Før noe tas i bruk bredt i organisasjonen, går det gjennom flere lag med kvalitetssikring:
+
+- Tilbakemeldinger fra systemteamene
+- Større brukseksempler basert på faktiske behov
+- Automatisert testing:
+  - Interaksjonstester
+  - Tilgjengelighetstester (UU)
+  - Visuelle regresjonstester
+  - DOM-strukturtester
+- Manuell gjennomgang av UU-eksperter
+
+
+## Åpent for alle
+Udir sitt designsystem er åpent tilgjengelig. Her kan du se hvordan det er satt opp, følge med på endringer, og kanskje hente inspirasjon til egne prosjekter.
+
+[Udirs designsystem på github.com](http://github.com/Utdanningsdirektoratet/designsystem)
+
+## Sammen bygger vi en bedre offentlig sektor
+Gjennom å bygge videre på Designsystemet fra Digdir har Udir spart tid, styrket tilgjengeligheten og sikret en felles retning for både kommunikasjon og utvikling. Samtidig har vi fått en faglig arena der vi deler erfaringer og løsninger med andre som ønsker det samme: bedre brukeropplevelser i offentlig sektor.
+
+> «Vi har kommet raskt i gang med utviklingen av designsystemet vårt ved å bygge det på Digdirs designsystem. Dette er verdifullt både for å skape brukervennlig design i tjenestene vi selv har, men også fordi vi bidrar til helhetlige brukeropplevelser uavhengig av hvilken virksomhet brukerne er hos. Jeg anbefaler alle som trenger mer helhetlig design i tjenestene sine om å sjekke ut mulighetene som ligger i Digdirs designsystem.»
+
+-Kjersti Mikalsen, tjenesteansvarlig for Utdanningsdirektoratets designsystem
+
+<Image
+  src='/img/blog/udir-logo.png'
+  alt='Viser Udirs logo.'
+  boxShadow={false}
+/>
+
+<Contributors
+  authors={[
+    'Une Sofie Kinn Ekroll',
+    'Kjersti Mikalsen',
+    'Marianne Røsvik',
+  ]}
+/>