Hopp til hovedinnhold

Farger

30. mai 2024

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).

Et semantisk fargenavn er bygget opp av 3 ledd:
farge - styrke - 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

Fargene under er eksempler fra et tilfeldig tema. Bruk temabyggeren for å generere dine egne farger og navn.

Color

Accent

Background-default 
#ffffff
Background-tinted 
#eef4fa
Surface-default 
#ffffff
Surface-tinted 
#ddeaf6
Surface-hover 
#c7ddf0
Surface-active 
#b1cfea
Border-subtle 
#99c0e3
Border-default 
#3582c8
Border-strong 
#0061b8
Text-subtle 
#0061b8
Text-default 
#002c54
Base-default 
#0062BA
Base-hover 
#004f96
Base-active 
#003d75
Base-contrast-subtle 
#dbe9f5
Base-contrast-default 
#ffffff

Neutral

Background-default 
#ffffff
Background-tinted 
#f3f4f4
Surface-default 
#ffffff
Surface-tinted 
#e7e9ea
Surface-hover 
#d8dadd
Surface-active 
#c9ccd0
Border-subtle 
#b8bcc1
Border-default 
#777f89
Border-strong 
#59626f
Text-subtle 
#59626f
Text-default 
#1f2c3d
Base-default 
#1E2B3C
Base-hover 
#313d4d
Base-active 
#444f5d
Base-contrast-subtle 
#babec4
Base-contrast-default 
#ffffff

Brand1

Background-default 
#ffffff
Background-tinted 
#fef0f1
Surface-default 
#ffffff
Surface-tinted 
#fde2e3
Surface-hover 
#fccfd1
Surface-active 
#fabcbe
Border-subtle 
#f9a5a8
Border-default 
#d55356
Border-strong 
#a44043
Text-subtle 
#a44043
Text-default 
#4b1d1e
Base-default 
#F45F63
Base-hover 
#f78588
Base-active 
#f9a6a8
Base-contrast-subtle 
#020101
Base-contrast-default 
#000000

Brand2

Background-default 
#ffffff
Background-tinted 
#fbf3df
Surface-default 
#ffffff
Surface-tinted 
#f8e7c1
Surface-hover 
#f3d797
Surface-active 
#eec76c
Border-subtle 
#e8b43a
Border-default 
#a17817
Border-strong 
#7c5c11
Text-subtle 
#7c5c11
Text-default 
#382908
Base-default 
#E5AA20
Base-hover 
#c9951c
Base-active 
#af8218
Base-contrast-subtle 
#2c2006
Base-contrast-default 
#000000

Brand3

Background-default 
#ffffff
Background-tinted 
#eaf5fe
Surface-default 
#ffffff
Surface-tinted 
#d5ecfd
Surface-hover 
#b9dffc
Surface-active 
#9cd2fb
Border-subtle 
#7bc3f9
Border-default 
#1a83d2
Border-strong 
#1465a2
Text-subtle 
#1465a2
Text-default 
#092d49
Base-default 
#1E98F5
Base-hover 
#53b0f7
Base-active 
#81c5f9
Base-contrast-subtle 
#010507
Base-contrast-default 
#000000

Success

Background-default 
#ffffff
Background-tinted 
#ecf6ee
Surface-default 
#ffffff
Surface-tinted 
#daeddd
Surface-hover 
#c3e2c7
Surface-active 
#abd6b1
Border-subtle 
#8fc997
Border-default 
#1d922d
Border-strong 
#057114
Text-subtle 
#057114
Text-default 
#023409
Base-default 
#068718
Base-hover 
#057014
Base-active 
#045a10
Base-contrast-subtle 
#fafdfb
Base-contrast-default 
#ffffff

Danger

Background-default 
#ffffff
Background-tinted 
#fbf1f1
Surface-default 
#ffffff
Surface-tinted 
#f8e4e4
Surface-hover 
#f3d2d2
Surface-active 
#eec1c1
Border-subtle 
#e8adad
Border-default 
#d15757
Border-strong 
#bf1b1b
Text-subtle 
#bf1b1b
Text-default 
#590d0d
Base-default 
#C01B1B
Base-hover 
#9b1616
Base-active 
#791111
Base-contrast-subtle 
#f7e1e1
Base-contrast-default 
#ffffff

Info

Background-default 
#ffffff
Background-tinted 
#edf5fa
Surface-default 
#ffffff
Surface-tinted 
#dcebf6
Surface-hover 
#c5ddf0
Surface-active 
#aed0ea
Border-subtle 
#94c1e3
Border-default 
#2a83c8
Border-strong 
#0964a9
Text-subtle 
#0964a9
Text-default 
#042d4d
Base-default 
#0A71C0
Base-hover 
#085d9f
Base-active 
#074a7e
Base-contrast-subtle 
#eff6fb
Base-contrast-default 
#ffffff

Warning

Background-default 
#ffffff
Background-tinted 
#fcf2e2
Surface-default 
#ffffff
Surface-tinted 
#fae6c6
Surface-hover 
#f6d5a0
Surface-active 
#f3c479
Border-subtle 
#eeb04c
Border-default 
#ad7214
Border-strong 
#85580f
Text-subtle 
#85580f
Text-default 
#3c2807
Base-default 
#EA9B1B
Base-hover 
#cd8818
Base-active 
#b27614
Base-contrast-subtle 
#271a04
Base-contrast-default 
#000000

Focus

Inner 
#ffffff
Outer 
#1f2c3d

Link

Color

Visited 
#663299
Rediger denne siden på Github (åpnes i ny fane)