Spacing System
Numeric Scale
10 consecutive steps — granular at small sizes, progressive jumps at large
--space-1 space-1
--space-2 space-2
--space-3 space-3
--space-4 space-4
--space-5 space-5
--space-6 space-6
--space-7 space-7
--space-8 space-8
--space-9 space-9
--space-10 space-10
Named Aliases
Semantic names mapped to numeric steps
--space-xs
--space-sm
--space-md
--space-lg
--space-xl
--space-2xl
Semantic Aliases
Intent-driven tokens for consistent layout decisions
Gutter --space-gutter page/grid gutters
Section --space-section between page sections
Stack --space-stack vertical between elements
Inline --space-inline horizontal between inline elements
Inset --space-inset padding inside components
Inset SM --space-inset-sm tight padding, small components
Inset LG --space-inset-lg loose padding, large components
Padding Box Sizes
Block and inline padding per size step
xs
sm
md
lg
xl
2xl
Padding Box Types
Semantic element types with default sizes and radius
Input
Button
Card
box-card md
Badge
box-badgeTooltip
box-tooltipModal
Modal Title
box-modal lg
In Context
Stack, inline and gutter spacing applied to real layouts
Stack
Item one
Item two
Item three
Inline
Tag one
Tag two
Tag three
Gutter
Column
Column
Column