Designtokens for farger

SDS har valgt å ta i bruk designtokens for sitt fargesystem. Designtokens er en metode for navngiving av designvariabler, i tilfellet farge betyr dette kombinasjonen av et navn som folk kan kjenne igjen og en sekssifret HEX-kode som spesifiserer hvilken farge navnet tilsvarer.

SDS benytter to typer fargetokens for å lage et system som er skalerbart og enkelt å vedlikeholde; semantiske fargetokens, og et basetoken.

Semantiske fargetokens

At noe er semantisk betyr at navnet følger funksjon og bruk.

Vi har farger som benyttes for ting brukeren kan klikke på som heter f.eks -color-interaction-primary-strong og vi har farger som benyttes for å varsle brukeren om at en oppgave er fullført, som -color-support-success-strong.

Semantisk navngiving I SDS består av opptil fire ledd som blir gradvis mer spesifikke:

Det er ikke alle farger som har themes eller tilstander.

Basetokens

Dette er den grunnleggende fargepaletten i SDS. Det består av utvalgte nyanser for følgende fargegrupper Purple, Blue, Green, Yellow, Red og Neutral.

Navnestruktur for basetokens er:

Dette nivået av fargetokens linkes til fra semantiske tokens, og brukes ikke direkte i ferdige komponenter eller designfiler.

Sidekomposisjon og struktur

SDS legger opp til bruk av forskjellige bakgrunnsfarger for å strukturere sider og gruppere informasjon og funksjonalitet som hører sammen.

Systemet har en fargetoken for sidens bakgrunn (sds-color-layout-page-default) og to tokens for innhold som kort, komponenter, dialoger, paneler osv. (sds-color-layout-surface-1 og sds-color-layout-surface-2) som ligger på siden. -surface-2 legges oppå -surface-1 og vice-versa, og man starter alltid med -surface-1 oppå -page-default.

Interaktive komponenter

SDS har tre nivåer av interaktive komponenter;

-strong, -subtle og -transparent

Hver av disse har tokens for :hover og :active

Det er også to themes for de lavere nivåene i interaksjonspaletten;

-primary- og -neutral-

Disse er nivåmessig likestilte, og vi anbefaler at -sds-color-interaction-neutral benyttes for grensesnitt med høy informasjonstetthet og mange interaktive elementer.

Statusfarger

SDS har fire semantiske farger som bruker for å indikere status på oppgaver eller gi brukeren tilbakemelding. Disse er Info, Success, Warning og Critical.

Hver statusfarge har en -strong variant og en -subtle variant.

SDS sin anbefaling er å ikke benytte disse fargene utenfor komponenter som leveres fra SDS. De skal ikke brukes for å kategorisere innhold i tabeller eller for å differensiere innhold på en side. For slik bruk anbefaler vi at du benytter kategorifargene.

Kategorifarger

SDS har en palett av farger som er laget for differensiering av innhold i kontekster der fargen ikke har en spesifikk betydning. Disse fargene er laget for å fungere godt sammen, og passer best i kontekster der man benytter flere farger fra paletten.

Eksempler på bruksområder for denne paletten er; tagging av innhold i lister og tabeller, Informasjonsvisualisering med behov for differensiering av variabler, differensiering av oppgaver eller varsler.