Spacing and sizing draft v0.2.0

The spacing scale and the element sizes from the Figma library, which components pick their paddings, gaps, heights and icon sizes from.

Two scales from the Figma library (Dimension), as they are, measure everything: space, the room inside and between elements, on a 4 px grid; and size, the dimensions of elements such as icons and avatars. Components and the docs site read them directly: each component picks its padding, gaps, heights and icon sizes from them in its own tokens. There is no semantic spacing layer in between.

Tokens

Semantic tokens owned by the foundation (tokens in packages/components/specs/foundations/spacing.spec.json). They live in packages/tokens/src/semantic/ (recreated from the Figma library) or tokens/additions/semantic/ (added by the design system), with their other values in tokens/modes/, tokens/additions/modes/ and tokens/platforms/.

Token	Type	Value	Resolved	CSS
`space.1`	dimension	`{"value":1,"unit":"px"}`	`1px`	`--space-1`
`space.2`	dimension	`{"value":2,"unit":"px"}`	`2px`	`--space-2`
`space.3`	dimension	`{"value":3,"unit":"px"}`	`3px`	`--space-3`
`space.4`	dimension	`{"value":4,"unit":"px"}`	`4px`	`--space-4`
`space.5`	dimension	`{"value":5,"unit":"px"}`	`5px`	`--space-5`
`space.6`	dimension	`{"value":6,"unit":"px"}`	`6px`	`--space-6`
`space.7`	dimension	`{"value":7,"unit":"px"}`	`7px`	`--space-7`
`space.8`	dimension	`{"value":8,"unit":"px"}`	`8px`	`--space-8`
`space.10`	dimension	`{"value":10,"unit":"px"}`	`10px`	`--space-10`
`space.12`	dimension	`{"value":12,"unit":"px"}`	`12px`	`--space-12`
`space.14`	dimension	`{"value":14,"unit":"px"}`	`14px`	`--space-14`
`space.16`	dimension	`{"value":16,"unit":"px"}`	`16px`	`--space-16`
`space.20`	dimension	`{"value":20,"unit":"px"}`	`20px`	`--space-20`
`space.24`	dimension	`{"value":24,"unit":"px"}`	`24px`	`--space-24`
`space.28`	dimension	`{"value":28,"unit":"px"}`	`28px`	`--space-28`
`space.32`	dimension	`{"value":32,"unit":"px"}`	`32px`	`--space-32`
`space.36`	dimension	`{"value":36,"unit":"px"}`	`36px`	`--space-36`
`space.40`	dimension	`{"value":40,"unit":"px"}`	`40px`	`--space-40`
`space.44`	dimension	`{"value":44,"unit":"px"}`	`44px`	`--space-44`
`space.48`	dimension	`{"value":48,"unit":"px"}`	`48px`	`--space-48`
`space.56`	dimension	`{"value":56,"unit":"px"}`	`56px`	`--space-56`
`space.64`	dimension	`{"value":64,"unit":"px"}`	`64px`	`--space-64`
`space.72`	dimension	`{"value":72,"unit":"px"}`	`72px`	`--space-72`
`space.80`	dimension	`{"value":80,"unit":"px"}`	`80px`	`--space-80`
`space.96`	dimension	`{"value":96,"unit":"px"}`	`96px`	`--space-96`
`space.112`	dimension	`{"value":112,"unit":"px"}`	`112px`	`--space-112`
`space.128`	dimension	`{"value":128,"unit":"px"}`	`128px`	`--space-128`
`space.144`	dimension	`{"value":144,"unit":"px"}`	`144px`	`--space-144`
`space.160`	dimension	`{"value":160,"unit":"px"}`	`160px`	`--space-160`
`space.none`	dimension	`{"value":0,"unit":"px"}`	`0px`	`--space-none`
`size.1`	dimension	`{"value":8,"unit":"px"}`	`8px`	`--size-1`
`size.2`	dimension	`{"value":16,"unit":"px"}`	`16px`	`--size-2`
`size.3`	dimension	`{"value":20,"unit":"px"}`	`20px`	`--size-3`
`size.4`	dimension	`{"value":24,"unit":"px"}`	`24px`	`--size-4`
`size.5`	dimension	`{"value":32,"unit":"px"}`	`32px`	`--size-5`
`size.6`	dimension	`{"value":40,"unit":"px"}`	`40px`	`--size-6`
`size.7`	dimension	`{"value":56,"unit":"px"}`	`56px`	`--size-7`
`size.8`	dimension	`{"value":64,"unit":"px"}`	`64px`	`--size-8`
`size.9`	dimension	`{"value":96,"unit":"px"}`	`96px`	`--size-9`
`size.10`	dimension	`{"value":128,"unit":"px"}`	`128px`	`--size-10`

Components following it

Derived from the component tokens aliasing the foundation's tokens.

Component	Component tokens aliasing the foundation
Accordion	`accordion.trigger.min-height.small` → `{space.40}` `accordion.trigger.min-height.medium` → `{space.48}` `accordion.trigger.padding-inline` → `{space.8}` `accordion.trigger.padding-block` → `{space.8}` `accordion.trigger.gap` → `{space.12}` `accordion.indicator.size.small` → `{size.3}` `accordion.indicator.size.medium` → `{size.4}` `accordion.panel.padding-inline` → `{space.8}` `accordion.panel.padding-block` → `{space.12}`
Alert	`alert.container.padding` → `{space.16}` `alert.container.gap` → `{space.12}` `alert.icon.size` → `{size.4}` `alert.content.gap` → `{space.4}`
Avatar	`avatar.container.size.small` → `{size.4}` `avatar.container.size.medium` → `{size.5}` `avatar.container.size.large` → `{size.6}`
Badge	`badge.container.min-height.small` → `{space.20}` `badge.container.min-height.medium` → `{space.24}` `badge.container.padding-inline.small` → `{space.6}` `badge.container.padding-inline.medium` → `{space.8}`
Breadcrumb	`breadcrumb.container.gap` → `{space.4}` `breadcrumb.link.min-height` → `{space.24}` `breadcrumb.separator.size.small` → `{size.2}` `breadcrumb.separator.size.medium` → `{size.3}`
Button	`button.container.padding-inline.xsmall` → `{space.6}` `button.container.padding-inline.small` → `{space.8}` `button.container.padding-inline.medium` → `{space.12}` `button.container.padding-inline.large` → `{space.16}` `button.container.padding-inline.icon-side.xsmall` → `{space.2}` `button.container.padding-inline.icon-side.small` → `{space.6}` `button.container.padding-inline.icon-side.medium` → `{space.6}` `button.container.padding-inline.icon-side.large` → `{space.8}` `button.container.padding-inline.label-side.xsmall` → `{space.6}` `button.container.padding-inline.label-side.small` → `{space.8}` `button.container.padding-inline.label-side.medium` → `{space.8}` `button.container.padding-inline.label-side.large` → `{space.10}` `button.container.min-height.xsmall` → `{space.24}` `button.container.min-height.small` → `{space.28}` `button.container.min-height.medium` → `{space.36}` `button.container.min-height.large` → `{space.44}` `button.container.padding-block.xsmall` → `{space.2}` `button.container.padding-block.small` → `{space.3}` `button.container.padding-block.medium` → `{space.5}` `button.container.padding-block.large` → `{space.8}` `button.container.gap.xsmall` → `{space.2}` `button.container.gap.small` → `{space.2}` `button.container.gap.medium` → `{space.4}` `button.container.gap.large` → `{space.4}` `button.icon.size.xsmall` → `{size.2}` `button.icon.size.small` → `{size.3}` `button.icon.size.medium` → `{size.4}` `button.icon.size.large` → `{size.4}`
Card	`card.container.padding` → `{space.16}` `card.container.gap` → `{space.8}`
Checkbox group	`checkbox-group.container.row-gap` → `{space.8}` `checkbox-group.container.gap.vertical` → `{space.8}` `checkbox-group.container.gap.horizontal` → `{space.16}` `checkbox-group.option.column-gap` → `{space.8}` `checkbox-group.option.row-gap` → `{space.2}` `checkbox-group.control.size.small` → `{size.2}` `checkbox-group.control.size.medium` → `{size.3}`
Checkbox	`checkbox.container.column-gap` → `{space.8}` `checkbox.container.row-gap` → `{space.2}` `checkbox.control.size.small` → `{size.2}` `checkbox.control.size.medium` → `{size.3}`
Divider	`divider.container.margin-block.horizontal` → `{space.16}` `divider.container.margin-inline.vertical` → `{space.16}` `divider.container.min-height.vertical` → `{space.24}`
Dropdown	`dropdown.menu.padding` → `{space.8}` `dropdown.menu.offset` → `{space.4}` `dropdown.separator.margin-block` → `{space.4}` `dropdown.item.min-height` → `{space.32}` `dropdown.item.padding-inline` → `{space.8}` `dropdown.item.gap` → `{space.8}` `dropdown.item-icon.size` → `{size.2}`
Icon button	`icon-button.container.min-height.xsmall` → `{space.24}` `icon-button.container.min-height.small` → `{space.28}` `icon-button.container.min-height.medium` → `{space.36}` `icon-button.container.min-height.large` → `{space.44}` `icon-button.container.min-width.xsmall` → `{space.24}` `icon-button.container.min-width.small` → `{space.28}` `icon-button.container.min-width.medium` → `{space.36}` `icon-button.container.min-width.large` → `{space.44}` `icon-button.icon.size.xsmall` → `{size.2}` `icon-button.icon.size.small` → `{size.3}` `icon-button.icon.size.medium` → `{size.4}` `icon-button.icon.size.large` → `{size.4}`
Icon	`icon.container.size.small` → `{size.2}` `icon.container.size.medium` → `{size.3}` `icon.container.size.large` → `{size.4}`
Number field	`number-field.container.gap` → `{space.4}` `number-field.control.min-height.small` → `{space.32}` `number-field.control.min-height.medium` → `{space.40}` `number-field.control.min-height.large` → `{space.48}` `number-field.control.padding-inline.small` → `{space.8}` `number-field.control.padding-inline.medium` → `{space.12}` `number-field.control.padding-inline.large` → `{space.16}`
Pagination	`pagination.container.gap` → `{space.4}` `pagination.link.size.small` → `{space.32}` `pagination.link.size.medium` → `{space.40}` `pagination.link.padding-inline.small` → `{space.6}` `pagination.link.padding-inline.medium` → `{space.8}` `pagination.icon.size.small` → `{size.3}` `pagination.icon.size.medium` → `{size.4}`
Progress bar	`progress-bar.container.gap` → `{space.4}` `progress-bar.container.column-gap` → `{space.8}` `progress-bar.track.height.small` → `{space.4}` `progress-bar.track.height.medium` → `{space.8}`
Radio group	`radio-group.container.row-gap` → `{space.8}` `radio-group.container.gap.vertical` → `{space.8}` `radio-group.container.gap.horizontal` → `{space.16}` `radio-group.option.column-gap` → `{space.8}` `radio-group.option.row-gap` → `{space.2}` `radio-group.control.size.small` → `{size.2}` `radio-group.control.size.medium` → `{size.3}`
Search field	`search-field.container.gap` → `{space.4}` `search-field.control.min-height.small` → `{space.32}` `search-field.control.min-height.medium` → `{space.40}` `search-field.control.min-height.large` → `{space.48}` `search-field.control.padding-inline.small` → `{space.8}` `search-field.control.padding-inline.medium` → `{space.12}` `search-field.control.padding-inline.large` → `{space.16}` `search-field.control.padding-inline-start.small` → `{space.28}` `search-field.control.padding-inline-start.medium` → `{space.36}` `search-field.control.padding-inline-start.large` → `{space.40}` `search-field.icon.size.small` → `{size.2}` `search-field.icon.size.medium` → `{size.3}` `search-field.icon.size.large` → `{size.4}` `search-field.icon.margin-inline` → `{space.8}`
Select	`select.container.gap` → `{space.4}` `select.control.min-height.small` → `{space.32}` `select.control.min-height.medium` → `{space.40}` `select.control.min-height.large` → `{space.48}` `select.control.padding-inline.small` → `{space.8}` `select.control.padding-inline.medium` → `{space.12}` `select.control.padding-inline.large` → `{space.16}` `select.control.padding-inline-end.small` → `{space.28}` `select.control.padding-inline-end.medium` → `{space.36}` `select.control.padding-inline-end.large` → `{space.40}` `select.indicator.size.small` → `{size.2}` `select.indicator.size.medium` → `{size.3}` `select.indicator.size.large` → `{size.4}` `select.indicator.margin-inline` → `{space.8}`
Skeleton	`skeleton.container.height.text` → `{space.16}` `skeleton.container.height.circle` → `{space.40}` `skeleton.container.height.rectangle` → `{space.96}`
Slider	`slider.container.gap` → `{space.4}` `slider.container.column-gap` → `{space.8}` `slider.control.height.small` → `{space.4}` `slider.control.height.medium` → `{space.8}` `slider.control.min-height` → `{space.24}` `slider.thumb.size.small` → `{space.16}` `slider.thumb.size.medium` → `{space.20}`
Spinner	`spinner.container.gap` → `{space.8}` `spinner.ring.size.small` → `{size.2}` `spinner.ring.size.medium` → `{size.4}` `spinner.ring.size.large` → `{size.5}` `spinner.label.size` → `{space.1}`
Switch	`switch.container.column-gap` → `{space.8}` `switch.container.row-gap` → `{space.2}` `switch.control.width.small` → `{space.32}` `switch.control.width.medium` → `{space.40}` `switch.control.height.small` → `{space.20}` `switch.control.height.medium` → `{space.24}` `switch.thumb.size.small` → `{space.12}` `switch.thumb.size.medium` → `{space.16}` `switch.thumb.margin` → `{space.2}`
Text field	`text-field.container.gap` → `{space.4}` `text-field.control.min-height.small` → `{space.32}` `text-field.control.min-height.medium` → `{space.40}` `text-field.control.min-height.large` → `{space.48}` `text-field.control.padding-inline.small` → `{space.8}` `text-field.control.padding-inline.medium` → `{space.12}` `text-field.control.padding-inline.large` → `{space.16}`
Textarea	`textarea.container.gap` → `{space.4}` `textarea.control.min-height.small` → `{space.32}` `textarea.control.min-height.medium` → `{space.40}` `textarea.control.min-height.large` → `{space.48}` `textarea.control.padding-inline.small` → `{space.8}` `textarea.control.padding-inline.medium` → `{space.12}` `textarea.control.padding-inline.large` → `{space.16}` `textarea.control.padding-block.small` → `{space.6}` `textarea.control.padding-block.medium` → `{space.8}` `textarea.control.padding-block.large` → `{space.12}`