Hopp til hovedinnhold
Designsystemet logoDesignsystemet logo
Gå tilbake til forsiden

Temabygger

Main

accent
neutral

Support

brand1
brand2

Severity

Aktiver for å overstyre severity-farger

Fargeoverstyringer

Overstyr spesifikke tokenfarger for lys og mørk modus. Sørg for å sjekke kontraster etter endringer.

accent
neutral
brand1
brand2

Ta i bruk tema

Navnet bør representere virksomheten eller produktet du skal profilere.
1

Lagre config fila di som "designsystemet.config.json" der du vil at tokens og CSS skal bli generert.

2

Åpne terminal i samme mappe som config fila. Kjør kodesnuttene for å generere tokens og CSS variabler til kode.

Noe som ikke fungerer?

Send oss en melding på Slack (åpnes i ny fane) eller lag et Github issue (åpnes i ny fane).

Importer config

Har du allerede en konfigurasjonsfil? Lim den inn her for å velge og redigere et tema.
accent
Background
Default
Tinted
Surface
Default
Tinted
Hover
Active
Border
Subtle
Default
Strong
Text
Subtle
Default
Base
Default
Hover
Active
Contrast Subtle
Contrast Default
neutral
brand1
brand2

Se fargene dine i bruk

Hver farge som blir valgt med verktøyet får sitt eget kort i seksjonen til høyre slik at du kan se hvordan fargene harmonerer sammen.

Merk at kontrastfargen inne i knappen endrer seg fra hvit til svart, avhengig av om den valgte fargen er lys eller mørk for å oppnå best mulig kontrast.

Visning:

accent

Farger gjør livet mer fargerikt

neutral

Farger gjør livet mer fargerikt

brand1

Farger gjør livet mer fargerikt

brand2

Farger gjør livet mer fargerikt

Se fargetokens

Her ser du hvilke tokens som er brukt for å lage kortene i seksjonen over.

Kontraster mellom farger

Her vises kontrastene mellom de ulike trinnene i fargeskalaene, samt om fargene oppfyller WCAG-kravene.

AAA

Tekst og bakgrunn må ha en kontrast på minst 7:1 for å oppfylle WCAG AAA-kravet.

AA

Tekst og bakgrunn må ha en kontrast på minst 4.5:1 for å oppfylle WCAG AA-kravet.

AA18

Tekst og bakgrunn må ha en kontrast på minst 3:1 og en skriftstørrelse på 18 px eller større for å oppfylle WCAG AA-kravet.

DECO

Oppfyller ingen kontrastkrav i WCAG og bør kun brukes til dekorative formål.

Text og Border mot Background og Surface

Når du bytter mellom fargeskalaene, vil du se at kontrastene mellom fargene i seksjonen nedenfor er nesten identiske. Dette gjør at du kun trenger å vurdere kontrastene for én fargeskala for å forstå hvordan alle fungerer. Siden kontrastene er konsistente, kan du også kombinere ulike farger på tvers av skalaene.

Background Default
#ffffff
Background Tinted
#eef4fa
Surface Default
#ffffff
Surface Tinted
#ddeaf6
Surface Hover
#c7ddf0
Border Subtle
#99c0e3
DECO
1.9:1
DECO
1.7:1
DECO
1.9:1
DECO
1.5:1
DECO
1.3:1
Border Default
#2a7cc5
AA18
4.3:1
AA18
3.9:1
AA18
4.3:1
AA18
3.5:1
AA18
3.1:1
Border Strong
#005db1
AA
6.5:1
AA
5.9:1
AA
6.5:1
AA
5.3:1
AA
4.6:1
Text Subtle
#005db1
AA
6.5:1
AA
5.9:1
AA
6.5:1
AA
5.3:1
AA
4.6:1
Text Default
#002c54
AAA
14.1:1
AAA
12.7:1
AAA
14.1:1
AAA
11.5:1
AAA
10:1

Base fargene

Fargene som blir valgt i verktøyet får tokenet Base Default i hver fargeskala. Dette betyr at det er viktig å velge en farge som har over 3:1 kontrast mot overflatefarger om den skal brukes som en viktig, meningsbærende farge. Verktøyet lager også to kontrastfarger som trygt kan brukes oppå base fargene. Disse kontrastfargene blir enten lyse eller mørke avhengig av base fargen.

Background Default
#ffffff
Background Tinted
#eef4fa
Surface Default
#ffffff
Contrast Subtle
#dbe9f5
Contrast Default
#ffffff
Base Default
#0062BA
AA
6:1
AA
5.4:1
AA
6:1
AA
4.9:1
AA
6:1
Base Hover
#004f96
AAA
8.2:1
AAA
7.4:1
AAA
8.2:1
AA
6.6:1
AAA
8.2:1
Base Active
#003d75
AAA
10.9:1
AAA
9.8:1
AAA
10.9:1
AAA
8.8:1
AAA
10.9:1