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 1.125rem
The quick brown fox jumps over the lazy dog.
$vds-heading-font-size-h5 1rem
The quick brown fox jumps over the lazy dog.
$vds-heading-font-size-h6 0.8125rem
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.75rem
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 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 1.75rem
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.25rem
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`

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-purple-magenta linear-gradient(to bottom right, #9F4CDF, #FF5483)
$vds-gradient-teal-purple linear-gradient(to bottom right, #02CCBA, #9F4CDF)
$vds-gradient-cerulean-teal linear-gradient(to bottom right, #02B3E4, #02CCBA)
$vds-gradient-silver-slate linear-gradient(to bottom right, #F9F9FA, #F7F7F8)
$vds-gradient-magenta-yellow linear-gradient(to bottom right, #FF5483, #ECC81A)
$vds-gradient-cerulean-purple linear-gradient(to bottom right, #02B3E4, #9F4CDF)
$vds-gradient-purple-cerulean linear-gradient(to bottom right, #DCBFF3, #A4E4F5)

Value Examples Usage
$vds-box-shadow-0 none
$vds-box-shadow-1 0 0 4px 0 rgba(17,22,26,0.16), 0 2px 4px 0 rgba(17,22,26,0.08), 0 4px 8px 0 rgba(17,22,26,0.08)
$vds-box-shadow-2 0 0 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.08)
$vds-box-shadow-3 0 4px 16px 4px rgba(17,22,26,0.16), 0 4px 8px 0 rgba(17,22,26,0.08), 0 16px 24px 0 rgba(17,22,26,0.08)
$vds-box-shadow-4 0 4px 24px 8px rgba(17,22,26,0.16), 0 8px 16px 0 rgba(17,22,26,0.08), 0 32px 40px 0 rgba(17,22,26,0.08)
$vds-box-shadow-5 0 8px 32px 8px rgba(17,22,26,0.16), 0 16px 24px 8px rgba(17,22,26,0.08), 0 64px 96px 8px rgba(17,22,26,0.08)

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