Hopp til innhold

Farger

Farger er en viktig del av Fremtinds identitet. Det etterlatte inntrykket av våre løsninger skal være snøhvit med granitt som profilbærende farger. Profilen støttes av funksjonelle farger, som er inspirert av norsk natur.

Primærfargene

Disse fargene bruker vi både på trykk og i digitale flater. Disse bærer profilen vår og er de mest gjenkjennelige fargene i vårt uttrykk. Primærfargene våre er:

Snøhvit

Fargeprøve av fargen snohvit


CMYK: 0 0 0 0

Snøhvit bruker vi mest som bakgrunnsfarge, og som tekstfarge der vi har mørke flater. I tillegg er den fokusfarge, for eksempel på kort som er opphøyd over annet innhold, eller på inndataelementer som brukeren har valgt, for eksempel et felt i et skjema.

Granitt

Fargeprøve av fargen granitt


CMYK: 15 15 15 100
Pantone Black U

Granitt bruker vi gjerne i elementer vi vil fremheve. Et godt eksempel er primærknappen. Vi kan bruke store flater med granitt, men de bør ha lite innhold i forhold til størrelsen. Unngå å sette granitt flater nær bakgrunner med fargen varde.

Varde

Fargeprøve av fargen varde


CMYK: 12 13 19 0

Varde bruker vi som bakgrunnsfarge eller på elementer for å fremheve innhold. Når vi velger å bruke den på en flate, unngår vi å ha mye innhold på den, i forhold til størrelsen. Bruk svart på teksten, for å sikre god kontrast. Ikke bruke varde på flater som står nærme grå bakgrunner og elementer, eller svarte flater.

Fargespektrumet vårt

Vi har et sett av valører som fungerer godt med hverandre. Disse kan vi bruke til å skape nyanser og nivåer i løsningene våre. Vi bruker disse i hovedsak bare på digitale flater.

For varde og lavere skal man bruke granitt tekst, og for fjellgrå og høyere skal man bruke snøhvit tekst. Bruk svaberg og stein med omhu.

Farger

ValørNavnHexRGB
Fargeprøve av fargen hvitHvitN/AN/A
Fargeprøve av fargen snohvitSnøhvitN/AN/A
Fargeprøve av fargen sandSandN/AN/A
Fargeprøve av fargen disDisN/AN/A
Fargeprøve av fargen vardeVardeN/AN/A
Fargeprøve av fargen svabergSvabergN/AN/A
Fargeprøve av fargen steinSteinN/AN/A
Fargeprøve av fargen fjellgraFjellgråN/AN/A
Fargeprøve av fargen skiferSkiferN/AN/A
Fargeprøve av fargen granittGranittN/AN/A
Fargeprøve av fargen svartSvartN/AN/A

Meldingsfargene

Meldingsfargene bruker vi på digitale flater, for eksempel når vi trenger å gi informasjon fra systemet. Feil, advarsler, informasjonsmeldinger, grafer og fokusringer ved tastaturnavigasjon er eksempler på hva vi bruker meldingsfargene til. Meldingsfargene skal bare brukes funksjonelt, det vil si ikke som rene dekorelementer.

Vi bruker de samme fargene for mørk modus og lys modus.

Suksessfarge

Fargeprøve av fargen suksess

En grønnfarge som vi bruker til å vise at en handling er vellykket, for eksempel at brukeren er ferdig med noe.

Infofarge

Fargeprøve av fargen info

Blåfargen bruker vi til informasjonsmeldinger.

Advarselsfarge

Fargeprøve av fargen advarsel

Denne gulfargen er til advarsler.

Feilfarge

Fargeprøve av fargen feil

En rødfarge som vi bruker til feeilmeldinger eller andre viktige varsler.

Tilgjengelighet

Tilgjengelighet er noe av det viktigste å tenke på når vi bruker farger i digitale løsninger. Vi skal alltid følge kravene til universell utforming. For farger betyr det AA-kravet for kontrast. Kontrastkravet gjelder ikke bare tekst på bakgrunn, men også komponentenes kontrast mot sin egen bakgrunn, når det har betydning for å forstå funksjonaliteten.

I tillegg til å tenke på tekst mot knappebakgrunnen, må vi også tenke på knappebakgrunnen mot sidens bakgrunnsfarge dersom det er viktig for å forstå funksjonen til komponenten.

Tekstfargene våre er snøhvit eller granitt. Se fargebeskrivelsene for å finne ut hvilken farge du skal bruke mot hvilken bakgrunn, for å overholde kontrastkravet.

Plugins til Figma

Andre verktøy

Eksempler

For å skape en varm og hyggelig brukeropplevelse jobber vi med lyse bakgrunnsfarger.

Vi bruker fire meldingsfarger pluss to ekstra farger i hjelpetekster.