Design Tokens
Design tokens store design decisions so they can be accessed across different platforms.
Border Radius
Border radius tokens generate the baseline radius.
| Description | Token | Value |
|---|---|---|
Border Radius: noneSets border radius to zero. Used for square edges without rounding. |
var(--token-size-radius-none)
$token-size-radius-none
|
0
|
Border Radius: smSmall radius used for buttons, tags, inputs, and similar elements. |
var(--token-size-radius-sm)
$token-size-radius-sm
|
0.25rem
|
Border Radius: mdMedium radius should be used on larger containers. |
var(--token-size-radius-md)
$token-size-radius-md
|
0.5rem
|
Border Radius: lgLarge radius used to create circles. Note: unable to define percentages with token generation at this time. |
var(--token-size-radius-lg)
$token-size-radius-lg
|
20rem
|
Breakpoints
Breakpoint tokens are used to generate the flexbox grid and for media queries.
| Description | Token | Value |
|---|---|---|
Breakpoint: mobileSmallest breakpoint minimum width starting at 0px. |
var(--token-size-breakpoint-mobile)
$token-size-breakpoint-mobile
|
0 |
Breakpoint: tabletTablet sizing starts at 768px min-width. |
var(--token-size-breakpoint-tablet)
$token-size-breakpoint-tablet
|
48rem |
Breakpoint: desktopDesktop sizing starts at 1024px min-width. |
var(--token-size-breakpoint-desktop)
$token-size-breakpoint-desktop
|
64rem |
Breakpoint: widescreenWidescreen desktop sizing starts at 1280px min-width. |
var(--token-size-breakpoint-widescreen)
$token-size-breakpoint-widescreen
|
80rem |
Breakpoint: extrawideExtrawide desktop sizing starts at 1440px min-width. |
var(--token-size-breakpoint-extrawide)
$token-size-breakpoint-extrawide
|
90rem |
Font Size
Font size tokens control font sizes for components and text modifiers.
| Description | Token | Value | Example |
|---|---|---|---|
Font Size: xxsXX-small font size used as secondary text or when required due to space. |
var(--token-size-font-xxs)
$token-size-font-xxs
|
0.625rem | Aa |
Font Size: xsX-small font size used as secondary text or when required due to space. |
var(--token-size-font-xs)
$token-size-font-xs
|
0.75rem | Aa |
Font Size: smSmall font size used as secondary body text size. |
var(--token-size-font-sm)
$token-size-font-sm
|
0.875rem | Aa |
Font Size: mdMedium font size used as default body text size. |
var(--token-size-font-md)
$token-size-font-md
|
1rem | Aa |
Font Size: lgLarge font size used for sub headings. |
var(--token-size-font-lg)
$token-size-font-lg
|
1.25rem | Aa |
Font Size: xlX-large font size used for section headings. |
var(--token-size-font-xl)
$token-size-font-xl
|
2rem | Aa |
Font Size: xxlXX-large font size used a page headings. |
var(--token-size-font-xxl)
$token-size-font-xxl
|
2.5rem | Aa |
Font Size: xxxlXX-large font size used a page headings. |
var(--token-size-font-xxxl)
$token-size-font-xxxl
|
3rem | Aa |
Height
Height tokens control the height of standard elements. Including buttons and input fields.
Change with caution. These values impact the heights of common elements.
| Description | Token | Value | Example |
|---|---|---|---|
Height: noneSet base height to 0 pixels. |
var(--token-size-height-none)
$token-size-height-none
|
0 | |
Height: smSmall height used for small elements such as badges. |
var(--token-size-height-sm)
$token-size-height-sm
|
1.5rem | |
Height: mdMedium is the default component height. Used for inputs, buttons, and similar elements. |
var(--token-size-height-md)
$token-size-height-md
|
2rem | |
Height: lgLarge is the biggest component height. Used as modifiers for larger inputs, buttons, and similar elements. |
var(--token-size-height-lg)
$token-size-height-lg
|
2.5rem |
Spacing
Spacing tokens make up the baseline spacers used throughout the framework. Examples: margin and padding helper classes.
| Description | Token | Value | Example |
|---|---|---|---|
Space: 0 |
var(--token-size-space-0)
$token-size-space-0
|
0 | |
Space: xs |
var(--token-size-space-xs)
$token-size-space-xs
|
0.25rem | |
Space: sm |
var(--token-size-space-sm)
$token-size-space-sm
|
0.5rem | |
Space: md |
var(--token-size-space-md)
$token-size-space-md
|
1rem | |
Space: lg |
var(--token-size-space-lg)
$token-size-space-lg
|
1.5rem | |
Space: xl |
var(--token-size-space-xl)
$token-size-space-xl
|
3rem | |
Space: xxl |
var(--token-size-space-xxl)
$token-size-space-xxl
|
4rem | |
Space: xxxl |
var(--token-size-space-xxxl)
$token-size-space-xxxl
|
8rem |
UI Color Aliases
UI colors are aliases for base color values to simplify and create a common usage pattern.
| Description | Token | Example |
|---|---|---|
ui primary darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-darker)
$token-color-ui-primary-darker
Mapped to: {color.theme.blue.9.value}
|
|
ui primary darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-dark)
$token-color-ui-primary-dark
Mapped to: {color.theme.blue.7.value}
|
|
ui primary basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-base)
$token-color-ui-primary-base
Mapped to: {color.theme.blue.6.value}
|
|
ui primary lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-light)
$token-color-ui-primary-light
Mapped to: {color.theme.blue.5.value}
|
|
ui primary lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-lighter)
$token-color-ui-primary-lighter
Mapped to: {color.theme.blue.1.value}
|
|
ui primary lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-lightest)
$token-color-ui-primary-lightest
Mapped to: {color.theme.blue.0.value}
|
|
ui success darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-darker)
$token-color-ui-success-darker
Mapped to: {color.theme.green.9.value}
|
|
ui success darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-dark)
$token-color-ui-success-dark
Mapped to: {color.theme.green.7.value}
|
|
ui success basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-base)
$token-color-ui-success-base
Mapped to: {color.theme.green.6.value}
|
|
ui success lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-light)
$token-color-ui-success-light
Mapped to: {color.theme.green.5.value}
|
|
ui success lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-lighter)
$token-color-ui-success-lighter
Mapped to: {color.theme.green.1.value}
|
|
ui success lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-lightest)
$token-color-ui-success-lightest
Mapped to: {color.theme.green.0.value}
|
|
ui warning darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-darker)
$token-color-ui-warning-darker
Mapped to: {color.theme.yellow.9.value}
|
|
ui warning darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-dark)
$token-color-ui-warning-dark
Mapped to: {color.theme.yellow.7.value}
|
|
ui warning basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-base)
$token-color-ui-warning-base
Mapped to: {color.theme.yellow.6.value}
|
|
ui warning lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-light)
$token-color-ui-warning-light
Mapped to: {color.theme.yellow.5.value}
|
|
ui warning lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-lighter)
$token-color-ui-warning-lighter
Mapped to: {color.theme.yellow.1.value}
|
|
ui warning lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-lightest)
$token-color-ui-warning-lightest
Mapped to: {color.theme.yellow.0.value}
|
|
ui error darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-darker)
$token-color-ui-error-darker
Mapped to: {color.theme.red.9.value}
|
|
ui error darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-dark)
$token-color-ui-error-dark
Mapped to: {color.theme.red.7.value}
|
|
ui error basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-base)
$token-color-ui-error-base
Mapped to: {color.theme.red.6.value}
|
|
ui error lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-light)
$token-color-ui-error-light
Mapped to: {color.theme.red.5.value}
|
|
ui error lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-lighter)
$token-color-ui-error-lighter
Mapped to: {color.theme.red.1.value}
|
|
ui error lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-lightest)
$token-color-ui-error-lightest
Mapped to: {color.theme.red.0.value}
|
|
ui default darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-darker)
$token-color-ui-default-darker
Mapped to: {color.theme.gray.9.value}
|
|
ui default darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-dark)
$token-color-ui-default-dark
Mapped to: {color.theme.gray.7.value}
|
|
ui default basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-base)
$token-color-ui-default-base
Mapped to: {color.theme.gray.6.value}
|
|
ui default lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-light)
$token-color-ui-default-light
Mapped to: {color.theme.gray.5.value}
|
|
ui default lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-lighter)
$token-color-ui-default-lighter
Mapped to: {color.theme.gray.1.value}
|
|
ui default lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-lightest)
$token-color-ui-default-lightest
Mapped to: {color.theme.gray.0.value}
|
|
font darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-dark)
$token-color-font-dark
|
{color.theme.gray.9.value}
|
font basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-base)
$token-color-font-base
|
{color.theme.gray.8.value}
|
font lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-light)
$token-color-font-light
|
{color.theme.gray.7.value}
|
font lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-lighter)
$token-color-font-lighter
|
{color.theme.gray.6.value}
|
font whitePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-white)
$token-color-font-white
|
{color.base.white.value}
|
font errorPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-error)
$token-color-font-error
|
{color.ui.error.base.value}
|
font successPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-success)
$token-color-font-success
|
{color.ui.success.base.value}
|
font warningPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-warning)
$token-color-font-warning
|
{color.ui.warning.base.value}
|
Additional Colors
Base and theme colors used to generate the core UI colors are also available.
| Description | Token | Value | Example |
|---|---|---|---|
color base white |
var(--token-color-base-white)
$token-color-base-white
|
#ffffff | |
color base black |
var(--token-color-base-black)
$token-color-base-black
|
#000000 | |
color theme blue 0 |
var(--token-color-theme-blue-0)
$token-color-theme-blue-0
|
#e5f5fb | |
color theme blue 1 |
var(--token-color-theme-blue-1)
$token-color-theme-blue-1
|
#ccecf8 | |
color theme blue 2 |
var(--token-color-theme-blue-2)
$token-color-theme-blue-2
|
#99d9f1 | |
color theme blue 3 |
var(--token-color-theme-blue-3)
$token-color-theme-blue-3
|
#66c6ea | |
color theme blue 4 |
var(--token-color-theme-blue-4)
$token-color-theme-blue-4
|
#4cbce7 | |
color theme blue 5 |
var(--token-color-theme-blue-5)
$token-color-theme-blue-5
|
#19a9e0 | |
color theme blue 6 |
var(--token-color-theme-blue-6)
$token-color-theme-blue-6
|
#00a0dd | |
color theme blue 7 |
var(--token-color-theme-blue-7)
$token-color-theme-blue-7
|
#0090c6 | |
color theme blue 8 |
var(--token-color-theme-blue-8)
$token-color-theme-blue-8
|
#0080b0 | |
color theme blue 9 |
var(--token-color-theme-blue-9)
$token-color-theme-blue-9
|
#00709a | |
color theme indigo 0 |
var(--token-color-theme-indigo-0)
$token-color-theme-indigo-0
|
#edf2ff | |
color theme indigo 1 |
var(--token-color-theme-indigo-1)
$token-color-theme-indigo-1
|
#dbe4ff | |
color theme indigo 2 |
var(--token-color-theme-indigo-2)
$token-color-theme-indigo-2
|
#bac8ff | |
color theme indigo 3 |
var(--token-color-theme-indigo-3)
$token-color-theme-indigo-3
|
#91a7ff | |
color theme indigo 4 |
var(--token-color-theme-indigo-4)
$token-color-theme-indigo-4
|
#748ffc | |
color theme indigo 5 |
var(--token-color-theme-indigo-5)
$token-color-theme-indigo-5
|
#5c7cfa | |
color theme indigo 6 |
var(--token-color-theme-indigo-6)
$token-color-theme-indigo-6
|
#4c6ef5 | |
color theme indigo 7 |
var(--token-color-theme-indigo-7)
$token-color-theme-indigo-7
|
#4263eb | |
color theme indigo 8 |
var(--token-color-theme-indigo-8)
$token-color-theme-indigo-8
|
#3b5bdb | |
color theme indigo 9 |
var(--token-color-theme-indigo-9)
$token-color-theme-indigo-9
|
#364fc7 | |
color theme green 0 |
var(--token-color-theme-green-0)
$token-color-theme-green-0
|
#ebfbee | |
color theme green 1 |
var(--token-color-theme-green-1)
$token-color-theme-green-1
|
#d3f9d8 | |
color theme green 2 |
var(--token-color-theme-green-2)
$token-color-theme-green-2
|
#b2f2bb | |
color theme green 3 |
var(--token-color-theme-green-3)
$token-color-theme-green-3
|
#8ce99a | |
color theme green 4 |
var(--token-color-theme-green-4)
$token-color-theme-green-4
|
#69db7c | |
color theme green 5 |
var(--token-color-theme-green-5)
$token-color-theme-green-5
|
#51cf66 | |
color theme green 6 |
var(--token-color-theme-green-6)
$token-color-theme-green-6
|
#40c057 | |
color theme green 7 |
var(--token-color-theme-green-7)
$token-color-theme-green-7
|
#37b24d | |
color theme green 8 |
var(--token-color-theme-green-8)
$token-color-theme-green-8
|
#2f9e44 | |
color theme green 9 |
var(--token-color-theme-green-9)
$token-color-theme-green-9
|
#2b8a3e | |
color theme yellow 0 |
var(--token-color-theme-yellow-0)
$token-color-theme-yellow-0
|
#fff9db | |
color theme yellow 1 |
var(--token-color-theme-yellow-1)
$token-color-theme-yellow-1
|
#fff3bf | |
color theme yellow 2 |
var(--token-color-theme-yellow-2)
$token-color-theme-yellow-2
|
#ffec99 | |
color theme yellow 3 |
var(--token-color-theme-yellow-3)
$token-color-theme-yellow-3
|
#ffe066 | |
color theme yellow 4 |
var(--token-color-theme-yellow-4)
$token-color-theme-yellow-4
|
#ffd43b | |
color theme yellow 5 |
var(--token-color-theme-yellow-5)
$token-color-theme-yellow-5
|
#fcc419 | |
color theme yellow 6 |
var(--token-color-theme-yellow-6)
$token-color-theme-yellow-6
|
#fab005 | |
color theme yellow 7 |
var(--token-color-theme-yellow-7)
$token-color-theme-yellow-7
|
#f59f00 | |
color theme yellow 8 |
var(--token-color-theme-yellow-8)
$token-color-theme-yellow-8
|
#f08c00 | |
color theme yellow 9 |
var(--token-color-theme-yellow-9)
$token-color-theme-yellow-9
|
#e67700 | |
color theme red 0 |
var(--token-color-theme-red-0)
$token-color-theme-red-0
|
#fff5f5 | |
color theme red 1 |
var(--token-color-theme-red-1)
$token-color-theme-red-1
|
#ffe3e3 | |
color theme red 2 |
var(--token-color-theme-red-2)
$token-color-theme-red-2
|
#ffc9c9 | |
color theme red 3 |
var(--token-color-theme-red-3)
$token-color-theme-red-3
|
#ffa8a8 | |
color theme red 4 |
var(--token-color-theme-red-4)
$token-color-theme-red-4
|
#ff8787 | |
color theme red 5 |
var(--token-color-theme-red-5)
$token-color-theme-red-5
|
#ff6b6b | |
color theme red 6 |
var(--token-color-theme-red-6)
$token-color-theme-red-6
|
#fa5252 | |
color theme red 7 |
var(--token-color-theme-red-7)
$token-color-theme-red-7
|
#f03e3e | |
color theme red 8 |
var(--token-color-theme-red-8)
$token-color-theme-red-8
|
#e03131 | |
color theme red 9 |
var(--token-color-theme-red-9)
$token-color-theme-red-9
|
#c92a2a | |
color theme gray 0 |
var(--token-color-theme-gray-0)
$token-color-theme-gray-0
|
#f8f9fa | |
color theme gray 1 |
var(--token-color-theme-gray-1)
$token-color-theme-gray-1
|
#f1f3f5 | |
color theme gray 2 |
var(--token-color-theme-gray-2)
$token-color-theme-gray-2
|
#e9ecef | |
color theme gray 3 |
var(--token-color-theme-gray-3)
$token-color-theme-gray-3
|
#dee2e6 | |
color theme gray 4 |
var(--token-color-theme-gray-4)
$token-color-theme-gray-4
|
#ced4da | |
color theme gray 5 |
var(--token-color-theme-gray-5)
$token-color-theme-gray-5
|
#adb5bd | |
color theme gray 6 |
var(--token-color-theme-gray-6)
$token-color-theme-gray-6
|
#868e96 | |
color theme gray 7 |
var(--token-color-theme-gray-7)
$token-color-theme-gray-7
|
#495057 | |
color theme gray 8 |
var(--token-color-theme-gray-8)
$token-color-theme-gray-8
|
#343a40 | |
color theme gray 9 |
var(--token-color-theme-gray-9)
$token-color-theme-gray-9
|
#212529 |