Skip to content
Vy logo

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.

Theme

Color mode


Elements

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.

Background

bg-default

White

bg-secondary

Light Grey

bg-tertiary

Mint

Text

text-default

Dark Grey

text-secondary

Dark Teal

text-tertiary

Dim Grey

text-inverted

White

text-highlight

Pine

text-disabled

Black Alpha 400

Icon

icon-default

Dark Grey

icon-secondary

Dark Teal

icon-inverted

White

icon-highlight

Pine

icon-disabled

Black Alpha 200

Outline

outline-default

Black Alpha 400

outline-focus

Green Haze

outline-error

Bright Red

outline-inverted

White Alpha 400

outline-disabled

Black Alpha 200

Surface

surface-default

White

surface-secondary

Sea Mist

surface-tertiary

Dark Teal

surface-disabled

Black Alpha 100

Styles

Base

base-outline:default

Black Alpha 400

base-outline:hover

Dark Grey

base-surface:active

Mint

base-text

Dark Grey

base-icon

Dark Grey

Brand

brand-surface:default

Pine

brand-surface:hover

Dark Teal

brand-surface:active

Green Haze

brand-text

White

brand-icon

White

Accent

accent-surface:default

Sea Mist

accent-surface:hover

Coral Green

accent-surface:active

Mint

accent-text

Dark Teal

accent-icon

Dark Teal

accent-bg

Mint

Floating

floating-surface:default

White

floating-surface:hover

White

floating-surface:active

Mint

floating-outline:default

Platinum

floating-outline:hover

Steel

floating-text

Dark Grey

floating-icon

Dark Grey

Ghost

ghost-surface:hover

Sea Mist

ghost-surface:active

Mint

ghost-text

Dark Grey

ghost-icon

Dark Grey

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

Alpha colors

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)

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

ExampleValueCode

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

ExampleValueCode

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.

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

ExampleValueCode
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")

ExampleValueCode
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

ExampleValueCode
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

NameValueCode
Phone, landscape35.5rem
tokens.size.breakpoint.sm
Tablet48.0625rem
tokens.size.breakpoint.md
Desktop64.0625rem
tokens.size.breakpoint.lg
Widescreen99.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.

NameValueCode
slow0.5s cubic-bezier(0, 0.3, 0.3, 1)
tokens.time.transition.slow
medium0.3s cubic-bezier(0, 0.1, 0.3, 1)
tokens.time.transition.medium
fast0.1s cubic-bezier(0, 0.1, 0.3, 1)
tokens.time.transition.fast

Z-index

NameValueCode
hide-1
tokens.depth["z-index"].hide
base0
tokens.depth["z-index"].base
docked10
tokens.depth["z-index"].docked
dropdown1000
tokens.depth["z-index"].dropdown
sticky1100
tokens.depth["z-index"].sticky
banner1200
tokens.depth["z-index"].banner
overlay1300
tokens.depth["z-index"].overlay
modal1400
tokens.depth["z-index"].modal
popover1500
tokens.depth["z-index"].popover
skipLink1600
tokens.depth["z-index"].skipLink
toast1700
tokens.depth["z-index"].toast
tooltip1800
tokens.depth["z-index"].tooltip