Fluid type, optically corrected
Every step interpolates between a min and max across the 360–1392px band rather than snapping at breakpoints. Display type widens and lightens as it grows, so an 82px headline reads as confident instead of shouted.
Design rationale
The system behind the storefront.
Volt & Spoke runs on a small set of tokens rather than a pile of one-off classes. This page records what those tokens are and why each decision was made, so the next screen someone builds lands in the same place.
Foundations
Four decisions everything else follows from
A near-neutral surface family
A pale green-yellow ground and ink anchor the page; clay, moss and harbor carry meaning, and hi-vis yellow marks the one thing worth looking at. Cards rest on a four-stop diagonal gradient whose corners sit a shade darker than the middle, which gives a flat tile a subtle sheen.
Hover inverts the whole tile
Rather than lifting a card and darkening a border, the accent gradient fades in over the full surface while every child — title, body, meta, icons, rules — eases to light at the same rate. One motion, not a dozen flickers.
Motion with a vocabulary
Four easing curves and five durations cover the whole app. Content reveals arrive blurred and offset, unblurring as they settle. Everything collapses under prefers-reduced-motion.
Patterns
How the pieces behave
- The header retracts and rounds
- The promo ticker slides up behind the bar over its own height as the page moves, so the nav lands flush at the top. Past 240px the whole bar retracts on scroll-down and returns on scroll-up. Once the page has left the top, the bar rounds its bottom corners and picks up a soft shadow.
- Mega menus unroll from the bar
- The panel lives inside the nav surface and animates its height, so bar and panel read as one sheet unrolling rather than a card floating below. A scrim dims the page behind it, and an open menu pins the header in place.
- One pill geometry, four fills
- Every button shares a height, radius and padding relationship (padding is half the height). Fills differ; geometry does not. Hover changes colour only — nothing scales, so a row of buttons never jitters.
- Filters collapse into chips
- Category tabs share a single indicator that slides between them. Active filters gather into removable chips below the panel, so the current query is legible at a glance instead of scattered across six controls.