Unreleased
Spacing and sizing
Every responsiveSizing token with its CSS variable and value at each breakpoint.
On this page
Every responsiveSizing token, one column per breakpoint (sm, md, lg). A breakpoint's value applies from its min width upward. Use a token through its CSS variable, for example p-(--section-padding-y) or gap-(--gap-md). The text style classes built from the typography group are on Typography.
unitsLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
w100 | --units-w100 | 100vw | 100vw | 100vw |
w90 | --units-w90 | 90vw | 90vw | 90vw |
w80 | --units-w80 | 80vw | 80vw | 80vw |
w75 | --units-w75 | 75vw | 75vw | 75vw |
w66 | --units-w66 | 66.6666vw | 66.6666vw | 66.6666vw |
w60 | --units-w60 | 60vw | 60vw | 60vw |
w50 | --units-w50 | 50vw | 50vw | 50vw |
w40 | --units-w40 | 40vw | 40vw | 40vw |
w33 | --units-w33 | 33.3333vw | 33.3333vw | 33.3333vw |
w25 | --units-w25 | 25vw | 25vw | 25vw |
w20 | --units-w20 | 20vw | 20vw | 20vw |
w10 | --units-w10 | 10vw | 10vw | 10vw |
w5 | --units-w5 | 5vw | 5vw | 5vw |
w0 | --units-w0 | 0vw | 0vw | 0vw |
h100 | --units-h100 | 100vh | 100vh | 100vh |
h80 | --units-h80 | 80vh | 80vh | 80vh |
h75 | --units-h75 | 75vh | 75vh | 75vh |
h66 | --units-h66 | 66.6666vh | 66.6666vh | 66.6666vh |
h50 | --units-h50 | 50vh | 50vh | 50vh |
h33 | --units-h33 | 33.3333vh | 33.3333vh | 33.3333vh |
h25 | --units-h25 | 25vh | 25vh | 25vh |
h0 | --units-h0 | 0vh | 0vh | 0vh |
gridLink to this section
| Token | CSS variable | sm | md | lg | Fluid |
|---|---|---|---|---|---|
default.count | --grid-default-count | 12 | 24 | 24 | |
default.gap | --grid-default-gap | 16px | 12px | 20px | yes |
default.margin | --grid-default-margin | 17px | 30px | 78px | yes |
gapLink to this section
Emitted as calc(var(--spacing) * <px> / 4), so these values scale with the viewport inside .vw (see Breakpoints).
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
none | --gap-none | 0px | 0px | 0px |
xs | --gap-xs | 8px | 6px | 10px |
sm | --gap-sm | 16px | 12px | 20px |
md | --gap-md | 32px | 24px | 40px |
lg | --gap-lg | 48px | 36px | 60px |
xl | --gap-xl | 64px | 48px | 80px |
2xl | --gap-2xl | 80px | 60px | 100px |
3xl | --gap-3xl | 96px | 72px | 120px |
typographyLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
blockMarginY | --typography-block-margin-y | 16px | 16px | 16px |
h1.fontSize | --typography-h1-font-size | 33.31px | 43.19px | 54.07px |
h1.lineHeight | --typography-h1-line-height | 42.2px | 50.47px | 59.21px |
h1.letterSpacing | --typography-h1-letter-spacing | 0px | 0px | 0px |
h2.fontSize | --typography-h2-font-size | 29.48px | 36.6px | 44.14px |
h2.lineHeight | --typography-h2-line-height | 38.59px | 45.07px | 51.22px |
h2.letterSpacing | --typography-h2-letter-spacing | 0px | 0px | 0px |
h3.fontSize | --typography-h3-font-size | 26.09px | 31.02px | 36.03px |
h3.lineHeight | --typography-h3-line-height | 35.07px | 40.08px | 44.58px |
h3.letterSpacing | --typography-h3-letter-spacing | 0px | 0px | 0px |
h4.fontSize | --typography-h4-font-size | 23.09px | 26.29px | 29.41px |
h4.lineHeight | --typography-h4-line-height | 31.65px | 35.29px | 38.53px |
h4.letterSpacing | --typography-h4-letter-spacing | 0px | 0px | 0px |
h5.fontSize | --typography-h5-font-size | 20.43px | 22.28px | 24.01px |
h5.lineHeight | --typography-h5-line-height | 28.36px | 30.67px | 32.74px |
h5.letterSpacing | --typography-h5-letter-spacing | 0px | 0px | 0px |
h6.fontSize | --typography-h6-font-size | 18.08px | 18.88px | 19.6px |
h6.lineHeight | --typography-h6-line-height | 25.26px | 26.34px | 27.29px |
h6.letterSpacing | --typography-h6-letter-spacing | 0px | 0px | 0px |
label.fontSize | --typography-label-font-size | 12px | 14px | 14px |
label.lineHeight | --typography-label-line-height | 22px | 24px | 24px |
label.letterSpacing | --typography-label-letter-spacing | 3px | 4px | 4px |
lead.fontSize | --typography-lead-font-size | 18px | 20px | 20px |
lead.lineHeight | --typography-lead-line-height | 28px | 28px | 30px |
lead.letterSpacing | --typography-lead-letter-spacing | 0px | 0px | 0px |
body.fontSize | --typography-body-font-size | 16px | 16px | 16px |
body.lineHeight | --typography-body-line-height | 28px | 28px | 28px |
body.letterSpacing | --typography-body-letter-spacing | 0px | 0px | 0px |
small.fontSize | --typography-small-font-size | 12px | 14px | 14px |
small.lineHeight | --typography-small-line-height | 22px | 24px | 24px |
small.letterSpacing | --typography-small-letter-spacing | 0px | 0px | 0px |
form.label.fontSize | --typography-form-label-font-size | 16px | 16px | 16px |
form.label.lineHeight | --typography-form-label-line-height | 28px | 28px | 28px |
form.label.letterSpacing | --typography-form-label-letter-spacing | 0px | 0px | 0px |
form.description.fontSize | --typography-form-description-font-size | 16px | 16px | 16px |
form.description.lineHeight | --typography-form-description-line-height | 28px | 28px | 28px |
form.description.letterSpacing | --typography-form-description-letter-spacing | 0px | 0px | 0px |
form.block.fontSize | --typography-form-block-font-size | 16px | 16px | 16px |
form.block.lineHeight | --typography-form-block-line-height | 28px | 28px | 28px |
form.block.letterSpacing | --typography-form-block-letter-spacing | 0px | 0px | 0px |
form.inline.fontSize | --typography-form-inline-font-size | 16px | 16px | 16px |
form.inline.lineHeight | --typography-form-inline-line-height | 28px | 28px | 28px |
form.inline.letterSpacing | --typography-form-inline-letter-spacing | 0px | 0px | 0px |
containerLink to this section
Emitted as calc(var(--spacing) * <px> / 4), so these values scale with the viewport inside .vw (see Breakpoints).
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
width | --container-width | 356px | 708px | 1036px |
margin | --container-margin | 17px | 30px | 78px |
headerLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
height | --header-height | 64px | 96px | 96px |
shadowX | --header-shadow-x | 0px | 0px | 0px |
shadowY | --header-shadow-y | 1px | 1px | 1px |
shadowBlur | --header-shadow-blur | 0px | 0px | 0px |
shadowSpread | --header-shadow-spread | 0px | 0px | 0px |
container.paddingX | --header-container-padding-x | 0px | 0px | 0px |
container.gapX | --header-container-gap-x | 24px | 24px | 24px |
logo.height | --header-logo-height | 48px | 64px | 64px |
navigation.gapX | --header-navigation-gap-x | 12px | 12px | 12px |
navigation.item.fontSize | --header-navigation-item-font-size | 16px | 16px | 16px |
navigation.item.lineHeight | --header-navigation-item-line-height | 28px | 28px | 24px |
navigation.item.letterSpacing | --header-navigation-item-letter-spacing | 0px | 0px | 0px |
navigation.item.paddingX | --header-navigation-item-padding-x | 10px | 10px | 10px |
navigation.item.paddingY | --header-navigation-item-padding-y | 4px | 4px | 4px |
navigation.item.gap | --header-navigation-item-gap | 6px | 6px | 6px |
navigation.item.borderWidth | --header-navigation-item-border-width | 0px | 0px | 0px |
navigation.item.borderRadius | --header-navigation-item-border-radius | 4px | 4px | 4px |
navigation.item.iconSize | --header-navigation-item-icon-size | 16px | 16px | 16px |
navigation.item.shadowX | --header-navigation-item-shadow-x | 0px | 0px | 0px |
navigation.item.shadowY | --header-navigation-item-shadow-y | 0px | 0px | 0px |
navigation.item.shadowBlur | --header-navigation-item-shadow-blur | 0px | 0px | 0px |
navigation.item.shadowSpread | --header-navigation-item-shadow-spread | 0px | 0px | 0px |
navigation.menuToggle.fontSize | --header-navigation-menu-toggle-font-size | 16px | 16px | 16px |
navigation.menuToggle.lineHeight | --header-navigation-menu-toggle-line-height | 28px | 28px | 24px |
navigation.menuToggle.letterSpacing | --header-navigation-menu-toggle-letter-spacing | 0px | 0px | 0px |
navigation.menuToggle.paddingX | --header-navigation-menu-toggle-padding-x | 6px | 6px | 6px |
navigation.menuToggle.paddingY | --header-navigation-menu-toggle-padding-y | 6px | 6px | 6px |
navigation.menuToggle.gap | --header-navigation-menu-toggle-gap | 6px | 6px | 6px |
navigation.menuToggle.borderWidth | --header-navigation-menu-toggle-border-width | 0px | 0px | 0px |
navigation.menuToggle.borderRadius | --header-navigation-menu-toggle-border-radius | 4px | 4px | 4px |
navigation.menuToggle.iconSize | --header-navigation-menu-toggle-icon-size | 24px | 32px | 32px |
navigation.menuToggle.shadowX | --header-navigation-menu-toggle-shadow-x | 0px | 0px | 0px |
navigation.menuToggle.shadowY | --header-navigation-menu-toggle-shadow-y | 0px | 0px | 0px |
navigation.menuToggle.shadowBlur | --header-navigation-menu-toggle-shadow-blur | 0px | 0px | 0px |
navigation.menuToggle.shadowSpread | --header-navigation-menu-toggle-shadow-spread | 0px | 0px | 0px |
subNavigation.width | --header-sub-navigation-width | 280px | 280px | 280px |
subNavigation.beforeWidth | --header-sub-navigation-before-width | 12px | 12px | 12px |
subNavigation.beforeHeight | --header-sub-navigation-before-height | 4px | 4px | 4px |
subNavigation.marginTop | --header-sub-navigation-margin-top | 6px | 6px | 6px |
subNavigation.paddingX | --header-sub-navigation-padding-x | 20px | 20px | 20px |
subNavigation.paddingY | --header-sub-navigation-padding-y | 16px | 16px | 16px |
subNavigation.gapY | --header-sub-navigation-gap-y | 16px | 16px | 16px |
subNavigation.borderRadius | --header-sub-navigation-border-radius | 8px | 8px | 8px |
subNavigation.borderWidth | --header-sub-navigation-border-width | 0px | 0px | 0px |
subNavigation.shadowX | --header-sub-navigation-shadow-x | 0px | 0px | 0px |
subNavigation.shadowY | --header-sub-navigation-shadow-y | 0px | 0px | 0px |
subNavigation.shadowBlur | --header-sub-navigation-shadow-blur | 25px | 25px | 25px |
subNavigation.shadowSpread | --header-sub-navigation-shadow-spread | -3px | -3px | -3px |
menu.maxWidth | --header-menu-max-width | 640px | 390px | 512px |
menu.backdropBlur | --header-menu-backdrop-blur | 0px | 24px | 24px |
menu.shadowX | --header-menu-shadow-x | 0px | 0px | 0px |
menu.shadowY | --header-menu-shadow-y | 0px | 0px | 0px |
menu.shadowBlur | --header-menu-shadow-blur | 0px | 50px | 50px |
menu.shadowSpread | --header-menu-shadow-spread | 0px | -12px | -12px |
menu.container.paddingTop | --header-menu-container-padding-top | 48px | 48px | 48px |
menu.container.paddingBottom | --header-menu-container-padding-bottom | 96px | 96px | 96px |
menu.container.gapY | --header-menu-container-gap-y | 24px | 24px | 24px |
menu.navigation.gapY | --header-menu-navigation-gap-y | 12px | 12px | 12px |
menu.subNavigation.paddingLeft | --header-menu-sub-navigation-padding-left | 16px | 16px | 16px |
menu.subNavigation.paddingRight | --header-menu-sub-navigation-padding-right | 0px | 0px | 0px |
menu.subNavigation.paddingY | --header-menu-sub-navigation-padding-y | 0px | 0px | 0px |
menu.subNavigation.gapY | --header-menu-sub-navigation-gap-y | 12px | 12px | 12px |
menu.subNavigation.borderRadius | --header-menu-sub-navigation-border-radius | 0px | 0px | 0px |
menu.subNavigation.borderWidth | --header-menu-sub-navigation-border-width | 0px | 0px | 0px |
footerLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
logo.height | --footer-logo-height | 48px | 64px | 64px |
social.gap | --footer-social-gap | 24px | 20px | 20px |
main.paddingY | --footer-main-padding-y | 48px | 36px | 60px |
main.gapY | --footer-main-gap-y | 48px | 36px | 60px |
main.navigation.titleMarginBottom | --footer-main-navigation-title-margin-bottom | 10px | 10px | 10px |
main.navigation.itemsGapY | --footer-main-navigation-items-gap-y | 4px | 4px | 4px |
bottom.paddingY | --footer-bottom-padding-y | 24px | 24px | 24px |
bottom.copyright.gap | --footer-bottom-copyright-gap | 8px | 6px | 10px |
bottom.navigation.gap | --footer-bottom-navigation-gap | 16px | 12px | 20px |
simple.paddingY | --footer-simple-padding-y | 48px | 64px | 64px |
simple.gapY | --footer-simple-gap-y | 32px | 40px | 40px |
simple.content.maxWidth | --footer-simple-content-max-width | 390px | 380px | 380px |
simple.navigation.gap | --footer-simple-navigation-gap | 12px | 32px | 36px |
articleLink to this section
Emitted as calc(var(--spacing) * <px> / 4), so these values scale with the viewport inside .vw (see Breakpoints).
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
paddingX | --article-padding-x | 0px | 60px | 88px |
heroLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
simple.marginTop | --hero-simple-margin-top | 0px | 0px | 0px |
simple.paddingTop | --hero-simple-padding-top | 64px | 60px | 100px |
simple.paddingBottom | --hero-simple-padding-bottom | 0px | 60px | 100px |
simple.gapY | --hero-simple-gap-y | 64px | 36px | 60px |
simple.contentPaddingX | --hero-simple-content-padding-x | 0px | 0px | 0px |
simple.contentMaxWidth | --hero-simple-content-max-width | 356px | 708px | 1036px |
simple.mediaWidth | --hero-simple-media-width | 390px | 708px | 1036px |
background.minHeight | --hero-background-min-height | 844px | 512px | 630px |
background.marginTop | --hero-background-margin-top | 0px | 0px | 0px |
background.paddingTop | --hero-background-padding-top | 64px | 60px | 100px |
background.paddingBottom | --hero-background-padding-bottom | 64px | 60px | 100px |
background.contentPaddingX | --hero-background-content-padding-x | 0px | 0px | 0px |
background.contentMaxWidth | --hero-background-content-max-width | 356px | 528px | 684px |
feature.contentPaddingSide | --hero-feature-content-padding-side | 0px | 0px | 0px |
feature.contentPaddingCenter | --hero-feature-content-padding-center | 0px | 36px | 60px |
feature.contentPaddingY | --hero-feature-content-padding-y | 64px | 60px | 100px |
feature.marginTop | --hero-feature-margin-top | 0px | 0px | 0px |
feature.mediaMinHeight | --hero-feature-media-min-height | 250px | 512px | 630px |
sectionLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
paddingY | --section-padding-y | 64px | 60px | 100px |
featureLink to this section
| Token | CSS variable | sm | md | lg | Fluid |
|---|---|---|---|---|---|
contentPaddingY | --feature-content-padding-y | 64px | 60px | 100px | |
contentPaddingSide | --feature-content-padding-side | 0px | 0px | 0px | yes |
contentPaddingCenter | --feature-content-padding-center | 0px | 36px | 60px | yes |
mediaMinHeight | --feature-media-min-height | 294px | 512px | 512px | yes |
galleryLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
spaceY | --gallery-space-y | 32px | 24px | 40px |
wrapperGapY | --gallery-wrapper-gap-y | 16px | 12px | 20px |
slidesGapX | --gallery-slides-gap-x | 16px | 12px | 20px |
slideHeight | --gallery-slide-height | 300px | 300px | 300px |
navigation.paddingTop | --gallery-navigation-padding-top | 16px | 16px | 16px |
navigation.gapX | --gallery-navigation-gap-x | 8px | 6px | 10px |
navigation.pagination.fontSize | --gallery-navigation-pagination-font-size | 12px | 14px | 14px |
navigation.pagination.lineHeight | --gallery-navigation-pagination-line-height | 12px | 14px | 14px |
navigation.pagination.letterSpacing | --gallery-navigation-pagination-letter-spacing | 0px | 0px | 0px |
navigation.button.fontSize | --gallery-navigation-button-font-size | 16px | 16px | 16px |
navigation.button.lineHeight | --gallery-navigation-button-line-height | 28px | 28px | 24px |
navigation.button.letterSpacing | --gallery-navigation-button-letter-spacing | 0px | 0px | 0px |
navigation.button.paddingX | --gallery-navigation-button-padding-x | 16px | 16px | 16px |
navigation.button.paddingY | --gallery-navigation-button-padding-y | 6px | 6px | 6px |
navigation.button.gap | --gallery-navigation-button-gap | 6px | 6px | 6px |
navigation.button.borderWidth | --gallery-navigation-button-border-width | 1px | 1px | 1px |
navigation.button.borderRadius | --gallery-navigation-button-border-radius | 6px | 6px | 6px |
navigation.button.iconSize | --gallery-navigation-button-icon-size | 14px | 14px | 14px |
navigation.button.shadowX | --gallery-navigation-button-shadow-x | 0px | 0px | 0px |
navigation.button.shadowY | --gallery-navigation-button-shadow-y | 0px | 0px | 0px |
navigation.button.shadowBlur | --gallery-navigation-button-shadow-blur | 6px | 0px | 0px |
navigation.button.shadowSpread | --gallery-navigation-button-shadow-spread | 0px | 0px | 0px |
separatorLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
lineWidth | --separator-line-width | 1px | 1px | 1px |
marginY | --separator-margin-y | 12px | 12px | 12px |
iconLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
size | --icon-size | 24px | 24px | 24px |
hasBackgroundSize | --icon-has-background-size | 44px | 44px | 44px |
hasBackgroundIconSize | --icon-has-background-icon-size | 20px | 20px | 20px |
hasBackgroundBorderWidth | --icon-has-background-border-width | 0px | 0px | 0px |
hasBackgroundBorderRadius | --icon-has-background-border-radius | 4px | 4px | 4px |
hasBackgroundShadowX | --icon-has-background-shadow-x | 0px | 0px | 0px |
hasBackgroundShadowY | --icon-has-background-shadow-y | 4px | 4px | 4px |
hasBackgroundShadowBlur | --icon-has-background-shadow-blur | 6px | 6px | 6px |
hasBackgroundShadowSpread | --icon-has-background-shadow-spread | 0px | 0px | 0px |
listLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
gapY | --list-gap-y | 8px | 8px | 8px |
spaceX | --list-space-x | 8px | 8px | 8px |
markerSize | --list-marker-size | 28px | 28px | 28px |
iconSize | --list-icon-size | 16px | 16px | 16px |
mediaLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
borderRadius | --media-border-radius | 12px | 12px | 12px |
borderWidth | --media-border-width | 0px | 0px | 0px |
shadowX | --media-shadow-x | 0px | 0px | 0px |
shadowY | --media-shadow-y | 4px | 4px | 4px |
shadowBlur | --media-shadow-blur | 4px | 4px | 4px |
shadowSpread | --media-shadow-spread | 0px | 0px | 0px |
iconSize | --media-icon-size | 48px | 64px | 64px |
carouselLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
gapY | --carousel-gap-y | 8px | 6px | 10px |
wrapper.borderRadius | --carousel-wrapper-border-radius | 12px | 12px | 12px |
wrapper.borderWidth | --carousel-wrapper-border-width | 0px | 0px | 0px |
wrapper.pagination.gapX | --carousel-wrapper-pagination-gap-x | 8px | 8px | 8px |
wrapper.pagination.bulletWidth | --carousel-wrapper-pagination-bullet-width | 8px | 8px | 8px |
wrapper.pagination.bulletActiveWidth | --carousel-wrapper-pagination-bullet-active-width | 8px | 8px | 8px |
wrapper.pagination.bulletHeight | --carousel-wrapper-pagination-bullet-height | 8px | 8px | 8px |
wrapper.pagination.bulletBorderRadius | --carousel-wrapper-pagination-bullet-border-radius | 9999px | 9999px | 9999px |
wrapper.pagination.bulletBorderWidth | --carousel-wrapper-pagination-bullet-border-width | 0px | 0px | 0px |
wrapper.button.size | --carousel-wrapper-button-size | 24px | 24px | 24px |
wrapper.button.borderRadius | --carousel-wrapper-button-border-radius | 0px | 0px | 0px |
wrapper.button.borderWidth | --carousel-wrapper-button-border-width | 0px | 0px | 0px |
wrapper.button.iconSize | --carousel-wrapper-button-icon-size | 24px | 24px | 24px |
wrapper.button.shadowX | --carousel-wrapper-button-shadow-x | 0px | 0px | 0px |
wrapper.button.shadowY | --carousel-wrapper-button-shadow-y | 0px | 0px | 0px |
wrapper.button.shadowBlur | --carousel-wrapper-button-shadow-blur | 0px | 0px | 0px |
wrapper.button.shadowSpread | --carousel-wrapper-button-shadow-spread | 0px | 0px | 0px |
thumbs.gapX | --carousel-thumbs-gap-x | 8px | 6px | 10px |
thumbs.itemSize | --carousel-thumbs-item-size | 48px | 64px | 64px |
thumbs.borderRadius | --carousel-thumbs-border-radius | 12px | 12px | 12px |
thumbs.borderWidth | --carousel-thumbs-border-width | 0px | 0px | 0px |
thumbs.defaultOpacity | --carousel-thumbs-default-opacity | 50 | 50 | 50 |
thumbs.activeOpacity | --carousel-thumbs-active-opacity | 100 | 100 | 100 |
bottom.paddingTop | --carousel-bottom-padding-top | 16px | 16px | 16px |
bottom.gapX | --carousel-bottom-gap-x | 8px | 6px | 10px |
bottom.pagination.fontSize | --carousel-bottom-pagination-font-size | 12px | 14px | 14px |
bottom.pagination.lineHeight | --carousel-bottom-pagination-line-height | 12px | 14px | 14px |
bottom.pagination.letterSpacing | --carousel-bottom-pagination-letter-spacing | 0px | 0px | 0px |
bottom.button.fontSize | --carousel-bottom-button-font-size | 16px | 16px | 16px |
bottom.button.lineHeight | --carousel-bottom-button-line-height | 28px | 28px | 24px |
bottom.button.letterSpacing | --carousel-bottom-button-letter-spacing | 0px | 0px | 0px |
bottom.button.paddingX | --carousel-bottom-button-padding-x | 16px | 16px | 16px |
bottom.button.paddingY | --carousel-bottom-button-padding-y | 6px | 6px | 6px |
bottom.button.gap | --carousel-bottom-button-gap | 6px | 6px | 6px |
bottom.button.borderWidth | --carousel-bottom-button-border-width | 1px | 1px | 1px |
bottom.button.borderRadius | --carousel-bottom-button-border-radius | 6px | 6px | 6px |
bottom.button.iconSize | --carousel-bottom-button-icon-size | 14px | 14px | 14px |
bottom.button.shadowX | --carousel-bottom-button-shadow-x | 0px | 0px | 0px |
bottom.button.shadowY | --carousel-bottom-button-shadow-y | 0px | 0px | 0px |
bottom.button.shadowBlur | --carousel-bottom-button-shadow-blur | 6px | 0px | 0px |
bottom.button.shadowSpread | --carousel-bottom-button-shadow-spread | 0px | 0px | 0px |
avatarLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
size | --avatar-size | 56px | 64px | 64px |
borderRadius | --avatar-border-radius | 9999px | 9999px | 9999px |
borderWidth | --avatar-border-width | 0px | 0px | 0px |
shadowX | --avatar-shadow-x | 0px | 0px | 0px |
shadowY | --avatar-shadow-y | 0px | 0px | 0px |
shadowBlur | --avatar-shadow-blur | 0px | 0px | 0px |
shadowSpread | --avatar-shadow-spread | 0px | 0px | 0px |
buttonLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
primary.fontSize | --button-primary-font-size | 16px | 16px | 16px |
primary.lineHeight | --button-primary-line-height | 28px | 28px | 24px |
primary.letterSpacing | --button-primary-letter-spacing | 0px | 0px | 0px |
primary.paddingX | --button-primary-padding-x | 16px | 16px | 16px |
primary.paddingY | --button-primary-padding-y | 6px | 6px | 6px |
primary.gap | --button-primary-gap | 6px | 6px | 6px |
primary.borderWidth | --button-primary-border-width | 1px | 1px | 1px |
primary.borderRadius | --button-primary-border-radius | 6px | 6px | 6px |
primary.iconSize | --button-primary-icon-size | 14px | 14px | 14px |
primary.shadowX | --button-primary-shadow-x | 0px | 0px | 0px |
primary.shadowY | --button-primary-shadow-y | 0px | 0px | 0px |
primary.shadowBlur | --button-primary-shadow-blur | 6px | 0px | 0px |
primary.shadowSpread | --button-primary-shadow-spread | 0px | 0px | 0px |
secondary.fontSize | --button-secondary-font-size | 16px | 16px | 16px |
secondary.lineHeight | --button-secondary-line-height | 28px | 28px | 24px |
secondary.letterSpacing | --button-secondary-letter-spacing | 0px | 0px | 0px |
secondary.paddingX | --button-secondary-padding-x | 16px | 16px | 16px |
secondary.paddingY | --button-secondary-padding-y | 6px | 6px | 6px |
secondary.gap | --button-secondary-gap | 6px | 6px | 6px |
secondary.borderWidth | --button-secondary-border-width | 1px | 1px | 1px |
secondary.borderRadius | --button-secondary-border-radius | 6px | 6px | 6px |
secondary.iconSize | --button-secondary-icon-size | 14px | 14px | 14px |
secondary.shadowX | --button-secondary-shadow-x | 0px | 0px | 0px |
secondary.shadowY | --button-secondary-shadow-y | 0px | 0px | 0px |
secondary.shadowBlur | --button-secondary-shadow-blur | 6px | 0px | 0px |
secondary.shadowSpread | --button-secondary-shadow-spread | 0px | 0px | 0px |
chipLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
fontSize | --chip-font-size | 12px | 14px | 14px |
lineHeight | --chip-line-height | 22px | 24px | 24px |
letterSpacing | --chip-letter-spacing | 0px | 0px | 0px |
paddingX | --chip-padding-x | 8px | 8px | 8px |
paddingY | --chip-padding-y | 2px | 2px | 2px |
gap | --chip-gap | 4px | 4px | 4px |
borderWidth | --chip-border-width | 1px | 1px | 1px |
borderRadius | --chip-border-radius | 3px | 3px | 3px |
iconSize | --chip-icon-size | 12px | 12px | 12px |
shadowX | --chip-shadow-x | 0px | 0px | 0px |
shadowY | --chip-shadow-y | 0px | 0px | 0px |
shadowBlur | --chip-shadow-blur | 0px | 0px | 0px |
shadowSpread | --chip-shadow-spread | 0px | 0px | 0px |
cardLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
default.paddingX | --card-default-padding-x | 16px | 24px | 28px |
default.paddingY | --card-default-padding-y | 16px | 24px | 28px |
default.borderWidth | --card-default-border-width | 1px | 1px | 1px |
default.borderRadius | --card-default-border-radius | 8px | 12px | 12px |
default.shadowX | --card-default-shadow-x | 0px | 0px | 0px |
default.shadowY | --card-default-shadow-y | 0px | 0px | 0px |
default.shadowBlur | --card-default-shadow-blur | 0px | 0px | 0px |
default.shadowSpread | --card-default-shadow-spread | 0px | 0px | 0px |
default.hoverShadowX | --card-default-hover-shadow-x | 0px | 0px | 0px |
default.hoverShadowY | --card-default-hover-shadow-y | 0px | 0px | 0px |
default.hoverShadowBlur | --card-default-hover-shadow-blur | 0px | 0px | 0px |
default.hoverShadowSpread | --card-default-hover-shadow-spread | 0px | 0px | 0px |
highlighted.paddingX | --card-highlighted-padding-x | 16px | 24px | 28px |
highlighted.paddingY | --card-highlighted-padding-y | 16px | 24px | 28px |
highlighted.borderWidth | --card-highlighted-border-width | 1px | 1px | 1px |
highlighted.borderRadius | --card-highlighted-border-radius | 8px | 12px | 12px |
highlighted.shadowX | --card-highlighted-shadow-x | 0px | 0px | 0px |
highlighted.shadowY | --card-highlighted-shadow-y | 0px | 0px | 0px |
highlighted.shadowBlur | --card-highlighted-shadow-blur | 0px | 0px | 0px |
highlighted.shadowSpread | --card-highlighted-shadow-spread | 3px | 4px | 6px |
highlighted.hoverShadowX | --card-highlighted-hover-shadow-x | 0px | 0px | 0px |
highlighted.hoverShadowY | --card-highlighted-hover-shadow-y | 0px | 0px | 0px |
highlighted.hoverShadowBlur | --card-highlighted-hover-shadow-blur | 0px | 0px | 0px |
highlighted.hoverShadowSpread | --card-highlighted-hover-shadow-spread | 6px | 8px | 10px |
accordionLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
default.paddingX | --accordion-default-padding-x | 16px | 24px | 28px |
default.paddingY | --accordion-default-padding-y | 16px | 24px | 28px |
default.borderWidth | --accordion-default-border-width | 1px | 1px | 1px |
default.borderRadius | --accordion-default-border-radius | 8px | 12px | 12px |
default.shadowX | --accordion-default-shadow-x | 0px | 0px | 0px |
default.shadowY | --accordion-default-shadow-y | 0px | 0px | 0px |
default.shadowBlur | --accordion-default-shadow-blur | 0px | 0px | 0px |
default.shadowSpread | --accordion-default-shadow-spread | 0px | 0px | 0px |
default.fontSize | --accordion-default-font-size | 18.08px | 18.88px | 19.6px |
default.lineHeight | --accordion-default-line-height | 25.26px | 26.34px | 27.29px |
default.letterSpacing | --accordion-default-letter-spacing | 0px | 0px | 0px |
default.iconSize | --accordion-default-icon-size | 20px | 24px | 24px |
default.iconMargin | --accordion-default-icon-margin | 12px | 16px | 24px |
default.contentGap | --accordion-default-content-gap | 12px | 16px | 16px |
default.contentPaddingLeft | --accordion-default-content-padding-left | 0px | 40px | 48px |
default.contentPaddingRight | --accordion-default-content-padding-right | 0px | 0px | 0px |
default.hoverShadowX | --accordion-default-hover-shadow-x | 0px | 0px | 0px |
default.hoverShadowY | --accordion-default-hover-shadow-y | 0px | 0px | 0px |
default.hoverShadowBlur | --accordion-default-hover-shadow-blur | 0px | 0px | 0px |
default.hoverShadowSpread | --accordion-default-hover-shadow-spread | 0px | 0px | 0px |
quoteLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
borderWidth | --quote-border-width | 2px | 2px | 2px |
paddingX | --quote-padding-x | 24px | 36px | 36px |
paddingY | --quote-padding-y | 16px | 18px | 28px |
gapY | --quote-gap-y | 24px | 16px | 24px |
iconSize | --quote-icon-size | 24px | 24px | 32px |
avatarSize | --quote-avatar-size | 56px | 64px | 64px |
avatarBorderRadius | --quote-avatar-border-radius | 9999px | 9999px | 9999px |
citeGapY | --quote-cite-gap-y | 18px | 16px | 18px |
labelsGapY | --quote-labels-gap-y | 0px | 0px | 0px |
formLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
row.gapX | --form-row-gap-x | 24px | 24px | 24px |
row.gapY | --form-row-gap-y | 28px | 28px | 28px |
group.gapY | --form-group-gap-y | 12px | 12px | 12px |
inputBlock.paddingX | --form-input-block-padding-x | 20px | 20px | 20px |
inputBlock.paddingY | --form-input-block-padding-y | 20px | 20px | 20px |
inputBlock.borderRadius | --form-input-block-border-radius | 10px | 10px | 10px |
inputBlock.borderWidth | --form-input-block-border-width | 1px | 1px | 1px |
inputBlock.iconSize | --form-input-block-icon-size | 24px | 24px | 24px |
inputBlock.default.shadowX | --form-input-block-default-shadow-x | 0px | 0px | 0px |
inputBlock.default.shadowY | --form-input-block-default-shadow-y | 0px | 0px | 0px |
inputBlock.default.shadowBlur | --form-input-block-default-shadow-blur | 0px | 0px | 0px |
inputBlock.default.shadowSpread | --form-input-block-default-shadow-spread | 0px | 0px | 0px |
inputBlock.focus.shadowX | --form-input-block-focus-shadow-x | 0px | 0px | 0px |
inputBlock.focus.shadowY | --form-input-block-focus-shadow-y | 0px | 0px | 0px |
inputBlock.focus.shadowBlur | --form-input-block-focus-shadow-blur | 0px | 0px | 0px |
inputBlock.focus.shadowSpread | --form-input-block-focus-shadow-spread | 0px | 0px | 0px |
inputBlock.invalid.shadowX | --form-input-block-invalid-shadow-x | 0px | 0px | 0px |
inputBlock.invalid.shadowY | --form-input-block-invalid-shadow-y | 0px | 0px | 0px |
inputBlock.invalid.shadowBlur | --form-input-block-invalid-shadow-blur | 0px | 0px | 0px |
inputBlock.invalid.shadowSpread | --form-input-block-invalid-shadow-spread | 0px | 0px | 0px |
inputInline.spaceY | --form-input-inline-space-y | 12px | 12px | 12px |
inputInline.gapX | --form-input-inline-gap-x | 12px | 12px | 12px |
inputInline.inputSize | --form-input-inline-input-size | 24px | 24px | 24px |
inputInline.checkSize | --form-input-inline-check-size | 18px | 18px | 18px |
inputInline.checkboxBorderRadius | --form-input-inline-checkbox-border-radius | 4px | 4px | 4px |
inputInline.markerSize | --form-input-inline-marker-size | 12px | 12px | 12px |
inputInline.switchWidth | --form-input-inline-switch-width | 40px | 40px | 40px |
inputInline.switchMarkerSize | --form-input-inline-switch-marker-size | 18px | 18px | 18px |
inputInline.borderWidth | --form-input-inline-border-width | 1px | 1px | 1px |
cookieConsentLink to this section
| Token | CSS variable | sm | md | lg |
|---|---|---|---|---|
backdropBlur | --cookie-consent-backdrop-blur | 0px | 24px | 24px |
surface.width | --cookie-consent-surface-width | 356px | 384px | 384px |
surface.offsetX | --cookie-consent-surface-offset-x | 17px | 24px | 24px |
surface.offsetY | --cookie-consent-surface-offset-y | 64px | 24px | 24px |
surface.borderWidth | --cookie-consent-surface-border-width | 1px | 1px | 1px |
surface.borderRadius | --cookie-consent-surface-border-radius | 8px | 12px | 12px |
surface.shadowX | --cookie-consent-surface-shadow-x | 0px | 0px | 0px |
surface.shadowY | --cookie-consent-surface-shadow-y | 0px | 0px | 0px |
surface.shadowBlur | --cookie-consent-surface-shadow-blur | 0px | 0px | 0px |
surface.shadowSpread | --cookie-consent-surface-shadow-spread | 0px | 0px | 0px |
title.fontSize | --cookie-consent-title-font-size | 18.08px | 18.88px | 19.6px |
title.lineHeight | --cookie-consent-title-line-height | 25.26px | 26.34px | 27.29px |
title.letterSpacing | --cookie-consent-title-letter-spacing | 0px | 0px | 0px |
description.fontSize | --cookie-consent-description-font-size | 16px | 16px | 16px |
description.lineHeight | --cookie-consent-description-line-height | 28px | 28px | 28px |
description.letterSpacing | --cookie-consent-description-letter-spacing | 0px | 0px | 0px |
button.primary.paddingX | --cookie-consent-button-primary-padding-x | 16px | 16px | 16px |
button.primary.paddingY | --cookie-consent-button-primary-padding-y | 6px | 6px | 6px |
button.primary.borderWidth | --cookie-consent-button-primary-border-width | 1px | 1px | 1px |
button.primary.borderRadius | --cookie-consent-button-primary-border-radius | 6px | 6px | 6px |
button.primary.fontSize | --cookie-consent-button-primary-font-size | 16px | 16px | 16px |
button.primary.lineHeight | --cookie-consent-button-primary-line-height | 28px | 28px | 24px |
button.primary.letterSpacing | --cookie-consent-button-primary-letter-spacing | 0px | 0px | 0px |
button.secondary.paddingX | --cookie-consent-button-secondary-padding-x | 16px | 16px | 16px |
button.secondary.paddingY | --cookie-consent-button-secondary-padding-y | 6px | 6px | 6px |
button.secondary.borderWidth | --cookie-consent-button-secondary-border-width | 1px | 1px | 1px |
button.secondary.borderRadius | --cookie-consent-button-secondary-border-radius | 6px | 6px | 6px |
button.secondary.fontSize | --cookie-consent-button-secondary-font-size | 16px | 16px | 16px |
button.secondary.lineHeight | --cookie-consent-button-secondary-line-height | 28px | 28px | 24px |
button.secondary.letterSpacing | --cookie-consent-button-secondary-letter-spacing | 0px | 0px | 0px |
category.borderWidth | --cookie-consent-category-border-width | 1px | 1px | 1px |
category.borderRadius | --cookie-consent-category-border-radius | 8px | 12px | 12px |
category.iconSize | --cookie-consent-category-icon-size | 20px | 24px | 24px |
category.title.fontSize | --cookie-consent-category-title-font-size | 18.08px | 18.88px | 19.6px |
category.title.lineHeight | --cookie-consent-category-title-line-height | 25.26px | 26.34px | 27.29px |
category.title.letterSpacing | --cookie-consent-category-title-letter-spacing | 0px | 0px | 0px |
closeButton.size | --cookie-consent-close-button-size | 24px | 24px | 24px |
toggle.width | --cookie-consent-toggle-width | 50px | 50px | 50px |
toggle.height | --cookie-consent-toggle-height | 23px | 23px | 23px |
toggle.borderRadius | --cookie-consent-toggle-border-radius | 64px | 64px | 64px |