Redpine — Brand Guide

Spacing
4-step scale from 4px to 128px. Tokens --sp-1 through --sp-12 drive padding, gap, margin.
→
Type scale
Display → h1-h5 → body-lg/body/body-sm → caption → eyebrow. Clamp-based display sizes.
→
Grid & breakpoints
12-column grid on md+ with responsive gutters and max-widths. 2-column on mobile.
→
Vertical rhythm
Section padding scale (56/72/64px responsive) aligned with RHDS spacer system.
→
Radii
Hairline-first. 0 / 2px (inputs, buttons) / 4px (cards) / 8px (modals) / pill. Never rounded-xl.
→
Elevation & shadows
3-step ladder over hairlines. Shadow-1 cards → shadow-2 popovers → shadow-3 modals.
→
Motion
cubic-bezier(0.2, 0, 0, 1) standard + emphasized variant. Durations 120/200/360ms.
→
Iconography
Lucide 1.5px stroke, 24px grid, rounded joins. No emoji. No Unicode symbol icons.
→