Number tokens

What number tokens are used for

Number tokens store any numeric value that you want to reuse consistently across a design:

• Spacing — gaps between elements, padding inside components (e.g., 4, 8, 16, 32)
• Corner radius — rounded corners on buttons, cards, inputs
• Sizing — icon sizes, border widths, fixed dimensions
• Other — any numeric property that should stay consistent

Creating a number token

1. Open the Tokens tool from the editor toolbar.
2. Click Add token and select Number as the type.
3. Name the token descriptively — use a semantic role rather than the literal value:
   • spacing/sm, spacing/md, spacing/lg
   • radius/base, radius/pill
   • border/thin
4. Enter the numeric value (in pixels, or as a unitless number — check how your token set expects values).
5. Save the token.

Using a number token value

After creating number tokens, copy the reusable numeric value into inspector fields such as corner radius, gap, padding, width, or height. See Apply tokens in design for the current workflow.

Building a spacing scale

A well-organized spacing token set uses a consistent multiplier:

Spacing scales like this make layouts predictable and reduce arbitrary pixel values in the design.

Tips

• Name tokens by role, not value — spacing/sm is more maintainable than spacing/8px because the name stays accurate if the value changes.
• Build your spacing and radius scales before designing components so you can reuse consistent values from the start.

Related articles

• Generate token set manually
• Apply tokens in design
• Color tokens