Design tokens

Design tokens are all the values needed to construct and maintain a design system. These values can represent everything defined by the design: a color as an RGB value, opacity as a number, a simple animation as Bezier coordinates. We use tokens instead of hard-coded values to ensure flexibility and consistency across all product experiences.

Design tokens are directly integrated into our component library. They cover the various options for weights, color themes, component states, and more.

Colors

Our main colors are the ones we use the most. These are used for, among other things, background colors, in core functionality, navigation, and buttons – to create a framework for our services. By using mostly these colors, we create a unity and recognizability across our digital platforms.

Main colors

Dark Teal

Teal 500

#00453E

Primary Green

Green 600

#037D67

Green Haze

Green 500

#00957A

Coral Green

Green 200

#B2DFD7

Mint

Green 50

#E5F4F1

White

#FFFFFF

Dark Grey

Grey 600

#2B2B2C

Oslo Grey

Grey 400

#888B8E

Platinum

Grey 100

#EBEBEC

Light Grey

Grey 50

#F5F5F5

Background colors

White

#FFFFFF

Light Grey

Grey 50

#F5F5F5

Text colors

Dark Grey

Grey 600

#2B2B2C

White

#FFFFFF

Dark Teal

Teal 500

#00453E

Pine

Teal 400

#00685E

Detail colors

Dark Blue

Blue 600

#003A70

Ocean

Blue 500

#325D93

Golden

Yellow 600

#E5A80C

Burnt Yellow

Yellow 500

#F1C400

Wood

Orange 600

#71310C

Chocolate

Orange 500

#BB4D0F

Pumpkin

Orange 400

#DF8200

Outline colors

Black Alpha 200

rgba(0, 0, 0, 0.2)

Black Alpha 400

rgba(0, 0, 0, 0.4)

Green Haze

Green 500

#00957A

Oslo Grey

Grey 400

#888B8E

White

#FFFFFF

Complete palette

Light Grey

Grey 50

#F5F5F5

Platinum

Grey 100

#EBEBEC

Silver

Grey 200

#D7D8D9

Steel

Grey 300

#AFB2B3

Oslo Grey

Grey 400

#888B8E

Dim Grey

Grey 500

#606568

Dark Grey

Grey 600

#2B2B2C

Sea Foam

Teal 50

#CCE1DF

Opal

Teal 100

#99C3BF

River

Teal 200

#66A49E

Celadon

Teal 300

#33867E

Pine

Teal 400

#00685E

Dark Teal

Teal 500

#00453E

Night

Teal 600

#012622

Mint

Green 50

#E5F4F1

Sea Mist

Green 100

#CCEAE4

Coral Green

Green 200

#B2DFD7

Blue Green

Green 300

#84CFC2

Azure

Green 400

#38B49E

Green Haze

Green 500

#00957A

Primary Green

Green 600

#037D67

Icy Blue

Blue 50

#EDF1F7

Light Blue

Blue 100

#DCE4EF

Cloudy

Blue 200

#B9C9DE

Sky

Blue 300

#A7BCD6

Glacier

Blue 400

#688CBA

Ocean

Blue 500

#325D93

Dark Blue

Blue 600

#003A70

Cornsilk

Yellow 50

#FEF9DD

Blonde

Yellow 100

#FDF3BA

Primrose

Yellow 200

#FCEC98

Sunshine

Yellow 300

#FBE675

Banana

Yellow 400

#FAE053

Burnt Yellow

Yellow 500

#F1C400

Golden

Yellow 600

#E5A80C

Bisque

Orange 50

#FFE6CC

Champagne

Orange 100

#FFCD99

Rajah

Orange 200

#FFB466

Saffron

Orange 300

#FF9B33

Pumpkin

Orange 400

#DF8200

Chocolate

Orange 500

#BB4D0F

Wood

Orange 600

#71310C

Pink

Red 50

#FFEBEB

Light Red

Red 100

#FBCCCC

Salmon

Red 200

#F8A6A6

Apricot

Red 300

#EF7E7E

Carmine

Red 400

#E26767

Region

Red 500

#C34C4C

Bright Red

Red 600

#ED0000

White Alpha 100

rgba(255, 255, 255, 0.1)

White Alpha 200

rgba(255, 255, 255, 0.2)

White Alpha 300

rgba(255, 255, 255, 0.3)

White Alpha 400

rgba(255, 255, 255, 0.4)

White Alpha 500

rgba(255, 255, 255, 0.5)

White Alpha 600

rgba(255, 255, 255, 0.6)

White Alpha 700

rgba(255, 255, 255, 0.7)

White Alpha 800

rgba(255, 255, 255, 0.8)

White Alpha 900

rgba(255, 255, 255, 0.9)

Black Alpha 100

rgba(0, 0, 0, 0.1)

Black Alpha 200

rgba(0, 0, 0, 0.2)

Black Alpha 300

rgba(0, 0, 0, 0.3)

Black Alpha 400

rgba(0, 0, 0, 0.4)

Black Alpha 500

rgba(0, 0, 0, 0.5)

Black Alpha 600

rgba(0, 0, 0, 0.6)

Black Alpha 700

rgba(0, 0, 0, 0.7)

Black Alpha 800

rgba(0, 0, 0, 0.8)

Black Alpha 900

rgba(0, 0, 0, 0.9)

White

#FFFFFF

Black

#000000

Typography

We have two "sets" of text styles; one for mobile and one for desktop. The text styles for Mobile should be used in the Vy app, and on the web on mobile, while horizontal tablet, desktop, and widescreen should use the text styles for Desktop. The breakpoint is at screen widths greater than or equal to >=756 pixels wide. Line height should always be 1.333 times the font size, rounded to the nearest pixel.

The font Vy Display is less readable in small sizes, and should therefore preferably only be used for headings in content, while in Elm and React applications, Vy Sans is preferred.

Mobile

Example	Value	Code
XS Regular	0.875rem / 1.333	`tokens.font.style.xs["font-size"].mobile` `tokens.font.style.xs["line-height"]` `tokens.font.style.xs["font-family"]`
XS Bold	0.875rem / 1.333	`tokens.font.style.xs["font-size"].mobile` `tokens.font.style.xs["line-height"]` `tokens.font.style.xs["font-family"]`
Sm Regular	1rem / 1.333	`tokens.font.style.sm["font-size"].mobile` `tokens.font.style.sm["line-height"]` `tokens.font.style.sm["font-family"]`
Sm Bold	1rem / 1.333	`tokens.font.style.sm["font-size"].mobile` `tokens.font.style.sm["line-height"]` `tokens.font.style.sm["font-family"]`
Md Regular	1.125rem / 1.333	`tokens.font.style.md["font-size"].mobile` `tokens.font.style.md["line-height"]` `tokens.font.style.md["font-family"]`
Md Bold	1.125rem / 1.333	`tokens.font.style.md["font-size"].mobile` `tokens.font.style.md["line-height"]` `tokens.font.style.md["font-family"]`
Lg Regular	1.5rem / 1.333	`tokens.font.style.lg["font-size"].mobile` `tokens.font.style.lg["line-height"]` `tokens.font.style.lg["font-family"]`
Lg Bold	1.5rem / 1.333	`tokens.font.style.lg["font-size"].mobile` `tokens.font.style.lg["line-height"]` `tokens.font.style.lg["font-family"]`
XL Sans Regular	1.875rem / 1.333	`tokens.font.style["xl-sans"]["font-size"].mobile` `tokens.font.style["xl-sans"]["line-height"]` `tokens.font.style["xl-sans"]["font-family"]`
XL Sans Bold	1.875rem / 1.333	`tokens.font.style["xl-sans"]["font-size"].mobile` `tokens.font.style["xl-sans"]["line-height"]` `tokens.font.style["xl-sans"]["font-family"]`
XL Display	1.875rem / 1.333	`tokens.font.style["xl-display"]["font-size"].mobile` `tokens.font.style["xl-display"]["line-height"]` `tokens.font.style["xl-display"]["font-family"]`
2XL Display	2.25rem / 1.333	`tokens.font.style.xxl["font-size"].mobile` `tokens.font.style.xxl["line-height"]` `tokens.font.style.xxl["font-family"]`

Desktop

Example	Value	Code
XS Regular	1rem / 1.333	`tokens.font.style.xs["font-size"].desktop` `tokens.font.style.xs["line-height"]` `tokens.font.style.xs["font-family"]`
XS Bold	1rem / 1.333	`tokens.font.style.xs["font-size"].desktop` `tokens.font.style.xs["line-height"]` `tokens.font.style.xs["font-family"]`
Sm Regular	1.125rem / 1.333	`tokens.font.style.sm["font-size"].desktop` `tokens.font.style.sm["line-height"]` `tokens.font.style.sm["font-family"]`
Sm Bold	1.125rem / 1.333	`tokens.font.style.sm["font-size"].desktop` `tokens.font.style.sm["line-height"]` `tokens.font.style.sm["font-family"]`
Md Regular	1.5rem / 1.333	`tokens.font.style.md["font-size"].desktop` `tokens.font.style.md["line-height"]` `tokens.font.style.md["font-family"]`
Md Bold	1.5rem / 1.333	`tokens.font.style.md["font-size"].desktop` `tokens.font.style.md["line-height"]` `tokens.font.style.md["font-family"]`
Lg Regular	1.875rem / 1.333	`tokens.font.style.lg["font-size"].desktop` `tokens.font.style.lg["line-height"]` `tokens.font.style.lg["font-family"]`
Lg Bold	1.875rem / 1.333	`tokens.font.style.lg["font-size"].desktop` `tokens.font.style.lg["line-height"]` `tokens.font.style.lg["font-family"]`
XL Sans Regular	2.5rem / 1.333	`tokens.font.style["xl-sans"]["font-size"].desktop` `tokens.font.style["xl-sans"]["line-height"]` `tokens.font.style["xl-sans"]["font-family"]`
XL Sans Bold	2.5rem / 1.333	`tokens.font.style["xl-sans"]["font-size"].desktop` `tokens.font.style["xl-sans"]["line-height"]` `tokens.font.style["xl-sans"]["font-family"]`
XL Display	2.5rem / 1.333	`tokens.font.style["xl-display"]["font-size"].desktop` `tokens.font.style["xl-display"]["line-height"]` `tokens.font.style["xl-display"]["font-family"]`
2XL Display	3.375rem / 1.333	`tokens.font.style.xxl["font-size"].desktop` `tokens.font.style.xxl["line-height"]` `tokens.font.style.xxl["font-family"]`

Spacing

Vy uses a spacing scale based on 6 px, in combination with a 3 px baseline grid for smaller components. This means that menus, boxes, margins, and padding are based on 6 px. While components like buttons and icons are based on 6 and 12 px.

Example	Value	Code
	0 / 0rem	`tokens.size.spacing[0]`
	0.5 / 0.1875rem	`tokens.size.spacing[0.5]`
	1 / 0.375rem	`tokens.size.spacing[1]`
	1.5 / 0.5625rem	`tokens.size.spacing[1.5]`
	2 / 0.75rem	`tokens.size.spacing[2]`
	3 / 1.125rem	`tokens.size.spacing[3]`
	4 / 1.5rem	`tokens.size.spacing[4]`
	5 / 1.875rem	`tokens.size.spacing[5]`
	6 / 2.25rem	`tokens.size.spacing[6]`
	7 / 2.625rem	`tokens.size.spacing[7]`
	8 / 3.375rem	`tokens.size.spacing[8]`
	9 / 4.5rem	`tokens.size.spacing[9]`
	10 / 5.625rem	`tokens.size.spacing[10]`
	11 / 7.5rem	`tokens.size.spacing[11]`
	12 / 11.25rem	`tokens.size.spacing[12]`

Rounding

The rounding follows the size of the component. Small components have small rounding, and large components have larger rounding. All components that consist of a 'box/card' have rounding. We rarely use completely square components (0 px rounding). An easy way to determine which rounding you should use is to follow the rule of thumb: components with 1-2 lines of text or very compact elements will always have a rounding of 12 px. When there are more lines horizontally, such as cards or boxes, we use a rounding of 18 px. In addition, 24 px rounding is used on drawers, 30 px rounding on buttons, and 36 px rounding on the app header.

Example	Value	Code
	none / 0rem	`tokens.tokens.size["border-radius"].none`
	xs / 0.375rem	`tokens.tokens.size["border-radius"].xs`
	sm / 0.75rem	`tokens.tokens.size["border-radius"].sm`
	md / 1.125rem	`tokens.tokens.size["border-radius"].md`
	lg / 1.5rem	`tokens.tokens.size["border-radius"].lg`
	xl / 1.875rem	`tokens.tokens.size["border-radius"].xl`
	2xl / 2.25rem	`tokens.tokens.size["border-radius"].2xl`

Shadows

"Shadow is used to lift something from the background (an action) and to clarify that something is clickable. Shadow should only be used on components that are clickable. We use shadow to create a hierarchy of importance. Not all clickable elements have shadow, such as input fields and buttons. Sometimes shadow is used only in certain states of components, to clarify an action. Components with strong colors or outline do not need shadow. We have three levels of shadow: Elevation 1, Elevation 2, and Elevation 3 (or in code: "sm", "md" and "lg")

Example	Value	Code
	sm / 0 1px 3px rgba(0, 0, 0, 0.1)	`tokens.depth.shadow.sm`
	md / 0 2px 6px rgba(0, 0, 0, 0.1)	`tokens.depth.shadow.md`
	lg / 0 2px 8px 1px rgba(0, 0, 0, 0.1)	`tokens.depth.shadow.lg`

Outlines

Example	Value	Code
	1px solid / sm	`tokens.size.stroke.sm`
	2px solid / md	`tokens.size.stroke.md`
	3px solid / lg	`tokens.size.stroke.lg`
	1px dashed / sm-dashed	`tokens.size.stroke["sm-dashed"]`
	2px dashed / md-dashed	`tokens.size.stroke["md-dashed"]`
	3px dashed / lg-dashed	`tokens.size.stroke["lg-dashed"]`

Breakpoints

Name	Value	Code
Phone, landscape	35.5rem	`tokens.size.breakpoint.sm`
Tablet	48.0625rem	`tokens.size.breakpoint.md`
Desktop	64.0625rem	`tokens.size.breakpoint.lg`
Widescreen	99.75rem	`tokens.size.breakpoint.xl`

Animation

It is important that the length of the animation and which attributes are animated do not appear disturbing or make it more difficult for the user to navigate. We have set up three basic animations that one can use when setting up transitions between states. These define three different timings and how the curve of the animation should be executed: Slow, Medium, Fast.

Name	Value	Code
slow	0.5s cubic-bezier(0, 0.3, 0.3, 1)	`tokens.time.transition.slow`
medium	0.3s cubic-bezier(0, 0.1, 0.3, 1)	`tokens.time.transition.medium`
fast	0.1s cubic-bezier(0, 0.1, 0.3, 1)	`tokens.time.transition.fast`

Z-index

Name	Value	Code
hide	-1	`tokens.depth["z-index"].hide`
base	0	`tokens.depth["z-index"].base`
docked	10	`tokens.depth["z-index"].docked`
dropdown	1000	`tokens.depth["z-index"].dropdown`
sticky	1100	`tokens.depth["z-index"].sticky`
banner	1200	`tokens.depth["z-index"].banner`
overlay	1300	`tokens.depth["z-index"].overlay`
modal	1400	`tokens.depth["z-index"].modal`
popover	1500	`tokens.depth["z-index"].popover`
skipLink	1600	`tokens.depth["z-index"].skipLink`
toast	1700	`tokens.depth["z-index"].toast`
tooltip	1800	`tokens.depth["z-index"].tooltip`