Uansett valg deler vi aldri dine data med andre. Mer om informasjonskapsler på aksel.nav.no

  • Godta alle: Hjelper oss gjøre tjenestene bedre for deg basert på anonymisert bruk.
  • Bare nødvendige: Sikrer at tjenesten fungerer og er trygg. Kan ikke velges bort.
Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Grunnleggende

Tokenoversikt

Tokens er alle farger, avstander, typografi, osv. som vi bruker i komponenter og layout.

Bakgrunnsfarger

Farge på bakgrunner.

Root

Root brukes på elementer i spesialtilfeller som for å skape dypde i skjermbildet eller der elementet ikke har en bestemt rolle.

  • Standard bakgrunnsfarge

  • Bakgrunnsfargen som brukes på input-elementer (tekstfelt, sjekkbokser, o.l.)

  • Bakgrunnsfarge på bokser som svever eller som skal fremheves i darkmode. F.eks. Card.

  • Bakgrunnsfarge på en side eller deler av en side som fremstår nedsunket, dvs. «lavere» enn standard bakgrunn.

  • Fargen på det mørke gjennomsiktige laget som legges oppå en side når en modal åpnes.

Neutral

Neutral brukes på elementer som ikke skal stikke seg ut eller har et bestemt budskap.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button neutral secondary hover). Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer (f.eks. button neutral secondary active). Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En sterk bakgrunnsfarge som brukes på meningsbærende elementer (f.eks. button neutral primary).

  • En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button neutral primary hover).

  • En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer (f.eks. button neutral primary active).

Accent

Accent brukes som standard farge på interaktive elementer.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button accent secondary hover). Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer (f.eks. button accent secondary active). Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En sterk bakgrunnsfarge som brukes på meningsbærende elementer (f.eks. button accent primary).

  • En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button accent primary hover).

  • En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer (f.eks. button accent primary active).

Success

Success brukes på elementer som har en positiv interaksjon eller budskap.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border (f.eks. alert success).

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En sterk bakgrunnsfarge som brukes på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer.

Warning

Warning brukes på elementer som kommuniserer advarsel.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border (f.eks. alert warning).

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En sterk bakgrunnsfarge som brukes på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer.

Danger

Danger brukes på elementer som har en destruktiv interaksjon eller kommuniserer at noe gikk galt.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border (f.eks. alert error).

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En sterk bakgrunnsfarge som brukes på meningsbærende elementer (f.eks. button danger primary).

  • En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button danger primary hover).

  • En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer (f.eks. button danger primary active).

Info

Info brukes på elementer som har informerer eller gir opplysning.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border (f.eks. alert info).

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En sterk bakgrunnsfarge som brukes på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer.

Brand magenta

Brand Magenta er den primære brand-fargen. Brukes sparsommelig.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En sterk bakgrunnsfarge som brukes på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer.

Brand beige

Brand Beige er den sekundære brand-fargen. Brukes sparsommelig.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En sterk bakgrunnsfarge som brukes på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer.

Brand blue

Brand Blue er den tertiære brand-fargen. Kan brukes mer enn de andre brand-fargene.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En sterk bakgrunnsfarge som brukes på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer.

Meta lime

Meta Lime brukes gjerne på metadata. Team definerer selv hva fargen kommuniserer.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En sterk bakgrunnsfarge som brukes på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer.

Meta purple

Meta Purple brukes gjerne på metadata. Team definerer selv hva fargen kommuniserer.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.

  • En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.

  • En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.

  • En sterk bakgrunnsfarge som brukes på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.

  • En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer.

Kantlinjefarger

Farge på border/stroke.

Root

Root brukes på elementer i spesialtilfeller som for å skape dypde i skjermbildet eller der elementet ikke har en bestemt rolle.

  • Farge på fokusmarkering.

Neutral

Neutral brukes på elementer som ikke skal stikke seg ut eller har et bestemt budskap.

  • Standard farge for border.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.

  • En sterk border-farge. Kan brukes som hover-state til border-default.

Accent

Accent brukes som standard farge på interaktive elementer.

  • Standard farge for border.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.

  • En sterk border-farge. Kan brukes som hover-state til border-default.

Success

Success brukes på elementer som har en positiv interaksjon eller budskap.

  • Standard farge for border.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.

  • En sterk border-farge. Kan brukes som hover-state til border-default.

Warning

Warning brukes på elementer som kommuniserer advarsel.

  • Standard farge for border.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.

  • En sterk border-farge. Kan brukes som hover-state til border-default.

Danger

Danger brukes på elementer som har en destruktiv interaksjon eller kommuniserer at noe gikk galt.

  • Standard farge for border.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.

  • En sterk border-farge. Kan brukes som hover-state til border-default.

Info

Info brukes på elementer som har informerer eller gir opplysning.

  • Standard farge for border.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.

  • En sterk border-farge. Kan brukes som hover-state til border-default.

Brand magenta

Brand Magenta er den primære brand-fargen. Brukes sparsommelig.

  • Standard farge for border.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.

  • En sterk border-farge. Kan brukes som hover-state til border-default.

Brand beige

Brand Beige er den sekundære brand-fargen. Brukes sparsommelig.

  • Standard farge for border.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.

  • En sterk border-farge. Kan brukes som hover-state til border-default.

Brand blue

Brand Blue er den tertiære brand-fargen. Kan brukes mer enn de andre brand-fargene.

  • Standard farge for border.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.

  • En sterk border-farge. Kan brukes som hover-state til border-default.

Meta lime

Meta Lime brukes gjerne på metadata. Team definerer selv hva fargen kommuniserer.

  • Standard farge for border.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.

  • En sterk border-farge. Kan brukes som hover-state til border-default.

Meta purple

Meta Purple brukes gjerne på metadata. Team definerer selv hva fargen kommuniserer.

  • Standard farge for border.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.

  • En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.

  • En sterk border-farge. Kan brukes som hover-state til border-default.

Tekstfarger

Farge på tekst og ikoner.

Root

Root brukes på elementer i spesialtilfeller som for å skape dypde i skjermbildet eller der elementet ikke har en bestemt rolle.

  • Navs logo-farge

Neutral

Neutral brukes på elementer som ikke skal stikke seg ut eller har et bestemt budskap.

  • Standard farge for tekst og ikoner med rollen neutral. Godkjent på alle bakgrunner unntatt strong.

  • En nedtonet farge for tekst og ikoner med rollen neutral. Godkjent på alle bakgrunner unntatt strong.

  • En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.

  • En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong (f.eks. button neutral primary).

Accent

Accent brukes som standard farge på interaktive elementer.

  • Sterk farge for tekst og ikoner for rollen accent. Godkjent på alle bakgrunner unntatt strong.

  • Standard farge for tekst og ikoner med rollen accent. Godkjent på alle bakgrunner unntatt strong.

  • En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.

  • En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong (f.eks. button accent primary).

Success

Success brukes på elementer som har en positiv interaksjon eller budskap.

  • Sterk farge for tekst og ikoner for rollen success. Godkjent på alle bakgrunner unntatt strong.

  • Standard farge for tekst og ikoner med rollen success. Godkjent på alle bakgrunner unntatt strong.

  • En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.

  • En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong.

Warning

Warning brukes på elementer som kommuniserer advarsel.

  • Sterk farge for tekst og ikoner for rollen warning. Godkjent på alle bakgrunner unntatt strong.

  • Standard farge for tekst og ikoner med rollen warning. Godkjent på alle bakgrunner unntatt strong.

  • En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.

  • En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong.

Danger

Danger brukes på elementer som har en destruktiv interaksjon eller kommuniserer at noe gikk galt.

  • Sterk farge for tekst og ikoner for rollen danger. Godkjent på alle bakgrunner unntatt strong.

  • Standard farge for tekst og ikoner med rollen danger. Godkjent på alle bakgrunner unntatt strong.

  • En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.

  • En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong (f.eks. button danger primary).

Info

Info brukes på elementer som har informerer eller gir opplysning.

  • Sterk farge for tekst og ikoner for rollen info. Godkjent på alle bakgrunner unntatt strong.

  • Standard farge for tekst og ikoner med rollen info. Godkjent på alle bakgrunner unntatt strong.

  • En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.

  • En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong.

Brand magenta

Brand Magenta er den primære brand-fargen. Brukes sparsommelig.

  • Sterk farge for tekst og ikoner for rollen brand magenta. Godkjent på alle bakgrunner unntatt strong.

  • Standard farge for tekst og ikoner med rollen brand magenta. Godkjent på alle bakgrunner unntatt strong.

  • En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.

  • En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong.

Brand beige

Brand Beige er den sekundære brand-fargen. Brukes sparsommelig.

  • Sterk farge for tekst og ikoner for rollen brand beige. Godkjent på alle bakgrunner unntatt strong.

  • Standard farge for tekst og ikoner med rollen brand beige. Godkjent på alle bakgrunner unntatt strong.

  • En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.

  • En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong.

Brand blue

Brand Blue er den tertiære brand-fargen. Kan brukes mer enn de andre brand-fargene.

  • Sterk farge for tekst og ikoner for rollen brand blue. Godkjent på alle bakgrunner unntatt strong.

  • Standard farge for tekst og ikoner med rollen brand blue. Godkjent på alle bakgrunner unntatt strong.

  • En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.

  • En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong.

Meta lime

Meta Lime brukes gjerne på metadata. Team definerer selv hva fargen kommuniserer.

  • Sterk farge for tekst og ikoner for rollen meta lime. Godkjent på alle bakgrunner unntatt strong.

  • Standard farge for tekst og ikoner med rollen meta lime. Godkjent på alle bakgrunner unntatt strong.

  • En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.

  • En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong.

Meta purple

Meta Purple brukes gjerne på metadata. Team definerer selv hva fargen kommuniserer.

  • Sterk farge for tekst og ikoner for rollen meta purple. Godkjent på alle bakgrunner unntatt strong.

  • Standard farge for tekst og ikoner med rollen meta purple. Godkjent på alle bakgrunner unntatt strong.

  • En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.

  • En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong.

Skygger

Skyggestil som brukes på svevende elementer (popovers og modaler).

  • 0px 4px 6px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px -1px rgba(0, 0, 0, 0.15), 0px 1px 1px 0px rgba(0, 0, 0, 0.06)

    Used for dialog elements like modals and popovers. Used in box-shadow property.

Avstander

Avstander som brukes til padding, margin og gap.

  • 0rem

  • 0.0625rem

  • 0.125rem

  • 0.25rem

  • 0.375rem

  • 0.5rem

  • 0.75rem

  • 1rem

  • 1.25rem

  • 1.5rem

  • 1.75rem

  • 2rem

  • 2.25rem

  • 2.5rem

  • 2.75rem

  • 3rem

  • 3.5rem

  • 4rem

  • 4.5rem

  • 5rem

  • 6rem

  • 8rem

Radiuser

Hjørneavrundinger som brukes på elementer.

  • 2px

  • 4px

  • 8px

  • 12px

  • 9999px

Fontstiler

Byggeklossene til fontstilene.

Family

Fonten som brukes i fontstilene.

  • 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif

Line height

Linjehøyder som brukes i fontstilene.

  • 1.25rem

  • 1.5rem

  • 1.75rem

  • 1.5rem

  • 1.75rem

  • 2rem

  • 2.25rem

  • 2.5rem

  • 3.25rem

Size

Tekststørrelser som brukes i fontstilene.

  • 0.875rem

  • 1rem

  • 1.125rem

  • 1.25rem

  • 1.125rem

  • 1.25rem

  • 1.5rem

  • 1.75rem

  • 2rem

  • 2.5rem

Weight

Fontvekter som brukes i fontstilene.

  • 400

  • 600

Brekkpunkter

Skjermbreddeverdier som kan utløse endring i layout og innhold.

Mobile first

Brekkpunkter som tar utgangspunkt i mobil først.

  • @media (min-width: 0)

  • @media (min-width: 480px)

  • @media (min-width: 768px)

  • @media (min-width: 1024px)

  • @media (min-width: 1440px)

Desktop first

Brekkpunkter som tar utgangspunkt i desktop først.

  • @media (max-width: 479px)

  • @media (max-width: 767px)

  • @media (max-width: 1023px)

  • @media (max-width: 1279px)

  • @media (max-width: 1280px)

  • @media (max-width: 1439px)