---
title: "Spacing and sizing"
description: "Every responsiveSizing token with its CSS variable and value at each breakpoint."
requested_language: nl
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/nl/reference/tokens/spacing
version: unreleased (main)
docs_index: https://docs.systhema.app/nl/llms.txt
---
> This page isn't translated yet. Showing English.


<!-- generated by pnpm docs:generate; do not edit -->

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](https://docs.systhema.app/nl/reference/tokens/typography.md).

## units

| 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`       |

## grid

| 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   |

## gap

Emitted as `calc(var(--spacing) * <px> / 4)`, so these values scale with the viewport inside `.vw` (see [Breakpoints](https://docs.systhema.app/nl/reference/tokens/breakpoints.md)).

| 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` |

## typography

| 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`     |

## container

Emitted as `calc(var(--spacing) * <px> / 4)`, so these values scale with the viewport inside `.vw` (see [Breakpoints](https://docs.systhema.app/nl/reference/tokens/breakpoints.md)).

| Token    | CSS variable         | sm      | md      | lg       |
| -------- | -------------------- | ------- | ------- | -------- |
| `width`  | `--container-width`  | `356px` | `708px` | `1036px` |
| `margin` | `--container-margin` | `17px`  | `30px`  | `78px`   |

## header

| 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`   |

## footer

| 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`  |

## article

Emitted as `calc(var(--spacing) * <px> / 4)`, so these values scale with the viewport inside `.vw` (see [Breakpoints](https://docs.systhema.app/nl/reference/tokens/breakpoints.md)).

| Token      | CSS variable          | sm    | md     | lg     |
| ---------- | --------------------- | ----- | ------ | ------ |
| `paddingX` | `--article-padding-x` | `0px` | `60px` | `88px` |

## hero

| 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`  |

## section

| Token      | CSS variable          | sm     | md     | lg      |
| ---------- | --------------------- | ------ | ------ | ------- |
| `paddingY` | `--section-padding-y` | `64px` | `60px` | `100px` |

## feature

| 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   |

## gallery

| 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`   |

## separator

| Token       | CSS variable             | sm     | md     | lg     |
| ----------- | ------------------------ | ------ | ------ | ------ |
| `lineWidth` | `--separator-line-width` | `1px`  | `1px`  | `1px`  |
| `marginY`   | `--separator-margin-y`   | `12px` | `12px` | `12px` |

## icon

| 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`  |

## list

| 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` |

## media

| 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` |

## carousel

| 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`    |

## avatar

| 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`    |

## button

| 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`  |

## chip

| 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`  |

## card

| 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` |

## accordion

| 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`     |

## quote

| 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`    |

## form

| 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`  |

## cookieConsent

| 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`    |