Introduction
The look and feel of a website or app depends on styling decisions, such as typography, color, spacing, shadows. Maintaining a unified look and feel across multiple products, platforms, or apps is difficult when depending on only hard-coded values. This is where design tokens step in.
Design tokens are the smallest parts of a design system. They package foundational design decisions (typography, color, spacing, shadows) into reusable, abstracted variables. In this way, tokens are a centralized form of information sharing. Instead of using hard-coded font sizes or hex values across multiple experiences, those values are abstracted into a token. The token's key value pair is housed in a housed in a versioned package, making updates and changes quick and easy.
Token list
Tokens are available for Sass and CSS. Sass is the primary syntax for tokens.
Some tokens, such as Sass functions and mixins, are not available in other syntaxes. We highly recommend that you use Sass.
| Example | Sass | CSS |
|---|---|---|
$border-color-action |
--border-color-action |
|
$border-color-assertive |
--border-color-assertive |
|
$border-color-error |
--border-color-error |
|
$border-color-ghost |
--border-color-ghost |
|
$border-color-subtle |
--border-color-subtle |
|
$border-color-success |
--border-color-success |
|
$border-color-warning |
--border-color-warning |
|
$border-radius-circle |
--border-radius-circle |
|
$border-radius-sm |
--border-radius-sm |
|
$border-width-xxs |
--border-width-xxs |
|
$border-width-xs |
--border-width-xs |
|
$border-width-sm |
--border-width-sm |
|
 |
$breakpoint-sm-min |
--breakpoint-sm-min |
 |
$breakpoint-md-min |
--breakpoint-md-min |
 |
$breakpoint-lg-min |
--breakpoint-lg-min |
 |
$breakpoint-xl-min |
--breakpoint-xl-min |
 |
$breakpoint-xxl-min |
--breakpoint-xxl-min |
 |
--app-width |
--app-width |
$brand-primary |
--brand-primary |
|
$neutral-00 |
--neutral-00 |
|
$neutral-20 |
--neutral-20 |
|
$neutral-40 |
--neutral-40 |
|
$neutral-60 |
--neutral-60 |
|
$neutral-80 |
--neutral-80 |
|
$neutral-95 |
--neutral-95 |
|
$neutral-100 |
--neutral-100 |
|
$action-primary-10 |
--action-primary-10 |
|
$action-primary-20 |
--action-primary-20 |
|
$action-primary-40 |
--action-primary-40 |
|
$action-primary-60 |
--action-primary-60 |
|
$action-primary-80 |
--action-primary-80 |
|
$action-primary-95 |
--action-primary-95 |
|
$action-primary-97 |
--action-primary-97 |
|
$accent-primary-20 |
--accent-primary-20 |
|
$accent-primary-30 |
--accent-primary-30 |
|
$accent-primary-40 |
--accent-primary-40 |
|
$accent-primary-60 |
--accent-primary-60 |
|
$accent-primary-80 |
--accent-primary-80 |
|
$accent-primary-95 |
--accent-primary-95 |
|
$accent-secondary-20 |
--accent-secondary-20 |
|
$accent-secondary-40 |
--accent-secondary-40 |
|
$accent-secondary-60 |
--accent-secondary-60 |
|
$accent-secondary-80 |
--accent-secondary-80 |
|
$accent-secondary-95 |
--accent-secondary-95 |
|
$feedback-success-20 |
--feedback-success-20 |
|
$feedback-success-40 |
--feedback-success-40 |
|
$feedback-success-60 |
--feedback-success-60 |
|
$feedback-success-80 |
--feedback-success-80 |
|
$feedback-success-95 |
--feedback-success-95 |
|
$feedback-warning-20 |
--feedback-warning-20 |
|
$feedback-warning-40 |
--feedback-warning-40 |
|
$feedback-warning-60 |
--feedback-warning-60 |
|
$feedback-warning-80 |
--feedback-warning-80 |
|
$feedback-warning-95 |
--feedback-warning-95 |
|
$feedback-error-20 |
--feedback-error-20 |
|
$feedback-error-40 |
--feedback-error-40 |
|
$feedback-error-60 |
--feedback-error-60 |
|
$feedback-error-80 |
--feedback-error-80 |
|
$feedback-error-95 |
--feedback-error-95 |
|
$gradient-brand |
--gradient-brand |
|
$gradient-primary |
--gradient-primary |
|
$gradient-secondary |
--gradient-secondary |
|
$gradient-accent |
--gradient-accent |
|
$gradient-assertive |
--gradient-assertive |
|
$gradient-subtle |
--gradient-subtle |
|
$box-shadow-primary |
--box-shadow-primary |
|
$box-shadow-secondary |
--box-shadow-secondary |
|
$box-shadow-tertiary |
--box-shadow-tertiary |
|
 |
$size-icon-decorative |
--size-icon-decorative |
| Not applicable | $font-family-base-regular |
--font-family-base-regular |
| Not applicable | $font-family-base-heavy |
--font-family-base-heavy |
| Not applicable | $font-weight-regular |
--font-weight-regular |
| Not applicable | $font-weight-heavy |
--font-weight-heavy |
Anatomy |
$letter-spacing-increase |
--letter-spacing-increase |
@include focus-default |
Not available | |
@include focus-default-inset |
Not available | |
@include focus-ghost |
Not available | |
@include focus-ghost-inset |
Not available | |
@include focus-readonly |
Not available | |
@include focus-invalid |
Not available | |
@include animated-gradient-brand |
Not available | |
@include animated-gradient-primary |
Not available | |
@include animated-gradient-secondary |
Not available | |
@include animated-gradient-subtle |
Not available | |
@include border-gradient-accent |
Not available | |
space(-xs) |
--space-negative-xs |
|
space(-xxs) |
--space-negative-xxs |
|
space(xxs) |
--space-xxs |
|
space(xs) |
--space-xs |
|
space(sm) |
--space-sm |
|
space(md) |
--space-md |
|
space(lg) |
--space-lg |
|
space(2x) |
--space-2x |
|
space(3x) |
--space-3x |
|
space(4x) |
--space-4x |
|
space(6x) |
--space-6x |
|
space(8x) |
--space-8x |
|
space(12x) |
--space-12x |
|
space(15x) |
--space-15x |
|
@include font-size($fs-h1) |
--fs-h1 |
|
@include font-size($fs-h2) |
--fs-h2 |
|
@include font-size($fs-h3) |
--fs-h3 |
|
@include font-size($fs-h4) |
--fs-h4 |
|
@include font-size($fs-h5) |
--fs-h5 |
|
@include font-size($fs-h6) |
--fs-h6 |
|
@include font-size($fs-display) |
--fs-display |
|
@include font-size($fs-body-assertive) |
--fs-body-assertive |
|
| A | @include font-size($fs-body) |
--fs-body |
@include font-size($fs-body-subtle) |
--fs-body-subtle |
|
@include font-size($fs-small) |
--fs-small |
|
| Regular | @include font-family-base-regular |
Not available |
@include font-family-base-heavy |
Not available | |
| Not applicable | @include visually-hidden |
Not available |
@include decorative-bar |
Not available |
Web fonts
Web fonts are included in the tokens npm package. Remove the web font files in your platform wherever you’re importing the tokens package.
Don’t remove web font files from sections of your codebase that are incompatible with the tokens package.