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
#F9C66B
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