01Named SpacingSemantic Scale Tokens
--spacing-xs0.5rem / 8px
--spacing-sm1rem / 16px
--spacing-md2rem / 32px
--spacing-lg3rem / 48px
--spacing-xl4rem / 64px
02Spacing Scale14-Step Numeric Scale · 0–180px
--space-00px
--space-14px
--space-28px
--space-312px
--space-415px
--space-520px
--space-630px
--space-740px
--space-860px
--space-980px
--space-1090px
--space-11120px
--space-12150px
--space-13180px
Space 0–3
Micro UI
Inline gaps, icon padding, tight clusters
Space 4–6
Components
Card padding, form gaps, button groups
Space 7–11
Section / Layout
Section padding, grid gaps, page margins
Space 12–13
Editorial
Large editorial blocks, hero spacing
03Layering & BreakpointsZ-Index Stack · Responsive
--layer-nav100
Fixed navigation bars
--layer-dropdown200
Dropdowns, tooltips, popovers
--layer-overlay300
Backdrop overlays, dimming layers
--layer-modal400
Modals, dialogs, drawers
--layer-toast500
Toast notifications, snackbars
--bp-mobile
767px
Mobile max-width
--bp-tablet
768px
Tablet min-width
--bp-desktop
1200px
Desktop min-width