Utekos Fargepalett

Hovedpalett

Design tokens og detaljer

Maritime Blue

CSS token
--color-maritime-blue
Verdi

Cloud Dancer

CSS token
--color-cloud-dancer
Verdi

Iced Apricot

CSS token
--color-iced-apricot
Verdi

Fjellbla

CSS token
--color-fjellbla
Verdi

Havdyp 950

CSS token
--color-havdyp-950
Verdi

Havdyp 900

CSS token
--color-havdyp-900
Verdi

Havdyp 800

CSS token
--color-havdyp-800
Verdi

Parchment 50

CSS token
--color-parchment-50
Verdi

Parchment 100

CSS token
--color-parchment-100
Verdi

Light

Design tokens og detaljer

Background

CSS token
--background
Verdi
Kilde
var(--token-color-background-page-background)

Foreground

CSS token
--foreground
Verdi
Kilde
var(--token-color-text-neutral)

Card

CSS token
--card
Verdi
Kilde
var(--token-color-background-neutral)

Card Foreground

CSS token
--card-foreground
Verdi
Kilde
var(--token-color-text-neutral)

Popover

CSS token
--popover
Verdi
Kilde
var(--token-color-background-neutral)

Popover Foreground

CSS token
--popover-foreground
Verdi
Kilde
var(--token-color-text-neutral)

Primary

CSS token
--primary
Verdi
Kilde
var(--token-color-background-action)

Primary Foreground

CSS token
--primary-foreground
Verdi
Kilde
var(--token-color-text-action-inverse)

Secondary

CSS token
--secondary
Verdi
Kilde
var(--token-color-background-neutral-subtle)

Secondary Foreground

CSS token
--secondary-foreground
Verdi
Kilde
var(--token-color-text-neutral)

Muted

CSS token
--muted
Verdi
Kilde
var(--token-color-background-neutral-subtle)

Muted Foreground

CSS token
--muted-foreground
Verdi
Kilde
var(--token-color-text-neutral-alternative)

Accent

CSS token
--accent
Verdi
Kilde
var(--token-color-background-selected-subtle)

Accent Foreground

CSS token
--accent-foreground
Verdi
Kilde
var(--token-color-text-neutral)

Destructive

CSS token
--destructive
Verdi
Kilde
var(--token-color-background-error)

Destructive Foreground

CSS token
--destructive-foreground
Verdi
Kilde
var(--token-color-text-neutral-inverse)

Border

CSS token
--border
Verdi
Kilde
var(--token-color-stroke-neutral-subtle)

Input

CSS token
--input
Verdi
Kilde
var(--token-color-stroke-neutral)

Ring

CSS token
--ring
Verdi
Kilde
var(--token-color-stroke-action-focus)

Header Nav Active

CSS token
--header-nav-active
Verdi
Kilde
var(--token-color-background-action)

Header Nav Active Foreground

CSS token
--header-nav-active-foreground
Verdi
Kilde
var(--token-color-text-action-inverse)

Chart 1

CSS token
--chart-1
Verdi
Kilde
var(--color-maritime-blue)

Chart 2

CSS token
--chart-2
Verdi
Kilde
var(--color-teal-600)

Chart 3

CSS token
--chart-3
Verdi
Kilde
var(--color-amber-400)

Chart 4

CSS token
--chart-4
Verdi
Kilde
var(--color-fjellbla)

Chart 5

CSS token
--chart-5
Verdi
Kilde
var(--color-iced-apricot)

Dark

Design tokens og detaljer

Background

CSS token
--background
Verdi
Kilde
var(--token-color-background-page-background)

Foreground

CSS token
--foreground
Verdi
Kilde
var(--token-color-text-neutral)

Card

CSS token
--card
Verdi
Kilde
var(--token-color-background-neutral)

Card Foreground

CSS token
--card-foreground
Verdi
Kilde
var(--token-color-text-neutral)

Popover

CSS token
--popover
Verdi
Kilde
var(--token-color-background-neutral)

Popover Foreground

CSS token
--popover-foreground
Verdi
Kilde
var(--token-color-text-neutral)

Primary

CSS token
--primary
Verdi
Kilde
var(--token-color-background-action)

Primary Foreground

CSS token
--primary-foreground
Verdi
Kilde
var(--token-color-text-action-inverse)

Secondary

CSS token
--secondary
Verdi
Kilde
var(--token-color-background-neutral-subtle)

Secondary Foreground

CSS token
--secondary-foreground
Verdi
Kilde
var(--token-color-text-neutral)

Muted

CSS token
--muted
Verdi
Kilde
var(--token-color-background-neutral-subtle)

Muted Foreground

CSS token
--muted-foreground
Verdi
Kilde
var(--token-color-text-neutral-alternative)

Accent

CSS token
--accent
Verdi
Kilde
var(--token-color-background-selected-subtle)

Accent Foreground

CSS token
--accent-foreground
Verdi
Kilde
var(--token-color-text-neutral)

Destructive

CSS token
--destructive
Verdi
Kilde
var(--token-color-background-error)

Destructive Foreground

CSS token
--destructive-foreground
Verdi
Kilde
var(--token-color-text-neutral-inverse)

Border

CSS token
--border
Verdi
Kilde
var(--token-color-stroke-neutral-subtle)

Input

CSS token
--input
Verdi
Kilde
var(--token-color-stroke-neutral)

Ring

CSS token
--ring
Verdi
Kilde
var(--token-color-stroke-action-focus)

Header Nav Active

CSS token
--header-nav-active
Verdi
Kilde
var(--token-color-background-action)

Header Nav Active Foreground

CSS token
--header-nav-active-foreground
Verdi
Kilde
var(--token-color-text-action-inverse)

Chart 1

CSS token
--chart-1
Verdi
Kilde
var(--color-maritime-secondary-300)

Chart 2

CSS token
--chart-2
Verdi
Kilde
var(--color-teal-300)

Chart 3

CSS token
--chart-3
Verdi
Kilde
var(--color-amber-300)

Chart 4

CSS token
--chart-4
Verdi
Kilde
var(--color-primary-blue-scale-300)

Chart 5

CSS token
--chart-5
Verdi
Kilde
var(--color-iced-apricot)