Gå til hovedinnhold
VISUELL IDENTITET

Farger

Fargepaletten er et viktig grafisk virkemiddel i identiteten vår. Det er viktig at fargene brukes riktig og med omhu, for å oppnå et gjenkjennelig uttrykk.

Identitetsfarger

EksempelNavnTypeCSS-VariabelHexRGB
BlueProfil$colors-brand-blue#181c5624, 28, 86
LavenderProfil$colors-brand-lavender#aeb7e2174, 183, 226
CoralProfil$colors-brand-coral#ff5959255, 89, 89
PeachProfil$colors-brand-peach#ffbf9e255, 191, 158
WhiteProfil$colors-brand-white#ffffff255, 255, 255

Blue er primærfargen til Entur og skal være gjennomgående i den visuelle profilen vår. Den varme, mørkeblå fargen hentyder til den statlige, trygge aktøren. Brukes i logo, typografi, bakgrunn (contrast tema) og enkelte elementer som bærer av vår identitet.

Lavender brukes som støttefarge for å gi et mykere og varmere uttrykk. En mer subtil og nøytral blåfarge som skaper en visuell harmoni i layouten.

Coral er Enturs aksentfarge. Fargen er vektet lavt, men er viktig og brukes ofte til mindre detaljer. Den korallrøde står for effektiviteten, tydeligheten og den lille detaljen som binder det hele sammen.

Peach brukes for å få et ekstra lekent uttrykk. I likhet med coral skal også denne fargen vektes lavt, og brukes minimalt i designet.

White brukes ofte som bakgrunnsfarge og typografi i for “contrast” tema. Bruken av mye hvitt og whitespace i tillegg til de andre fargene gjør at profilen fremstår lys, luftig og dynamisk.

Når det er snakk om kjernekommunikasjon, skal vi prøve å forholde oss til disse hovedfargene.

Blåtoner

Disse blå fargenyansene brukes hovedsakelig som bakgrunnsfarger i kontrast-tema og enkelte elementer i designet.

EksempelNavnTypeCSS-VariabelHexRGB
blue10UX$colors-blues-blue10#292b6a41, 43, 106
blue20UX$colors-blues-blue20#393d7957, 61, 121
blue30UX$colors-blues-blue30#54568c84, 86, 140
blue40UX$colors-blues-blue40#656782101, 103, 130
blue50UX$colors-blues-blue50#8285a8130, 133, 168
blue60UX$colors-blues-blue60#babbcf186, 187, 207
blue70UX$colors-blues-blue70#d1d4e3209, 212, 227
blue80UX$colors-blues-blue80#ebebf1235, 235, 241

Gråtoner

Gråtonene symboliserer det tekniske og robuste i plattformen vår. Brukes hovedsakelig som bakgrunnsfarger i kontrast-tema for å få frem det lyse og luftige ved layouten i designet.

EksempelNavnTypeVariabelHexRGB
greyUX$colors-greys-grey#949494148, 148, 148
grey10UX$colors-greys-grey10#d1d3d3209, 211, 211
grey20UX$colors-greys-grey20#e9e9e9233, 233, 233
grey30UX$colors-greys-grey30#f3f3f3243, 243, 243
grey40UX$colors-greys-grey40#f8f8f8248, 248, 248

Feedback-farger

EksempelNavnTypeCSS-VariabelHexRGB
SkyUX$colors-validation-sky#0082b90, 130, 185
Sky ContrastUX$colors-validation-sky-contrast#64b3e7100, 179, 231
Sky TintUX$colors-validation-sky-tint#e1eff8225, 239, 248
MintUX$colors-validation-mint#1a8e6026, 142, 96
Mint ContrastUX$colors-validation-mint-contrast#5ac39a90, 195, 154
Mint TintUX$colors-validation-mint-tint#d0f1e3208, 241, 227
CanaryUX$colors-validation-canary#efd358239, 211, 88
LavaUX$colors-validation-lava#d31b1b211, 27, 27
Lava ContrastUX$colors-validation-lava-contrast#ff9494255, 148, 148
Lava TintUX$colors-validation-lava-tint#ffcece255, 206, 206

Infomelding

Sky er fargen som brukes på infomeldinger for å gi brukeren relevante tips eller informasjon.

Sky Contrast brukes på infomeldinger i kontrast-tema.

Sky Tint er støttefargen til Sky som kan brukes på bakgrunn til suksessmeldinger.

Suksessmelding

Mint indikerer at det er gjennomført, trygt, vellykket.

Mint Contrast brukes på suksessmeldinger i kontrast-tema.

Mint Tint er støttefargen til Mint som kan brukes på bakgrunn til suksessmeldinger.

Advarselmelding

Canary indikerer en advarsel som kanskje trenger oppmerksomhet. Brukes for å fremheve viktig innhold eller informasjon som brukeren bør få med seg.

Feilmelding

Lava indikerer at det er en feil eller mangel. Fargen indikerer også advarsel for fare eller potensielt negativ handling som kan føre til tap av data.

Lava Contrast brukes på feilmeldinger i kontrast-tema.

Lava Tint er støttefargen til Lava som kan brukes på bakgrunn til feilmeldinger.

Transportfarger

EksempelNavnTypeCSS-VariabelHexRGB
MetroUX$colors-transport-default-metro#de8108222, 129, 8
BusUX$colors-transport-default-bus#dd5415221, 84, 21
PlaneUX$colors-transport-default-plane#800664128, 6, 100
HelicopterUX$colors-transport-default-helicopter#800664128, 6, 100
TramUX$colors-transport-default-tram#642e88100, 46, 136
FunicularUX$colors-transport-default-funicular#642e88100, 46, 136
CablewayUX$colors-transport-default-cableway#642e88100, 46, 136
TaxiUX$colors-transport-default-taxi#181c5624, 28, 86
BicycleUX$colors-transport-default-bicycle#181c5624, 28, 86
WalkUX$colors-transport-default-walk#181c5624, 28, 86
TrainUX$colors-transport-default-train#00367f0, 54, 127
FerryUX$colors-transport-default-ferry#0497bc4, 151, 188
CarferryUX$colors-transport-default-carferry#0497bc4, 151, 188
MobilityUX$colors-transport-default-mobility#388f7656, 143, 118