diff --git a/README.md b/README.md
index ae7a7826..16683b33 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ De fleste komponentene bygger på [Shoelace](https://shoelace.style/), men er ti
 Dette prosjektet inneholder to applikasjoner:
 
 - I rot-mappa ligger selve komponentbiblioteket med nve-komponentene
-- I mappa `doc-site` ligger test-applikasjonen som viser brukerveiledninga for biblioteket. Teknisk beskrivelse av denne ligger i egen [readme](doc-site/README.md)
+- I mappa `doc-site` ligger test-applikasjonen som viser brukerveiledningen for biblioteket. Teknisk beskrivelse av denne ligger i egen [readme](doc-site/README.md)
 
 Kjør `npm install` og `npm run dev` for å starte test-applikasjonen.
 
@@ -28,7 +28,7 @@ unngår det – særlig for shoelace.css – fordi filen da måtte blitt manuelt
 
 Ved å importere shoelace.css direkte i main.ts, sørger Vite for korrekt bundling. Dette eliminerer behovet for å endre @import-referanser i global.css og gir dist-mappen som eneste source of truth.
 
-Applikasjonen er selve brukerveiledninga for komponentbiblioteket, så her ligger api-dokumentasjon, beskrivelse av funksjonalitet og ikke minst kodeeksempler.
+Applikasjonen er selve brukerveiledningen for komponentbiblioteket, så her ligger api-dokumentasjon, beskrivelse av funksjonalitet og ikke minst kodeeksempler.
 
 ## Versjonslogg
 
diff --git a/doc-site/.vitepress/config.mts b/doc-site/.vitepress/config.mts
index c5fc43cc..944d63be 100644
--- a/doc-site/.vitepress/config.mts
+++ b/doc-site/.vitepress/config.mts
@@ -40,37 +40,38 @@ export default defineConfig({
         text: 'Introduksjon',
         items: [
           { text: 'Om designsystemet', link: '/introduction/home' },
-          { text: 'Universell Utforming', link: '/introduction/universellUtforming' },
+          { text: 'Roller', link: '/introduction/roller' },
           {
-            text: 'Designelementer',
+            text: 'For utviklere',
             items: [
-              { text: 'Tokens', link: '/introduction/designelementer/tokens' },
-              { text: 'Farger', link: '/introduction/designelementer/farger' },
-              { text: 'Typografi', link: '/introduction/designelementer/typography' },
-              { text: 'Avstander og luft', link: '/introduction/designelementer/avstander' },
-              { text: 'Visuell form', link: '/introduction/designelementer/visuellform' },
-              { text: 'Animasjoner', link: '/introduction/designelementer/animasjoner' },
+              { text: 'Kom i gang', link: '/introduction/forDevelopers/development' },
+              { text: 'Bruk i Vue', link: '/introduction/forDevelopers/vue' },
+              { text: 'Importering av filer', link: '/introduction/forDevelopers/import' },
+              { text: 'Validering', link: '/introduction/forDevelopers/validation' },
+              { text: 'Vue-komponentbibliotek', link: '/introduction/forDevelopers/vueLibrary' },
             ],
           },
           {
             text: 'For designere',
             items: [
-              { text: 'Design', link: '/introduction/forDesigner/design' },
               { text: 'Kom i gang', link: '/introduction/forDesigner/getStarted' },
+              { text: 'Bruk i Figma', link: '/introduction/forDesigner/figma' },
               { text: 'Bidrag', link: '/introduction/forDesigner/contribution' },
               { text: 'Commit-meldinger', link: '/introduction/forDesigner/commitMessages' },
             ],
           },
-          {
-            text: 'For utviklere',
+                    {
+            text: 'Designelementer',
             items: [
-              { text: 'Kom i gang', link: '/introduction/forDevelopers/development' },
-              { text: 'Importering av filer', link: '/introduction/forDevelopers/import' },
-              { text: 'Bruk i Vue', link: '/introduction/forDevelopers/vue' },
-              { text: 'Validering', link: '/introduction/forDevelopers/validation' },
-              { text: 'Vue-komponentbibliotek', link: '/introduction/forDevelopers/vueLibrary' },
+              { text: 'Tokens', link: '/introduction/designelementer/tokens' },
+              { text: 'Farger', link: '/introduction/designelementer/farger' },
+              { text: 'Typografi', link: '/introduction/designelementer/typography' },
+              { text: 'Avstander og luft', link: '/introduction/designelementer/avstander' },
+              { text: 'Visuell form', link: '/introduction/designelementer/visuellform' },
+              { text: 'Animasjoner', link: '/introduction/designelementer/animasjoner' },
             ],
           },
+          { text: 'Universell Utforming', link: '/introduction/universellUtforming' },
         ],
       },
       { text: 'Komponenter', items: componentsLinks },
diff --git a/doc-site/.vitepress/theme/components/StartPage.vue b/doc-site/.vitepress/theme/components/StartPage.vue
index 4bcea524..73cb213d 100644
--- a/doc-site/.vitepress/theme/components/StartPage.vue
+++ b/doc-site/.vitepress/theme/components/StartPage.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="nve-home">
     <section>
-      <h1 class="nve-hero-title">Brukerveiledning for NVE Designsystem</h1>
-      <p class="nve-hero-text">Velkommen til brukerveiledninga for NVEs designsystem. Denne innholder:</p>
+      <div>
+        <h1 class="nve-hero-title">NVE Designsystem</h1>
+        <p class="nve-hero-text">Velkommen til brukerveiledningen for NVEs designsystem:</p>
+      </div>
       <ul>
-        <li>Litt om hva designsystemet består av og enkelte retningslinjer</li>
+        <li>Hva designsystemet består av og enkelte retningslinjer</li>
         <li>En separat introduksjon for designere og for utviklere</li>
         <li>API-dokumentasjon for hver komponent</li>
       </ul>
@@ -27,8 +29,14 @@
 .nve-home {
   padding-top: var(--sizing-x-large, 4rem);
 }
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
 .nve-hero-title {
   font-family: Source Sans 3;
+  padding-bottom: 6px;
   font-size: 40px;
   font-weight: 600;
   line-height: 48px;
@@ -36,7 +44,6 @@
 }
 
 .nve-hero-text {
-  padding-top: 1rem;
   font-family: Source Sans 3;
   font-size: 24px !important;
   font-weight: 400 !important;
@@ -44,6 +51,10 @@
   text-align: left;
 }
 
+ul {
+  margin-top: 0;
+}
+
 .links-container {
   display: flex;
   gap: 1rem;
diff --git a/doc-site/assets/images/get-started-1.png b/doc-site/assets/images/get-started-1.png
index 84476fa9..5d8ed8ff 100644
Binary files a/doc-site/assets/images/get-started-1.png and b/doc-site/assets/images/get-started-1.png differ
diff --git a/doc-site/introduction/designelementer/animasjoner.md b/doc-site/introduction/designelementer/animasjoner.md
index 262c9ab3..5f9c4061 100644
--- a/doc-site/introduction/designelementer/animasjoner.md
+++ b/doc-site/introduction/designelementer/animasjoner.md
@@ -30,13 +30,4 @@ Komponenter fra deisgnsystemet er allerede ferdig animert i forskjellige states.
 
 All animasjon skal settes som enten; dissolve, eller smart animate (Ease in & out) + duration (100ms, 300ms eller 600ms).
 
-<nve-alert open>
-  <nve-icon slot="icon" name="info"></nve-icon>
-    Det skal ikke være animasjon når du bytter side. Det skal settes som Instant.
-
-</nve-alert>
-
-<hr>
-
-**Les om fler designelementer på**
-<nve-button variant="neutral" href="https://nve.frontify.com/document/397706#/introduksjon/designsystem"><nve-icon name="open_in_new" slot="suffix"></nve-icon>Profil og primitiver</nve-button>
+<nve-message-card label="Merk" size="compact">Det skal ikke være animasjon når du bytter side. Det skal settes som Instant.</nve-message-card>
diff --git a/doc-site/introduction/designelementer/farger.md b/doc-site/introduction/designelementer/farger.md
index 36e93497..721694ab 100644
--- a/doc-site/introduction/designelementer/farger.md
+++ b/doc-site/introduction/designelementer/farger.md
@@ -8,7 +8,7 @@ Fargene er basert på NVEs og Varsoms profilmanualer, men i designsystemet har f
 
 I designsystemet har farger kontekstbaserte roller. Det vil si at når du bruker fargene, må du bruke de i riktig kontekst. F.eks: Vil det stå om fargen brukes i elementer med forgrunn eller bakgrunn. Dette sikrere at fargene brukes i riktig kontekst og gjør det enklere å oppfylle kravene til universell utforming. Det gjør også at vi får et felles og konsekvent uttrykk på tvers av design.
 
-### Fargekategorier
+## Fargekategorier
 
 Vi har fire hovedkategorier:
 
@@ -18,13 +18,3 @@ Vi har fire hovedkategorier:
     <nve-message-card class="card" showIcon="false" variant="primary" label="Feedback">Brukes i varslinger, på statuser og i tilbakemeldinger.</nve-message-card>
     <nve-message-card class="card"  showIcon="false" variant="primary" label="Danger level">Fargeskalaen som brukes i farevarsler, en farge for hvert farenivå.</nve-message-card>
 </div>
-
-### Farger i designsystemet
-
-#### Dette er fargene slik de er definert.
-
-Man skal ikke bruke disse variablene direkte, men heller bruke andre variabler som bruker disse.
-
-<ColorList></ColorList>
-
-Se også https://designsystemet.no/no/fundamentals/design-tokens/colors/
diff --git a/doc-site/introduction/designelementer/tokens.md b/doc-site/introduction/designelementer/tokens.md
index f98aaa73..6bf64954 100644
--- a/doc-site/introduction/designelementer/tokens.md
+++ b/doc-site/introduction/designelementer/tokens.md
@@ -1,24 +1,18 @@
 <PageHeader title="Tokens" imagePath="tokens" pageLevel=1></PageHeader>
 
-### Designelementer
+# Designelementer
 
-For å kunne jobbe med designsystemet er det noen par designelementer du burde gjøre deg kjent med. Tokens er elementer du måte komme til å forholde deg til fremover.
+For å jobbe med designsystemet bør du gjøre deg kjent med noen sentrale designelementer.
 
-<hr>
-
-# Design tokens
-
-Design tokens er en samling av "designegenskaper", som farger, typografi, luft og andre primitiver. Disse tokensene fungerer som byggeklosser for designsystemet, og gir en effektiv måte å organisere og implementere designbeslutninger på tvers av ulike plattformer og enheter. Ved å bruke design tokens kan designere og utviklere opprettholde en enhetlig visuell identitet mens de forenkler samarbeidet og tilpasningen til ulike deler av et prosjekt.
-
-<img src="../../assets/images/tokens.png" width="auto">
+## Design tokens
 
 I NVE er design tokens en samling av standardiserte verdier som styrer utseendet og funksjonaliteten til elementene i vårt designsystem. Disse tokens dekker alt fra farger og typografi til avstander og formstørrelser. De lar oss tilpasse utseendet basert på våre merkevarefarger og visuelle stil, samtidig som de gir fleksibilitet til å oppdatere og vedlikeholde design effektivt. Dette gjør det mulig å tilpasse designet til ulike teknologier og verktøy, mens vi sikrer en konsistent og sømløs brukeropplevelse.
 
-Samlet sett gir design tokens en strukturert tilnærming til designsystemet hos NVE, noe som gir en mer effektiv, konsistent og samarbeidsvennlig designprosess.
+<img src="../../assets/images/tokens.png" width="auto">
 
-#### Bruk av tokens
+## Bruk av tokens
 
-Designsystemet har en tokenstruktur som brukes både i for deisgnere og kode.
+Designsystemet har en tokenstruktur som brukes både i designverktøy og programkode.
 
 For designere som jobber i Figma er det gjennom Figma sine "Variabler" du kan sette token på det du lager. Disse har helt lik struktur og navnkonvensjon som Token studio. Token studio er en plugin for Figma, som vi bruker for å holde oversikt og koble design verdier til tokens, som omskrives og publiseres opp til GitHub.
 
@@ -28,26 +22,26 @@ TODO: Bruke tokens som utvikler
 
 <img src="../../assets/images/tokens2.png" width="auto">
 
-#### Rå-verdier
+### Rå-verdier
 
 Dataen knyttet til token-navnet. Dette er ikke tokens men endelig verdier (for eksempel: RGB-farger eller pikselverdier).
 
-#### Global tokens (base-tokens)
+### Global tokens (base-tokens)
 
 Global tokens (base-tokens)
 En token brukt på tvers av designsystemet. Dette er det motsatte av en komponentspesifikk token.
 
-#### Alias tokens
+### Alias tokens
 
 Alias tokens
 En token som refererer til en annen token, i stedet for å referere til en hardkodet verdi.
 
-#### Component specific tokens
+### Component specific tokens
 
 Component specific tokens
 En token brukt for en bestemt komponent.
 
-#### Private tokens
+### Private tokens
 
 Private tokens
 Tokenene i denne nivået lagrer vi ekstra rå verdiene vi ikke bruker og bygger oss en bank med verdier som kan brukes for videre ekspansjon og endringer.
diff --git a/doc-site/introduction/designelementer/typography.md b/doc-site/introduction/designelementer/typography.md
index 8d143521..3a5dc7df 100644
--- a/doc-site/introduction/designelementer/typography.md
+++ b/doc-site/introduction/designelementer/typography.md
@@ -6,13 +6,13 @@ outline: [2, 3]
 
 Typografi er et av de sterkeste virkemidlene vi har for å lage visuelle hierarkier. For å sikre et konsekvent visuelt uttrykk på alle våre tjenester definerer designsystemet satte stiler på font-størrelse, font-vekt og linjeavstand. Vi bruker skrifttypen Source Sans i all kommunikasjon.
 
-#### Source Sans
+### Source Sans
 
 <img src="../../assets/images/typo.png" width="auto">
 
 Source Sans Pro/3 er en «open-source» sans serif skrifttype, laget for å gi god lesbarhet på digitale produkter. I designsystemet bruker vi kun vektene Regular og Semibold, med tilhørende italics-versjoner.
 
-#### Typografiske tokens
+### Typografiske tokens
 
 Typografiske tokens brukes for å opprettholde en ensartet samling av fonter i hele utviklingsprosessen.
 
@@ -25,11 +25,11 @@ Designsystemet tilbyr ferdige komponenter for typografi som gjør det enkelt å
 
 Disse komponentene sikrer automatisk riktig bruk av typografi-tokens og semantisk HTML, samtidig som de gir fleksibilitet til å overstyre styling ved behov.
 
-#### Typografi i Figma
+### Typografi i Figma
 
 Fonten heter Source Sans 3 i Figma, og er tilgjenglig uten at du trenger å laste ned eller installere fonten selv.
 
-#### Har du ikke fonten på maskinen?
+### Har du ikke fonten på maskinen?
 
 Fonten heter Source Sans 3 i Google Fonts. Der kan du finne informasjon om hvordan fonten skal legges inn i kode på digitale produkter, og laste ned font-filer du kan installere på din maskin [her.](https://fonts.google.com/specimen/Source+Sans+3)
 
@@ -54,7 +54,7 @@ Basert på fontstørrelsevariablene har vi laget fontvariabler for bestemte form
 
 I Figma-skisser blir disse font-egenskapene typisk brukt på ulike tekststiler og komponenter. For eksempel, header-stiler blir definert ved å bruke --heading- variabler, noe som sikrer en sammenhengende og standardisert tilnærming til typografi på tvers av design-systemet.
 
-### Header
+## Header
 
 Header typografi kan brukes gjennom [nve-heading](/components/nve-heading#heading-varianter)-komponenten.
 
@@ -63,7 +63,6 @@ Header typografi kan brukes gjennom [nve-heading](/components/nve-heading#headin
 ### Subheader
 
 Subheader typografi kan brukes gjennom [nve-heading](/components/nve-heading#subheading-varianter)-komponenten.
-
 <TypographyTable tableContentType="subheadings"></TypographyTable>
 
 ### Lead
@@ -84,10 +83,10 @@ Body compact typografi kan brukes gjennom [nve-paragraph](/components/nve-paragr
 
 <TypographyTable tableContentType="body-compact"></TypographyTable>
 
-### Detail text
+## Detail text
 
 <TypographyTable tableContentType="detail-text"></TypographyTable>
 
-### Label
+## Label
 
 <TypographyTable tableContentType="label"></TypographyTable>
diff --git a/doc-site/introduction/designelementer/visuellform.md b/doc-site/introduction/designelementer/visuellform.md
index a4760ee9..470f4cba 100644
--- a/doc-site/introduction/designelementer/visuellform.md
+++ b/doc-site/introduction/designelementer/visuellform.md
@@ -1,6 +1,6 @@
 <PageHeader title="Visuell form" imagePath="Visuell form" pageLevel=1></PageHeader>
 
-Her finner du designsystemet retningslinjer for border width, border radius og skygger.
+Her finner du designsystemets retningslinjer for border-width, border-radius og skygger.
 
 ## Border width
 
@@ -29,6 +29,3 @@ Skygge brukes til å få et element til å skille seg ut fra overflaten for å s
  <img src="../../assets/images/skygger.png" width="auto" >
 
 Du kan bruke to nivåer med skygge: Soft og Hard. Soft brukes på overlappende elementer når bakgrunnen er nedtonet og hovedsaklig består av lyse og nøytrale farger. Hard brukes på overlappende elementer når bakgrunnen er støyete og består av mange ulike farger, som f.eks. over et kart eller et bilde.
-
-**Les om fler designelementer på**
-<LinkButton URL="https://nve.frontify.com/" text="Profil og primitiver" :openInNewTab="true"/>
diff --git a/doc-site/introduction/forDesigner/commitMessages.md b/doc-site/introduction/forDesigner/commitMessages.md
index 43c9e12a..1ad188ae 100644
--- a/doc-site/introduction/forDesigner/commitMessages.md
+++ b/doc-site/introduction/forDesigner/commitMessages.md
@@ -6,6 +6,8 @@ I designsystemet bruker vi **Conventional Commits** for å holde endringer ryddi
 
 Når commit-meldingene ikke følger denne standarden, må utviklere manuelt endre dem før PR-en kan merges. For å unngå dette ber vi designere følge retningslinjene under.
 
+<nve-message-card label="Merk" size="compact">Breaking changes skal vurderes av en utvikler.</nve-message-card>
+
 ### Format
 
 Slik skriver du commit-meldingene:
@@ -27,10 +29,10 @@ type(scope): kort beskrivelse på norsk
 feat(tokens): legge til tokens for bakgrunnsfarger
 ```
 
-**Merk**: Breaking changes skal vurderes av en utvikler.
+Gjerne se dokumentasjon under [Contributing](https://github.com/NVE/Designsystem?tab=contributing-ov-file#-conventional-commits) i GitHub også.
 
 ## Hvorfor er dette viktig?
 
 Når man endrer token-verdier må vi også oppdatere CSS-filene. I dag skjer det automatisk i PR-en. Hvis conventional commit er korrekt brukt, kan vi publisere designsystem-pakken umiddelbart med oppdatert CSS, slik at endringene raskt når produksjon.
 
-Hvis conventional commit mangler eller har feil syntaks, vil publisering feile, og en utvikler må redigere commit-meldingen manuelt. Dette skaper unødvendig ekstraarbeid og forsinker leveransen.
+Hvis en commit-melding mangler eller har feil syntaks, vil bygg og publisering feile. En utvikler må da rette commit-meldingen manuelt, noe som gir ekstraarbeid og forsinker leveransen.
diff --git a/doc-site/introduction/forDesigner/contribution.md b/doc-site/introduction/forDesigner/contribution.md
index 81f59908..7e758266 100644
--- a/doc-site/introduction/forDesigner/contribution.md
+++ b/doc-site/introduction/forDesigner/contribution.md
@@ -60,39 +60,38 @@ For spørsmål og avklaringer er Teams et utmerket verktøy. Du kan enkelt still
 
 Hvis du trenger å gjøre endringer på eksisterende komponenter eller bygge nye, ønsker vi å ta en samtale med deg. Sammen vil vi vurdere kompleksiteten i oppgaven og hva teamet ditt har kapasitet til. Vårt mål er å unngå at designsystemet blir en flaskehals i produktutviklingen. Derfor ønsker vi å avklare hvordan teamet ditt kan bidra med konsept, design og kode.
 
-### Eksempler på hvordan samtalen kan utvikle seg
+### Typiske scenarioer
 
-#### Endringen er kun relevant for ditt team
+- **Endringen er kun relevant for ditt team**
 
-Teamet ditt utvikler en lokal komponent. Vi holder dialogen gående og vurderer om andre team får samme behov senere.
+  Teamet ditt utvikler en lokal komponent. Vi holder dialogen gående og vurderer om andre team får samme behov senere.
 
-### Endringen er enkel, og andre team har lignende behov
+- **Endringen er enkel, og andre team har lignende behov**
 
-Teamet ditt kan foreslå endringen i designsystemet, hvor ansvarlige vurderer om det er verdt å investere tid og ressurser i videre utvikling. Dette gjøres ved å opprette en branch.
+  Teamet ditt kan foreslå endringen i designsystemet ved å opprette en sak, hvor ansvarlige vurderer om det er verdt å investere tid og ressurser i videre utvikling.
 
-#### Endringen er kompleks, eller det skal bygges en ny komponent
+- **Endringen er kompleks, eller det skal bygges en ny komponent**
 
-Teamet ditt og designsystemansvarlige samarbeider om en løsning, og vi fordeler arbeidsoppgavene i fellesskap.
+  Teamet ditt og designsystemansvarlige samarbeider om en løsning, og vi fordeler arbeidsoppgavene i fellesskap.
 
-<hr>
-
-### Hvordan bidra?
+## Hvordan bidra?
 
 Designsystemet er en felles dugnad fra og for alle prosjekter i NVE. Derfor er vi avhengig av bidrag for å bygge og forbedre designsystemet. Her forklarer vi hvordan du kan bidra.
 
 1. **Før du starter**  
    Sjekk alltid om det er en komponent eller et mønster som dekker dine behov. [Figma](https://www.figma.com/files/1033298377581647627/project/85006605/Public---Designsystem?fuid=1201899461213591908) er et flott sted å starte. Her finner du en oversikt over alle komponenter og profilelementer, og du finner beskrivende eksempler. Ta gjerne kontakt via Teams hvis du er usikker.
 
-2. **Rapporter i Jira**  
-   Opplever du at det er noe som mangler, er utydelig eller feil? Vil vi gjerne du legger inn henvendelsen inn i [Jira](https://nveprojects.atlassian.net/browse/DS-132) eller tagger DS-132 Designsystemet gjennom ditt Jira prosjekt. Der vil designsystem-ansvarlig vurdere, fordele og gi ut oppgaver.
+2. **Rapporter i GitHub Issues**  
+   Opplever du at det er noe som mangler, er utydelig eller feil? Vil vi gjerne du legger inn en issue i [GitHub](https://github.com/NVE/Designsystem/issues). Gjerne lag en oppgave på det i ditt Jira-board slik at produkteier har mulighet å prioritere inn oppgaven.
 
 3. **Få tildelt oppgaven**  
-   Designsystemansvarlig vil vurdere og deretter delegere oppgaven. Du får som regel samme oppgave du har lagt inn, med mindre designsystemansvarlig avgjør at det ikke er behov for det, eller at det er en bug. Om det er en bug løses oppgaven av designsystemansvarlig. Om du ikke ønsker å jobbe med oppgaven eller ikke har tid, må du melde ifra til designsystemansvarlig.
+   Gjerne tildel deg selv oppgaven fortløpene om det haster. Designsystemansvarlige vil vurdere og ofte sette deg på samme oppgave du har lagt inn. Om du ikke ønsker å jobbe med oppgaven eller ikke har tid, må du melde ifra til designsystemansvarlig.
 
 4. **Løs oppgaven i Figma eller i kode**  
-   Løs oppgaven du har fått tildelt i Figma eller i kode avhengig av oppgave. Sørg for at du forholder deg til retningslinjene satt i profilmanualen og i designsystemet, og sørg for at løsningen din oppfyller kravene til universell utforming.
+   Løs oppgaven du har fått tildelt i Figma eller i kode avhengig av oppgave. Sørg for at du forholder deg til retningslinjene satt i profilmanualen og i designsystemet, og sørg for at løsningen din oppfyller kravene til [universell utforming](../universellUtforming.md).
 
-<nve-message-card label="Krav">
+<br>
+<nve-message-card label="Krav" size="compact">
   <ul>
     <li class="list-item">Gi komponenten et navn som er fornuftig. Det skal være lett å finne for folk som ikke vet om det. Navnet skal være beskrivende for hva det er eller hva det gjør.</li>
     <li class="list-item">Gjør komponenten enkel å bruke for andre ved å sørge for at den fungerer bra i andre sammenhenger enn den du designet den for: Ulike størrelser, med ulik mengde innhold osv.</li>
@@ -101,7 +100,7 @@ Designsystemet er en felles dugnad fra og for alle prosjekter i NVE. Derfor er v
   </ul>
 </nve-message-card>
 
-## Bruk Branching
+## Bruk branching
 
 <img src="../../assets/images/contribution-4.png" width="auto" >
 
diff --git a/doc-site/introduction/forDesigner/design.md b/doc-site/introduction/forDesigner/figma.md
similarity index 71%
rename from doc-site/introduction/forDesigner/design.md
rename to doc-site/introduction/forDesigner/figma.md
index 9dd7525c..2689c5d8 100644
--- a/doc-site/introduction/forDesigner/design.md
+++ b/doc-site/introduction/forDesigner/figma.md
@@ -1,10 +1,16 @@
 <PageHeader title="For designere" imagePath="designer"  pageLevel=2></PageHeader>
 
-Designsystem samler og tilgjengeliggjør verktøy, filer, komponenter og designretningslinjer som brukes av designere og utviklere for å lage gode og konsekvente brukeropplevelser i NVEs digitale tjenester.
+# Bruk av designsystemet i Figma
 
-## Hva betyr det for deg som designer?
+## Aktiver Designsystemet i Figma om du ikke finner NVE komponenter
 
-Designere skal i størst mulig grad bruke komponentene og mønstrene i designsystemet når de designer nye tjenester for NVE. Dette sørger for at alle tjenestene gir en konsekvent og god brukeropplevelse. Alle bestanddelene i designsystemet er koblet opp med felles tokenverdier (f.eks. farger, avstander og fonter), og det gjør det også enkelt å gjøre justeringer på et overordnet nivå som påvirker alle komponenter og mønstre.
+For å kunne bruke designsystemet må du aktivere denne i Figma. Alle komponentnavn har “NVE-” foran komponentnavnet. Hvis du ikke finner dette må du følge disse trinnene.
+
+1. Trykk deg inn på library ikonet i en arbeidsfil <nve-icon name="import_contacts" style="display: inline; padding-left:8px;"></nve-icon>
+
+2. Der skal designsystem-filene ligge. Den er delt i 6 deler. Fil 01, 02 og 03 er grunnleggende og må aktiveres før bruk.
+
+<img src="../../assets/images/get-started-1.png" width="auto">
 
 ## Struktur i Figma
 
@@ -88,3 +94,16 @@ Under kan du se en oversikt over alle filer som gjør opp designsystemet i Figma
     <LinkButton URL="https://nve.frontify.com/" text="Åpne i Figma" :openInNewTab="true"/>
   </div>
 </div>
+
+## Bytte tema, brands og skjermstørrelse
+
+Designsystemet er satt opp på en måte at du bruker samme komponent men kan overskrive med NVE eller Varsom som brand. Samme gjelder om du ønsker å implementere dark eller lightmode i løsningen.
+Du kan enkelt sette themes ved å bare bruke variabler og komponenter fra designsystemet.
+
+Theme - Kan du bytte mellom dark og light-mode.  
+Brand - Bytter du mellom NVE og Varsom sitt design.  
+Device - Kan du bytte mellom forskjellige skjermstørrelser. Da vil innholdet justere seg i forhold til hvilken flate du jobber på.
+
+<img src="../../assets/images/get-started-2.png" width="auto">
+
+<nve-message-card label="Tips" size="compact">For at dette skal fungere sømløst må du huske på å bruke variablene som er fastsatt - ikke løse designverdier. Da vil ikke alt av innholdet endres i forhold til hva slags variabler/tokens du bruker.</nve-message-card>
diff --git a/doc-site/introduction/forDesigner/getStarted.md b/doc-site/introduction/forDesigner/getStarted.md
index 26be0d54..ca084a60 100644
--- a/doc-site/introduction/forDesigner/getStarted.md
+++ b/doc-site/introduction/forDesigner/getStarted.md
@@ -1,6 +1,12 @@
 <PageHeader title="For designere" imagePath="designer"  pageLevel=2></PageHeader>
 
-# Kom igang
+# Kom i gang
+
+Designsystem samler og tilgjengeliggjør verktøy, filer, komponenter og designretningslinjer som brukes av designere og utviklere for å lage gode og konsekvente brukeropplevelser i NVE og Varsoms digitale tjenester.
+
+## Hva betyr det for deg som designer?
+
+Designere skal i størst mulig grad bruke komponentene og mønstrene i designsystemet når de designer nye tjenester for NVE. Dette sørger for at alle tjenestene gir en konsekvent og god brukeropplevelse. Alle bestanddelene i designsystemet er koblet opp med felles tokenverdier (f.eks. farger, avstander og fonter), og det gjør det også enkelt å gjøre justeringer på et overordnet nivå som påvirker alle komponenter og mønstre.
 
 ## Før du starter
 
@@ -13,29 +19,15 @@ Før du starter å bruke designsystemet, er det flere viktige skritt og forbered
 
 ## Jobb sammen
 
-Alle som er en del av prosjektet bør ha tilgang på Figma-filene. Derfor er det viktig å legge dem til i Teamet. Da kan alle kommentere, se status og hente ut kode. Det er derfor også viktig at du legger ting opp på en ryddig og organisert måte slik at det er mulig for andre å forstå.
-
-## Aktiver Designsystemet i Figma om du ikke finner NVE komponenter
-
-For å kunne bruke designsystemet må du aktivere denne i Figma. Alle komponentnavn har “NVE-” foran komponentnavnet. Hvis du ikke finner dette må du følge disse trinnene.
+<nve-message-card size="compact" label="Til informasjon">Det er fastslått at alle nye produkter som utvikles i NVE og Varsom skal bruke og bidra inn mot designsystemet.</nve-message-card>
 
-1. Trykk deg inn på library ikonet i en arbeidsfil <nve-icon name="import_contacts" style="display: inline; padding-left:8px;"></nve-icon>
-
-2. Der skal designsystem-filene ligge. Den er delt i 6 deler. Fil 01, 02 og 03 er grunnleggende og må aktiveres før bruk.
-   <img src="../../assets/images/get-started-1.png" width="auto">
-
-## Bytte tema, brands og skjermstørrelse
-
-Designsystemet er satt opp på en måte at du bruker samme komponent men kan overskrive med NVE eller Varsom som brand. Samme gjelder om du ønsker å implementere dark eller lightmode i løsningen.
-Du kan enkelt sette themes ved å bare bruke variabler og komponenter fra designsystemet.
+Alle som er en del av prosjektet bør ha tilgang på Figma-filene. Derfor er det viktig å legge dem til i Teamet. Da kan alle kommentere, se status og hente ut kode. Det er derfor også viktig at du legger ting opp på en ryddig og organisert måte slik at det er mulig for andre å forstå.
 
-Theme - Kan du bytte mellom dark og light-mode.  
-Brand - Bytter du mellom NVE og Varsom sitt design.  
-Device - Kan du bytte mellom forskjellige skjermstørrelser. Da vil innholdet justere seg i forhold til hvilken flate du jobber på.
+### Pass på å gi riktig tilgangsnivå:
 
-<img src="../../assets/images/get-started-2.png" width="auto">
+- `Editor` kan redigere filene (Kun designere)
 
-<nve-message-card label="Tips">For at dette skal fungere sømløst må du huske på å bruke variablene som er fastsatt - ikke løse designverdier. Da vil ikke alt av innholdet endres i forhold til hva slags variabler/tokens du bruker.</nve-message-card>
+- `Viewer` kan se, hente kode og bruke prototyper (Alle andre)
 
 ## Bestanddeler
 
@@ -81,9 +73,6 @@ Designsystemet består av grunnleggende stiler og komponenter som brukes for å
   <img src="../../assets/images/mønstre.png" width="50%">
   <div>
     <h2 class="h2-style">Mønstre</h2>
-    <p>Er en sammensetning av flere komponenter sammen. Dette er mer enn 4-5 komponenter satt sammen for å danne et mer komplekst grensesnittelement.
-
-Dette kan for eksempel være en header/navigasjonsbar eller et “cookies” panel som kommer opp.</p>
-
+    <p>Er en sammensetning av flere komponenter sammen. Dette er mer enn 4-5 komponenter satt sammen for å danne et mer komplekst grensesnittelement. Dette kan for eksempel være en header/navigasjonsbar eller et “cookies” panel som kommer opp.</p>
   </div>
 </div>
diff --git a/doc-site/introduction/forDevelopers/development.md b/doc-site/introduction/forDevelopers/development.md
index eb46607e..7bbeb6fa 100644
--- a/doc-site/introduction/forDevelopers/development.md
+++ b/doc-site/introduction/forDevelopers/development.md
@@ -1,27 +1,27 @@
 <PageHeader title="For utviklere" imagePath="developer"  pageLevel=2></PageHeader>
 
-## Kom i gang
+# Kom i gang
 
-### Web-komponenter
+## Teknologi
 
-Alle komponentene er [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), og dette gjør at de skal kunne brukes i de fleste web-applikasjoner, uavhengig av rammeverk.
+Alle komponentene er JavaScript [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), som dette gjør at de skal kunne brukes i de fleste web-applikasjoner, uavhengig av rammeverk.
 Komponentene er ferdig utformet med NVE sitt design.
 
-Mange av komponentene er basert på [Shoelace](https://shoelace.style/). Det meste som står i [Shoelace-dokumentasjonen om bruk av komponenter](https://shoelace.style/getting-started/usage) gjelder også for nve-komponenter.
+Mange av komponentene er basert på [Shoelace](https://shoelace.style/). Det meste som står i [Shoelace-dokumentasjonen om bruk av komponenter](https://shoelace.style/getting-started/usage) gjelder også for nve-komponenter. Det jobbes nå med å skrive bort de fleste komponenter bort fra Shoelace.
 
-<nve-message-card label="NB" variant="warning" size="compact">
+<nve-message-card label="Til informasjon"  size="compact">
 For mange av komponentene som er basert på Shoelace bør du også se i Shoelace-dokumentasjonen for å få et komplett bilde av hva du kan gjøre med komponenten.</nve-message-card>
 
-### Rapportere feil
+## Kildekode
 
 Kildekoden til komponentene finner du i [GitHub](https://github.com/NVE/Designsystem).
 
-Finner du feil i dokumentasjon eller komponenter, sjekk aktuell komponent i [komponentoversikten](https://designsystem.nve.no/components/Komponentoversikt.html) om feilen allerede er registrert. Om ikke, [registrer en sak i Github](https://github.com/NVE/Designsystem/issues). Gi gjerne saken til deg selv om du ønsker å fikse problemet med en gang, men det kan være lurt å melde fra om dette også på [FUX-forum i Teams](https://teams.microsoft.com/l/channel/19%3A3vNPKWAB1NfvK_GxsEsNWj04elWJ8WrylwsoZF9KaOY1%40thread.tacv2/FUX%20Forum?groupId=ec755ca5-8bfc-4a59-b502-d9721ef8eda4&tenantId=bc8d840d-60c9-410b-b4fb-11b86806780c&ngc=true&allowXTenantAccess=true), så folk får vite at noen er på saken. Der kan man også stille spørsmål om man lurer på noe.
+Før du begynner å med bidrag til Designsystemet må det leses i gjennom [README.md](https://github.com/NVE/Designsystem/blob/main/README.md) og [CONTRIBUTING.md](https://github.com/NVE/Designsystem/blob/main/CONTRIBUTING.md). Der finner du tips og kjøreregler for utvikling. Lurer du på hvorfor disse valgene er tatt? Sjekk ut [designbeslutninger](https://github.com/NVE/Designsystem/blob/main/design-beslutninger.md) for en oversikt over sentrale valg i komponentbiblioteket og begrunnelsen bak dem.
 
-### Les dette før du begynner å endre designsystemet
+Designsystemet utvikles på dugnad og etter behov. Vi vil gjerne ha bidrag fra deg!
 
-Før du begynner å gjøre endringer i Designsystemet anbefales det å lese gjennom [README.md](https://github.com/NVE/Designsystem/blob/main/README.md) og [CONTRIBUTING.md](https://github.com/NVE/Designsystem/blob/main/CONTRIBUTING.md). Der finner du tips og en del kjøreregler for utvikling.
+## Rapportere feil
 
-Lurer du på hvorfor disse valgene er tatt? Sjekk ut [designbeslutninger](https://github.com/NVE/Designsystem/blob/main/design-beslutninger.md) for å få et overblikk over større valg gjort for komponentbiblioteket og hvorfor vi har tatt akkurat de valgene.
+Finner du feil i dokumentasjon eller et komponenter, start med å sjekke [komponentoversikten](https://designsystem.nve.no/components/Komponentoversikt.html) for å se om feilen allerede er registrert. Hvis ikke, [registrer en sak i Github](https://github.com/NVE/Designsystem/issues).
 
-Designsystemet utvikles på dugnad og etter behov. Vi vil gjerne ha bidrag fra deg!
+Du kan gjerne tildele saken til deg selv dersom du vil fikse problemet med en gang. Gi også gjerne beskjed i [FUX-forum i Teams](https://teams.microsoft.com/l/channel/19%3A3vNPKWAB1NfvK_GxsEsNWj04elWJ8WrylwsoZF9KaOY1%40thread.tacv2/FUX%20Forum?groupId=ec755ca5-8bfc-4a59-b502-d9721ef8eda4&tenantId=bc8d840d-60c9-410b-b4fb-11b86806780c&ngc=true&allowXTenantAccess=true), slik at andre vet at det jobbes med saken, og for å stille spørsmål hvis noe er uklart.
diff --git a/doc-site/introduction/forDevelopers/validation.md b/doc-site/introduction/forDevelopers/validation.md
index 1e408de7..465923fc 100644
--- a/doc-site/introduction/forDevelopers/validation.md
+++ b/doc-site/introduction/forDevelopers/validation.md
@@ -2,11 +2,7 @@
 
 # Validering av input
 
-<nve-message-card label="Tips">
-  Komponentene du skal validere må ligge inni en &lt;form&gt;, fordi validering utføres når submit-eventet fyres av.
-</nve-message-card>
-
-Vi tilbyr en forenklet variant av Shoelace sin måte å validere input på. Du bør lese om [hvordan Shoelace gjør det](https://shoelace.style/getting-started/form-controls).
+Per nå tilbyr vi en forenklet variant av Shoelace sin måte å validere input på. Du bør lese om [hvordan Shoelace gjør det](https://shoelace.style/getting-started/form-controls). Det jobbes nå med å utvikle egne input komponenter som er rene web komponenter. Her vil det komme en egen metode for validering.
 
 Alle komponentene som kan brukes til å samle inn data har støtte for validering av input.
 
@@ -14,6 +10,10 @@ Både sjekkbokser og radioknapper må ligge i en gruppe for å kunne valideres.
 
 Det finnes to måter å validere på, [Constraint Validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation) og manuell validering.
 
+<nve-message-card label="Tips" size="compact">
+  Komponentene du skal validere må ligge inni en &lt;form&gt;, fordi validering utføres når submit-eventet fyres av.
+</nve-message-card>
+
 ## Constraint Validation
 
 Hvor nettleser validerer skjema selv basert på hvilke validerings-attributer (`required`, `pattern`, `min`, `max`) komponenten har.
diff --git a/doc-site/introduction/forDevelopers/vue.md b/doc-site/introduction/forDevelopers/vue.md
index e8109e7e..355e453c 100644
--- a/doc-site/introduction/forDevelopers/vue.md
+++ b/doc-site/introduction/forDevelopers/vue.md
@@ -2,7 +2,7 @@
 
 # Bruk av designsystemet i Vue 3
 
-## Installer designsystem-pakka
+## Installer designsystem-pakken
 
 ```sh
 npm i nve-designsystem
diff --git a/doc-site/introduction/home.md b/doc-site/introduction/home.md
index dd626a67..7ce46145 100644
--- a/doc-site/introduction/home.md
+++ b/doc-site/introduction/home.md
@@ -2,11 +2,13 @@
 
 # Om designsystemet
 
-Designsystemet samler og tilgjengeliggjør verktøy, filer, komponenter og designretningslinjer som brukes av designere og utviklere for å lage gode og konsekvente brukeropplevelser i NVEs digitale tjenester. Designsystemet skal sette NVEs profiler i kontekst. Med andre ord vise deg hvorfor, hvor, når og hvordan du bruker og videreutvikler innhold i designsystemet for å skape gevinster og tettere samarbeid på tvers av roller og produkter.
+Designsystemet samler og tilgjengeliggjør verktøy, filer, komponenter og designretningslinjer som brukes av designere og utviklere for å lage gode og konsekvente brukeropplevelser i NVEs digitale tjenester. Det ivaretar merkevarenes individuelle uttrykk, samtidig som det sikrer gode brukeropplevelser på tvers av merkevarene og de digitale brukerreisene.
+
+Designsystemet skal sette NVEs profiler i kontekst. Med andre ord vise deg hvorfor, hvor, når og hvordan du bruker og videreutvikler innhold i designsystemet for å skape gevinster og tettere samarbeid på tvers av roller og produkter.
 
 Et designsystem handler, <em>til tross for sitt navn</em>, om mer enn bare design. Det handler først og fremst om mennesker og hvordan vi må jobbe for å få brukt designet godt på en praktisk måte når vi utvikler en løsning. Designsystem som konsept er ikke teknologibundet, men er heller et uttrykk som beskriver prosessene og vanene som leder til mest effektivt design, utvikling og ledelse.
 
-<nve-message-card label="Designsystemets formål">
+<nve-message-card label="Designsystemets formål" size="compact">
 <ul>
   <li>Sikre visuell og funksjonell konsistens i forskjellige produkter og kanaler</li>
   <li>Sentral kvalitetssikring og tilpassing til krav som universell utforming</li>
diff --git a/doc-site/introduction/roller.md b/doc-site/introduction/roller.md
new file mode 100644
index 00000000..eb840cf5
--- /dev/null
+++ b/doc-site/introduction/roller.md
@@ -0,0 +1,28 @@
+<PageHeader title="Introduksjon" imagePath="intro" pageLevel=1></PageHeader>
+
+# Roller
+
+Det er en rekke roller og ansvarsområder innenfor designsystemet som er viktig å være kjent med når du skal jobbe med produkter i NVE eller Varsom.
+
+Vi bruker GitHub, FUX-forum og DevOps for å sikre et godt samarbeid mellom utviklere, designere, operasjonsansvarlige og ledelse. Dette innebærer en rekke ansvarsoppgaver som for enkelthetens skyld og oversikt er fordelt på forskjellige roller som enkeltpersoner er ansvarlige for.
+
+## Produkteier
+
+Denne personen skal følge opp teamet og utviklingsprosessen og har siste ord i prioriteringsrunder. Generelt er en produkteeier ansvarlig for å sikre at produktet støtter organisasjonens designbehov. Dette krever et tett samarbeid med desigere og utviklere, og prioritere inn designsystemoppgaver inn i en print ved behov.
+
+## Merkevareansvarlig
+
+En merkevareansvarlig i et designsystem spiller en sentral rolle i å sikre at designsystemet er i tråd med og støtter organisasjonens merkevareidentitet og strategi.
+
+## Kvalitetssikrer
+
+Utviklere og designere spiller en viktig rolle i å opprettholde kvaliteten på designsystemet og sikre at det leverer en konsistent og feilfri brukeropplevelse. Deres oppgaver bidrar til å minimere feil og uoverensstemmelser i designsystemet og sørge for at det fungerer som tiltenkt.
+
+En kvalitetsikrer på utvikling i designsystemt har som hovedoppgave å sikre at koden og komponentene som inngår i designsystemet er av høy kvalitet, fungerer som forventet, og er i samsvar med etablerte retningslinjer og standarder.
+
+## Designsystem-gruppen
+
+Designsystemgruppen har det overordnede ansvaret for å drive designsystemet fremover ved å forme roadmaps, prioritere saker og holde kurs. Gruppen består av utviklere og designere fra ulike team, noe som sikrer at designsystemet ivaretar behov på tvers av organisasjonen og utvikles i tråd med erfaringer og innspill fra de som bruker det i praksis.
+
+<br>
+<nve-link-card label="Oversikt over roller og personer i disse rollene (kun for ansatte i NVE)" variant="contrast" href="https://nveazure.sharepoint.com/sites/INTRA-IKTI/SitePages/Designsystemet-i-NVE.aspx?csf=1&web=1&e=PMJYpa&CID=527fe9a2-af36-448b-a86b-b9661d1347db" clickAction="external"></nve-link-card>
diff --git a/doc-site/introduction/universellUtforming.md b/doc-site/introduction/universellUtforming.md
index 8f896ef4..e4bcfc54 100644
--- a/doc-site/introduction/universellUtforming.md
+++ b/doc-site/introduction/universellUtforming.md
@@ -1,20 +1,20 @@
 <PageHeader title="Universell Utforming" imagePath="intro" pageLevel=1></PageHeader>
 
-Universelt utformede designløsninger sørger for at våre tjenester er tilgjengelig for alle. Ved å gi rom for mangfoldet i befolkningen gir vi den enkelte rom for å utfolde seg, bestemme selv og delta på like vilkår. NVEs tjenester skal alltid oppfylle UU-tilsynets regelverk og krav for offentlig sektor (WCAG 2.1).
-
-<hr>
+# Hva er universell utforming?
 
 Universell utforming (UU) bygger på tanken om at tjenester skal være tilgjengelige for alle, uavhengig av alder, funksjonsevne og utdanningsnivå. Universelt utformede løsninger sikrer at flest mulig forstår og kan bruke dem.
 
-## WCAG 2.1
-
-IKT-løsninger i Norge skal være universelt utformet. Dette gjelder nettløsninger, apper og automater. UU-tilsynet har samlet regelverk og minimukskrav som må oppfylles for digitale tjenester. Alle NVEs tjenester må oppfylle minimumkravene i WCAG-standarden, også kravene for offentlig sektor i WCAG 2.1.
+Universelt utformede designløsninger sørger for at våre tjenester er tilgjengelig for alle. Ved å gi rom for mangfoldet i befolkningen gir vi den enkelte rom for å utfolde seg, bestemme selv og delta på like vilkår. NVEs tjenester skal alltid oppfylle UU-tilsynets regelverk og krav for offentlig sektor (WCAG 2.1).
 
 ## Designsystemet
 
 Alle primitiver, komponenter og mønstre i designsystemet skal designes i henhold til regelverket. På den måten gir vi designere og utviklere gode verktøy for å lage universelt utformede designløsninger, og det gjøres på tvers av alle NVEs tjenester.
 
+## WCAG 2.1
+
+IKT-løsninger i Norge skal være universelt utformet. Dette gjelder nettløsninger, apper og automater. UU-tilsynet har samlet regelverk og minimukskrav som må oppfylles for digitale tjenester. Alle NVEs tjenester må oppfylle minimumkravene i WCAG-standarden, også kravene for offentlig sektor i WCAG 2.1.
+
 ### Les deg opp på regelverk og krav til universell utforming
 
 <div style="padding-top:2rem;"></div>
-<LinkButton URL="https://www.uutilsynet.no/regelverk/regelverk/266" text="UU Tilsynet" :openInNewTab="true"/>
+<nve-link-card label="UU Tilsynet" clickAction="external"  variant="contrast" href="https://www.uutilsynet.no/"></nve-link-card>