Spacing Scale
A powers-of-two progression that ensures consistent visual rhythm across all interfaces.
XS
Micro adjustments, icon padding
SM
Element spacing, padding, gaps
MD
Base unit, component spacing
LG
Section padding, card margins
XL
Layout gaps, major dividers
2XL
Viewport padding, hero spacing
12-Column Grid
Flexible, responsive grid with consistent gutters that scale proportionally with the base unit.
Typographic Spacing
Line height, letter spacing, and paragraph margins calibrated for optimal readability and visual flow.
Line Height
Tight rhythm for headings and compact UI elements.lh: 1.2
Comfortable reading rhythm for body text and documentation.lh: 1.6
Generous breathing room for pull quotes and emphasized content.lh: 2.0
Letter Spacing
Negative tracking for large display type.-0.02em
Default spacing for standard body copy.0em
Positive tracking for uppercase labels.+0.08em
Wide tracking for navigation and meta text.+0.15em
Paragraph Spacing
mb: 8px Compact flow for dense content.
mb: 16px Standard separation between blocks.
mb: 24px Clear section dividers.
mb: 0 Terminal spacing, no trailing margin.
Layout Compositions
Practical implementations demonstrating how spacing creates hierarchy, balance, and usability.