Fargesystem
Merkevare / color-brand-
Denne gruppen benyttes for merkevareelementer, og navigasjonskomponenter på tvers av produktene.
Interaktivitet / color-interaction-
Denne gruppen er satt opp med to paletter, og hver av disse har tre nivåer av klikkbare elementer. Palettene heter Primary og Neutral, og nivåene er henholdsvis Strong, Subtle og Transparent.
Primary tar utgangspunkt i merkevarepaletten, mens neutral tilbyr et visuelt mer nedtonet uttrykk, som er nyttig om du har komplekse grensesnitt med mange klikkbare elementer sammen.
Hvert nivå i interaction-skalaen har egne farger for highlight (hover) og pressed.
color-interaction-danger-
Denne paletten benyttes for klikkbare elementer som utfører destruktive operasjoner som for eksempel sletting.
Den skal ikke brukes for ikke-destruktive handlinger som lukking av vinduer eller avbryting av en oppgave.
Semantiske farger / color-support-
De semantiske fargene benyttes for å gi tilbakemeldinger på handlinger og tilleggsinformasjon til brukeren.
Layout
Sidestruktur / color-layout-page-
Page-fargene brukes for å dele opp sider med mye informasjon der det er behov for ekstra struktur.
-default og -secondary er likestilte, men som navnet antyder bør man bruke -default med mindre man også bruker -secondary. -header er reservert for den øverste seksjonen på sider som har en hero-section.
Komponentstruktur / color-layout-surface-
Surface-fargene benyttes for bakgrunnsfarge på komponenter, for eksempel tabeller, kort eller seksjoner som inneholder klikkbare elementer. For komplekse komponenter kan man benytte -surface-secondary for å strukturere informasjon.
-surface-brand er reservert som bakgrunn for Sikt sin merkevare, som for eksempel illustrasjoner, visuelle elementer eller logoer. Dette vil typisk være på kort eller seksjoner som henviser til Sikt sine produkter eller tjenester.
Skillelinjer / color-layout-divider-
Fokusmarkering / color-layout-focus
Tekstfarger / color-text-
color-text-primary er standard tekstfarge for de aller fleste situasjoner.
color-text-on_strong benyttes på elementer med en bakgrunnsfarge som slutter med -strong eller -danger.
color-text-secondary benyttes for ekstra hierarki i komponenter med mye informasjon.
color-text-critical benyttes for utheving av feil.
color-text-pure benyttes der man trenger ekstra kontrast.
Basetokens
Navnestruktur for basetokens i fargepaletten:
Navnet gjør det mulig å se hvordan fargene forholder seg til hverandre, purple-95-100 er lysere enn purple-90-100 og begge er solide farger, mens neutral-100-10 er litt mer gjennomsiktig enn neutral-100-15.