Farger | Punkt | Origo - Oslo kommune

Fargebruk

Oslo kommune har en fargepalett som er inspirert av Oslos bybilde; blått fra trikken og fjorden, grønt fra våre grønne lunger og marka. De varme fargene er inspirert av fasader på byens bygninger.

Samlet sammensetning av fargene bør stemme overens med merkevarefargen som er valgt som hovedfarge til applikasjonen/domenet. Nyansefarger bør brukes på en måte som komplimenterer brandfargene.

Navngiving og fargeoppsett

Vi har to nivåer av farger i Punkt: brand farger og semantiske farger:

Fargesystemet består av globale farger som refererer til hva fargen er (eks. brand-dark-blue-100) og et semantisk nivå som beskriver hva fargen skal brukes til (eks. text-body-default).

Fargene har semantiske fargenavn som er bygget opp av tre ledd: UI-element - Situasjon - Variant/Tilstand. Første ledd refererer til elementet som fargelegges: background, Surface

Background: Som regel bakgrunnen på hele siden (HTML body).
Surface: Bakgrunnsfargen til en element, som for eksempel et panel, en knapp, en seksjon, etc.
Border: Fargen til en ramme (stroke).
Text/Icon: Fargen på tekst og ikoner.

Brand farger

Dark blue

Dark blue 1000

--pkt-color-brand-dark-blue-1000

#2A2859

Dark blue 700

--pkt-color-brand-dark-blue-700

#6A698B

Blue

Blue 1000

--pkt-color-brand-blue-1000

#6FE9FF

Blue 500

--pkt-color-brand-blue-500

#B3F5FF

Blue 300

--pkt-color-brand-blue-300

#D1F9FF

Blue 200

--pkt-color-brand-blue-200

#E5FCFF

Blue 100

--pkt-color-brand-blue-100

#F1FDFF

Warm blue

Warm blue 1000

--pkt-color-brand-warm-blue-1000

#1F42AA

Green

Green 1000

--pkt-color-brand-green-1000

#43F8B6

Green 400

--pkt-color-brand-green-400

#C7FDE9

Light green

Light green 1000

--pkt-color-brand-light-green-1000

#C7F6C9

Light green 400

--pkt-color-brand-light-green-400

#E5FFE6

Dark green

Dark green 1000

--pkt-color-brand-dark-green-1000

#034B45

Yellow

Yellow 1000

--pkt-color-brand-yellow-1000

#F9C66B

Yellow 500

--pkt-color-brand-yellow-500

#FFE7BC

Red

Red 1000

--pkt-color-brand-red-1000

#FF8274

Red 600

--pkt-color-brand-red-600

#FFB4AC

Red 400

--pkt-color-brand-red-400

#FFDFDC

Red 100

--pkt-color-brand-red-100

#FFF2F1

Light beige

Light beige 1000

--pkt-color-brand-light-beige-1000

#F8F0DD

Dark beige

Dark beige 1000

--pkt-color-brand-dark-beige-1000

#D0BFAE

Neutrals

Neutrals Black

--pkt-color-brand-neutrals-black

#000000

Neutrals 1000

--pkt-color-brand-neutrals-1000

#2C2C2C

Neutrals 200

--pkt-color-brand-neutrals-200

#F2F2F2

Neutrals 100

--pkt-color-brand-neutrals-100

#F9F9F9

Neutrals White

--pkt-color-brand-neutrals-white

#FFFFFF

Neutrals Transparent

--pkt-color-brand-neutrals-transparent

transparent

Purple

Purple 1000

--pkt-color-brand-purple-1000

#E0ADFF

Gray

Gray 1000

--pkt-color-grays-gray-1000

#2C2C2C

Gray 900

--pkt-color-grays-gray-900

#1A1A1A

Gray 800

--pkt-color-grays-gray-800

#333333

Gray 700

--pkt-color-grays-gray-700

#4D4D4D

Gray 600

--pkt-color-grays-gray-600

#666666

Gray 500

--pkt-color-grays-gray-500

#808080

Gray 400

--pkt-color-grays-gray-400

#9A9A9A

Gray 300

--pkt-color-grays-gray-300

#B3B3B3

Gray 200

--pkt-color-grays-gray-200

#CCCCCC

Gray 100

--pkt-color-grays-gray-100

#E6E6E6

Semantiske farger

Background

Default

--pkt-color-background-default

#FFFFFF

Subtle

--pkt-color-background-subtle

#F9F9F9

Card

--pkt-color-background-card

#FFFFFF

Transparent

--pkt-color-background-transparent

transparent

Surface strong

Dark blue

--pkt-color-surface-strong-dark-blue

#2A2859

Blue

--pkt-color-surface-strong-blue

#6FE9FF

Dark green

--pkt-color-surface-strong-dark-green

#034B45

Green

--pkt-color-surface-strong-green

#43F8B6

Light green

--pkt-color-surface-strong-light-green

#C7F6C9

Red

--pkt-color-surface-strong-red

#FF8274

Yellow

--pkt-color-surface-strong-yellow

#F9C66B

Beige

--pkt-color-surface-strong-beige

#D0BFAE

Gray

--pkt-color-surface-strong-gray

#CCCCCC

Surface default

Light blue

--pkt-color-surface-default-light-blue

#D1F9FF

Light green

--pkt-color-surface-default-light-green

#C7FDE9

Faded green

--pkt-color-surface-default-faded-green

#E5FFE6

Faded red

--pkt-color-surface-default-faded-red

#FFDFDC

Red

--pkt-color-surface-default-red

#FFB4AC

Light beige

--pkt-color-surface-default-light-beige

#F8F0DD

Yellow

--pkt-color-surface-default-yellow

#FFE7BC

Gray

--pkt-color-surface-default-gray

#F9F9F9

Surface subtle

Light blue

--pkt-color-surface-subtle-light-blue

#E5FCFF

Pale blue

--pkt-color-surface-subtle-pale-blue

#F1FDFF

White

--pkt-color-surface-subtle-white

#FFFFFF

Light red

--pkt-color-surface-subtle-light-red

#FFF2F1

Border

Subtle

--pkt-color-border-subtle

#F9F9F9

Default

--pkt-color-border-default

#2A2859

Red

--pkt-color-border-red

#FF8274

Blue

--pkt-color-border-blue

#6FE9FF

Green

--pkt-color-border-green

#43F8B6

Beige

--pkt-color-border-beige

#D0BFAE

Light beige

--pkt-color-border-light-beige

#F8F0DD

Yellow

--pkt-color-border-yellow

#F9C66B

Border states

Active

--pkt-color-border-states-active

#1F42AA

Hover

--pkt-color-border-states-hover

#1F42AA

Focus

--pkt-color-border-states-focus

#E0ADFF

Disabled

--pkt-color-border-states-disabled

#B3B3B3

Text

Body default

--pkt-color-text-body-default

#2A2859

Body light

--pkt-color-text-body-light

#FFFFFF

Body dark

--pkt-color-text-body-dark

#2A2859

Placeholder

--pkt-color-text-placeholder

#666666

Text action

Normal

--pkt-color-text-action-normal

#2A2859

Active

--pkt-color-text-action-active

#1F42AA

Hover

--pkt-color-text-action-active

#1F42AA

Disabled

--pkt-color-text-action-disabled

#666666