Skip to content

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.

Specimens

The tokens this foundation is built from, drawn from packages/tokens/src/: raw primitives and the semantic decisions on top of them. A token added to one of these groups appears here with no site change; values that differ per mode or per platform are shown next to each other.

Spacing scale

Every spacing step, drawn at its length.

space.* · 30 tokens · A bar as long as the value.

  • space.1
    1px
  • space.2
    2px
  • space.3
    3px
  • space.4
    4px
  • space.5
    5px
  • space.6
    6px
  • space.7
    7px
  • space.8
    8px
  • space.10
    10px
  • space.12
    12px
  • space.14
    14px
  • space.16
    16px
  • space.20
    20px
  • space.24
    24px
  • space.28
    28px
  • space.32
    32px
  • space.36
    36px
  • space.40
    40px
  • space.44
    44px
  • space.48
    48px
  • space.56
    56px
  • space.64
    64px
  • space.72
    72px
  • space.80
    80px
  • space.96
    96px
  • space.112
    112px
  • space.128
    128px
  • space.144
    144px
  • space.160
    160px
  • space.none
    0px

Element sizes

Squares at each element size.

size.* · 10 tokens · A square as wide as the value.

  • size.1
    8px
  • size.2
    16px
  • size.3
    20px
  • size.4
    24px
  • size.5
    32px
  • size.6
    40px
  • size.7
    56px
  • size.8
    64px
  • size.9
    96px
  • size.10
    128px

Examples

Components following this foundation, rendered by their web templates, once per mode. States are forced with data-state, so what you see is exactly what the CSS defines, without a keyboard.

light
dark