Design tokens are the fundamental visual design attributes of a design system, abstracted into hierarchical, reusable variables. Tokens are applied in place of hard-coded values in order to maintain a scalable and consistent visual system for designing and developing UI.
| Value | Examples | Usage | |
|---|---|---|---|
$vds-color-cerulean-darker
|
#014052
|
||
$vds-color-cerulean-dark
|
#017A9B
|
||
$vds-color-cerulean
|
#02B3E4
|
||
$vds-color-cerulean-light
|
#53CBED
|
||
$vds-color-cerulean-lighter
|
#A4E4F5
|
||
$vds-color-cerulean-lightest
|
#F5FCFE
|
||
$vds-color-slate-darker
|
#11161A
|
||
$vds-color-slate-dark
|
#1F2932
|
||
$vds-color-slate
|
#2E3D49
|
||
$vds-color-slate-light
|
#6D7780
|
||
$vds-color-slate-lighter
|
#B4B9BD
|
||
$vds-color-slate-lightest
|
#F7F7F8
|
||
$vds-color-silver-darker
|
#242A2F
|
||
$vds-color-silver-dark
|
#454F58
|
||
$vds-color-silver
|
#657482
|
||
$vds-color-silver-light
|
#96A0AA
|
||
$vds-color-silver-lighter
|
#C8CDD2
|
||
$vds-color-silver-lightest
|
#F9F9FA
|
||
$vds-color-red-darker
|
#501212
|
||
$vds-color-red-dark
|
#962121
|
||
$vds-color-red
|
#DD3131
|
||
$vds-color-red-light
|
#E87373
|
||
$vds-color-red-lighter
|
#F3B5B5
|
||
$vds-color-red-lightest
|
#FBE6E6
|
||
$vds-color-orange-darker
|
#5C3F04
|
||
$vds-color-orange-dark
|
#9E6C07
|
||
$vds-color-orange
|
#FFAE0C
|
||
$vds-color-orange-light
|
#FFC85A
|
||
$vds-color-orange-lighter
|
#FFE2A8
|
||
$vds-color-orange-lightest
|
#FFF5E2
|
||
$vds-color-green-darker
|
#084627
|
||
$vds-color-green-dark
|
#0E8449
|
||
$vds-color-green
|
#15C26B
|
||
$vds-color-green-light
|
#60D69A
|
||
$vds-color-green-lighter
|
#ABE9CA
|
||
$vds-color-green-lightest
|
#E3F8ED
|
||
$vds-color-blue-darker
|
#0F2B3D
|
||
$vds-color-blue-dark
|
#1D5174
|
||
$vds-color-blue
|
#2A77AA
|
||
$vds-color-blue-light
|
#6EA3C5
|
||
$vds-color-blue-lighter
|
#B2CEE0
|
||
$vds-color-blue-lightest
|
#E5EFF5
|
||
$vds-color-purple-darker
|
#391B50
|
||
$vds-color-purple-dark
|
#6C3498
|
||
$vds-color-purple
|
#9F4CDF
|
||
$vds-color-purple-light
|
#BE85E9
|
||
$vds-color-purple-lighter
|
#DCBFF3
|
||
$vds-color-purple-lightest
|
#F3EAFB
|
||
$vds-color-yellow-darker
|
#554809
|
||
$vds-color-yellow-dark
|
#A88E12
|
||
$vds-color-yellow
|
#ECC81A
|
||
$vds-color-yellow-light
|
#F2DA63
|
||
$vds-color-yellow-lighter
|
#F8EBAD
|
||
$vds-color-yellow-lightest
|
#FDF8E4
|
||
$vds-color-teal-darker
|
#014943
|
||
$vds-color-teal-dark
|
#018377
|
||
$vds-color-teal
|
#02CCBA
|
||
$vds-color-teal-light
|
#53DCD0
|
||
$vds-color-teal-lighter
|
#A4EDE6
|
||
$vds-color-teal-lightest
|
#E1F9F7
|
||
$vds-color-magenta-darker
|
#5C1E2F
|
||
$vds-color-magenta-dark
|
#AD3959
|
||
$vds-color-magenta
|
#FF5483
|
||
$vds-color-magenta-light
|
#FF8BAB
|
||
$vds-color-magenta-lighter
|
#FFC1D2
|
||
$vds-color-magenta-lightest
|
#FFEAF0
|
||
$vds-color-white
|
#FFFFFF
|
||
$vds-color-black
|
#000709
|
| Value | Examples | Usage | |
|---|---|---|---|
$vds-spacing-none
|
0
|
||
$vds-spacing-half
|
0.25rem
|
||
$vds-spacing-1x
|
0.5rem
|
||
$vds-spacing-2x
|
1rem
|
||
$vds-spacing-3x
|
1.5rem
|
||
$vds-spacing-4x
|
2rem
|
||
$vds-spacing-6x
|
3rem
|
||
$vds-spacing-inline-half
|
0 0.25rem 0 0
|
Apply using the property: `margin` | |
$vds-spacing-inline-1x
|
0 0.5rem 0 0
|
Apply using the property: `margin` | |
$vds-spacing-inline-2x
|
0 1rem 0 0
|
Apply using the property: `margin` | |
$vds-spacing-inline-3x
|
0 1.5rem 0 0
|
Apply using the property: `margin` | |
$vds-spacing-inline-4x
|
0 2rem 0 0
|
Apply using the property: `margin` | |
$vds-spacing-inline-6x
|
0 3rem 0 0
|
Apply using the property: `margin` | |
$vds-spacing-inset-half
|
0.25rem 0.25rem 0.25rem 0.25rem
|
Apply using the property: `padding` | |
$vds-spacing-inset-1x
|
0.5rem 0.5rem 0.5rem 0.5rem
|
Apply using the property: `padding` | |
$vds-spacing-inset-2x
|
1rem 1rem 1rem 1rem
|
Apply using the property: `padding` | |
$vds-spacing-inset-3x
|
1.5rem 1.5rem 1.5rem 1.5rem
|
Apply using the property: `padding` | |
$vds-spacing-inset-4x
|
2rem 2rem 2rem 2rem
|
Apply using the property: `padding` | |
$vds-spacing-inset-6x
|
3rem 3rem 3rem 3rem
|
Apply using the property: `padding` | |
$vds-spacing-stack-half
|
0 0 0.25rem 0
|
Apply using the property: `margin` | |
$vds-spacing-stack-1x
|
0 0 0.5rem 0
|
Apply using the property: `margin` | |
$vds-spacing-stack-2x
|
0 0 1rem 0
|
Apply using the property: `margin` | |
$vds-spacing-stack-3x
|
0 0 1.5rem 0
|
Apply using the property: `margin` | |
$vds-spacing-stack-4x
|
0 0 2rem 0
|
Apply using the property: `margin` | |
$vds-spacing-stack-6x
|
0 0 3rem 0
|
Apply using the property: `margin` |
| Value | Examples | Usage | |
|---|---|---|---|
$vds-border-radius-none
|
0
|
||
$vds-border-radius-base
|
0.5rem
|
||
$vds-border-radius-secondary
|
0.25rem
|
||
$vds-border-radius-circle
|
50%
|
| Value | Examples | Usage | |
|---|---|---|---|
$vds-font-family-text
|
'Open Sans', sans-serif
|
The quick brown fox jumps over the lazy dog.
|
|
$vds-font-family-code
|
'Source Code Pro', monospace
|
The quick brown fox jumps over the lazy dog.
|
| Value | Examples | Usage | |
|---|---|---|---|
$vds-heading-font-size-h1
|
2.5rem
|
The quick brown fox jumps over the lazy dog.
|
|
$vds-heading-font-size-h2
|
2rem
|
The quick brown fox jumps over the lazy dog.
|
|
$vds-heading-font-size-h3
|
1.5rem
|
The quick brown fox jumps over the lazy dog.
|
|
$vds-heading-font-size-h4
|
1rem
|
The quick brown fox jumps over the lazy dog.
|
|
$vds-heading-font-size-h5
|
0.75rem
|
The quick brown fox jumps over the lazy dog.
|
|
$vds-heading-font-size-h6
|
0.625rem
|
The quick brown fox jumps over the lazy dog.
|
|
$vds-text-font-size
|
1rem
|
The quick brown fox jumps over the lazy dog.
|
Default size for body text |
$vds-text-font-size-sm
|
0.875rem
|
The quick brown fox jumps over the lazy dog.
|
|
$vds-text-font-size-xs
|
0.75rem
|
The quick brown fox jumps over the lazy dog.
|
|
$vds-quote-font-size
|
1.5rem
|
The quick brown fox jumps over the lazy dog.
|
Default size for quote |
| Value | Examples | Usage | |
|---|---|---|---|
$vds-heading-line-height-h1
|
4rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
|
$vds-heading-line-height-h2
|
3rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
|
$vds-heading-line-height-h3
|
2.5rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
|
$vds-heading-line-height-h4
|
2rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
|
$vds-heading-line-height-h5
|
1.5rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
|
$vds-heading-line-height-h6
|
1rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
|
$vds-text-line-height
|
2rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
|
$vds-text-line-height-sm
|
1.5rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
|
$vds-text-line-height-xs
|
1.5rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
|
$vds-quote-line-height
|
2.5rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
| Value | Examples | Usage | |
|---|---|---|---|
$vds-font-weight-light
|
300
|
The quick brown fox jumps over the lazy dog.
|
For `Open Sans` only |
$vds-font-weight-regular
|
400
|
The quick brown fox jumps over the lazy dog.
|
For `Open Sans` and `Source Code Pro` |
$vds-font-weight-semibold
|
600
|
The quick brown fox jumps over the lazy dog.
|
For `Open Sans` and `Source Code Pro` |
$vds-font-weight-bold
|
700
|
The quick brown fox jumps over the lazy dog.
|
For `Open Sans` and `Source Code Pro` |
$vds-font-weight-extrabold
|
800
|
The quick brown fox jumps over the lazy dog.
|
For `Open Sans` only |
| Value | Examples | Usage | |
|---|---|---|---|
$vds-text-max-width-sm
|
30rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nullam
rutrum eros sed convallis gravida. In
|
|
$vds-text-max-width-base
|
40rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nullam
rutrum eros sed convallis gravida. In
|
|
$vds-text-max-width-lg
|
50rem
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nullam
rutrum eros sed convallis gravida. In
|
| Value | Examples | Usage | |
|---|---|---|---|
$vds-text-color
|
#11161A
|
The quick brown fox jumps over the lazy dog. | |
$vds-text-color-error
|
#501212
|
The quick brown fox jumps over the lazy dog. | |
$vds-text-color-warning
|
#5C3F04
|
The quick brown fox jumps over the lazy dog. | |
$vds-text-color-success
|
#084627
|
The quick brown fox jumps over the lazy dog. | |
$vds-text-color-information
|
#0F2B3D
|
The quick brown fox jumps over the lazy dog. |
| Value | Examples | Usage | |
|---|---|---|---|
$vds-border-color-error
|
#DD3131
|
||
$vds-border-color-warning
|
#FFAE0C
|
||
$vds-border-color-success
|
#15C26B
|
||
$vds-border-color-information
|
#2A77AA
|
| Value | Examples | Usage | |
|---|---|---|---|
$vds-border-error
|
2px solid #DD3131
|
||
$vds-border-warning
|
2px solid #FFAE0C
|
||
$vds-border-success
|
2px solid #15C26B
|
||
$vds-border-information
|
2px solid #2A77AA
|
| Value | Examples | Usage | |
|---|---|---|---|
$vds-background-color-error
|
#FBE6E6
|
||
$vds-background-color-warning
|
#FFF5E2
|
||
$vds-background-color-success
|
#E3F8ED
|
||
$vds-background-color-information
|
#E5EFF5
|
| Value | Examples | Usage | |
|---|---|---|---|
$vds-gradient-silver-cerulean
|
linear-gradient(to bottom right, #F9F9FA, #F5FCFE)
|
||
$vds-gradient-silver-slate
|
linear-gradient(to bottom right, #F9F9FA, #F7F7F8)
|
||
$vds-gradient-purple-cerulean
|
linear-gradient(to bottom right, #DCBFF3, #A4E4F5)
|
Accessibility guidelines: use dark text for color contrast | |
$vds-gradient-purple-magenta
|
linear-gradient(to bottom right, #9F4CDF, #FF5483)
|
Accessibility guidelines: use dark text for color contrast | |
$vds-gradient-teal-purple
|
linear-gradient(to bottom right, #02CCBA, #9F4CDF)
|
Accessibility guidelines: use dark text for color contrast | |
$vds-gradient-cerulean-teal
|
linear-gradient(to bottom right, #02B3E4, #02CCBA)
|
Accessibility guidelines: use dark text for color contrast | |
$vds-gradient-magenta-yellow
|
linear-gradient(to bottom right, #FF5483, #ECC81A)
|
Accessibility guidelines: use dark text for color contrast | |
$vds-gradient-cerulean-purple
|
linear-gradient(to bottom right, #02B3E4, #9F4CDF)
|
Accessibility guidelines: use dark text for color contrast | |
$vds-gradient-purple-magenta-dark
|
linear-gradient(to bottom right, #6C3498, #AD3959)
|
Accessibility guidelines: use light text for color contrast | |
$vds-gradient-teal-purple-dark
|
linear-gradient(to bottom right, #018377, #6C3498)
|
Accessibility guidelines: use light text for color contrast | |
$vds-gradient-cerulean-teal-dark
|
linear-gradient(to bottom right, #017A9B, #018377)
|
Accessibility guidelines: use light text for color contrast | |
$vds-gradient-magenta-yellow-dark
|
linear-gradient(to bottom right, #AD3959, #A88E12)
|
Accessibility guidelines: use light text for color contrast | |
$vds-gradient-cerulean-purple-dark
|
linear-gradient(to bottom right, #017A9B, #6C3498)
|
Accessibility guidelines: use light text for color contrast |
| Value | Examples | Usage | |
|---|---|---|---|
$vds-box-shadow-0
|
none
|
||
$vds-box-shadow-1
|
0 2px 4px 0 rgba(17,22,26,0.16), 0 0 4px 0 rgba(17,22,26,0.08), 0 4px 8px 0 rgba(17,22,26,0.04)
|
||
$vds-box-shadow-2
|
0 4px 8px 0 rgba(17,22,26,0.16), 0 4px 8px 0 rgba(17,22,26,0.08), 0 8px 16px 0 rgba(17,22,26,0.04)
|
||
$vds-box-shadow-3
|
0 0 8px 0 rgba(17,22,26,0.06), 0 4px 16px 0 rgba(17,22,26,0.08), 0 8px 12px 0 rgba(17,22,26,0.06), 0 16px 24px 0 rgba(17,22,26,0.04)
|
||
$vds-box-shadow-4
|
0 4px 12px 0 rgba(17,22,26,0.06), 0 4px 24px 8px rgba(17,22,26,0.12), 0 8px 16px 0 rgba(17,22,26,0.06), 0 32px 40px 0 rgba(17,22,26,0.02)
|
||
$vds-box-shadow-5
|
0 4px 12px 0 rgba(0,0,0,0.08), 0 8px 32px 8px rgba(17,22,26,0.12), 0 16px 24px 8px rgba(17,22,26,0.06), 0 64px 48px 8px rgba(17,22,26,0.06)
|
| Value | Examples | Usage | |
|---|---|---|---|
$vds-base-duration
|
0.3s
|
||
$vds-base-timing
|
ease
|
||
$vds-transition-all
|
all 0.3s ease
|
| Value | Examples | Usage | |
|---|---|---|---|
$vds-breakpoint-xs
|
20rem
|
||
$vds-breakpoint-sm
|
30rem
|
||
$vds-breakpoint-md
|
48rem
|
||
$vds-breakpoint-lg
|
62rem
|
||
$vds-breakpoint-xl
|
73.75rem
|