Design Tokens

Introduksjon

Design Tokens er grunnleggende verdier for alt fra farger til avstander. De gjør det enkelt å gjenbruke og oppdatere designvalg, og sikrer et helhetlig uttrykk på tvers av løsningene våre.

Verdiene får tildelt oppgaver å fylle, basert på funksjon eller rolle. I stedet for å vurdere hvilke verdier som skal brukes til enhver tid, endres fokuset til elementet eller situasjonen som trenger en verdi.

Bruk eksisterende tokens for lokale komponenter også, slik at du er sikret at kontraster er ivaretatt, moduser fungerer som de skal, og oppdateringer kommer løpende fra systemet.

Struktur

Design tokens er delt i to lag:

• Baseverdier inneholder grunnverdiene, for eksempel fargen Sand.
• Semantiske tokens peker til baseverdiene og gir dem navn som beskriver bruken, for eksempel color-background-page for en heldekkende bakgrunnsfarge.

Denne oppdelingen gjør det enkelt å endre det visuelle uttrykket globalt uten å endre strukturen i systemet.

Navngiving

Design tokens er navngitt med en konsekvent struktur, som forteller hvilken kategori, element og variant eller tilstand verdien skal brukes til. Det eksisterer noen ulikheter i navngivingen i kode og Figma.

• CSS: --jkl-color-text-default
• Javascript: color.text.default
• Sass: $color-text-default
• Figma: text/default

Modus

En verdi som er knyttet til flere baseverdier utgjør et modus. Det gjør at verdien endrer seg basert på ulike kriterier.

I Jøkul har vi tre moduser:

Skjermstørrelse

Screen size tilpasser komponenter og skriftstørrelser til store og små skjermer. Moduset settes på hele siden og er ikke en valgfri ting, siden vi ikke kan vite hvilken enhet som brukes av brukerne.

Fargetema

Theme styrer fargene på bakgrunner, flater og komponenter til et lyst eller mørkt tema. Moduset settes på hele siden, og styres av brukerens enhet eller med en knapp i løsningen.

Det er mulig å bruke dette moduset på deler av en side, men vær oppmerksom på at innholdet kun gir riktig kontrast dersom de ligger på en flate som har samme modus.

Husk å teste hvordan det vil se ut i begge moduser, for eksempel vil en footer satt til dark i light mode, forbli det i dark mode også.

Tetthet

Density styrer hvor kompakte komponentene er. Moduset brukes typisk i informasjonstette løsninger som saksbehandlings verktøy. Det kan settes på hele eller deler av siden, også helt ned på komponentnivå.

Informasjonstette løsninger gir høy kognitiv last. Vurder om du kan strukturere innholdet på en annen måte før du setter hele eller deler av siden til compact. Små komponenter gir små klikkflater, så ikke sett compact på en komponent bare fordi du synes det ser bedre ut.

Design tokens i Figma

I Figma kalles tokens Variables, og ligger tilgjengelig der du setter størrelser, avstander og farger.

Moduser er forhåndsdefinert innstilling som gjør at du kan bytte tema eller størrelse med et klikk. Modus kan settes på hele eller deler av grensesnittet ditt.