Fable 13 · Guide 07 · Gym
The brief: a gym with class schedules, trainer bios and membership pricing, in a bold energetic design. The idea: a Sheffield strength club that hates gym-industry nonsense — so the design is barbell-plain: two inks on tar, hard shadows, hazard tape.
The headline is set in variable Sofia Sans Extra Condensed, and its
wght axis is driven by scroll velocity: flick the page and the letters bulk from
600 toward 900, then ease back down as momentum dies — a rep, in typography. Reduced motion
pins it at 800.
The week is a real CSS grid — seven day columns, six time rows, colour-coded class blocks from a deterministic plan, with today's column flagged and a cadmium NOW line positioned by interpolating the actual clock between row times (re-placed every minute and on resize). Filters dim everything that isn't your discipline. On narrow screens the grid scrolls sideways inside its frame rather than crushing.
tar concrete cadmium safety
Buttons shove up-left on hover and leave a hard 4px shadow — no soft glows in a gym. Copy does trust the blunt way: "no contracts with teeth", "no fee-fee", pricing without asterisks. Motion (motion.dev) handles reveals; the marquee and pump loop are hand-rolled rAF. Photography: Unsplash (free license), regraded toward the two-ink palette.
Process — three passes