Layout

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