| corner-radius-0 |
0px |
0px |
No |
- |
- |
| corner-radius-75 |
3px |
3px |
No |
- |
- |
| corner-radius-100 |
4px |
4px |
No |
- |
- |
| corner-radius-200 |
5px |
5px |
No |
- |
- |
| corner-radius-300 |
6px |
6px |
No |
- |
- |
| corner-radius-400 |
7px |
7px |
No |
- |
- |
| corner-radius-500 |
8px |
8px |
No |
- |
- |
| corner-radius-600 |
9px |
9px |
No |
- |
- |
| corner-radius-700 |
10px |
10px |
No |
- |
- |
| corner-radius-800 |
16px |
16px |
No |
- |
- |
| corner-radius-1000 |
0.5 |
0.5 |
No |
- |
- |
| drop-shadow-x |
{drop-shadow-x-100} |
0px |
Yes |
- |
- |
| drop-shadow-y |
{drop-shadow-y-100} |
1px |
Yes |
- |
- |
| drop-shadow-blur |
{drop-shadow-blur-100} |
6px |
Yes |
- |
- |
| android-elevation |
2dp |
2dp |
No |
- |
- |
| workflow-icon-size-50 |
- |
desktop: 14px; mobile: 16px |
No |
- |
- |
| workflow-icon-size-75 |
- |
desktop: 16px; mobile: 18px |
No |
- |
- |
| workflow-icon-size-100 |
- |
desktop: 20px; mobile: 24px |
No |
- |
- |
| workflow-icon-size-200 |
- |
desktop: 22px; mobile: 28px |
No |
- |
- |
| workflow-icon-size-300 |
- |
desktop: 26px; mobile: 30px |
No |
- |
- |
| spacing-50 |
2px |
2px |
No |
- |
- |
| spacing-75 |
4px |
4px |
No |
- |
- |
| spacing-100 |
8px |
8px |
No |
- |
- |
| spacing-200 |
12px |
12px |
No |
- |
- |
| spacing-300 |
16px |
16px |
No |
- |
- |
| spacing-400 |
24px |
24px |
No |
- |
- |
| spacing-500 |
32px |
32px |
No |
- |
- |
| spacing-600 |
40px |
40px |
No |
- |
- |
| spacing-700 |
48px |
48px |
No |
- |
- |
| spacing-800 |
64px |
64px |
No |
- |
- |
| spacing-900 |
80px |
80px |
No |
- |
- |
| spacing-1000 |
96px |
96px |
No |
- |
- |
| text-to-visual-50 |
- |
desktop: 5px; mobile: 7px |
No |
- |
- |
| text-to-visual-75 |
- |
desktop: 5px; mobile: 7px |
No |
- |
- |
| text-to-visual-100 |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| text-to-visual-200 |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| text-to-visual-300 |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| text-to-visual-400 |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| text-to-control-50 |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| text-to-control-75 |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| text-to-control-100 |
- |
desktop: 10px; mobile: 13px |
No |
- |
- |
| text-to-control-200 |
- |
desktop: 11px; mobile: 14px |
No |
- |
- |
| text-to-control-300 |
- |
desktop: 13px; mobile: 16px |
No |
- |
- |
| visual-to-control-100 |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| label-to-description-0 |
0px |
0px |
No |
- |
- |
| component-height-50 |
- |
desktop: 20px; mobile: 26px |
No |
- |
- |
| component-height-75 |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| component-height-100 |
- |
desktop: 32px; mobile: 40px |
No |
- |
- |
| component-height-200 |
- |
desktop: 40px; mobile: 50px |
No |
- |
- |
| component-height-300 |
- |
desktop: 48px; mobile: 60px |
No |
- |
- |
| component-height-400 |
- |
desktop: 56px; mobile: 70px |
No |
- |
- |
| component-height-500 |
- |
desktop: 64px; mobile: 80px |
No |
- |
- |
| focus-indicator-thickness |
2px |
2px |
No |
- |
- |
| focus-indicator-gap |
2px |
2px |
No |
- |
- |
| side-focus-indicator |
4px |
4px |
No |
- |
- |
| border-width-100 |
1px |
1px |
No |
- |
- |
| border-width-200 |
2px |
2px |
No |
- |
- |
| border-width-400 |
4px |
4px |
No |
- |
- |
| component-pill-edge-to-visual-75 |
- |
desktop: 10px; mobile: 13px |
No |
- |
- |
| component-pill-edge-to-visual-100 |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| component-pill-edge-to-visual-200 |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| component-pill-edge-to-visual-300 |
- |
desktop: 21px; mobile: 27px |
No |
- |
- |
| component-pill-edge-to-visual-only-75 |
- |
desktop: 4px; mobile: 6px |
No |
- |
- |
| component-pill-edge-to-visual-only-100 |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| component-pill-edge-to-visual-only-200 |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| component-pill-edge-to-visual-only-300 |
- |
desktop: 11px; mobile: 15px |
No |
- |
- |
| component-pill-edge-to-text-75 |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| component-pill-edge-to-text-100 |
- |
desktop: 16px; mobile: 20px |
No |
- |
- |
| component-pill-edge-to-text-200 |
- |
desktop: 20px; mobile: 25px |
No |
- |
- |
| component-pill-edge-to-text-300 |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| component-edge-to-visual-50 |
- |
desktop: 6px; mobile: 7px |
No |
- |
- |
| component-edge-to-visual-75 |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| component-edge-to-visual-100 |
- |
desktop: 10px; mobile: 12px |
No |
- |
- |
| component-edge-to-visual-200 |
- |
desktop: 13px; mobile: 16px |
No |
- |
- |
| component-edge-to-visual-300 |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| component-edge-to-visual-only-50 |
- |
desktop: 3px; mobile: 5px |
No |
- |
- |
| component-edge-to-visual-only-75 |
- |
desktop: 4px; mobile: 6px |
No |
- |
- |
| component-edge-to-visual-only-100 |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| component-edge-to-visual-only-200 |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| component-edge-to-visual-only-300 |
- |
desktop: 11px; mobile: 15px |
No |
- |
- |
| component-edge-to-text-50 |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| component-edge-to-text-75 |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| component-edge-to-text-100 |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| component-edge-to-text-200 |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| component-edge-to-text-300 |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| component-top-to-workflow-icon-50 |
- |
desktop: 3px; mobile: 5px |
No |
- |
- |
| component-top-to-workflow-icon-75 |
- |
desktop: 4px; mobile: 6px |
No |
- |
- |
| component-top-to-workflow-icon-100 |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| component-top-to-workflow-icon-200 |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| component-top-to-workflow-icon-300 |
- |
desktop: 11px; mobile: 15px |
No |
- |
- |
| component-top-to-text-50 |
- |
desktop: 3px; mobile: 4px |
No |
- |
- |
| component-top-to-text-75 |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| component-top-to-text-100 |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| component-top-to-text-200 |
- |
desktop: 9px; mobile: 12px |
No |
- |
- |
| component-top-to-text-300 |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| component-bottom-to-text-50 |
- |
desktop: 3px; mobile: 6px |
No |
- |
- |
| component-bottom-to-text-75 |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| component-bottom-to-text-100 |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| component-bottom-to-text-200 |
- |
desktop: 11px; mobile: 14px |
No |
- |
- |
| component-bottom-to-text-300 |
- |
desktop: 14px; mobile: 18px |
No |
- |
- |
| component-to-menu-small |
- |
desktop: 6px; mobile: 7px |
No |
- |
- |
| component-to-menu-medium |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| component-to-menu-large |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| component-to-menu-extra-large |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| field-edge-to-text-quiet |
0px |
0px |
Yes |
- |
- |
| field-edge-to-visual-quiet |
0px |
0px |
No |
- |
- |
| field-edge-to-border-quiet |
0px |
0px |
Yes |
- |
- |
| field-edge-to-alert-icon-quiet |
0px |
0px |
Yes |
- |
- |
| field-edge-to-validation-icon-quiet |
0px |
0px |
Yes |
- |
- |
| field-edge-to-disclosure-icon-75 |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| field-edge-to-disclosure-icon-100 |
- |
desktop: 11px; mobile: 13px |
No |
- |
- |
| field-edge-to-disclosure-icon-200 |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| field-edge-to-disclosure-icon-300 |
- |
desktop: 17px; mobile: 22px |
No |
- |
- |
| field-end-edge-to-disclosure-icon-75 |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| field-end-edge-to-disclosure-icon-100 |
- |
desktop: 11px; mobile: 13px |
No |
- |
- |
| field-end-edge-to-disclosure-icon-200 |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| field-end-edge-to-disclosure-icon-300 |
- |
desktop: 17px; mobile: 22px |
No |
- |
- |
| field-top-to-disclosure-icon-75 |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| field-top-to-disclosure-icon-100 |
- |
desktop: 11px; mobile: 13px |
No |
- |
- |
| field-top-to-disclosure-icon-200 |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| field-top-to-disclosure-icon-300 |
- |
desktop: 17px; mobile: 22px |
No |
- |
- |
| field-top-to-alert-icon-small |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| field-top-to-alert-icon-medium |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| field-top-to-alert-icon-large |
- |
desktop: 10px; mobile: 13px |
No |
- |
- |
| field-top-to-alert-icon-extra-large |
- |
desktop: 13px; mobile: 16px |
No |
- |
- |
| field-top-to-validation-icon-small |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| field-top-to-validation-icon-medium |
- |
desktop: 11px; mobile: 13px |
No |
- |
- |
| field-top-to-validation-icon-large |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| field-top-to-validation-icon-extra-large |
- |
desktop: 17px; mobile: 22px |
No |
- |
- |
| field-top-to-progress-circle-small |
- |
desktop: 4px; mobile: 6px |
No |
- |
- |
| field-top-to-progress-circle-medium |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| field-top-to-progress-circle-large |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| field-top-to-progress-circle-extra-large |
- |
desktop: 11px; mobile: 15px |
No |
- |
- |
| field-edge-to-alert-icon-small |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| field-edge-to-alert-icon-medium |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| field-edge-to-alert-icon-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| field-edge-to-alert-icon-extra-large |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| field-edge-to-validation-icon-small |
- |
desktop: 9px; mobile: 11px |
No |
- |
- |
| field-edge-to-validation-icon-medium |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| field-edge-to-validation-icon-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| field-edge-to-validation-icon-extra-large |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| field-text-to-alert-icon-small |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| field-text-to-alert-icon-medium |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| field-text-to-alert-icon-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| field-text-to-alert-icon-extra-large |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| field-text-to-validation-icon-small |
- |
desktop: 8px; mobile: 10px |
No |
- |
- |
| field-text-to-validation-icon-medium |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| field-text-to-validation-icon-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| field-text-to-validation-icon-extra-large |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| field-width |
- |
desktop: [object Object]; mobile: [object Object] |
Yes |
This token has been deprecated, use field-default-width-medium instead. |
Replaced by field-default-width-medium |
| field-width-small |
{field-default-width-small} |
desktop: 192px; mobile: 240px |
Yes |
This token has been deprecated, use field-default-width-small instead. |
Replaced by field-default-width-small |
| character-count-to-field-quiet-small |
- |
desktop: -3px; mobile: -4px |
No |
- |
- |
| character-count-to-field-quiet-medium |
- |
desktop: -3px; mobile: -4px |
No |
- |
- |
| character-count-to-field-quiet-large |
- |
desktop: -3px; mobile: -4px |
No |
- |
- |
| character-count-to-field-quiet-extra-large |
- |
desktop: -4px; mobile: -5px |
No |
- |
- |
| side-label-character-count-to-field |
- |
desktop: 12px; mobile: 15px |
No |
- |
- |
| side-label-character-count-top-margin-small |
0px |
0px |
No |
- |
- |
| side-label-character-count-top-margin-medium |
0px |
0px |
No |
- |
- |
| side-label-character-count-top-margin-large |
0px |
0px |
No |
- |
- |
| side-label-character-count-top-margin-extra-large |
0px |
0px |
No |
- |
- |
| disclosure-indicator-top-to-disclosure-icon-small |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| disclosure-indicator-top-to-disclosure-icon-medium |
- |
desktop: 11px; mobile: 13px |
No |
- |
- |
| disclosure-indicator-top-to-disclosure-icon-large |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| disclosure-indicator-top-to-disclosure-icon-extra-large |
- |
desktop: 17px; mobile: 22px |
No |
- |
- |
| text-underline-thickness |
1px |
1px |
No |
- |
- |
| text-underline-gap |
1px |
1px |
No |
- |
- |
| navigational-indicator-top-to-back-icon-small |
- |
desktop: 6px; mobile: 7px |
No |
- |
- |
| navigational-indicator-top-to-back-icon-medium |
- |
desktop: 9px; mobile: 12px |
No |
- |
- |
| navigational-indicator-top-to-back-icon-large |
- |
desktop: 12px; mobile: 16px |
No |
- |
- |
| navigational-indicator-top-to-back-icon-extra-large |
- |
desktop: 15px; mobile: 19px |
No |
- |
- |
| color-control-track-width |
- |
desktop: 24px; mobile: 30px |
No |
- |
- |
| corner-triangle-icon-size-75 |
- |
desktop: 5px; mobile: 6px |
No |
- |
- |
| corner-triangle-icon-size-100 |
- |
desktop: 5px; mobile: 7px |
No |
- |
- |
| corner-triangle-icon-size-200 |
- |
desktop: 6px; mobile: 8px |
No |
- |
- |
| corner-triangle-icon-size-300 |
- |
desktop: 7px; mobile: 8px |
No |
- |
- |
| component-size-width-ratio-down |
0.3333 |
0.3333 |
No |
- |
- |
| component-size-minimum-perspective-down |
24px |
24px |
No |
- |
- |
| component-size-difference-down |
-2px |
-2px |
No |
- |
- |
| corner-radius-none |
{corner-radius-0} |
0px |
No |
- |
- |
| corner-radius-small-default |
{corner-radius-100} |
4px |
No |
- |
- |
| corner-radius-medium-default |
{corner-radius-500} |
8px |
No |
- |
- |
| corner-radius-large-default |
{corner-radius-700} |
10px |
No |
- |
- |
| corner-radius-extra-large-default |
{corner-radius-800} |
16px |
No |
- |
- |
| corner-radius-full |
{corner-radius-1000} |
0.5 |
No |
- |
- |
| corner-radius-small-size-small |
{corner-radius-75} |
3px |
No |
- |
- |
| corner-radius-small-size-medium |
{corner-radius-100} |
4px |
No |
- |
- |
| corner-radius-small-size-large |
{corner-radius-200} |
5px |
No |
- |
- |
| corner-radius-small-size-extra-large |
{corner-radius-300} |
6px |
No |
- |
- |
| corner-radius-medium-size-extra-small |
{corner-radius-300} |
6px |
No |
- |
- |
| corner-radius-medium-size-small |
{corner-radius-400} |
7px |
No |
- |
- |
| corner-radius-medium-size-medium |
{corner-radius-500} |
8px |
No |
- |
- |
| corner-radius-medium-size-large |
{corner-radius-600} |
9px |
No |
- |
- |
| corner-radius-medium-size-extra-large |
{corner-radius-700} |
10px |
No |
- |
- |
| field-width-medium |
{field-default-width-medium} |
desktop: 208px; mobile: 256px |
Yes |
This token has been deprecated, use field-default-width-medium instead. |
Replaced by field-default-width-medium |
| field-width-large |
{field-default-width-large} |
desktop: 224px; mobile: 272px |
Yes |
This token has been deprecated, use field-default-width-large instead. |
Replaced by field-default-width-large |
| field-width-extra-large |
{field-default-width-extra-large} |
desktop: 240px; mobile: 288px |
Yes |
This token has been deprecated, use field-default-width-extra-large instead. |
Replaced by field-default-width-extra-large |
| drop-shadow-x-100 |
0px |
0px |
No |
- |
- |
| drop-shadow-x-200 |
0px |
0px |
No |
- |
- |
| drop-shadow-x-300 |
0px |
0px |
No |
- |
- |
| drop-shadow-y-100 |
1px |
1px |
No |
- |
- |
| drop-shadow-y-200 |
2px |
2px |
No |
- |
- |
| drop-shadow-y-300 |
6px |
6px |
No |
- |
- |
| drop-shadow-blur-100 |
6px |
6px |
No |
- |
- |
| drop-shadow-blur-200 |
8px |
8px |
No |
- |
- |
| drop-shadow-blur-300 |
16px |
16px |
No |
- |
- |
| drop-shadow-emphasized-default-x |
{drop-shadow-x-100} |
0px |
No |
- |
- |
| drop-shadow-emphasized-default-y |
{drop-shadow-y-100} |
1px |
No |
- |
- |
| drop-shadow-emphasized-default-blur |
{drop-shadow-blur-100} |
6px |
No |
- |
- |
| drop-shadow-emphasized-hover-x |
{drop-shadow-x-200} |
0px |
No |
- |
- |
| drop-shadow-emphasized-hover-y |
{drop-shadow-y-200} |
2px |
No |
- |
- |
| drop-shadow-emphasized-hover-blur |
{drop-shadow-blur-200} |
8px |
No |
- |
- |
| drop-shadow-elevated-x |
{drop-shadow-x-200} |
0px |
No |
- |
- |
| drop-shadow-elevated-y |
{drop-shadow-y-200} |
2px |
No |
- |
- |
| drop-shadow-elevated-blur |
{drop-shadow-blur-200} |
8px |
No |
- |
- |
| drop-shadow-dragged-x |
{drop-shadow-x-300} |
0px |
No |
- |
- |
| drop-shadow-dragged-y |
{drop-shadow-y-300} |
6px |
No |
- |
- |
| drop-shadow-dragged-blur |
{drop-shadow-blur-300} |
16px |
No |
- |
- |
| gradient-stop-1-genai |
0 |
0 |
No |
- |
- |
| gradient-stop-2-genai |
0.3333 |
0.3333 |
No |
- |
- |
| gradient-stop-3-genai |
1 |
1 |
No |
- |
- |
| gradient-stop-1-premium |
0 |
0 |
No |
- |
- |
| gradient-stop-2-premium |
0.6666 |
0.6666 |
No |
- |
- |
| gradient-stop-3-premium |
1 |
1 |
No |
- |
- |
| window-to-edge |
{spacing-600} |
40px |
No |
- |
- |
| component-size-maximum-perspective-down |
96px |
96px |
No |
- |
- |
| field-top-to-disclosure-icon-compact-small |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| field-top-to-disclosure-icon-small |
- |
desktop: 11px; mobile: 13px |
No |
- |
- |
| field-top-to-disclosure-icon-spacious-small |
- |
desktop: 15px; mobile: 18px |
No |
- |
- |
| field-top-to-disclosure-icon-compact-medium |
- |
desktop: 11px; mobile: 13px |
No |
- |
- |
| field-top-to-disclosure-icon-medium |
- |
desktop: 15px; mobile: 18px |
No |
- |
- |
| field-top-to-disclosure-icon-spacious-medium |
- |
desktop: 19px; mobile: 23px |
No |
- |
- |
| field-top-to-disclosure-icon-compact-large |
- |
desktop: 14px; mobile: 17px |
No |
- |
- |
| field-top-to-disclosure-icon-large |
- |
desktop: 18px; mobile: 22px |
No |
- |
- |
| field-top-to-disclosure-icon-spacious-large |
- |
desktop: 22px; mobile: 27px |
No |
- |
- |
| field-top-to-disclosure-icon-compact-extra-large |
- |
desktop: 17px; mobile: 21px |
No |
- |
- |
| field-top-to-disclosure-icon-extra-large |
- |
desktop: 21px; mobile: 26px |
No |
- |
- |
| field-top-to-disclosure-icon-spacious-extra-large |
- |
desktop: 25px; mobile: 31px |
No |
- |
- |
| component-padding-vertical-50 |
- |
desktop: 3px; mobile: 5px |
No |
- |
- |
| component-padding-vertical-75 |
- |
desktop: 4px; mobile: 5px |
No |
- |
- |
| component-padding-vertical-100 |
- |
desktop: 7px; mobile: 9px |
No |
- |
- |
| component-padding-vertical-200 |
- |
desktop: 10px; mobile: 13px |
No |
- |
- |
| component-padding-vertical-300 |
- |
desktop: 13px; mobile: 17px |
No |
- |
- |
