diff --git a/apps/www/app/content/blog/en/migrate-figma-to-color.mdx b/apps/www/app/content/blog/en/migrate-figma-to-color.mdx
new file mode 100644
index 0000000000..c0e3b4a5c2
--- /dev/null
+++ b/apps/www/app/content/blog/en/migrate-figma-to-color.mdx
@@ -0,0 +1,314 @@
+---
+title: "Figma guide: Migrer til ny fargestruktur"
+description: Få hjelp til å migrere din Figma fil til å følge den nye fargestrukturen
+date: 2026-06-09
+author: Digdir
+imageSrc: /img/blog/altinnstudio-16-9.png
+imageAlt: migrering
+imageCaption: Migrering
+---
+
+# Migreringsguide – Ny fargestruktur i Figma
+
+## Kortversjon
+
+1. Opprett snapshot i Version History
+2. Oppdater navn i variabelstrukturen
+3. Sync oppdaterte tokens med Token Studio
+4. Fjern gamle variable collections
+5. Kjør plugin – Remove variants
+6. Kjør plugin – Fix in library
+7. Kvalitetssikre biblioteket
+8. Publiser biblioteket
+9. Oppdater skisser/designfiler
+
+---
+
+# Introduksjon
+
+## Hva endres
+- `Main color` og `Support color` slås sammen til én collection:
+  - `Color`
+- Alle "support" og "neutral" varianter av komponentene skal fjernes
+
+## Anbefalinger
+- Gjerne test migreringen i en kopi av filen deres først
+- Informer teamet før publisering
+
+---
+
+# Steg 1 – Opprett snapshot i Version History
+
+## Hensikt
+Sikre at filen kan gjenopprettes hvis noe går galt. Om du foretrekker å jobbe i en branch kan du selvfølgelig gjøre det i stedet.
+
+## Gjør dette
+- Åpne Version History
+- Opprett nytt snapshot
+- Gi snapshot tydelig navn
+
+## Eksempel
+- `Before color migration`
+
+## Kontrollpunkt
+- ✅ Snapshot er opprettet
+
+## Video / bilder
+- Placeholder
+
+---
+
+# Steg 2 – Oppdater navn i variabelstrukturen
+
+## Hensikt
+Forberede filen for ny token-struktur.
+
+## Endringer som må gjøres
+
+### Collection-navn
+- `Main color` → `Color`
+
+### Variabelstruktur
+Eksempel:
+- `color/main/background-default`
+→ `background-default`
+
+## Dette kan gjøres på to måter
+- Manuelt
+- Via steg 1 i pluginen
+
+## Viktig
+- Dette er nødvendig for at Token Studio skal plassere variabler riktig
+- Feil struktur kan føre til ødelagte referanser i filen
+
+## Kontrollpunkt
+- ✅ `Color` collection finnes
+- ✅ Variabler har ny struktur
+- ✅ Ingen duplikater
+
+## Video / bilder
+- Placeholder
+
+---
+
+# Steg 3 – Sync oppdaterte tokens med Token Studio
+
+## Hensikt
+Importere oppdatert token-struktur.
+
+## Gjør dette
+- Kjør sync i Token Studio
+- Apply oppdaterte tokens
+
+## Kontroller
+- Nye variabler opprettes riktig
+- Ingen røde variable references
+- Variabler havner i riktig collection
+
+## Kontrollpunkt
+- ✅ Tokens er synced
+- ✅ Ingen feil i variabler
+
+## Video / bilder
+- Placeholder
+
+---
+
+# Steg 4 – Fjern gamle variable collections
+
+## Hensikt
+Rydde opp etter migreringen.
+
+## Sjekk dette
+- Finnes gamle variabler fortsatt?
+- Finnes `Support color` fortsatt?
+
+## Fjern
+- Gammel `Support color`
+- Eventuelle utdaterte variabler
+
+## Viktig
+- Kontroller at ingen komponenter fortsatt bruker gamle variabler før sletting
+
+## Kontrollpunkt
+- ✅ Kun ny color-struktur gjenstår
+
+## Video / bilder
+- Placeholder
+
+---
+
+# Steg 5 – Kjør plugin: Remove variants
+
+## Hensikt
+Fjerne gamle color-varianter fra komponentene.
+
+## Pluginen gjør følgende
+- Fjerner support-varianter
+- Fjerner neutral-varianter
+- Fjerner `color` variant property
+
+## Viktig
+- Dette påvirker hele biblioteket
+- Dette steget kan være vanskelig å reversere uten snapshot
+
+## Kontrollpunkt
+- ✅ Gamle color-varianter er fjernet
+- ✅ Component sets ser riktige ut
+
+## Video / bilder
+- Placeholder
+
+---
+
+# Steg 6 – Kjør plugin: Fix in library
+
+## Hensikt
+Oppdatere instanser som brukte variantene som nå er fjernet.
+
+## Pluginen gjør følgende
+
+### Neutral-varianter
+- Endres til:
+  - `default`
+- Legger på:
+  - `color mode = neutral`
+
+### Support-varianter
+- Krever manuelt valg av ny farge
+- Pluginen lar deg velge mapping
+
+## Viktig
+- Pluginen kan ikke automatisk vite hva tidligere support-farger tilsvarer
+
+## Kontrollpunkt
+- ✅ Instanser er oppdatert
+- ✅ Ingen manglende komponenter
+- ✅ Eksempler ser riktige ut
+
+## Video / bilder
+- Placeholder
+
+---
+
+# Steg 7 – Kvalitetssikring
+
+## Hensikt
+Kontrollere at biblioteket fungerer som forventet.
+
+## Sjekk dette
+
+### Komponenter
+- Feil farger
+- Feil states
+- Manglende modes
+
+### Eksempelsider
+- Dokumentasjon
+- Showcase
+- Komponentsider
+
+### Variabler
+- Ingen gamle collections
+- Ingen ubrukt struktur
+
+## Kontrollpunkt
+- ✅ Biblioteket ser korrekt ut
+- ✅ Ingen åpenbare feil
+
+## Video / bilder
+- Placeholder
+
+---
+
+# Steg 8 – Publiser biblioteket
+
+## Hensikt
+Gjøre endringene tilgjengelige for teamet.
+
+## Gjør dette
+- Publiser oppdaterte komponenter
+- Publiser oppdaterte variabler
+
+## Anbefaling
+- Informer teamet om breaking changes
+- Be teamet oppdatere bibliotek før skisser migreres
+
+## Kontrollpunkt
+- ✅ Biblioteket er publisert
+
+---
+
+# Steg 9 – Oppdater skisser og designfiler
+
+## Hensikt
+Migrere eksisterende designfiler til ny struktur.
+
+## Viktig
+- Dette steget kjøres utenfor biblioteksfilen
+
+## Funksjonen gjør følgende
+- Oppdaterer instanser
+- Mapper gamle varianter til ny struktur
+
+## Anbefalt rekkefølge
+1. Migrer bibliotek
+2. Publiser bibliotek
+3. Oppdater designfiler
+
+## Kontrollpunkt
+- ✅ Skisser bruker oppdatert bibliotek
+- ✅ Ingen gamle varianter gjenstår
+
+## Video / bilder
+- Placeholder
+
+---
+
+# Feilsøking
+
+## Vanlige problemer
+
+### Gamle collections finnes fortsatt
+- Kontroller Token Studio sync
+- Sjekk om variabler fortsatt er i bruk
+
+### Komponenter mistet farger
+- Kontroller variable mappings
+- Kjør Fix in library på nytt
+
+### Support-farger ble feil
+- Oppdater mapping manuelt
+
+### Instanser oppdateres ikke
+- Kontroller at biblioteket er publisert
+- Oppdater library references
+
+---
+
+# FAQ
+
+## Kan jeg reversere migreringen?
+- Ja, hvis du opprettet snapshot i steg 1
+
+## Må alle skisser oppdateres?
+- Ja, dersom de bruker gamle varianter
+
+## Kan dette gjøres uten plugin?
+- Delvis, men pluginen anbefales sterkt
+
+---
+
+# Ressurser
+
+## Videoer
+- Migrering av bibliotek
+- Oppdatering av skisser
+
+## Dokumentasjon
+- Plugin-dokumentasjon
+- Token Studio-oppsett
+
+## Support
+- Kontaktperson / Slack-kanal / Teams-kanal
+<Contributors authors={['David Øvrelid']} />
diff --git a/apps/www/app/content/blog/no/migrate-figma-to-color.mdx b/apps/www/app/content/blog/no/migrate-figma-to-color.mdx
new file mode 100644
index 0000000000..290cb66086
--- /dev/null
+++ b/apps/www/app/content/blog/no/migrate-figma-to-color.mdx
@@ -0,0 +1,246 @@
+---
+title: "Figma-guide: Migrer til ny fargestruktur"
+description: Få hjelp til å migrere Figma-filen din til den nye fargestrukturen
+date: 2026-06-09
+author: Designsystemet
+imageSrc: /img/blog/migrate-figma-color.png
+imageAlt: Illustrasjonsbilde som viser main, support og neutral til venstre, og den nye strukturen med én Color-collection og color mode til høyre.
+imageCaption: Med den nye fargestrukturen samles fargene i én Color-collection i Figma, slik at de fungerer likt som i kode.
+---
+## Introduksjon
+I dag er fargene delt inn i to separate collections – `Main color` og `Support color` – og komponentene finnes i variantene`main`, `support` og `neutral`. Denne inndelingen skaper unødvendige begrensninger og resulterer i mange varianter som er vanskelige å vedlikeholde. Med den nye strukturen samles alle farger i én `Color`-collection, og du styrer fargebruk gjennom `color mode` – akkurat slik det allerede fungerer i kode.
+
+Denne guiden hjelper deg som vedlikeholder en Figmafil basert på Designsystemet med å migrere Figma-biblioteket ditt til den nye fargestrukturen.
+
+### Dette skal endres
+
+- `Main color` og `Support color` slås sammen til én collection: `Color`
+- Alle `support`- og `neutral`-varianter av komponentene fjernes
+
+### Plugin eller manuell migrering
+
+Vi anbefaler å bruke migreringspluginen når du følger denne guiden. Stegene kan også gjøres manuelt, men det kan bli en omfattende jobb, særlig når gamle komponentvarianter og instanser skal ryddes opp.
+
+#### Forutsetninger – navn pluginen forventer
+
+Pluginen gjenkjenner ting i filen på faste navn og strukturer. Har dere endret noen av disse, kan pluginen feile eller gi feil resultat:
+
+- **Variantegenskap for farge** må hete `color` eller `color mode`. Er den endret, fjerner ikke pluginen variantene.
+
+- **`Color`-collectionen** må ha fargemodusene `info`, `warning`, `danger` og `success` (disse kommer fra de oppdaterte tokenene). Mangler de, stopper pluginen og ber deg generere og publisere tokens på nytt.
+
+- **Variabelprefiks `color/main/`**: Prepare-steget fjerner dette prefikset fra variabelnavnene. Variabler uten prefikset blir ikke omdøpt.
+
+- **`Alert` / `ValidationMessage`**: Disse variantene skal ikke endres. Pluginen ignorerer dem så lenge komponentene har de opprinnelige navnene. Hvis navnene er endret, må du kontrollere dem manuelt – ellers kan variantene bli slettet.
+
+- **`TableColumn`** har en spesialregel: pluginen bytter variantene som normalt, men setter *ikke* `color mode = neutral` på celle-/header-instansene inni. (De var feilkoblet til neutral, og å sette modusen ville bevart feilen.) Forutsetter at komponenten heter `TableColumn`.
+
+### Hva skjer med filer som bruker biblioteket?
+
+Med filer som bruker biblioteket mener vi Figma-filer der komponenter fra biblioteket er brukt som instanser. Det er altså ikke selve biblioteksfilen.
+
+Filer som bruker biblioteket blir ikke ødelagt av migreringen.
+
+Instanser som bruker det som tidligere het `main`, blir automatisk koblet til nye varianter. Instanser som bruker `support` eller `neutral`, blir ikke oppdatert automatisk av Figma.
+
+Senere i guiden forklarer vi hvordan disse instansene kan oppdateres med pluginen.
+
+## Må vi følge hele guiden?
+
+Nei. Guiden kan deles i to deler:
+
+- Steg 1–3 oppdaterer token- og variabelstrukturen
+- Steg 4–6 fjerner gamle varianter og rydder opp i biblioteket
+
+Hvis dere ønsker en gradvis overgang, kan dere stoppe etter steg 3. Da vil eksisterende `support`- og `neutral`-varianter fortsatt fungere.
+
+Dere kan også vente med å gjennomføre hele migreringen. Hvis dere senere skal generere tokens på nytt, må dere gjennomføre steg 1–3 først.
+
+## Før du starter
+Oppdater tokens til den nye strukturen. NOTAT:Lenke til en annen guide eller docs?
+
+## Steg 1 – Opprett snapshot i versjonshistorikken
+
+Sørg for at du kan gjenopprette filen hvis noe går galt. Hvis du foretrekker å jobbe i en branch, kan du gjøre det i stedet.
+
+**Gjør dette:**
+- Åpne "Version history" i Figma
+- Opprett et nytt snapshot
+- Gi snapshotet et tydelig navn, for eksempel "before migration"
+
+<ResponsiveIframe
+  src='/img/blog/migrate-steg1.mp4'
+  title='Skjermopptak som viser hvordan man legger til et snapshot i versjonshistorikken.'
+  frameBorder='0'
+  autoPlay={false}
+  aspectRatio='16-9'
+/>
+
+
+## Steg 2 – Oppdater navn i variabelstrukturen
+
+Oppdater variabelstrukturen før du eksporterer tokens fra Token Studio. Da havner variablene riktig når du eksporterer dem igjen.
+
+**Plugin**
+1. Kjør "color-migration-helper"
+2. Trykk på "Update library"
+3. Pluginen sjekker om variabelstrukturen er riktig
+4. Trykk på "Prepare variables" hvis pluginen ber deg om å oppdatere strukturen
+
+<ResponsiveIframe
+  src='/img/blog/migrate-steg2.mp4'
+  title='Skjermopptak som viser hvordan man bruker pluginen til å endre navn'
+  frameBorder='0'
+  autoPlay={false}
+  aspectRatio='16-9'
+/>
+
+<Image
+      src='/img/blog/migrate-steg2variabler.png'
+      alt='Skjermbilde som viser hvordan variablene i Figma skal se ut etter oppdateringen'
+      caption='Slik skal variablene se ut etter oppdateringen'
+      boxShadow={true}
+      
+    />
+
+<Card >
+  <Details>
+    <Details.Summary>
+    Endre manuelt
+    </Details.Summary>
+    <Details.Content>
+    1. Finn collection `Main color` og gi den nytt navn: `Color`.
+    2. Under "Groups" nederst til venstre står det `All/color/main`. Høyreklikk på `color` og velg "Ungroup".
+
+    <ResponsiveIframe
+      src='/img/blog/migrate-steg2manuelt.mp4'
+      title='Skjermopptak som viser hvordan man manuelt endrer navn i variabelstrukturen'
+      frameBorder='0'
+      autoPlay={false}
+      aspectRatio='16-9'
+    />
+    
+    </Details.Content>
+  </Details>
+</Card>
+
+## Steg 3 – Synkroniser oppdaterte tokens med Token Studio
+
+Synkroniser Token Studio med den nye variabelstrukturen, slik at tokens eksporteres riktig. NOTAT: Legg til link til guide for token studio her
+
+**Gjør dette:**
+- Generer oppdaterte tokens
+- Importer tokens til Token Studio
+- Eksporter tokens på nytt
+
+**Kontroller at:**
+- Alle farger ligger i `Color`
+- `Main color` og `Support color` ikke lenger brukes
+
+
+## Steg 4 – Fjern Support color collection
+
+Rydd opp etter eksporten. Token Studio sletter ikke `Support color` automatisk, så collectionen må slettes manuelt.
+
+Hvis dere tidligere har hatt egne farger som nå er fjernet eller har fått nytt navn i token-strukturen, kan noen variabler bli liggende igjen i `Color`. Sjekk om det finnes variabler uten referanser, og fjern dem ved behov.
+
+<ResponsiveIframe
+  src='/img/blog/migrate-steg4.mp4'
+  title='Skjermopptak som viser hvordan man sletter support color'
+  frameBorder='0'
+  autoPlay={false}
+  aspectRatio='16-9'
+/>
+
+
+## Steg 5 – Kjør migreringen i pluginen
+
+I biblioteket finnes det i dag tre fargevarianter av komponentene: `main`, `support` og `neutral`.
+
+`support` brukes ikke lenger, og `neutral` er overflødig fordi komponentene nå kan styres med `color mode`.
+
+Pluginen fjerner gamle varianter og oppdaterer instanser i biblioteksfilen i samme operasjon, over hele fila.
+
+**Pluginen gjør dette:**
+- `support`- og `neutral`-varianter fjernes fra komponentene
+- `neutral`-instanser oppdateres til `default` og får `color mode = neutral`
+- `support`-instanser oppdateres til `default`, og du velger hvilken `color mode` de skal bruke
+- instanser som brukte gamle varianter byttes til ny variant og får riktig `color mode` – også instanser som ligger inne i andre instanser
+- `Support color`-variabler som er brukt direkte på frames, tekst og andre lag (ikke bare på instanser) kobles om til `Color`
+
+**Gjør dette:**
+1. Åpne "color-migration-helper"
+2. Trykk på "Update library"
+3. Pluginen sjekker fila. Når alt er klart, vises **Run migration**-boksen automatisk. (Er den ikke klar, får du beskjed om hva som mangler – kjør Steg 2–4 først.)
+4. Velg hvilken farge som skal erstatte `support`. Dette må velges – pluginen kjører ikke før du har valgt.
+5. Trykk på "Run migration"
+
+(video)
+
+> **Merk:** Pluginen sjekker at fila er klar før den kjører, og stopper med en beskjed hvis:
+> - variablene ikke er forberedt (kjør Steg 2 først), eller
+> - `Color`-collectionen mangler fargemodusene `info`, `warning`, `danger` eller `success` (generer og publiser tokens på nytt – Steg 3).
+
+**Unntak:**
+- `Alert` og `ValidationMessage` blir ikke endret og beholder sine eksplisitte farger.
+- `TableColumn` byttes som normalt, men celle-/header-instansene inni får *ikke* satt `color mode = neutral` (se Forutsetninger).
+
+**Etter migreringen:** Noen instanser kan havne under **Needs review** eller **Blocked**, for eksempel `support`-instanser uten valgt fargemode, eller varianter som ikke finnes i det nye komponentsettet. Disse må håndteres manuelt. Klikk en rad for å hoppe til instansen i Figma.
+
+<Card>
+  <Details>
+    <Details.Summary>
+    Endre manuelt
+    </Details.Summary>
+    <Details.Content>
+    Manuell migrering er en omfattende jobb. Du må gå gjennom komponenter, underkomponenter og eksempelinstanser i biblioteksfilen.
+
+    Fjern alle varianter av typen `support` eller `neutral`, og oppdater instanser som bruker gamle varianter. `neutral`-varianter må settes til `default` med `color mode = neutral`. `support`-varianter må settes til `default` med riktig `color mode`.
+
+    Antallet varianter som utgår varierer per bibliotek. [Oversikt over alle varianter som utgår i vår standardfil](https://github.com/digdir/designsystemet/issues/4893#:~:text=Variant%20cleanup%20scope)
+    </Details.Content>
+  </Details>
+</Card>
+
+## Steg 6 – Se over filen og publiser biblioteket
+
+Biblioteksfilen skal nå være oppdatert.
+
+Gå gjennom komponentene før du publiserer biblioteket på nytt. Hvis biblioteket brukes av mange, kan det være lurt å informere om endringen og forklare hva som skjer med filer som bruker biblioteket.
+
+NOTAT: Info om scope og syntax
+
+
+## Oppdater filer som bruker biblioteket
+
+Når du har publisert biblioteket, kan alle som bruker biblioteket oppdatere. Figma vil automatisk koble noen instanser til nye varianter, men ikke alle.
+
+### Dette oppdateres automatisk
+
+Instanser som bruker det som tidligere het `main`, blir automatisk oppdatert. Hvis dere ikke har endret rekkefølge eller navn på farger, vil disse se like ut som før.
+
+### Dette må oppdateres med pluginen
+
+Instanser som bruker `support` eller `neutral`, blir ikke oppdatert automatisk av Figma. Disse kan oppdateres med "Update sketches"-flyten i migreringspluginen.
+
+Pluginen bytter ut gamle instanser med nye og setter riktig `color mode`. Den rydder samtidig opp `Support color`-variabler som er brukt direkte på frames, tekst og andre lag, og kobler dem om til `Color`.
+
+**Slik gjør du:**
+- Velg **Scope** for å avgrense til utvalg, gjeldende side eller hele filen.
+- For `support`-instanser uten egen mode velger du en erstatningsfarge i nedtrekkslisten **"Replace 'support' with"**.
+- Avkrysningsboksen **"Rebind legacy color variables (experimental)"** er eksperimentell og kobler om gamle fargevariabler inne i instansene – la den stå av med mindre du vet du trenger den.
+
+### Anbefaling
+
+Be gjerne brukere opprette et snapshot i versjonshistorikken før de oppdaterer biblioteket. I vår testing har vi ikke sett visuelle endringer i filer som bruker biblioteket, men et snapshot gjør det enkelt å gå tilbake hvis noe likevel skjer.
+
+På sikt anbefaler vi å oppdatere gamle instanser. Filer som bruker biblioteket kan ellers midlertidig inneholde instanser fra både gammel og ny bibliotekversjon.
+
+## Kjente feil (Lasse fyller ut)
+- Swap library konsekvens
+- TableColumn feil 
+- Popover eksempel feil
+
+
+
+<Contributors authors={['Lasse Febakke Straum']} />
diff --git a/apps/www/public/img/blog/migrate-figma-color.png b/apps/www/public/img/blog/migrate-figma-color.png
new file mode 100644
index 0000000000..51664c846b
Binary files /dev/null and b/apps/www/public/img/blog/migrate-figma-color.png differ
diff --git a/apps/www/public/img/blog/migrate-steg1.mp4 b/apps/www/public/img/blog/migrate-steg1.mp4
new file mode 100644
index 0000000000..4ea234577e
Binary files /dev/null and b/apps/www/public/img/blog/migrate-steg1.mp4 differ
diff --git a/apps/www/public/img/blog/migrate-steg2.mp4 b/apps/www/public/img/blog/migrate-steg2.mp4
new file mode 100644
index 0000000000..c9c4879e2f
Binary files /dev/null and b/apps/www/public/img/blog/migrate-steg2.mp4 differ
diff --git a/apps/www/public/img/blog/migrate-steg2manuelt.mp4 b/apps/www/public/img/blog/migrate-steg2manuelt.mp4
new file mode 100644
index 0000000000..053e7cedf5
Binary files /dev/null and b/apps/www/public/img/blog/migrate-steg2manuelt.mp4 differ
diff --git a/apps/www/public/img/blog/migrate-steg2variabler.png b/apps/www/public/img/blog/migrate-steg2variabler.png
new file mode 100644
index 0000000000..a41b68f804
Binary files /dev/null and b/apps/www/public/img/blog/migrate-steg2variabler.png differ
diff --git a/apps/www/public/img/blog/migrate-steg4.mp4 b/apps/www/public/img/blog/migrate-steg4.mp4
new file mode 100644
index 0000000000..7f86e1be7d
Binary files /dev/null and b/apps/www/public/img/blog/migrate-steg4.mp4 differ
diff --git a/apps/www/public/img/blog/migrate-steg5.mp4 b/apps/www/public/img/blog/migrate-steg5.mp4
new file mode 100644
index 0000000000..a7f368d525
Binary files /dev/null and b/apps/www/public/img/blog/migrate-steg5.mp4 differ
diff --git a/apps/www/public/img/blog/migrate-steg6.mp4 b/apps/www/public/img/blog/migrate-steg6.mp4
new file mode 100644
index 0000000000..abb9f7c081
Binary files /dev/null and b/apps/www/public/img/blog/migrate-steg6.mp4 differ