NVE · lisamarimyreneNVE · Apr 24, 2026 · Apr 24, 2026 · May 29, 2026 · May 29, 2026
@@ -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
 

@@ -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 },

@@ -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,23 +29,32 @@
 .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;
   text-align: left;
 }
 
 .nve-hero-text {
-  padding-top: 1rem;
   font-family: Source Sans 3;
   font-size: 24px !important;
   font-weight: 400 !important;
   line-height: 31.2px !important;
   text-align: left;
 }
 
+ul {
+  margin-top: 0;
+}
+
 .links-container {
   display: flex;
   gap: 1rem;

@@ -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>
@@ -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/
@@ -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.

@@ -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>
@@ -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"/>
@@ -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.