Design Tokens
Primitive spacing scale and semantic space tokens from @spring/ds-react/tokens.
Figma · Foundation token map (1416-3082)·Figma · Variable grouping (1346-577)
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.
| Token | rem | px | Example |
|---|---|---|---|
| Copied! | 0.25 | 4 | |
| Copied! | 0.5 | 8 | |
| Copied! | 0.75 | 12 | |
| Copied! | 1 | 16 | |
| Copied! | 1.25 | 20 | |
| Copied! | 1.5 | 24 | |
| Copied! | 2 | 32 | |
| Copied! | 2.5 | 40 | |
| Copied! | 3 | 48 | |
| Copied! | 4 | 64 |
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.
| Token | rem | px | Use for | CSS variable |
|---|---|---|---|---|
| Copied! | 1 | 16 | — | Copied! |
| Copied! | 2 | 32 | — | Copied! |
| Copied! | 1.5 | 24 | — | Copied! |
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.
Token-accurate stack: gap.md ($spacing-04), gap.xs ($spacing-01), gap.md, then layout.lg ($spacing-08 · 32px).
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.
Repeated vertical rhythm: semantic.space.layout.md resolves to Spacing/spacing-6 ($spacing-06 · 24px).
0/100
Enter the url of the repo that hosts your Terraform configuration files
