Foundations
The scales underneath every preset. Presets change the base radius, border weight and shadow style; everything else stays the same, so layouts move between apps unchanged. Click any token to copy its variable.
Spacing
4px grid. Names match Tailwind's numeric scale (space-4 = p-4 = 1rem), so the CSS variable and the utility always agree.
Radius
Every radius derives from the preset's --radius, so one value makes a preset sharp or soft. radius-pill rounds fully but goes square when --radius is 0.
Borders
Border width comes from the preset (1px, or 2px for Brutal).
Shadows
Four styles: soft (diffuse), crisp (hairline plus a tight drop), hard (offset, no blur) and none. Dark mode deepens them automatically.
Breakpoints
Mobile first: write the phone layout, then add from each breakpoint up. Tailwind gets an extra xs step for large phones.
<div class="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-4">@media (min-width: 48rem) { /* md */ }
/* Or skip breakpoints with the intrinsic grid: */
<div class="wf-grid" style="--wf-grid-min: 16rem">Containers
Max widths for page content. .wf-container adds the responsive gutter (16px on phones, 32px from md). In Tailwind they're max-w-page-prose … max-w-page-2xl.
Z-index
Named layers so stacking order is decided once, not per component.
Motion
Short durations and a standard ease for UI; spring for playful moments. Wallflower's base styles respect prefers-reduced-motion. Hover a row to see the curve.