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)