Et fleksibelt fargesystem
Fargesystemet består av globale farger som refererer til hva fargen er (eks. red-1) og et semantisk nivå som beskriver hva fargen skal brukes til (eks. Text.Danger).
Navnestruktur
Et semantisk fargenavn er bygget opp av 3 ledd:
farge - stryke - vekt
- Background: Som regel bakgrunnen på hele siden (HTML body).
- Surface: Bakgrunnsfargen til en ting. Eks. et panel, en knapp, en seksjon, etc.
- Border: Fargen til en ramme (stroke).
- Text/Icon: Fargen på tekst og ikoner.
Farge-tokens
Color
Accent
Background Default
#fefeff
Background Subtle
#eef4fa
Surface Default
#d1e3f3
Surface Hover
#bad5ec
Surface Active
#a1c5e5
Border Subtle
#97bfe3
Border Default
#3885c9
Border Strong
#014e93
Base Default
#0163ba
Base Hover
#015097
Base Active
#013f75
Text Subtle
#0163ba
Text Default
#002d54
Contrast Default
#ffffff
Contrast Subtle
#dbe9f5
Neutral
Background Default
#fefefe
Background Subtle
#f3f4f5
Surface Default
#e1e3e5
Surface Hover
#ced1d4
Surface Active
#bdc1c6
Border Subtle
#b8bcc1
Border Default
#7a818c
Border Strong
#444e5d
Base Default
#1e2b3c
Base Hover
#303c4b
Base Active
#444e5d
Text Subtle
#5b6471
Text Default
#202c3d
Contrast Default
#ffffff
Contrast Subtle
#bbbfc4
Brand1
Background Default
#fffefe
Background Subtle
#fef0f1
Surface Default
#fcdbdc
Surface Hover
#fbc4c5
Surface Active
#f9acae
Border Subtle
#f8a5a7
Border Default
#d95558
Border Strong
#833336
Base Default
#f35f63
Base Hover
#d05255
Base Active
#af4547
Text Subtle
#a74144
Text Default
#4b1e1f
Contrast Default
#000000
Contrast Subtle
#000000
Brand2
Background Default
#fffefc
Background Subtle
#fbf3e0
Surface Default
#f5dfad
Surface Hover
#f0ce7f
Surface Active
#e9ba4c
Border Subtle
#e7b43d
Border Default
#a57a17
Border Strong
#63490e
Base Default
#e4a920
Base Hover
#c9951c
Base Active
#af8119
Text Subtle
#7e5d12
Text Default
#382a08
Contrast Default
#000000
Contrast Subtle
#2b2006
Brand3
Background Default
#fdfeff
Background Subtle
#eaf6fe
Surface Default
#c8e6fd
Surface Hover
#a9d7fb
Surface Active
#84c7fa
Border Subtle
#7ac2f9
Border Default
#1a85d6
Border Strong
#105082
Base Default
#1e98f5
Base Hover
#1a83d3
Base Active
#166eb2
Text Subtle
#1466a5
Text Default
#092e4b
Contrast Default
#000000
Contrast Subtle
#010407
Success
Background Default
#fcfefc
Background Subtle
#ecf6ed
Surface Default
#cfe9d3
Surface Hover
#b3dcb8
Surface Active
#95ce9d
Border Subtle
#8bca94
Border Default
#189528
Border Strong
#045a10
Base Default
#078D19
Base Hover
#067615
Base Active
#056011
Text Subtle
#067314
Text Default
#033409
Contrast Default
#000000
Contrast Subtle
#000401
Danger
Background Default
#fffefe
Background Subtle
#fbf1f1
Surface Default
#f5dcdc
Surface Hover
#f0c7c7
Surface Active
#eab3b3
Border Subtle
#e8acac
Border Default
#d25b5b
Border Strong
#9a1616
Base Default
#C01B1B
Base Hover
#9a1616
Base Active
#771111
Text Subtle
#c22020
Text Default
#5a0d0d
Contrast Default
#ffffff
Contrast Subtle
#f6dfdf
Info
Background Default
#fefeff
Background Subtle
#edf5fa
Surface Default
#d3e5f4
Surface Hover
#b7d5ed
Surface Active
#9bc5e5
Border Subtle
#94c1e3
Border Default
#2f86c9
Border Strong
#075089
Base Default
#0A71C0
Base Hover
#085ea0
Base Active
#074b80
Text Subtle
#0966ac
Text Default
#042d4d
Contrast Default
#ffffff
Contrast Subtle
#f3f8fc
Warning
Background Default
#fffefc
Background Subtle
#fbf2d3
Surface Default
#f5e19b
Surface Hover
#efcf5d
Surface Active
#e6bc27
Border Subtle
#e0b726
Border Default
#9a7e1a
Border Strong
#5d4c10
Base Default
#CA5C21
Base Hover
#a94d1c
Base Active
#8a3f17
Text Subtle
#a1491a
Text Default
#47210c
Contrast Default
#000000
Contrast Subtle
#382d0a
Focus
Inner
#fefefe
Outer
#002d54