Foundation
Spacing
A 4px base scale named by multiples — token spacing.4 is 16px, spacing.8 is 32px. Container padding and section gaps adjust at the three breakpoints (small / medium / large) so layouts breathe correctly across viewports.
Base scale
Token name = multiplier of 4px. Apply via var(--caster-spacing-4) or in Tailwind v4 as the p-4 utility.
spacing.00 · 0px
spacing.10.25rem · 4px
spacing.20.5rem · 8px
spacing.30.75rem · 12px
spacing.41rem · 16px (default gap)
spacing.51.25rem · 20px
spacing.61.5rem · 24px
spacing.82rem · 32px
spacing.102.5rem · 40px
spacing.123rem · 48px
spacing.164rem · 64px
spacing.205rem · 80px
spacing.246rem · 96px
spacing.328rem · 128px
Container padding
Horizontal page gutter at each breakpoint. The .container class consumes these automatically.
| Breakpoint | Token | Value | Mapped to |
|---|---|---|---|
| Small · 0–767px | layout.container-pad.small | 16px | spacing.4 |
| Medium · 768–1199px | layout.container-pad.medium | 32px | spacing.8 |
| Large · 1200px+ | layout.container-pad.large | 80px | spacing.20 |
<div class="container">
<!-- horizontal padding adjusts at breakpoints automatically -->
</div>Section gap
Vertical spacing between major page sections. Same three-tier breakpoint ladder.
| Breakpoint | Token | Value |
|---|---|---|
| Small | layout.section-gap.small | 32px |
| Medium | layout.section-gap.medium | 48px |
| Large | layout.section-gap.large | 64px |
Header height
Site header height shrinks on narrower viewports to maximize content above the fold (D17).
| Breakpoint | Token | Value |
|---|---|---|
| Small | size.header-height.small | 56px |
| Medium | size.header-height.medium | 64px |
| Large | size.header-height.large | 72px |
Why no half-steps? Forcing the scale onto whole 4px multiples eliminates "is it 6 or 8?" decision fatigue. If a design begs for a non-scale value, that's usually a sign the surrounding rhythm needs adjustment, not a new token.