Farger

Et fleksibelt fargesystem

Fargesystemet består av globale farger som refererer til hva fargen er (eks. Red-500) og et semantisk nivå som beskriver hva fargen skal brukes til (eks. Text.Danger). Fargesystemet er det samme som Nav også bruker.

Navnestruktur

Et semantisk fargenavn er bygget opp av 3 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 ting. Eks. et panel, en knapp, en seksjon, etc.
• Border: Fargen til en ramme (stroke).
• Text/Icon: Fargen på tekst og ikoner.

Farge-tokens

@digdir/designsystemet-theme

Brand: Digdir

Brand

Alt1

100 CSS

#feefef

200 CSS

#fddfe0

300 CSS

#fbbfc1

400 CSS

#f89fa1

500 CSS

#f67f82

600 CSS

#f45f63

700 CSS

#dc5659

800 CSS

#c34c4f

900 CSS

#B83D41

Alt2

100 CSS

#fcf7e9

200 CSS

#faeec2

300 CSS

#f5dda6

400 CSS

#efcc79

500 CSS

#eabb4d

600 CSS

#e5aa20

700 CSS

#ce991d

800 CSS

#b7881a

900 CSS

#A17717

Alt3

100 CSS

#e9f5ff

200 CSS

#d2eafd

300 CSS

#a5d6fb

400 CSS

#78c1f9

500 CSS

#4badf7

600 CSS

#1e98f5

700 CSS

#1b88dd

800 CSS

#156aac

900 CSS

#125A91

Semantic

Surface first

Light CSS

#fddfe0

Light-hover CSS

#fbbfc1

Light-active CSS

#f89fa1

Dark CSS

#c34c4f

Surface second

Light CSS

#faeec2

Light-hover CSS

#f5dda6

Light-active CSS

#efcc79

Dark CSS

#A17717

Surface third

Light CSS

#d2eafd

Light-hover CSS

#a5d6fb

Light-active CSS

#78c1f9

Dark CSS

#156aac

Surface action first

Subtle CSS

#e6eff8

Subtle-hover CSS

#b3d0ea

Default CSS

#0062ba

Hover CSS

#004e95

Active CSS

#00315d

No_fill CSS

#ffffff

No_fill-hover CSS

#e6eff8

No_fill-active CSS

#b3d0ea

Surface action second

Subtle CSS

#f4f5f6

Subtle-hover CSS

#e9eaec

Default CSS

#00315d

Hover CSS

rgba(0, 49, 93, 0.9)

Active CSS

rgba(0, 49, 93, 0.8)

No_fill CSS

#ffffff

No_fill-hover CSS

rgba(0, 49, 93, 0.1)

No_fill-active CSS

rgba(0, 49, 93, 0.2)

Surface action

Subtle CSS

#e6eff8

Subtle-hover CSS

#b3d0ea

Default CSS

#0062ba

Hover CSS

#004e95

Active CSS

#00315d

No_fill CSS

#ffffff

No_fill-hover CSS

#e6eff8

No_fill-active CSS

#b3d0ea

Checked CSS

#0062ba

Surface neutral

Default CSS

#ffffff

Selected CSS

#e6eff8

Subtle CSS

#f4f5f6

Subtle-hover CSS

#e9eaec

Dark CSS

#68707c

Dark-hover CSS

#4b5563

Inverted CSS

#1e2b3c

Surface success

Subtle CSS

#d1f4e1

Subtle-hover CSS

#8be4b5

Default CSS

#118849

Hover CSS

#0c6536

Active CSS

#084826

No_fill CSS

#ffffff

No_fill-hover CSS

#d1f4e1

No_fill-active CSS

#8be4b5

Surface warning

Subtle CSS

#fffbe6

Subtle-hover CSS

#fff4b4

Default CSS

#fff4b4

Default-hover CSS

#ffed83

Surface danger

Subtle CSS

#f9d5db

Subtle-hover CSS

#f3abb6

Default CSS

#e02e49

Hover CSS

#b3253a

Active CSS

#861c2c

No_fill CSS

#ffffff

No_fill-hover CSS

#f9d5db

No_fill-active CSS

#f3abb6

Surface info

Subtle CSS

#e6eff8

Subtle-hover CSS

#b3d0ea

Surface on_inverted

Default CSS

#ffffff

Hover CSS

#ffffffe6

Active CSS

#ffffffcc

No_fill CSS

#ffffff00

No_fill-hover CSS

#ffffff1a

No_fill-active CSS

#ffffff33

Surface focus

Default CSS

#ffda06

Border first

Default CSS

#f45f63

Hover CSS

#dc5659

Active CSS

#c34c4f

Border second

Default CSS

#e5aa20

Hover CSS

#ce991d

Active CSS

#b7881a

Border third

Default CSS

#1e98f5

Hover CSS

#1b88dd

Active CSS

#156aac

Border action first

Subtle CSS

#b3d0ea

Subtle-hover CSS

#66a1d6

Default CSS

#0062ba

Hover CSS

#004e95

Active CSS

#00315d

Border action second

Subtle CSS

#e9eaec

Subtle-hover CSS

#d2d5d8

Default CSS

#00315d

Hover CSS

#00315d

Active CSS

#00315d

Border action

Subtle CSS

#b3d0ea

Subtle-hover CSS

#66a1d6

Default CSS

#0062ba

Hover CSS

#0062ba

Active CSS

#00315d

Dark CSS

#00315d

Dark-hover CSS

#0062ba

Border info

Default CSS

#004e95

Border neutral

Default CSS

#68707c

Subtle CSS

#d2d5d8

Strong CSS

#1e2b3c

Border success

Default CSS

#118849

Hover CSS

#0c6536

Active CSS

#084826

Border warning

Default CSS

#cc7005

Hover CSS

#995404

Active CSS

#663802

Border danger

Default CSS

#e02e49

Hover CSS

#b3253a

Active CSS

#861c2c

Border focus

Outline CSS

#ffda06

Boxshadow CSS

#1e2b3c

Border on_inverted

Default CSS

#ffffff

Border input

Default CSS

#00315d

Hover CSS

#0062ba

Border divider

Default CSS

#bcbfc5

Subtle CSS

#d2d5d8

Strong CSS

#68707c

Text action first

Default CSS

#0062ba

Hover CSS

#004e95

Active CSS

#00315d

On_action CSS

#ffffff

Text action second

Default CSS

#00315d

Hover CSS

#00315d

Active CSS

#00315d

On_action CSS

#ffffff

Text action

Default CSS

#0062ba

Hover CSS

#004e95

Active CSS

#00315d

On_action CSS

#ffffff

Text success

Default CSS

#0c6536

Hover CSS

#084826

Active CSS

#084826

On_success CSS

#ffffff

On_success_subtle CSS

#1e2b3c

Text neutral

Default CSS

#1e2b3c

Subtle CSS

#4b5563

On_inverted CSS

#ffffff

Text warning

Default CSS

#995404

Icon_warning CSS

#cc7005

On_warning CSS

#663802

Text danger

Default CSS

#b3253a

Hover CSS

#861c2c

Active CSS

#5a121d

On_danger CSS

#ffffff

On_danger_subtle CSS

#1e2b3c

Text visited

Default CSS

#7a1265

Background

Default CSS

#ffffff

Subtle CSS

#f4f5f6