Design Tokens

Space

Primitive spacing scale and semantic space tokens from @spring/ds-react/tokens.

Figma · Foundation token map (1416-3082)·Figma · Variable grouping (1346-577)

Spacing scale

Use the spacing scale when building individual components. It includes the small increments needed to create appropriate spatial relationships at the detail level. This scale is applied across all Spring components.

TokenrempxExample
Copied!0.254
Copied!0.58
Copied!0.7512
Copied!116
Copied!1.2520
Copied!1.524
Copied!232
Copied!2.540
Copied!348
Copied!464

Semantic space

Role-based aliases that map back to primitive values. Prefer these in product code so spacing intent travels with the value — refactoring a layout becomes a token swap, not a search-and-replace across pixel numbers.

TokenrempxUse for
Copied!116
Copied!232
Copied!1.524

Visual examples

Purple bands represent the actual space value in context. Each band is paired with a token label on the same row, so it is explicit which token controls which gap.

Modal spacing example

Token-accurate stack: gap.md ($spacing-04), gap.xs ($spacing-01), gap.md, then layout.lg ($spacing-08 · 32px).

$spacing-0416pxsemantic.space.gap.md
Optional label
$spacing-014pxsemantic.space.gap.xs
Passive modal title
$spacing-0416pxsemantic.space.gap.md

Lorem ipsum dolor sit lorem a amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

$spacing-0832pxsemantic.space.layout.lg

Form stack example

Repeated vertical rhythm: semantic.space.layout.md resolves to Spacing/spacing-6 ($spacing-06 · 24px).

Myworkspace
$spacing-0624pxsemantic.space.layout.md
Choose an option
$spacing-0624pxsemantic.space.layout.md
What is the purpose of this workspace?

0/100

$spacing-0624pxsemantic.space.layout.md
e.g. https://github.com/<repository>

Enter the url of the repo that hosts your Terraform configuration files