Design tokens

The colour, typography, spacing, and other stylistic decisions as design tokens for consumption.

Spacing and sizing

Spacing

Spacing 0


Value: 0


Sass variable: $vf-spacing--0


CSS custom property: --vf-spacing--0

Spacing 50


Value: .125rem


Sass variable: $vf-spacing--50

Sass function: space(50)


CSS custom property: --vf-spacing--50

Spacing 100


Value: .25rem


Sass variable: $vf-spacing--100

Sass function: space(100)


CSS custom property: --vf-spacing--100

Spacing 200


Value: .5rem


Sass variable: $vf-spacing--200

Sass function: space(200)


CSS custom property: --vf-spacing--200

Spacing 400


Value: 1rem


Sass variable: $vf-spacing--400

Sass function: space(400)


CSS custom property: --vf-spacing--400

Spacing 500


Value: 1.25rem


Sass variable: $vf-spacing--500

Sass function: space(500)


CSS custom property: --vf-spacing--500

Spacing 600


Value: 1.5rem


Sass variable: $vf-spacing--600

Sass function: space(600)


CSS custom property: --vf-spacing--600

Spacing 800


Value: 2rem


Sass variable: $vf-spacing--800

Sass function: space(800)


CSS custom property: --vf-spacing--800

Spacing 1200


Value: 3rem


Sass variable: $vf-spacing--1200

Sass function: space(1200)


CSS custom property: --vf-spacing--1200

Spacing 1600


Value: 4rem


Sass variable: $vf-spacing--1600

Sass function: space(1600)


CSS custom property: --vf-spacing--1600

Breakpoint widths

Extra Small Breakpoint


Value: 360px


Sass variable: $vf-breakpoint--xs


CSS custom property: --vf-breakpoint--xs

Small Breakpoint


Value: 600px


Sass variable: $vf-breakpoint--sm


CSS custom property: --vf-breakpoint--sm

Regular Breakpoint


Value: 768px


Sass variable: $vf-breakpoint--md


CSS custom property: --vf-breakpoint--md

Large Breakpoint


Value: 1024px


Sass variable: $vf-breakpoint--lg


CSS custom property: --vf-breakpoint--lg

Extra Large Breakpoint


Value: 1280px


Sass variable: $vf-breakpoint--xl


CSS custom property: --vf-breakpoint--xl

Find an issue on this page? Propose a change or discuss it.