6 posts.
In: Design Postmortems
Fixing the same-size card grids made the site more correct and no less forgettable. The actual complaint was about the whole page, not a pattern - which meant the fix had to be a hero, motion and rhythm pass, not another round of component surgery.
'How it works' and 'Principles' were both an icon-heading-text grid, identically sized, in the exact way any landing page's craft floor flags as the default nobody actually chose. Replaced with two compositions that carry real information in their shape.
The signature interaction of the redesign is a hand-drawn X that draws itself when you tick a day. It's two SVG paths, one CSS keyframe and a pathLength trick, with no JavaScript animation at all.
The activity grid lost its colours because a two-part selector outranked the level classes. A short tour of CSS specificity.
How one padding declaration silently removed the side margin on phones, and why padding-block is the habit now.
Muted text that passes the eye test and fails WCAG AA, and why contrast has to be measured against the real background, cards included.
PaceStreak is a habit and streak tracker for training and everything else worth doing regularly.