Spryker

Spacing

13 named spacing tokens from 0–64px for padding, gaps, and layout.

Scale

13 named steps from 0–64px. Every padding, gap, and margin in the system maps to one of these — no arbitrary values.

TokenValueVisualUsage
scale/22px
Micro — icon nudges, fine-tuning
scale/44px
XS — badge padding, tight internal gaps
scale/66px
XS+ — compact row padding
scale/88px
SM — icon-to-label gap, small component padding
scale/1212px
MD — SM component horizontal padding
scale/1616px
LG — MD component padding, base grid unit
scale/2020px
XL — LG component horizontal padding
scale/2424px
Card and panel padding, section spacing SM
scale/3232px
Section gap MD, form group spacing
scale/4040px
Section gap LG
scale/4848px
Layout gap, page section divider
scale/6464px
Layout gap XL, hero spacing

Interactive demo

Select a token to see how it affects padding and gap across common patterns.

button padding
card padding
flex gap

Guidelines

Do
  • Always use a token — never hardcode px values
  • Use scale/8 as the default gap between related items
  • Use scale/24 for card and panel padding
  • Use scale/32–64 for section separators on desktop
Don't
  • Use values outside the scale (e.g. 10px, 14px, 18px)
  • Skip steps — go from scale/8 to scale/12, not scale/8 to scale/16
  • Mix spacing scales within the same component
  • Use scale/64 inside dense data-heavy components
TypographyRadius