Tokens List

Colors

Pallette

	vwui-color-black	#000000
	vwui-color-white	#FFFFFF
	vwui-color-teal	#00bcb4
	vwui-color-orange	#FF8200
	vwui-color-red	#DC3545
	vwui-color-green	#05CE7C
	vwui-color-blue	#3B8DDE
	vwui-color-magenta	#EE44BC
	vwui-color-yellow	#FDCD43
	vwui-color-neutral-20	#F2F2F3
	vwui-color-neutral-35	#CBCDCD
	vwui-color-neutral-50	#A4A7A8
	vwui-color-neutral-65	#7D8182
	vwui-color-neutral-80	#575A5B
	vwui-color-neutral-95	#323434

Brand Colors

	vwui-color-primary-1	#00000
	vwui-color-primary-2	#ffffff
	vwui-color-secondary-1	#00bcb4
	vwui-color-secondary-2	#FF8200

Feedback

	vwui-color-feedback-success	#05CE7C
	vwui-color-feedback-error	#DC3545
	vwui-color-feedback-info	#3B8DDE

Background

	vwui-color-background-primary-1	#000000
	vwui-color-background-primary-2	#FFFFFF
	vwui-color-background-neutral-20	#F2F2F3
	vwui-color-background-neutral-80	#575A5B
	vwui-color-background-secondary-1	#00BCB4

Text Color

	vwui-color-text-primary	#000000
	vwui-color-text-primary-on-dark	#FFFFFF
	vwui-color-text-secondary	#575A5B
	vwui-color-text-secondary-on-dark	#CBCDCD
	vwui-color-text-primary-on-accent-1	#FFFFFF

Heading Color

	vwui-color-heading-on-light	#000000
	vwui-color-heading-on-dark	#ffffff

Buttons

Primary Button

	vwui-button-color-border-primary	#000000
	vwui-button-color-text-primary	#FFFFFF
	vwui-button-color-background-primary	#000000
	vwui-button-color-border-primary-hover	#00bcb4
	vwui-button-color-background-primary-hover	#00bcb4
	vwui-button-color-text-primary-hover	#FFFFFF
	vwui-button-color-border-primary-on-dark	#FFFFFF
	vwui-button-color-text-primary-on-dark	#FFFFFF
	vwui-button-color-background-primary-on-dark	#000000
	vwui-button-color-border-primary-hover-on-dark	#FFFFFF
	vwui-button-color-background-primary-hover-on-dark	#FFFFFF
	vwui-button-color-text-primary-hover-on-dark	#000000

Secondary Button

	vwui-button-color-border-secondary	#000000
	vwui-button-color-text-secondary	#000000
	vwui-button-color-border-secondary-hover	#000000
	vwui-button-color-background-secondary	#FFFFFF
	vwui-button-color-background-secondary-hover	#000000
	vwui-button-color-text-secondary-hover	#FFFFFF

Font

Font Family

vwui-font-family-din

DIN

Font Sizes

vwui-font-size-62	10px
vwui-font-size-81	13px
vwui-font-size-87	14px
vwui-font-size-100	16px
vwui-font-size-112	18px
vwui-font-size-125	20px
vwui-font-size-150	24px
vwui-font-size-175	28px
vwui-font-size-225	36px
vwui-font-size-300	48px
vwui-font-size-325	52px
vwui-font-size-450	72px
vwui-font-size-575	92px

Font weight

vwui-font-weight-light	300
vwui-font-weight-regular	400
vwui-font-weight-medium	500

Font width

vwui-font-width-regular	regular
vwui-font-width-condensed	condensed

Letter Spacing

vwui-font-char-space-0	0em
vwui-font-char-space-1x	0.025em
vwui-font-char-space-2x	0.05em
vwui-font-char-space-3x	0.075em
vwui-font-char-space-extended	0.1em

Line Height

vwui-font-line-height-normal	1
vwui-font-line-height-1x	1.125
vwui-font-line-height-2x	1.25
vwui-font-line-height-4x	1.5
vwui-font-line-height-6x	1.75
vwui-font-line-height-16x	3
vwui-font-line-height-20x	3.5

Spacing

	vwui-space-quarter-x	2px
	vwui-space-half-x	4px
	vwui-space-one-x	8px
	vwui-space-one-and-a-half-x	12px
	vwui-space-two-x	16px
	vwui-space-three-x	24px
	vwui-space-four-x	32px
	vwui-space-five-x	40px
	vwui-space-six-x	48px
	vwui-space-eight-x	64px
	vwui-space-twelve-x	96px
	vwui-space-sixteenth-x	128px

Opacity

	vwui-opacity-75	0.75
	vwui-opacity-90	0.9

Animation

Easing

		vwui-animation-easing-smooth	cubic-bezier(0.25, 0.1, 0.25, 1)
		vwui-animation-easing-ease-out	cubic-bezier(0.04, 0.91, 0.58, 1);
		vwui-animation-easing-bounce-small	cubic-bezier(0.12, 1.11, 0.41, 1.1)
		vwui-animation-easing-bounce-large	cubic-bezier(0.36, 1.8, 0.28, 1.12)

Duration

		vwui-animation-duration-instant	0
		vwui-animation-duration-fast	0.15s
		vwui-animation-duration-normal	0.30s
		vwui-animation-duration-slow	0.60s

Layer

vwui-layer-bottom	-100
vwui-layer-default	0
vwui-layer-sticky	100
vwui-layer-dropdown	200
vwui-layer-overlay	300
vwui-layer-modal	400
vwui-layer-popup	500
vwui-layer-top	2147483739

Borders

Border width

	vwui-border-width-thin	1px
	vwui-border-width-normal	2px
	vwui-border-width-thick	5px

Border color

	vwui-border-color-on-light	#000000
	vwui-border-color-on-dark	#FFFFFF

Border Radius

	vwui-radius-sharp	0.25em
	vwui-radius-soft	0.5em
	vwui-radius-softer	1em
	vwui-radius-round	10em

Icon Sizes

	vwui-icon-size-small	24px
	vwui-icon-size-medium	36px
	vwui-icon-size-large	85px
	vwui-icon-size-x-large	100px

Font Styles

body-text-primary
	family	din
	size	16px
	weight	light
	width	normal
	Line Height	1.75
	letter Spacing	0.075em

body-text-large
	family	din
	size	18px
	weight	light
	width	normal
	Line Height	1.75
	letter Spacing	0.075em

vwui-heading-level-1
	family	din
	size	72px
	weight	medium
	width	condensed
	Line Height	1
	letter Spacing	0.05em

vwui-heading-level-2
	family	din
	size	48px
	weight	medium
	width	condensed
	Line Height	1.125
	letter Spacing	0.05em

vwui-heading-thin-level-2
	family	din
	size	48px
	weight	light
	width	condensed
	Line Height	1.125
	letter Spacing	0.05em

vwui-heading-level-3
	family	din
	size	36px
	weight	medium
	width	condensed
	Line Height	1.125
	letter Spacing	0.05em

vwui-heading-level-4
	family	din
	size	24px
	weight	medium
	width	condensed
	Line Height	1.125
	letter Spacing	0.05em

vwui-heading-level-5
	family	din
	size	20px
	weight	medium
	width	condensed
	Line Height	1.125
	letter Spacing	0.05em