font-size-sm | (category: fontSizes)

Token Value	Token Description
0.875rem	Usually used for labels and captions

font-size-base | (category: fontSizes)

Token Value	Token Description
1rem	Usually used for the body, links and buttons

font-size-lg | (category: fontSizes)

Token Value	Token Description
1.125rem	Usually used as level 3 headline

font-size-xl | (category: fontSizes)

Token Value	Token Description
1.25rem	Usually used as level 2 headline

font-size-2xl | (category: fontSizes)

Token Value	Token Description
1.75rem	Usually used as main headline

font-weight-normal | (category: fontWeights)

Token Value	Token Description
400	undefined

font-weight-medium | (category: fontWeights)

Token Value	Token Description
500	undefined

font-weight-semibold | (category: fontWeights)

Token Value	Token Description
600	undefined

font-weight-bold | (category: fontWeights)

Token Value	Token Description
700	undefined

line-height-sm | (category: lineHeights)

Token Value	Token Description
1.25rem	undefined

line-height-base | (category: lineHeights)

Token Value	Token Description
1.375rem	undefined

line-height-lg | (category: lineHeights)

Token Value	Token Description
1.5rem	undefined

letter-spacing-tighter | (category: letterSpacing)

Token Value	Token Description
-0.02rem	undefined

letter-spacing-tight | (category: letterSpacing)

Token Value	Token Description
-0.01375rem	undefined

letter-spacing-normal | (category: letterSpacing)

Token Value	Token Description
0	undefined

decoration-underline | (category: textDecoration)

Token Value	Token Description
underline	undefined

border-radius-xs | (category: borderRadius)

Token Value	Token Description
0.125rem	undefined

border-radius-s | (category: borderRadius)

Token Value	Token Description
0.25rem	undefined

border-radius-sm | (category: borderRadius)

Token Value	Token Description
0.5rem	undefined

border-radius-base | (category: borderRadius)

Token Value	Token Description
0.75rem	undefined

border-radius-l | (category: borderRadius)

Token Value	Token Description
1rem	undefined

border-radius-xl | (category: borderRadius)

Token Value	Token Description
1.25rem	undefined

border-radius-full-round | (category: borderRadius)

Token Value	Token Description
6249.9375rem	undefined

space-0 | (category: spacing)

Token Value	Token Description
0	undefined

space-2 | (category: spacing)

Token Value	Token Description
0.125rem	undefined

space-4 | (category: spacing)

Token Value	Token Description
0.25rem	undefined

space-8 | (category: spacing)

Token Value	Token Description
0.5rem	undefined

space-12 | (category: spacing)

Token Value	Token Description
0.75rem	undefined

space-16 | (category: spacing)

Token Value	Token Description
1rem	undefined

space-20 | (category: spacing)

Token Value	Token Description
1.25rem	undefined

space-24 | (category: spacing)

Token Value	Token Description
1.5rem	undefined

space-32 | (category: spacing)

Token Value	Token Description
2rem	undefined

decoration-none | (category: textDecoration)

Token Value	Token Description
none	undefined

border-width-0 | (category: borderWidth)

Token Value	Token Description
0	undefined

font-family-text | (category: fontFamilies)

Token Value	Token Description
'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif	undefined

font-family-code | (category: fontFamilies)

Token Value	Token Description
'Fira Mono', Courier, monospace	undefined

font-family-text-japanese | (category: fontFamilies)

Token Value	Token Description
'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif	undefined

font-family-text-korean | (category: fontFamilies)

Token Value	Token Description
'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif	undefined

font-family-text-chinese-traditional | (category: fontFamilies)

Token Value	Token Description
'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif	undefined

font-family-text-chinese-simplified | (category: fontFamilies)

Token Value	Token Description
'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif	undefined

font-family-text-arabic | (category: fontFamilies)

Token Value	Token Description
-apple-system, system-ui	undefined

z-0 | (category: other)

Token Value	Token Description
0	undefined

z-10 | (category: other)

Token Value	Token Description
10	undefined

z-20 | (category: other)

Token Value	Token Description
20	undefined

z-30 | (category: other)

Token Value	Token Description
30	undefined

z-40 | (category: other)

Token Value	Token Description
40	undefined

z-50 | (category: other)

Token Value	Token Description
50	undefined

z-auto | (category: other)

Token Value	Token Description
auto	undefined

border-width-default | (category: borderWidth)

Token Value	Token Description
0.0625rem	undefined

line-height-xl | (category: lineHeights)

Token Value	Token Description
1.625rem	undefined

line-height-2xl | (category: lineHeights)

Token Value	Token Description
2.25rem	undefined

core-gray-10 | (category: color)

Token Value	Token Description
rgba(42, 43, 45, 1)	undefined

core-gray-11 | (category: color)

Token Value	Token Description
rgba(35, 36, 38, 1)	undefined

core-gray-12 | (category: color)

Token Value	Token Description
rgba(25, 26, 28, 1)	undefined

core-gray-black | (category: color)

Token Value	Token Description
rgba(0, 0, 0, 1)	undefined

core-gray-09 | (category: color)

Token Value	Token Description
rgba(50, 51, 53, 1)	undefined

core-gray-08 | (category: color)

Token Value	Token Description
rgba(58, 59, 61, 1)	undefined

core-gray-07 | (category: color)

Token Value	Token Description
rgba(79, 80, 84, 1)	undefined

core-gray-06 | (category: color)

Token Value	Token Description
rgba(109, 110, 114, 1)	undefined

core-gray-05 | (category: color)

Token Value	Token Description
rgba(161, 162, 165, 1)	undefined

core-gray-04 | (category: color)

Token Value	Token Description
rgba(204, 205, 209, 1)	undefined

core-gray-03 | (category: color)

Token Value	Token Description
rgba(221, 222, 224, 1)	undefined

core-gray-02 | (category: color)

Token Value	Token Description
rgba(232, 233, 235, 1)	undefined

core-gray-01 | (category: color)

Token Value	Token Description
rgba(242, 243, 245, 1)	undefined

core-gray-white | (category: color)

Token Value	Token Description
rgba(255, 255, 255, 1)	undefined

core-customer-color-light-1-hovered | (category: color)

Token Value	Token Description
rgba(38, 230, 185, 1)	undefined

core-customer-color-light-1-default | (category: color)

Token Value	Token Description
rgba(0, 226, 173, 1)	undefined

core-customer-color-light-1-pressed | (category: color)

Token Value	Token Description
rgba(77, 235, 198, 1)	undefined

core-customer-color-light-2-default | (category: color)

Token Value	Token Description
rgba(0, 38, 255, 1)	undefined

core-customer-color-light-2-hovered | (category: color)

Token Value	Token Description
rgba(38, 71, 255, 1)	undefined

core-customer-color-light-2-pressed | (category: color)

Token Value	Token Description
rgba(77, 103, 255, 1)	undefined

core-customer-color-light-3-default | (category: color)

Token Value	Token Description
rgba(0, 61, 175, 1)	undefined

core-customer-color-light-3-hovered | (category: color)

Token Value	Token Description
rgba(38, 90, 187, 1)	undefined

core-customer-color-light-3-pressed | (category: color)

Token Value	Token Description
rgba(77, 119, 199, 1)	undefined

core-on-customer-color-light-1 | (category: color)

Token Value	Token Description
rgba(0, 13, 87, 1)	undefined

core-on-customer-color-light-2 | (category: color)

Token Value	Token Description
rgba(190, 255, 240, 1)	undefined

core-customer-color-dark-1-default | (category: color)

Token Value	Token Description
rgba(142, 235, 226, 1)	undefined

core-customer-color-dark-1-hovered | (category: color)

Token Value	Token Description
rgba(121, 200, 192, 1)	undefined

core-customer-color-dark-1-pressed | (category: color)

Token Value	Token Description
rgba(99, 164, 158, 1)	undefined

core-customer-color-dark-2-default | (category: color)

Token Value	Token Description
rgba(115, 148, 211, 1)	undefined

core-customer-color-dark-2-hovered | (category: color)

Token Value	Token Description
rgba(98, 126, 179, 1)	undefined

core-customer-color-dark-2-pressed | (category: color)

Token Value	Token Description
rgba(80, 104, 148, 1)	undefined

core-customer-color-dark-3-default | (category: color)

Token Value	Token Description
rgba(115, 148, 211, 1)	undefined

core-customer-color-dark-3-hovered | (category: color)

Token Value	Token Description
rgba(98, 126, 179, 1)	undefined

core-customer-color-dark-3-pressed | (category: color)

Token Value	Token Description
rgba(80, 104, 148, 1)	undefined

core-on-customer-color-dark-1 | (category: color)

Token Value	Token Description
rgba(0, 0, 0, 1)	undefined

core-on-customer-color-dark-2 | (category: color)

Token Value	Token Description
rgba(0, 0, 0, 1)	undefined

core-status-light-critical-default | (category: color)

Token Value	Token Description
rgba(213, 6, 54, 1)	undefined

core-status-light-critical-subdued | (category: color)

Token Value	Token Description
rgba(252, 231, 237, 1)	undefined

core-status-light-success-default | (category: color)

Token Value	Token Description
rgba(8, 129, 8, 1)	undefined

core-status-light-success-subdued | (category: color)

Token Value	Token Description
rgba(220, 247, 220, 1)	undefined

core-status-light-info-default | (category: color)

Token Value	Token Description
rgba(20, 90, 245, 1)	undefined

core-status-light-info-subdued | (category: color)

Token Value	Token Description
rgba(230, 241, 255, 1)	undefined

core-status-light-warning-strong | (category: color)

Token Value	Token Description
rgba(147, 88, 6, 1)	undefined

core-status-light-warning-default | (category: color)

Token Value	Token Description
rgba(243, 183, 3, 1)	undefined

core-status-light-warning-subdued | (category: color)

Token Value	Token Description
rgba(250, 241, 200, 1)	undefined

core-status-dark-info-default | (category: color)

Token Value	Token Description
rgba(115, 167, 242, 1)	undefined

core-status-dark-info-subdued | (category: color)

Token Value	Token Description
rgba(16, 38, 72, 1)	undefined

core-status-dark-success-default | (category: color)

Token Value	Token Description
rgba(104, 196, 104, 1)	undefined

core-status-dark-success-subdued | (category: color)

Token Value	Token Description
rgba(18, 58, 18, 1)	undefined

core-status-dark-warning-default | (category: color)

Token Value	Token Description
rgba(249, 199, 99, 1)	undefined

core-status-dark-warning-subdued | (category: color)

Token Value	Token Description
rgba(57, 46, 17, 1)	undefined

core-status-dark-critical-default | (category: color)

Token Value	Token Description
rgba(251, 100, 134, 1)	undefined

core-status-dark-critical-subdued | (category: color)

Token Value	Token Description
rgba(71, 14, 27, 1)	undefined

core-decorative-light-1-default | (category: color)

Token Value	Token Description
rgba(255, 87, 77, 1)	undefined

core-decorative-light-2-default | (category: color)

Token Value	Token Description
rgba(255, 131, 64, 1)	undefined

core-decorative-light-3-default | (category: color)

Token Value	Token Description
rgba(246, 196, 49, 1)	undefined

core-decorative-light-4-default | (category: color)

Token Value	Token Description
rgba(235, 132, 161, 1)	undefined

core-decorative-light-5-default | (category: color)

Token Value	Token Description
rgba(150, 50, 250, 1)	undefined

core-decorative-light-6-default | (category: color)

Token Value	Token Description
rgba(96, 178, 156, 1)	undefined

core-decorative-light-7-default | (category: color)

Token Value	Token Description
rgba(51, 135, 255, 1)	undefined

core-decorative-dark-1-default | (category: color)

Token Value	Token Description
rgba(255, 110, 102, 1)	undefined

core-decorative-dark-2-default | (category: color)

Token Value	Token Description
rgba(255, 164, 115, 1)	undefined

core-decorative-dark-3-default | (category: color)

Token Value	Token Description
rgba(249, 218, 122, 1)	undefined

core-decorative-dark-4-default | (category: color)

Token Value	Token Description
rgba(235, 132, 161, 1)	undefined

core-decorative-dark-5-default | (category: color)

Token Value	Token Description
rgba(188, 125, 252, 1)	undefined

core-decorative-dark-6-default | (category: color)

Token Value	Token Description
rgba(148, 203, 188, 1)	undefined

core-decorative-dark-7-default | (category: color)

Token Value	Token Description
rgba(102, 166, 255, 1)	undefined

background-default | (category: color)

Token Value	Token Description
{core-gray-white}	Usually used for the page background and elements that should not elevate from the background.

background-hovered | (category: color)

Token Value	Token Description
{core-gray-01}	Used if a component with “Background/Default” has a hovered state.

background-pressed | (category: color)

Token Value	Token Description
{core-gray-02}	Used if a component with “Background/Default” has a pressed state.

surface-default | (category: color)

Token Value	Token Description
{core-gray-white}	Usually used for containers that need to be elevated.

surface-hovered | (category: color)

Token Value	Token Description
{core-gray-01}	Used if a component with “Surface/Default” has a hovered state.

surface-pressed | (category: color)

Token Value	Token Description
{core-gray-02}	Used if a component with “Surface/Default” has a pressed state.

surface-overlay-default | (category: color)

Token Value	Token Description
{core-gray-white}	Usually used for containers that need to be more elevated.

surface-overlay-hovered | (category: color)

Token Value	Token Description
{core-gray-01}	Used if a component with “Surface Overlay/Default” has a hovered state.

surface-overlay-pressed | (category: color)

Token Value	Token Description
{core-gray-02}	Used if a component with “Surface Overlay/Default” has a pressed state.

surface-raised-default | (category: color)

Token Value	Token Description
{core-gray-01}	Usually used for elements that need contrast on surfaces or background

surface-raised-hovered | (category: color)

Token Value	Token Description
{core-gray-02}	Used if a component with “On Surface/Default” has a hovered state.

surface-raised-pressed | (category: color)

Token Value	Token Description
{core-gray-03}	Used if a component with “On Surface/Default” has a pressed state.

surface-highlight-default | (category: color)

Token Value	Token Description
{core-customer-color-light-2-default}	Usually used for containers that need to be highlighted.

surface-highlight-hovered | (category: color)

Token Value	Token Description
{core-customer-color-light-2-hovered}	Used if a component with “Surface Highlight/Default” has a hovered state.

surface-highlight-pressed | (category: color)

Token Value	Token Description
{core-customer-color-light-2-pressed}	Used if a component with “Surface Highlight/Default” has a pressed state.

on-surface-highlight-default | (category: color)

Token Value	Token Description
{core-customer-color-light-2-hovered}	Used to place containers on “Surface Highlight/Default”.

surface-critical-default | (category: color)

Token Value	Token Description
{core-status-light-critical-default}	Used as a background for critical surfaces.

surface-critical-subdued | (category: color)

Token Value	Token Description
{core-status-light-critical-subdued}	Used for low prio critical background.

surface-warning-default | (category: color)

Token Value	Token Description
{core-status-light-warning-default}	Used as a background for warning surfaces.

surface-warning-subdued | (category: color)

Token Value	Token Description
{core-status-light-warning-subdued}	Used for low prio warning background.

surface-success-default | (category: color)

Token Value	Token Description
{core-status-light-success-default}	Used as a background for success surfaces.

surface-success-subdued | (category: color)

Token Value	Token Description
{core-status-light-success-subdued}	Used for low prio success background.

surface-info-default | (category: color)

Token Value	Token Description
{core-status-light-info-default}	Used as a background for info surfaces.

surface-info-subdued | (category: color)

Token Value	Token Description
{core-status-light-info-subdued}	Used for low prio info background.

surface-neutral-default | (category: color)

Token Value	Token Description
{core-gray-08}	Used as a background for neutral surfaces.

surface-neutral-subdued | (category: color)

Token Value	Token Description
{core-gray-01}	Used for low prio neutral background.

surface-on-image-default | (category: color)

Token Value	Token Description
rgba(0, 0, 0, 0.6)	Usually used for containers on images

border-strong | (category: color)

Token Value	Token Description
{core-gray-04}	Usually used for high emphasis borders.

border-default | (category: color)

Token Value	Token Description
{core-gray-02}	Usually used for low emphasis borders and espacially divider elements.

border-highlight | (category: color)

Token Value	Token Description
{core-customer-color-light-3-default}	Used as border color on containers that need to be highlighted (e.g. form fields).

border-critical | (category: color)

Token Value	Token Description
{core-status-light-critical-default}	Usally used as an border on critical components.

border-success | (category: color)

Token Value	Token Description
{core-status-light-success-default}	Usally used as an border on success components.

border-warning | (category: color)

Token Value	Token Description
{core-status-light-warning-strong}	Usally used as an border on warning components.

border-info | (category: color)

Token Value	Token Description
{core-status-light-info-default}	Usally used as an border on info components.

border-on-highlight | (category: color)

Token Value	Token Description
rgba(190, 255, 240, 0.2)	Used as border color on containers that have an highlight surface

text-default | (category: color)

Token Value	Token Description
{core-gray-12}	Used for high emphasis text.

text-subdued | (category: color)

Token Value	Token Description
{core-gray-06}	Used for low emphasis text.

text-disabled | (category: color)

Token Value	Token Description
{core-gray-04}	Used if a text element is disabled.

text-highlight | (category: color)

Token Value	Token Description
{core-customer-color-light-3-default}	Used to highlight text.

text-critical | (category: color)

Token Value	Token Description
{core-status-light-critical-default}	Used as critical text color

text-success | (category: color)

Token Value	Token Description
{core-status-light-success-default}	Used as success text color

text-warning | (category: color)

Token Value	Token Description
{core-status-light-warning-strong}	Used as warning text color

text-info | (category: color)

Token Value	Token Description
{core-status-light-info-default}	Used as info text color

text-on-action-primary | (category: color)

Token Value	Token Description
{core-on-customer-color-light-1}	Used as a text color on containers with action primary color.

text-on-surface-highlight | (category: color)

Token Value	Token Description
{core-on-customer-color-light-2}	Used as text color on containers with highlight color.

text-on-status | (category: color)

Token Value	Token Description
{core-gray-white}	Used as a text color on containers with a default status color except on warning.

text-on-image | (category: color)

Token Value	Token Description
{core-gray-white}	Used as a text color on “Surface On Image/Default”.

icon-strong | (category: color)

Token Value	Token Description
{core-gray-12}	Used for high emphasis icons.

icon-default | (category: color)

Token Value	Token Description
{core-gray-06}	Used for low emphasis icons.

icon-disabled | (category: color)

Token Value	Token Description
{core-gray-04}	Used if a icon element is disabled.

icon-highlight | (category: color)

Token Value	Token Description
{core-customer-color-light-3-default}	Used to highlight icons.

icon-critical | (category: color)

Token Value	Token Description
{core-status-light-critical-default}	Used as critical icon color

icon-success | (category: color)

Token Value	Token Description
{core-status-light-success-default}	Used as success icon color

icon-warning | (category: color)

Token Value	Token Description
{core-status-light-warning-strong}	Used as warning icon color

icon-info | (category: color)

Token Value	Token Description
{core-status-light-info-default}	Used as info icon color

icon-on-action-primary | (category: color)

Token Value	Token Description
{core-on-customer-color-light-1}	Used as a icon color on containers with action primary color.

icon-on-surface-highlight | (category: color)

Token Value	Token Description
{core-on-customer-color-light-2}	Used as icon color on containers with highlight color.

icon-on-status | (category: color)

Token Value	Token Description
{core-gray-white}	Used as a icon color on containers with a default status color except on warning.

icon-on-image | (category: color)

Token Value	Token Description
{core-gray-white}	Used as a icon color on “Surface On Image/Default”.

action-primary-default | (category: color)

Token Value	Token Description
{core-customer-color-light-1-default}	Used for containers that are high emphasis action elements.

action-primary-hovered | (category: color)

Token Value	Token Description
{core-customer-color-light-1-hovered}	Used if a component with “Action Primary/Default” has a hovered state.

action-primary-pressed | (category: color)

Token Value	Token Description
{core-customer-color-light-1-pressed}	Used if a component with “Action Primary/Default” has a pressed state.

action-primary-disabled | (category: color)

Token Value	Token Description
{core-gray-01}	Used if a component with “Action Primary/Default” has a disabled state.

action-neutral-default | (category: color)

Token Value	Token Description
{core-gray-01}	Used for containers that are low emphasis action elements.

action-neutral-hovered | (category: color)

Token Value	Token Description
{core-gray-02}	Used if a component with “Action Neutral/Default” has a hovered state.

action-neutral-pressed | (category: color)

Token Value	Token Description
{core-gray-03}	Used if a component with “Action Neutral/Default” has a pressed state.

action-neutral-disabled | (category: color)

Token Value	Token Description
{core-gray-01}	Used if a component with “Action Neutral/Default” has a disabled state.

interactive-primary-default | (category: color)

Token Value	Token Description
rgba(0, 61, 175, 1)	Used for icon and text that are high emphasis interactive elements.

interactive-primary-hovered | (category: color)

Token Value	Token Description
{core-customer-color-light-3-hovered}	Used if a component with “Interactive Primary/Default” has a hovered state.

interactive-primary-pressed | (category: color)

Token Value	Token Description
rgba(77, 119, 199, 1)	Used if a component with “Interactive Primary/Default” has a pressed state.

interactive-primary-disabled | (category: color)

Token Value	Token Description
rgba(204, 205, 209, 1)	Used if a component with “Interactive Primary/Default” has a disabled state.

interactive-neutral-default | (category: color)

Token Value	Token Description
{core-gray-06}	Used for icon and text that are low emphasis interactive elements.

interactive-neutral-hovered | (category: color)

Token Value	Token Description
{core-gray-05}	Used if a component with “Interactive Neutral/Default” has a hovered state.

interactive-neutral-pressed | (category: color)

Token Value	Token Description
{core-gray-05}	Used if a component with “Interactive Neutral/Default” has a pressed state.

interactive-neutral-disabled | (category: color)

Token Value	Token Description
{core-gray-04}	Used if a component with “Interactive Neutral/Default” has a disabled state.

focus-default | (category: color)

Token Value	Token Description
{core-customer-color-light-3-default}	undefined

decorative-1-default | (category: color)

Token Value	Token Description
{core-decorative-light-1-default}	Used as a decorative color.

decorative-2-default | (category: color)

Token Value	Token Description
{core-decorative-light-2-default}	Used as a decorative color.

decorative-3-default | (category: color)

Token Value	Token Description
{core-decorative-light-3-default}	Used as a decorative color.

decorative-4-default | (category: color)

Token Value	Token Description
{core-decorative-light-4-default}	Used as a decorative color.

decorative-5-default | (category: color)

Token Value	Token Description
{core-decorative-light-5-default}	Used as a decorative color.

decorative-6-default | (category: color)

Token Value	Token Description
{core-decorative-light-6-default}	Used as a decorative color.

decorative-7-default | (category: color)

Token Value	Token Description
{core-decorative-light-7-default}	Used as a decorative color.