Vy

Hovedpalett

Design tokens og detaljer

Green 700

CSS token
--vy-green-700
Verdi

Green 200

CSS token
--vy-green-200
Verdi

Green 1100

CSS token
--vy-green-1100
Verdi

Grey 800

CSS token
--vy-grey-800
Verdi

White

CSS token
--vy-white
Verdi

Blue 800

CSS token
--vy-blue-800
Verdi

Yellow 400

CSS token
--vy-yellow-400
Verdi

Orange 500

CSS token
--vy-orange-500
Verdi

Red 600

CSS token
--vy-red-600
Verdi

Light

Design tokens og detaljer

Background

CSS token
--background
Verdi
Kilde
var(--vy-white)

Foreground

CSS token
--foreground
Verdi
Kilde
var(--vy-grey-800)

Card

CSS token
--card
Verdi
Kilde
var(--vy-white)

Card Foreground

CSS token
--card-foreground
Verdi
Kilde
var(--vy-grey-800)

Popover

CSS token
--popover
Verdi
Kilde
var(--vy-white)

Popover Foreground

CSS token
--popover-foreground
Verdi
Kilde
var(--vy-grey-800)

Primary

CSS token
--primary
Verdi
Kilde
var(--vy-green-700)

Primary Foreground

CSS token
--primary-foreground
Verdi
Kilde
var(--vy-white)

Secondary

CSS token
--secondary
Verdi
Kilde
var(--vy-grey-100)

Secondary Foreground

CSS token
--secondary-foreground
Verdi
Kilde
var(--vy-grey-800)

Muted

CSS token
--muted
Verdi
Kilde
var(--vy-grey-50)

Muted Foreground

CSS token
--muted-foreground
Verdi
Kilde
var(--vy-grey-500)

Accent

CSS token
--accent
Verdi
Kilde
var(--vy-green-100)

Accent Foreground

CSS token
--accent-foreground
Verdi
Kilde
var(--vy-green-800)

Destructive

CSS token
--destructive
Verdi
Kilde
var(--vy-red-600)

Destructive Foreground

CSS token
--destructive-foreground
Verdi
Kilde
var(--vy-white)

Border

CSS token
--border
Verdi
Kilde
var(--vy-grey-100)

Input

CSS token
--input
Verdi
Kilde
var(--vy-grey-200)

Ring

CSS token
--ring
Verdi
Kilde
var(--vy-green-500)

Header Nav Active

CSS token
--header-nav-active
Verdi
Kilde
var(--vy-green-50)

Header Nav Active Foreground

CSS token
--header-nav-active-foreground
Verdi
Kilde
var(--vy-grey-800)

Chart 1

CSS token
--chart-1
Verdi
Kilde
var(--vy-green-700)

Chart 2

CSS token
--chart-2
Verdi
Kilde
var(--vy-blue-700)

Chart 3

CSS token
--chart-3
Verdi
Kilde
var(--vy-yellow-500)

Chart 4

CSS token
--chart-4
Verdi
Kilde
var(--vy-orange-500)

Chart 5

CSS token
--chart-5
Verdi
Kilde
var(--vy-red-500)

Dark

Design tokens og detaljer

Background

CSS token
--background
Verdi
Kilde
var(--vy-green-1100)

Foreground

CSS token
--foreground
Verdi
Kilde
var(--vy-white)

Card

CSS token
--card
Verdi
Kilde
var(--vy-green-900)

Card Foreground

CSS token
--card-foreground
Verdi
Kilde
var(--vy-white)

Popover

CSS token
--popover
Verdi
Kilde
var(--vy-green-900)

Popover Foreground

CSS token
--popover-foreground
Verdi
Kilde
var(--vy-white)

Primary

CSS token
--primary
Verdi
Kilde
var(--vy-green-200)

Primary Foreground

CSS token
--primary-foreground
Verdi
Kilde
var(--vy-green-800)

Secondary

CSS token
--secondary
Verdi
Kilde
var(--vy-grey-700)

Secondary Foreground

CSS token
--secondary-foreground
Verdi
Kilde
var(--vy-white)

Muted

CSS token
--muted
Verdi
Kilde
var(--vy-green-700)

Muted Foreground

CSS token
--muted-foreground
Verdi
Kilde
var(--vy-grey-200)

Accent

CSS token
--accent
Verdi
Kilde
var(--vy-green-200)

Accent Foreground

CSS token
--accent-foreground
Verdi
Kilde
var(--vy-green-1100)

Destructive

CSS token
--destructive
Verdi
Kilde
var(--vy-red-600)

Destructive Foreground

CSS token
--destructive-foreground
Verdi
Kilde
var(--vy-white)

Border

CSS token
--border
Verdi
Kilde
var(--vy-white-alpha-300)

Input

CSS token
--input
Verdi
Kilde
var(--vy-white-alpha-200)

Ring

CSS token
--ring
Verdi
Kilde
var(--vy-green-400)

Header Nav Active

CSS token
--header-nav-active
Verdi
Kilde
var(--vy-green-800)

Header Nav Active Foreground

CSS token
--header-nav-active-foreground
Verdi
Kilde
var(--vy-white)

Chart 1

CSS token
--chart-1
Verdi
Kilde
var(--vy-green-400)

Chart 2

CSS token
--chart-2
Verdi
Kilde
var(--vy-blue-500)

Chart 3

CSS token
--chart-3
Verdi
Kilde
var(--vy-yellow-400)

Chart 4

CSS token
--chart-4
Verdi
Kilde
var(--vy-orange-400)

Chart 5

CSS token
--chart-5
Verdi
Kilde
var(--vy-red-500)

Grey

Design tokens og detaljer

Grey 50

CSS token
--vy-grey-50
Verdi

Grey 100

CSS token
--vy-grey-100
Verdi

Grey 200

CSS token
--vy-grey-200
Verdi

Grey 300

CSS token
--vy-grey-300
Verdi

Grey 400

CSS token
--vy-grey-400
Verdi

Grey 500

CSS token
--vy-grey-500
Verdi

Grey 600

CSS token
--vy-grey-600
Verdi

Grey 700

CSS token
--vy-grey-700
Verdi

Grey 800

CSS token
--vy-grey-800
Verdi

Grey 900

CSS token
--vy-grey-900
Verdi

Grey 1000

CSS token
--vy-grey-1000
Verdi

Grey 1100

CSS token
--vy-grey-1100
Verdi

Green

Design tokens og detaljer

Green 50

CSS token
--vy-green-50
Verdi

Green 100

CSS token
--vy-green-100
Verdi

Green 200

CSS token
--vy-green-200
Verdi

Green 300

CSS token
--vy-green-300
Verdi

Green 400

CSS token
--vy-green-400
Verdi

Green 500

CSS token
--vy-green-500
Verdi

Green 600

CSS token
--vy-green-600
Verdi

Green 700

CSS token
--vy-green-700
Verdi

Green 800

CSS token
--vy-green-800
Verdi

Green 900

CSS token
--vy-green-900
Verdi

Green 1000

CSS token
--vy-green-1000
Verdi

Green 1100

CSS token
--vy-green-1100
Verdi

Blue

Design tokens og detaljer

Blue 50

CSS token
--vy-blue-50
Verdi

Blue 100

CSS token
--vy-blue-100
Verdi

Blue 200

CSS token
--vy-blue-200
Verdi

Blue 300

CSS token
--vy-blue-300
Verdi

Blue 400

CSS token
--vy-blue-400
Verdi

Blue 500

CSS token
--vy-blue-500
Verdi

Blue 600

CSS token
--vy-blue-600
Verdi

Blue 700

CSS token
--vy-blue-700
Verdi

Blue 800

CSS token
--vy-blue-800
Verdi

Blue 900

CSS token
--vy-blue-900
Verdi

Blue 1000

CSS token
--vy-blue-1000
Verdi

Blue 1100

CSS token
--vy-blue-1100
Verdi

Yellow

Design tokens og detaljer

Yellow 50

CSS token
--vy-yellow-50
Verdi

Yellow 100

CSS token
--vy-yellow-100
Verdi

Yellow 200

CSS token
--vy-yellow-200
Verdi

Yellow 300

CSS token
--vy-yellow-300
Verdi

Yellow 400

CSS token
--vy-yellow-400
Verdi

Yellow 500

CSS token
--vy-yellow-500
Verdi

Yellow 600

CSS token
--vy-yellow-600
Verdi

Yellow 700

CSS token
--vy-yellow-700
Verdi

Yellow 800

CSS token
--vy-yellow-800
Verdi

Yellow 900

CSS token
--vy-yellow-900
Verdi

Yellow 1000

CSS token
--vy-yellow-1000
Verdi

Yellow 1100

CSS token
--vy-yellow-1100
Verdi

Orange

Design tokens og detaljer

Orange 50

CSS token
--vy-orange-50
Verdi

Orange 100

CSS token
--vy-orange-100
Verdi

Orange 200

CSS token
--vy-orange-200
Verdi

Orange 300

CSS token
--vy-orange-300
Verdi

Orange 400

CSS token
--vy-orange-400
Verdi

Orange 500

CSS token
--vy-orange-500
Verdi

Orange 600

CSS token
--vy-orange-600
Verdi

Orange 700

CSS token
--vy-orange-700
Verdi

Orange 800

CSS token
--vy-orange-800
Verdi

Orange 900

CSS token
--vy-orange-900
Verdi

Orange 1000

CSS token
--vy-orange-1000
Verdi

Orange 1100

CSS token
--vy-orange-1100
Verdi

Red

Design tokens og detaljer

Red 50

CSS token
--vy-red-50
Verdi

Red 100

CSS token
--vy-red-100
Verdi

Red 200

CSS token
--vy-red-200
Verdi

Red 300

CSS token
--vy-red-300
Verdi

Red 400

CSS token
--vy-red-400
Verdi

Red 500

CSS token
--vy-red-500
Verdi

Red 600

CSS token
--vy-red-600
Verdi

Red 700

CSS token
--vy-red-700
Verdi

Red 800

CSS token
--vy-red-800
Verdi

Red 900

CSS token
--vy-red-900
Verdi

Red 1000

CSS token
--vy-red-1000
Verdi

Red 1100

CSS token
--vy-red-1100
Verdi

Base

Design tokens og detaljer

White

CSS token
--vy-white
Verdi

Black

CSS token
--vy-black
Verdi

White alpha

Design tokens og detaljer

White Alpha 25

CSS token
--vy-white-alpha-25
Verdi

White Alpha 50

CSS token
--vy-white-alpha-50
Verdi

White Alpha 100

CSS token
--vy-white-alpha-100
Verdi

White Alpha 200

CSS token
--vy-white-alpha-200
Verdi

White Alpha 300

CSS token
--vy-white-alpha-300
Verdi

White Alpha 400

CSS token
--vy-white-alpha-400
Verdi

White Alpha 500

CSS token
--vy-white-alpha-500
Verdi

White Alpha 600

CSS token
--vy-white-alpha-600
Verdi

White Alpha 700

CSS token
--vy-white-alpha-700
Verdi

White Alpha 800

CSS token
--vy-white-alpha-800
Verdi

White Alpha 900

CSS token
--vy-white-alpha-900
Verdi

Black alpha

Design tokens og detaljer

Black Alpha 25

CSS token
--vy-black-alpha-25
Verdi

Black Alpha 50

CSS token
--vy-black-alpha-50
Verdi

Black Alpha 100

CSS token
--vy-black-alpha-100
Verdi

Black Alpha 200

CSS token
--vy-black-alpha-200
Verdi

Black Alpha 300

CSS token
--vy-black-alpha-300
Verdi

Black Alpha 400

CSS token
--vy-black-alpha-400
Verdi

Black Alpha 500

CSS token
--vy-black-alpha-500
Verdi

Black Alpha 600

CSS token
--vy-black-alpha-600
Verdi

Black Alpha 700

CSS token
--vy-black-alpha-700
Verdi

Black Alpha 800

CSS token
--vy-black-alpha-800
Verdi

Black Alpha 900

CSS token
--vy-black-alpha-900
Verdi