Farger

Her er fargene sånn du bruker dem i kode. Hvordan OBOS bruker farger i merkevaren, står på Farger under Designspråk.

Rolle: hva en farge brukes til, som primary eller danger. Det er rollene du bruker i kode.
Token: én farge i en rolle, som primary-base-default. Finnes både som Tailwind-klasse (bg-primary-base-default) og som CSS-variabel (--gm-color-primary-base-default).
Primitiv: den faktiske fargen en rolle peker på, som blue.900. Bruk den ikke direkte.

Roller

Palett

I OBOS-temaet er primary mørk blå, accent mørk grønn og neutral gråtoner. I tillegg finnes statusrollene success, danger, warning og info.

Hver rolle har de samme tokenene, delt i fem grupper:

background: bakgrunnen på siden eller en seksjon
surface: kort, paneler og andre flater oppå bakgrunnen. Med hover og active for det du kan klikke på
border: kanter og skillelinjer
text: tekst. default for vanlig tekst, subtle for det som er mindre viktig
base: fylte flater, som knapper. base-contrast er tekst og ikoner oppå

Klassen er rolle, gruppe og variant satt sammen, feks bg-primary-base-default eller text-neutral-text-subtle.

Skal en komponent bytte farge etter hvor den står? Bruk klassene uten rolle i navnet, som bg-base-default. De henter fargen fra data-color på et element lenger opp, og er primary uten.

Fargene følger temaet, se Temaer. Velg Frøen Hage under for å se hvordan det ser ut.

Tema

OBOS (standard)

Frøen Hage

primary

Hovedrollen, og den du får uten data-color.

background

--gm-white · #FFFFFF

--gm-sky-100 · #EBF5F9

surface

--gm-white · #FFFFFF

--gm-sky-100 · #EBF5F9

--gm-sky-200 · #DEEFF5

--gm-sky-250 · #CBE5F0

border

--gm-sky-300 · #BEDFEC

--gm-blue-500 · #0047BA

--gm-blue-700 · #003DA0

text

--gm-blue-700 · #003DA0

--gm-blue-900 · #002169

base

--gm-blue-900 · #002169

--gm-blue-700 · #003DA0

--gm-blue-800 · #00358A

--gm-sky-200 · #DEEFF5

--gm-white · #FFFFFF

accent

Sekundær merkevarefarge, ikke en statusfarge.

background

--gm-white · #FFFFFF

--gm-mint-100 · #F0F9F6

surface

--gm-white · #FFFFFF

--gm-mint-200 · #E6F5F0

--gm-mint-250 · #D7F0E8

--gm-mint-300 · #CDECE2

border

--gm-mint-300 · #CDECE2

--gm-green-500 · #008761

--gm-green-700 · #006448

text

--gm-green-700 · #006448

--gm-green-900 · #00524C

base

--gm-green-900 · #00524C

--gm-green-600 · #007453

--gm-green-700 · #006448

--gm-mint-200 · #E6F5F0

--gm-white · #FFFFFF

neutral

For flater, tekst og kanter som ikke skal ta oppmerksomhet.

background

--gm-white · #FFFFFF

--gm-gray-100 · #F1F1F1

surface

--gm-white · #FFFFFF

--gm-gray-100 · #F1F1F1

--gm-gray-200 · #E6E6E6

border

--gm-gray-200 · #E6E6E6

--gm-gray-500 · #818181

--gm-gray-900 · #333333

text

--gm-gray-700 · #595959

--gm-gray-900 · #333333

base

--gm-gray-900 · #333333

--gm-gray-950 · #2C2C2C

--gm-gray-1000 · #262626

--gm-gray-200 · #E6E6E6

--gm-white · #FFFFFF

success

Grønn. For bekreftelser og ting som gikk bra.

background

--gm-white · #FFFFFF

--gm-mint-100 · #F0F9F6

surface

--gm-white · #FFFFFF

--gm-mint-200 · #E6F5F0

--gm-mint-250 · #D7F0E8

--gm-mint-300 · #CDECE2

border

--gm-mint-300 · #CDECE2

--gm-green-500 · #008761

--gm-green-700 · #006448

text

--gm-green-700 · #006448

--gm-green-900 · #00524C

base

--gm-green-500 · #008761

--gm-green-600 · #007453

--gm-green-700 · #006448

--gm-mint-200 · #E6F5F0

--gm-white · #FFFFFF

danger

Rød. For feil og handlinger som ikke kan angres.

background

--gm-white · #FFFFFF

--gm-red-100 · #FAEDEF

surface

--gm-white · #FFFFFF

--gm-red-100 · #FAEDEF

border

--gm-red-100 · #FAEDEF

--gm-red-500 · #C0385D

--gm-red-700 · #8E2945

text

--gm-red-600 · #A53050

--gm-red-700 · #8E2945

base

--gm-red-500 · #C0385D

--gm-red-600 · #A53050

--gm-red-700 · #8E2945

--gm-red-100 · #FAEDEF

--gm-white · #FFFFFF

warning

Oransje og gul. For advarsler.

background

--gm-white · #FFFFFF

--gm-yellow-100 · #FFF5D2

surface

--gm-white · #FFFFFF

--gm-orange-100 · #F8E5C9

border

--gm-orange-100 · #F8E5C9

--gm-orange-700 · #AC7C37

text

--gm-orange-700 · #AC7C37

--gm-gray-900 · #333333

base

--gm-orange-500 · #E8A74A

--gm-orange-600 · #C89040

--gm-orange-700 · #AC7C37

--gm-gray-900 · #333333

info

Blå. For nøytral informasjon.

background

--gm-white · #FFFFFF

--gm-sky-100 · #EBF5F9

surface

--gm-white · #FFFFFF

--gm-sky-100 · #EBF5F9

--gm-sky-200 · #DEEFF5

--gm-sky-250 · #CBE5F0

border

--gm-sky-300 · #BEDFEC

--gm-blue-500 · #0047BA

--gm-blue-700 · #003DA0

text

--gm-blue-700 · #003DA0

--gm-blue-900 · #002169

base

--gm-blue-500 · #0047BA

--gm-blue-700 · #003DA0

--gm-blue-800 · #00358A

--gm-sky-200 · #DEEFF5

--gm-white · #FFFFFF

Korte tokens

Klassene uten rolle i navnet. Her uten data-color, så de viser primary.

--gm-color-primary-background-default · #FFFFFF

--gm-color-primary-background-tinted · #EBF5F9

--gm-color-primary-surface-default · #FFFFFF

--gm-color-primary-surface-tinted · #EBF5F9

--gm-color-primary-surface-hover · #DEEFF5

--gm-color-primary-surface-active · #CBE5F0

--gm-color-primary-border-subtle · #BEDFEC

--gm-color-primary-border-default · #0047BA

--gm-color-primary-border-strong · #003DA0

--gm-color-primary-text-subtle · #003DA0

--gm-color-primary-text-default · #002169

--gm-color-primary-base-default · #002169

--gm-color-primary-base-hover · #003DA0

--gm-color-primary-base-active · #00358A

--gm-color-primary-base-contrast-subtle · #DEEFF5

--gm-color-primary-base-contrast-default · #FFFFFF

Primitiver

Fargene rollene peker på. Bruk rollene i kode, ikke disse. Det er rollene vi lover holder seg stabile.

white

#FFFFFF

gray

#F1F1F1

#E6E6E6

#818181

#595959

#333333

#2C2C2C

#262626

blue

#0047BA

#003DA0

#00358A

#002169

sky

#EBF5F9

#DEEFF5

#CBE5F0

#BEDFEC

#A3C0CB

green

#008761

#007453

#006448

#00524C

mint

#F0F9F6

#E6F5F0

#D7F0E8

#CDECE2

red

#FAEDEF

#C0385D

#A53050

#8E2945

orange

#F8E5C9

#E8A74A

#C89040

#AC7C37

yellow

#FFF5D2

Legacy-fargerDeprekert

Den gamle paletten, som bg-blue-dark. Finnes fortsatt så eksisterende kode funker, men bruk rollene i ny kode. De er faste hex-verdier og følger ikke et tema.

#333

#fff

#818181

#595959

#e6e6e6

#f1f1f1

#bedfec

#deeff5

#ebf5f9

#cdece2

#e6f5f0

#f0f9f6

#0047ba

#bedfec

#deeff5

#002169

#008761

#00524c

#cdece2

#e6f5f0

#c0385d

#faedef

#e8a74a

#f8e5c9

#fff5d2