The Spacing Guide already uses a useful pink field to reveal gaps. The numeric table should preserve that visual language while keeping token values, pixel equivalents and descriptions easy to scan.
Adopted shared style: ThemeNumberVariableTable uses the refined pink specimen for spacing. The published Guide keeps its surrounding content and layout.
Token treatments
The same five manifest spacing tokens appear in each treatment. Their actual values set the gaps in the specimens.
01
Original Guide
Pink spacing specimen
Token
Value
PX
Representation
--spacing-4xs
.125rem
2px
--spacing-3xs
.25rem
4px
--spacing-2xs
.375rem
6px
--spacing-xs
.5rem
8px
--spacing-sm
.75rem
12px
The original uses the pink diagonal field and raised blocks to make each gap visible. The table keeps the established Guide typography.
02
Current
Neutral demo pattern
Token
Value
PX
Representation
--spacing-4xs
.125rem
2px
--spacing-3xs
.25rem
4px
--spacing-2xs
.375rem
6px
--spacing-xs
.5rem
8px
--spacing-sm
.75rem
12px
The shared table changed the gap specimen to a neutral stripe and demo blocks. Numeric values and column order stayed the same.
03
Adopted
Refined pink scale table
Token
Value
PX
Representation
--spacing-4xs
.125rem
2px
--spacing-3xs
.25rem
4px
--spacing-2xs
.375rem
6px
--spacing-xs
.5rem
8px
--spacing-sm
.75rem
12px
The adopted shared style restores the pink spacing specimen, gives value columns stable widths and a quieter row rhythm, and lets a narrow table scroll with keyboard focus.
Actual Guide use
The live Spacing Guide reads the complete scale from the preset with the adopted treatment.