Farger
Paletten er bygget opp av varme og kalde toner med ulik styrke og klarhet, og gir et stort spenn i uttrykket – fra optimistisk og engasjerende til bærekraftig og ansvarlig.
Alle farger er definert med spesifikke verdier for både trykte og digitale flater. For å sikre riktig gjengivelse skal kun de oppgitte verdiene brukes.
For digitale flater som web og app finnes et utvidet spekter av nyanser for hver farge, samt et utvalg rødtoner. Disse er kun definert i RGB og gir større fleksibilitet i digitale kanaler.
Bakgrunnsfarge
Spor bruker to ulike bakgrunnsfarger som skal benyttes både i app og på web. Bakgrunnsfarge brukes til å gruppere komponenter, skille ulike typer innhold eller løfte noe frem fra bakgrunnen for å fremheve noe som er klikkbart. Det er viktig at vi er konsekvente i bruken av bakgrunnsfarger. Se helheten i en flyt og hvordan innholdet henger sammen. Det er viktig at like elementer får samme design, og dette gjelder også bakgrunnsfarge.
Komponentfarge
Komponenter gir større rom for bruk av farger, men det skal alltid være fokus på lesbarhet og kontrast. Enkelte komponenter bruker for eksempel ulike bakgrunnsfarger for å signalisere forskjell i viktighet. Du kan også bruke spesifikke farger for å fremheve et element, eller for å skjule det.
Ved bruk av andre farger enn hvit og grå, er det viktig å vurdere bruken nøye. Er dette signalfarger som brukes til varsler? Vil det konkurrere med navigasjon eller brukerens valg?
Farge og ikoner
Ikoner leveres som standard i «mørk grå», men kan brukes i andre farger i spesielle tilfeller.
- På mørke bakgrunner bør en lys farge brukes, og helst den «fylte» versjonen av ikonet. Her er det naturlig å bruke hvit dersom du ønsker høyest kontrast.
- Fremhevede ikoner kan bruke en annen farge enn mørk grå dersom det bidrar til å skille dem fra resten.
- Noen komponenter trenger ikoner i andre farger enn standard. Dette er for å tilpasse seg det underliggende designet. Choice Chips bruker to nyanser av grønn for å gi et mykere uttrykk.
- Ikoner som tilhører et produkt kan brukes i produktets farge.
Farge og tilstander
Utekos-komponenter har en systematisk bruk av design-tokens for å vise interaktive tilstander. Vi ønsker at brukeren skal kunne gjenkjenne lik interaksjon uavhengig av om de er på web eller i app, eller om de trykker på en knapp eller legger til et dokument.
For eksempel bruker de fleste knapper en mørkere fargeverdi ved hover, før de får en lysere fargeverdi når du trykker ned knappen. Unntaket er Legg til-knappen, som ofte supplerer andre typer knapper og kan brukes der du ønsker flere knapper samlet med lik vekt. Deaktivert knappetilstand vil være lik på tvers av alle typer knapper slik at brukeren kan gjenkjenne den.
Retningslinjer
Ikke bruk egendefinerte farger:
Du skal ikke bruke andre farger enn de som allerede finnes i en komponent, eller som er avledet fra design-tokens og basert på eksisterende design.
Unngå lav fargekontrast:
Tekst, ikoner og komponenter må følge WCAG-kravene for minimum kontrast. Dette kan kontrolleres gjennom plugins eller nettbaserte verktøy.
Ikke bruk kun farger:
Det er ikke tilstrekkelig å kun bruke farge alene for å gi tilbakemelding til brukeren. Det skal alltid være en etikett eller et ikon som gir fargen riktig kontekst.