All collections
Responsive tokens
466 of 1,487 custom properties change with the viewport in v0.7.3. The widest value is what :root declares; each narrower breakpoint is a @media (max-width) block that re-declares only the properties that differ. A component uses one token name and gets every breakpoint — there are no media queries in the component CSS because there is nothing left for them to do.
> 1024pxdefault
:root466 properties have narrower values
481–1024pxmd
@media (max-width: 1024px)462 properties re-declared
≤ 480pxxs
@media (max-width: 480px)466 properties re-declared
How a consumer gets all of it
Write the token once. The browser picks the block that matches the viewport.
.section {
padding-block: var(--spacing-xl);
}
/* resolves to */
:root 16px /* > 1024px */
@media (max-width: 1024px) 14px /* 481–1024px */
@media (max-width: 480px) 12px /* ≤ 480px */Only the artifacts with media queries deliver this. The android, ios, js, scss outputs carry one value per token — the widest — so anything built on them has to pick sizes per device class itself.
| Custom property | > 1024px | 481–1024px | ≤ 480px |
|---|---|---|---|
--container-padding-xs | 8px | 6px | 4px |
--container-padding-sm | 16px | 10px | 8px |
--container-padding-md | 24px | 14px | 10px |
--container-padding-lg | 32px | 16px | 12px |
--container-padding-xl | 64px | 32px | 24px |
--container-module-padding-sm | 32px | 28px | 24px |
--container-module-padding-md | 48px | 40px | 32px |
--container-module-padding-default | 96px | 64px | 56px |
--container-module-padding-lg | 128px | 88px | 72px |
--container-module-padding-xl | 160px | 104px | 90px |
--container-padding-2xl | 96px | 48px | 32px |
--container-padding-3xl | 160px | 64px | 48px |
--container-default-max-width | 1280px | 800px | 380px |
--container-wide-max-width | 1600px | 800px | 380px |
--container-narrow-max-width | 768px | 464px | 380px |
--container-gap-neg-xs | -4px | -2px | -2px |
--container-gap-neg-sm | -8px | -4px | -4px |
--container-gap-neg-md | -12px | -8px | -8px |
--container-gap-neg-lg | -16px | -12px | -12px |
--container-gap-neg-xl | -32px | -24px | -24px |
--container-gap-neg-2xl | -64px | -40px | -40px |
--container-gap-neg-3xl | -96px | -64px | -64px |
--container-gap-neg-4xl | -128px | -96px | -96px |
--container-gap-product-cards | 12px | 10px | 10px |
--container-gap-content-cards-xl | 32px | 28px | 24px |
--container-gap-content-cards-lg | 24px | 20px | 18px |
--container-gap-content-cards-md | 16px | 14px | 12px |
| Custom property | > 1024px | 481–1024px | ≤ 480px |
|---|---|---|---|
--primitive-space-5 | 12px | 10px | 10px |
--primitive-space-6 | 16px | 14px | 12px |
--primitive-space-7 | 20px | 16px | 14px |
--primitive-space-8 | 24px | 20px | 18px |
--primitive-space-9 | 32px | 28px | 24px |
--primitive-space-10 | 40px | 32px | 28px |
--primitive-space-11 | 48px | 40px | 32px |
--primitive-space-12 | 64px | 48px | 40px |
--primitive-space-13 | 80px | 56px | 48px |
--primitive-space-14 | 96px | 64px | 56px |
--primitive-space-15 | 128px | 88px | 72px |
--primitive-space-16 | 160px | 104px | 90px |
--primitive-space-17 | 192px | 128px | 108px |
--primitive-space-18 | 224px | 144px | 126px |
--primitive-space-19 | 256px | 160px | 144px |
--primitive-space-20 | 320px | 200px | 180px |
--primitive-space-21 | 384px | 240px | 210px |
--primitive-space-22 | 480px | 280px | 260px |
--primitive-space-23 | 560px | 320px | 300px |
--primitive-space-24 | 640px | 360px | 340px |
--primitive-space-25 | 720px | 400px | 380px |
--primitive-space-26 | 768px | 464px | 400px |
--primitive-space-27 | 1024px | 600px | 540px |
--primitive-space-28 | 1280px | 720px | 680px |
--primitive-space-29 | 1440px | 800px | 760px |
--primitive-space-30 | 1600px | 920px | 840px |
--primitive-space-31 | 1920px | 1024px | 960px |
Radius
17| Custom property | > 1024px | 481–1024px | ≤ 480px |
|---|---|---|---|
--radius-md | 10px | 8px | 8px |
--radius-lg | 14px | 12px | 10px |
--radius-xl | 16px | 14px | 12px |
--radius-2xl | 20px | 18px | 16px |
--radius-3xl | 24px | 22px | 20px |
--radius-4xl | 30px | 26px | 24px |
--radius-5xl | 36px | 32px | 30px |
--radius-button-lg | 10px | 8px | 8px |
--radius-card | 10px | 6px | 6px |
--radius-input-lg | 10px | 8px | 8px |
--radius-image-m | 10px | 8px | 8px |
--radius-container-lg | 20px | 12px | 8px |
--radius-container-md | 10px | 6px | 6px |
--radius-container-sm | 6px | 4px | 4px |
--radius-modal-md | 16px | 12px | 12px |
--radius-drawer-md | 24px | 16px | 16px |
--radius-overlapping-layers | 36px | 32px | 30px |
Screen
136| Custom property | > 1024px | 481–1024px | ≤ 480px |
|---|---|---|---|
--screen-font-size-xxs | 10px | 8px | 8px |
--screen-font-size-xs | 12px | 10px | 10px |
--screen-font-size-sm | 14px | 12px | 12px |
--screen-font-size-md | 16px | 14px | 14px |
--screen-font-size-lg | 18px | 16px | 16px |
--screen-font-size-xl | 20px | 18px | 18px |
--screen-font-size-lead | 20px | 18px | 16px |
--screen-font-size-display-xs | 24px | 22px | 20px |
--screen-font-size-display-sm | 30px | 28px | 24px |
--screen-font-size-display-md | 36px | 32px | 28px |
--screen-font-size-display-lg | 48px | 36px | 32px |
--screen-font-size-display-xl | 60px | 48px | 40px |
--screen-font-size-display-2xl | 72px | 56px | 48px |
--screen-font-size-hero-lg | 96px | 64px | 56px |
--screen-font-size-hero-xl | 120px | 72px | 64px |
--screen-line-height-xxs | 14px | 12px | 12px |
--screen-line-height-xs | 18px | 16px | 16px |
--screen-line-height-sm | 20px | 18px | 18px |
--screen-line-height-md | 24px | 22px | 22px |
--screen-line-height-lg | 28px | 26px | 24px |
--screen-line-height-xl | 30px | 28px | 26px |
--screen-line-height-lead | 30px | 24px | 22px |
--screen-line-height-display-xs | 32px | 28px | 24px |
--screen-line-height-display-sm | 38px | 32px | 28px |
--screen-line-height-display-md | 44px | 38px | 32px |
--screen-line-height-display-lg | 60px | 46px | 38px |
--screen-line-height-display-xl | 72px | 56px | 46px |
--screen-line-height-display-2xl | 90px | 64px | 54px |
--screen-line-height-hero-lg | 110px | 70px | 60px |
--screen-line-height-hero-xl | 120px | 80px | 70px |
--screen-container-padding-xs | 8px | 6px | 4px |
--screen-container-padding-sm | 16px | 10px | 8px |
--screen-container-padding-md | 24px | 14px | 10px |
--screen-container-padding-lg | 32px | 16px | 12px |
--screen-container-padding-xl | 64px | 32px | 24px |
--screen-container-padding-2xl | 96px | 48px | 32px |
--screen-container-padding-3xl | 160px | 64px | 48px |
--screen-container-narrow-max-width | 768px | 464px | 380px |
--screen-container-default-max-width | 1280px | 800px | 380px |
--screen-container-wide-max-width | 1600px | 800px | 380px |
--screen-container-gap-neg-xs | -4px | -2px | -2px |
--screen-container-gap-neg-sm | -8px | -4px | -4px |
--screen-container-gap-neg-md | -12px | -8px | -8px |
--screen-container-gap-neg-lg | -16px | -12px | -12px |
--screen-container-gap-neg-xl | -32px | -24px | -24px |
--screen-container-gap-neg-2xl | -64px | -40px | -40px |
--screen-container-gap-neg-3xl | -96px | -64px | -64px |
--screen-container-gap-neg-4xl | -128px | -96px | -96px |
--screen-container-gap-product-cards | 12px | 10px | 10px |
--screen-container-gap-content-cards-xl | 32px | 28px | 24px |
--screen-container-gap-content-cards-lg | 24px | 20px | 18px |
--screen-container-gap-content-cards-md | 16px | 14px | 12px |
--screen-modal-and-drawer-ui-overlay-xs-max-width | 384px | 296px | 393px |
--screen-modal-and-drawer-ui-overlay-sm-max-width | 560px | 480px | 393px |
--screen-modal-and-drawer-ui-overlay-md-max-width | 640px | 560px | 393px |
--screen-modal-and-drawer-ui-overlay-lg-max-width | 768px | 560px | 393px |
--screen-modal-and-drawer-ui-overlay-xl-max-width | 1024px | 720px | 393px |
--screen-modal-and-drawer-max-height | 2000px | 1440px | 550px |
--screen-modal-and-drawer-body-max-height | 2000px | — | 350px |
--screen-product-card-circular-md | 16px | 10px | 10px |
--screen-product-card-row-min-width | 800px | 720px | 350px |
--screen-product-card-row-max-width | 1440px | 960px | 390px |
--screen-product-card-square | 180px | 140px | 100px |
--screen-category-card-width-sm | 112px | 88px | 72px |
--screen-category-card-width-md | 144px | 112px | 88px |
--screen-category-card-width-lg | 176px | 128px | 96px |
--screen-docked-panel-max-width | 600px | 560px | 393px |
--screen-icon-sm | 16px | 14px | 14px |
--screen-icon-md | 20px | 18px | 18px |
--screen-icon-lg | 24px | 22px | 22px |
--screen-icon-xl | 28px | 24px | 24px |
--screen-icon-2xl | 32px | 26px | 26px |
--screen-icon-3xl | 36px | 28px | 28px |
--screen-icon-square-certificate-xs | 32px | 20px | 14px |
--screen-icon-square-certificate-sm | 40px | 28px | 18px |
--screen-icon-square-certificate-md | 48px | 32px | 24px |
--screen-icon-square-certificate-lg | 64px | 40px | 28px |
--screen-checkboxes-sm | 16px | 14px | 14px |
--screen-checkboxes-md | 20px | 18px | 18px |
--screen-width-paragraph-max-width | 720px | — | 440px |
--screen-width-xxs | 320px | 256px | 64px |
--screen-width-xs | 384px | 296px | 96px |
--screen-width-sm | 480px | 320px | 128px |
--screen-width-md | 560px | 480px | 160px |
--screen-width-lg | 640px | 560px | 192px |
--screen-width-xl | 768px | 720px | 224px |
--screen-width-2xl | 1024px | 768px | 256px |
--screen-width-3xl | 1280px | 896px | 288px |
--screen-width-4xl | 1440px | 960px | 320px |
--screen-width-5xl | 1600px | 1024px | 352px |
--screen-width-6xl | 1920px | 1280px | 384px |
--screen-width-page-width | 1440px | 960px | 375px |
--screen-width-half-page-paragraph-max-width | 640px | 480px | 351px |
--screen-spacing-5 | 12px | 10px | 10px |
--screen-spacing-6 | 16px | 14px | 12px |
--screen-spacing-7 | 20px | 16px | 14px |
--screen-spacing-8 | 24px | 20px | 18px |
--screen-spacing-9 | 32px | 28px | 24px |
--screen-spacing-10 | 40px | 32px | 28px |
--screen-spacing-11 | 48px | 40px | 32px |
--screen-spacing-12 | 64px | 48px | 40px |
--screen-spacing-13 | 80px | 56px | 48px |
--screen-spacing-14 | 96px | 64px | 56px |
--screen-spacing-15 | 128px | 88px | 72px |
--screen-spacing-16 | 160px | 104px | 90px |
--screen-spacing-17 | 192px | 128px | 108px |
--screen-spacing-18 | 224px | 144px | 126px |
--screen-spacing-19 | 256px | 160px | 144px |
--screen-spacing-20 | 320px | 200px | 180px |
--screen-spacing-21 | 384px | 240px | 210px |
--screen-spacing-22 | 480px | 280px | 260px |
--screen-spacing-23 | 560px | 320px | 300px |
--screen-spacing-24 | 640px | 360px | 340px |
--screen-spacing-25 | 720px | 400px | 380px |
--screen-spacing-26 | 768px | 464px | 400px |
--screen-spacing-27 | 1024px | 600px | 540px |
--screen-spacing-28 | 1280px | 720px | 680px |
--screen-spacing-29 | 1440px | 800px | 760px |
--screen-spacing-30 | 1600px | 920px | 840px |
--screen-spacing-31 | 1920px | 1024px | 960px |
--screen-radius-md | 10px | 8px | 8px |
--screen-radius-lg | 14px | 12px | 10px |
--screen-radius-xl | 16px | 14px | 12px |
--screen-radius-2xl | 20px | 18px | 16px |
--screen-radius-3xl | 24px | 22px | 20px |
--screen-radius-4xl | 30px | 26px | 24px |
--screen-radius-5xl | 36px | 32px | 30px |
--screen-radius-card | 10px | 6px | 6px |
--screen-radius-container-lg | 20px | 12px | 8px |
--screen-radius-container-md | 10px | 6px | 6px |
--screen-radius-container-sm | 6px | 4px | 4px |
--screen-radius-image-m | 10px | 8px | 8px |
--screen-radius-container-modal-md | 16px | 12px | 12px |
--screen-radius-container-drawer-md | 24px | 16px | 16px |
--screen-radius-container-overlapping-layers | 36px | 32px | 30px |
--screen-widths-width-25 | 720px | 640px | 208px |
Spacing
12| Custom property | > 1024px | 481–1024px | ≤ 480px |
|---|---|---|---|
--spacing-lg | 12px | 10px | 10px |
--spacing-xl | 16px | 14px | 12px |
--spacing-2xl | 20px | 16px | 14px |
--spacing-3xl | 24px | 20px | 18px |
--spacing-4xl | 32px | 28px | 24px |
--spacing-5xl | 40px | 32px | 28px |
--spacing-6xl | 48px | 40px | 32px |
--spacing-7xl | 64px | 48px | 40px |
--spacing-8xl | 80px | 56px | 48px |
--spacing-9xl | 96px | 64px | 56px |
--spacing-10xl | 128px | 88px | 72px |
--spacing-11xl | 160px | 104px | 90px |
Type
30| Custom property | > 1024px | 481–1024px | ≤ 480px |
|---|---|---|---|
--type-font-size-xxs | 10px | 8px | 8px |
--type-font-size-xs | 12px | 10px | 10px |
--type-font-size-sm | 14px | 12px | 12px |
--type-font-size-md | 16px | 14px | 14px |
--type-font-size-lg | 18px | 16px | 16px |
--type-font-size-xl | 20px | 18px | 18px |
--type-font-size-lead | 20px | 18px | 16px |
--type-font-size-display-xs | 24px | 22px | 20px |
--type-font-size-display-sm | 30px | 28px | 24px |
--type-font-size-display-md | 36px | 32px | 28px |
--type-font-size-display-lg | 48px | 36px | 32px |
--type-font-size-display-xl | 60px | 48px | 40px |
--type-font-size-display-2xl | 72px | 56px | 48px |
--type-font-size-hero-lg | 96px | 64px | 56px |
--type-font-size-hero-xl | 120px | 72px | 64px |
--type-line-height-xxs | 14px | 12px | 12px |
--type-line-height-xs | 18px | 16px | 16px |
--type-line-height-sm | 20px | 18px | 18px |
--type-line-height-md | 24px | 22px | 22px |
--type-line-height-lg | 28px | 26px | 24px |
--type-line-height-xl | 30px | 28px | 26px |
--type-line-height-lead | 30px | 24px | 22px |
--type-line-height-display-xs | 32px | 28px | 24px |
--type-line-height-display-sm | 38px | 32px | 28px |
--type-line-height-display-md | 44px | 38px | 32px |
--type-line-height-display-lg | 60px | 46px | 38px |
--type-line-height-display-xl | 72px | 56px | 46px |
--type-line-height-display-2xl | 90px | 64px | 54px |
--type-line-height-hero-lg | 110px | 70px | 60px |
--type-line-height-hero-xl | 120px | 80px | 70px |
| Custom property | > 1024px | 481–1024px | ≤ 480px |
|---|---|---|---|
--typography-styles-hero-xl-regular-font-size | 120px | 72px | 64px |
--typography-styles-hero-xl-regular-line-height | 120px | 80px | 70px |
--typography-styles-hero-xl-regular-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-hero-xl-medium-font-size | 120px | 72px | 64px |
--typography-styles-hero-xl-medium-line-height | 120px | 80px | 70px |
--typography-styles-hero-xl-medium-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-hero-xl-semibold-font-size | 120px | 72px | 64px |
--typography-styles-hero-xl-semibold-line-height | 120px | 80px | 70px |
--typography-styles-hero-xl-semibold-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-hero-xl-bold-font-size | 120px | 72px | 64px |
--typography-styles-hero-xl-bold-line-height | 120px | 80px | 70px |
--typography-styles-hero-xl-bold-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-hero-lg-regular-font-size | 96px | 64px | 56px |
--typography-styles-hero-lg-regular-line-height | 110px | 70px | 60px |
--typography-styles-hero-lg-regular-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-hero-lg-medium-font-size | 96px | 64px | 56px |
--typography-styles-hero-lg-medium-line-height | 110px | 70px | 60px |
--typography-styles-hero-lg-medium-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-hero-lg-semibold-font-size | 96px | 64px | 56px |
--typography-styles-hero-lg-semibold-line-height | 110px | 70px | 60px |
--typography-styles-hero-lg-semibold-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-hero-lg-bold-font-size | 96px | 64px | 56px |
--typography-styles-hero-lg-bold-line-height | 110px | 70px | 60px |
--typography-styles-hero-lg-bold-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-display-2xl-regular-font-size | 72px | 56px | 48px |
--typography-styles-display-2xl-regular-line-height | 90px | 64px | 54px |
--typography-styles-display-2xl-regular-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-display-2xl-medium-font-size | 72px | 56px | 48px |
--typography-styles-display-2xl-medium-line-height | 90px | 64px | 54px |
--typography-styles-display-2xl-medium-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-display-2xl-semibold-font-size | 72px | 56px | 48px |
--typography-styles-display-2xl-semibold-line-height | 90px | 64px | 54px |
--typography-styles-display-2xl-semibold-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-display-2xl-bold-font-size | 72px | 56px | 48px |
--typography-styles-display-2xl-bold-line-height | 90px | 64px | 54px |
--typography-styles-display-2xl-bold-paragraph-spacing | 72px | 56px | 48px |
--typography-styles-display-xl-regular-font-size | 60px | 48px | 40px |
--typography-styles-display-xl-regular-line-height | 72px | 56px | 46px |
--typography-styles-display-xl-regular-paragraph-spacing | 60px | 48px | 40px |
--typography-styles-display-xl-medium-font-size | 60px | 48px | 40px |
--typography-styles-display-xl-medium-line-height | 72px | 56px | 46px |
--typography-styles-display-xl-medium-paragraph-spacing | 60px | 48px | 40px |
--typography-styles-display-xl-semibold-font-size | 60px | 48px | 40px |
--typography-styles-display-xl-semibold-line-height | 72px | 56px | 46px |
--typography-styles-display-xl-semibold-paragraph-spacing | 60px | 48px | 40px |
--typography-styles-display-xl-bold-font-size | 60px | 48px | 40px |
--typography-styles-display-xl-bold-line-height | 72px | 56px | 46px |
--typography-styles-display-xl-bold-paragraph-spacing | 60px | 48px | 40px |
--typography-styles-display-lg-regular-font-size | 48px | 36px | 32px |
--typography-styles-display-lg-regular-line-height | 60px | 46px | 38px |
--typography-styles-display-lg-regular-paragraph-spacing | 48px | 36px | 32px |
--typography-styles-display-lg-medium-font-size | 48px | 36px | 32px |
--typography-styles-display-lg-medium-line-height | 60px | 46px | 38px |
--typography-styles-display-lg-medium-paragraph-spacing | 48px | 36px | 32px |
--typography-styles-display-lg-semibold-font-size | 48px | 36px | 32px |
--typography-styles-display-lg-semibold-line-height | 60px | 46px | 38px |
--typography-styles-display-lg-semibold-paragraph-spacing | 48px | 36px | 32px |
--typography-styles-display-lg-bold-font-size | 48px | 36px | 32px |
--typography-styles-display-lg-bold-line-height | 60px | 46px | 38px |
--typography-styles-display-lg-bold-paragraph-spacing | 48px | 36px | 32px |
--typography-styles-display-md-regular-font-size | 36px | 32px | 28px |
--typography-styles-display-md-regular-line-height | 44px | 38px | 32px |
--typography-styles-display-md-regular-paragraph-spacing | 36px | 32px | 28px |
--typography-styles-display-md-medium-font-size | 36px | 32px | 28px |
--typography-styles-display-md-medium-line-height | 44px | 38px | 32px |
--typography-styles-display-md-medium-paragraph-spacing | 36px | 32px | 28px |
--typography-styles-display-md-semibold-font-size | 36px | 32px | 28px |
--typography-styles-display-md-semibold-line-height | 44px | 38px | 32px |
--typography-styles-display-md-semibold-paragraph-spacing | 36px | 32px | 28px |
--typography-styles-display-md-bold-font-size | 36px | 32px | 28px |
--typography-styles-display-md-bold-line-height | 44px | 38px | 32px |
--typography-styles-display-md-bold-paragraph-spacing | 36px | 32px | 28px |
--typography-styles-display-sm-regular-font-size | 30px | 28px | 24px |
--typography-styles-display-sm-regular-line-height | 38px | 32px | 28px |
--typography-styles-display-sm-regular-paragraph-spacing | 30px | 28px | 24px |
--typography-styles-display-sm-medium-font-size | 30px | 28px | 24px |
--typography-styles-display-sm-medium-line-height | 38px | 32px | 28px |
--typography-styles-display-sm-medium-paragraph-spacing | 30px | 28px | 24px |
--typography-styles-display-sm-semibold-font-size | 30px | 28px | 24px |
--typography-styles-display-sm-semibold-line-height | 38px | 32px | 28px |
--typography-styles-display-sm-semibold-paragraph-spacing | 30px | 28px | 24px |
--typography-styles-display-sm-bold-font-size | 30px | 28px | 24px |
--typography-styles-display-sm-bold-line-height | 38px | 32px | 28px |
--typography-styles-display-sm-bold-paragraph-spacing | 30px | 28px | 24px |
--typography-styles-display-xs-regular-font-size | 24px | 22px | 20px |
--typography-styles-display-xs-regular-line-height | 32px | 28px | 24px |
--typography-styles-display-xs-regular-paragraph-spacing | 24px | 22px | 20px |
--typography-styles-display-xs-medium-font-size | 24px | 22px | 20px |
--typography-styles-display-xs-medium-line-height | 32px | 28px | 24px |
--typography-styles-display-xs-medium-paragraph-spacing | 24px | 22px | 20px |
--typography-styles-display-xs-semibold-font-size | 24px | 22px | 20px |
--typography-styles-display-xs-semibold-line-height | 32px | 28px | 24px |
--typography-styles-display-xs-semibold-paragraph-spacing | 24px | 22px | 20px |
--typography-styles-display-xs-bold-font-size | 24px | 22px | 20px |
--typography-styles-display-xs-bold-line-height | 32px | 28px | 24px |
--typography-styles-display-xs-bold-paragraph-spacing | 24px | 22px | 20px |
--typography-styles-text-xl-regular-font-size | 20px | 18px | 18px |
--typography-styles-text-xl-regular-line-height | 30px | 28px | 26px |
--typography-styles-text-xl-regular-paragraph-spacing | 20px | 18px | 18px |
--typography-styles-text-xl-medium-font-size | 20px | 18px | 18px |
--typography-styles-text-xl-medium-line-height | 30px | 28px | 26px |
--typography-styles-text-xl-medium-paragraph-spacing | 20px | 18px | 18px |
--typography-styles-text-xl-semibold-font-size | 20px | 18px | 18px |
--typography-styles-text-xl-semibold-line-height | 30px | 28px | 26px |
--typography-styles-text-xl-semibold-paragraph-spacing | 20px | 18px | 18px |
--typography-styles-text-xl-bold-font-size | 20px | 18px | 18px |
--typography-styles-text-xl-bold-line-height | 30px | 28px | 26px |
--typography-styles-text-xl-bold-paragraph-spacing | 20px | 18px | 18px |
--typography-styles-text-lg-regular-font-size | 18px | 16px | 16px |
--typography-styles-text-lg-regular-line-height | 28px | 26px | 24px |
--typography-styles-text-lg-regular-paragraph-spacing | 18px | 16px | 16px |
--typography-styles-text-lg-medium-font-size | 18px | 16px | 16px |
--typography-styles-text-lg-medium-line-height | 28px | 26px | 24px |
--typography-styles-text-lg-medium-paragraph-spacing | 18px | 16px | 16px |
--typography-styles-text-lg-semibold-font-size | 18px | 16px | 16px |
--typography-styles-text-lg-semibold-line-height | 28px | 26px | 24px |
--typography-styles-text-lg-semibold-paragraph-spacing | 18px | 16px | 16px |
--typography-styles-text-lg-bold-font-size | 18px | 16px | 16px |
--typography-styles-text-lg-bold-line-height | 28px | 26px | 24px |
--typography-styles-text-lg-bold-paragraph-spacing | 18px | 16px | 16px |
--typography-styles-text-md-regular-font-size | 16px | 14px | 14px |
--typography-styles-text-md-regular-line-height | 24px | 22px | 22px |
--typography-styles-text-md-regular-paragraph-spacing | 16px | 14px | 14px |
--typography-styles-text-md-medium-font-size | 16px | 14px | 14px |
--typography-styles-text-md-medium-line-height | 24px | 22px | 22px |
--typography-styles-text-md-medium-paragraph-spacing | 16px | 14px | 14px |
--typography-styles-text-md-semibold-font-size | 16px | 14px | 14px |
--typography-styles-text-md-semibold-line-height | 24px | 22px | 22px |
--typography-styles-text-md-semibold-paragraph-spacing | 16px | 14px | 14px |
--typography-styles-text-md-bold-font-size | 16px | 14px | 14px |
--typography-styles-text-md-bold-line-height | 24px | 22px | 22px |
--typography-styles-text-md-bold-paragraph-spacing | 16px | 14px | 14px |
--typography-styles-text-sm-regular-font-size | 14px | 12px | 12px |
--typography-styles-text-sm-regular-line-height | 20px | 18px | 18px |
--typography-styles-text-sm-regular-paragraph-spacing | 14px | 12px | 12px |
--typography-styles-text-sm-medium-font-size | 14px | 12px | 12px |
--typography-styles-text-sm-medium-line-height | 20px | 18px | 18px |
--typography-styles-text-sm-medium-paragraph-spacing | 14px | 12px | 12px |
--typography-styles-text-sm-semibold-font-size | 14px | 12px | 12px |
--typography-styles-text-sm-semibold-line-height | 20px | 18px | 18px |
--typography-styles-text-sm-semibold-paragraph-spacing | 14px | 12px | 12px |
--typography-styles-text-sm-bold-font-size | 14px | 12px | 12px |
--typography-styles-text-sm-bold-line-height | 20px | 18px | 18px |
--typography-styles-text-sm-bold-paragraph-spacing | 14px | 12px | 12px |
--typography-styles-text-xs-regular-font-size | 12px | 10px | 10px |
--typography-styles-text-xs-regular-line-height | 18px | 16px | 16px |
--typography-styles-text-xs-regular-paragraph-spacing | 12px | 10px | 10px |
--typography-styles-text-xs-medium-font-size | 12px | 10px | 10px |
--typography-styles-text-xs-medium-line-height | 18px | 16px | 16px |
--typography-styles-text-xs-medium-paragraph-spacing | 12px | 10px | 10px |
--typography-styles-text-xs-semibold-font-size | 12px | 10px | 10px |
--typography-styles-text-xs-semibold-line-height | 18px | 16px | 16px |
--typography-styles-text-xs-semibold-paragraph-spacing | 12px | 10px | 10px |
--typography-styles-text-xs-bold-font-size | 12px | 10px | 10px |
--typography-styles-text-xs-bold-line-height | 18px | 16px | 16px |
--typography-styles-text-xs-bold-paragraph-spacing | 12px | 10px | 10px |
--typography-styles-text-xxs-regular-font-size | 10px | 8px | 8px |
--typography-styles-text-xxs-regular-line-height | 14px | 12px | 12px |
--typography-styles-text-xxs-regular-paragraph-spacing | 12px | 10px | 10px |
--typography-styles-text-xxs-medium-font-size | 10px | 8px | 8px |
--typography-styles-text-xxs-medium-line-height | 14px | 12px | 12px |
--typography-styles-text-xxs-medium-paragraph-spacing | 12px | 10px | 10px |
--typography-styles-text-xxs-semibold-font-size | 10px | 8px | 8px |
--typography-styles-text-xxs-semibold-line-height | 14px | 12px | 12px |
--typography-styles-text-xxs-semibold-paragraph-spacing | 12px | 10px | 10px |
--typography-styles-text-xxs-bold-font-size | 10px | 8px | 8px |
--typography-styles-text-xxs-bold-line-height | 14px | 12px | 12px |
--typography-styles-text-xxs-bold-paragraph-spacing | 12px | 10px | 10px |
--typography-styles-text-lead-regular-font-size | 20px | 18px | 16px |
--typography-styles-text-lead-regular-line-height | 30px | 24px | 22px |
--typography-styles-text-lead-medium-font-size | 20px | 18px | 16px |
--typography-styles-text-lead-medium-line-height | 30px | 24px | 22px |
--typography-styles-text-lead-semibold-font-size | 20px | 18px | 16px |
--typography-styles-text-lead-semibold-line-height | 30px | 24px | 22px |
--typography-styles-text-lead-bold-font-size | 20px | 18px | 16px |
--typography-styles-text-lead-bold-line-height | 30px | 24px | 22px |
Width
41| Custom property | > 1024px | 481–1024px | ≤ 480px |
|---|---|---|---|
--width-xxs | 320px | 256px | 64px |
--width-xs | 384px | 296px | 96px |
--width-sm | 480px | 320px | 128px |
--width-md | 560px | 480px | 160px |
--width-lg | 640px | 560px | 192px |
--width-xl | 768px | 720px | 224px |
--width-2xl | 1024px | 768px | 256px |
--width-3xl | 1280px | 896px | 288px |
--width-4xl | 1440px | 960px | 320px |
--width-5xl | 1600px | 1024px | 352px |
--width-icon-sm | 16px | 14px | 14px |
--width-icon-md | 20px | 18px | 18px |
--width-icon-lg | 24px | 22px | 22px |
--width-icon-xl | 28px | 24px | 24px |
--width-icon-2xl | 32px | 26px | 26px |
--width-icon-3xl | 36px | 28px | 28px |
--width-icon-square-certificate-xs | 32px | 20px | 14px |
--width-icon-square-certificate-sm | 40px | 28px | 18px |
--width-icon-square-certificate-md | 48px | 32px | 24px |
--width-icon-square-certificate-lg | 64px | 40px | 28px |
--width-6xl | 1920px | 1280px | 384px |
--width-paragraph-max-width | 720px | — | 440px |
--width-category-card-width-sm | 112px | 88px | 72px |
--width-category-card-width-md | 144px | 112px | 88px |
--width-category-card-width-lg | 176px | 128px | 96px |
--width-product-card-row-min-width | 800px | 720px | 350px |
--width-product-card-row-max-width | 1440px | 960px | 390px |
--width-product-card-circular-md | 16px | 10px | 10px |
--width-product-card-square | 180px | 140px | 100px |
--width-modal-and-drawer-ui-overlay-xs-max-width | 384px | 296px | 393px |
--width-modal-and-drawer-ui-overlay-sm-max-width | 560px | 480px | 393px |
--width-modal-and-drawer-ui-overlay-md-max-width | 640px | 560px | 393px |
--width-modal-and-drawer-ui-overlay-lg-max-width | 768px | 560px | 393px |
--width-modal-and-drawer-ui-overlay-xl-max-width | 1024px | 720px | 393px |
--width-modal-and-drawer-body-max-height | 2000px | — | 350px |
--width-modal-and-drawer-max-height | 2000px | 1440px | 550px |
--width-docked-panel-max-width | 600px | 560px | 393px |
--width-page-width | 1440px | 960px | 375px |
--width-half-page-paragraph-max-width | 640px | 480px | 351px |
--width-checkboxes-sm | 16px | 14px | 14px |
--width-checkboxes-md | 20px | 18px | 18px |