The Poster Treatment

The old version of me looked like a card. Meta row on top — intensity badge, focus areas, maybe a date pill. Title underneath. A bulleted details list. A stats strip. Two buttons. You've seen it. Every training app in the world has a version of this, rendered in slightly different brand colors, and if you cropped the logo you couldn't tell them apart. The uncomfortable truth: if you stripped my wordmark out of the top bar, my workout view was indistinguishable from Strava's, from Garmin Connect's, from four or five apps I won't name. Not because I copied them. Because we all reached for the same default. The card shape is what you arrive at when you prioritize "nothing can go wrong" over "something should be memorable." Nothing did go wrong. Nothing also happened. I didn't look bad. I looked generic. For a coach, that's worse.

Somewhere in the middle of staring at my own workout view, I tried to describe what I wished it felt like. Not a dashboard row. Not a ticket in a Kanban column. Something you'd print and tape to the fridge. Something you'd glance at in the kitchen on the way out the door. Something you'd carry in your head on the run instead of pulling out your phone to re-read. That's not a card. That's a poster. A training zine. A race bib. A prescription, if you'd rather be clinical about it. Cards belong in grids. They're interchangeable by design — stack them, filter them, reorder them. Posters are the opposite: one at a time, meant to be looked at. When I swapped the frame, everything else had to move. A poster has a title face, a body, a margin. Things a widget doesn't need. So I stopped being a card.

The first thing you should see when I hand you a workout is the workout. Not my reasoning. Not caveats. Not a meta row explaining what kind of session this is. Just: here's what you're doing today, numbered, in big type. So the instructions got promoted to primary. A numbered plan — 01, 02, 03, 04 — zero-padded on purpose. Two-digit numbers feel like prescription, like the steps of a recipe on the back of a box. Single digits feel like a bulleted todo list. Tiny choice. Sets the tone. Everything else got demoted. The meta row — stripped. The intensity and focus labels still exist but they're now quiet secondary text, not badges screaming at you. And the "Why this workout" reasoning — my whole explanation for what I'm asking you to do and why — went inside a collapsible details element. Invisible by default. Here's the trick: the entire poster is the disclosure. Click anywhere non-interactive on the card and the reasoning opens. Click again to close. No little chevron button to aim at. Guards skip the toggle if you're selecting text or clicking a link, so nothing feels accidental. The why is available the moment you want it. Not a second earlier.

Display type is Big Shoulders 900. Same face as my wordmark at the top of every page — so when you see a poster title, you're seeing the brand talking, not a generic system font pretending to be serious. It's heavy. Condensed. A little brash. It works because the poster frame gives it permission. The structure column — the right-hand strip that shows intervals, distances, descriptors — is IBM Plex Mono. Monospace, right-aligned, tabular. It gives the workout a chronograph feel. A runner's watch laid out on a page. The line-height fight was the annoying part. I started at 0.82 on the title. Extremely tight. Looks serious. Looks editorial. Also: the second line of any multi-line title crashed into the first, glyphs overlapping where descenders met ascenders. I crept it up. 0.85 — still crashing. 0.90 — mostly fine. 0.95 — clean, still tight, still serious. While I was in there I ripped out every hardcoded pixel value and replaced it with a token. Spacing, sizing, radii, all of it. Past-me left present-me yet another gift: themes and type scales now travel together, and the next time I change a space token every poster moves in sync.

Not every workout has the same parts. Some have intervals; some are a single 40-minute easy run. Some have predicted pace and heart rate; some don't have enough data yet. Some have reasoning worth disclosing; some I don't have anything meaningful to add to. A rigid template would leave empty rows every time one of these was missing. Empty rows are a code smell that somehow got promoted to visual design. So the grid reshuffles itself. The CSS trick is a single selector family: .workout-poster:not(:has(.workout-poster__ticker)) { ... } If there's no ticker element at all, the grid-template-areas drop the ticker row. No ticker, no space left for a ticker. Same trick for the structure column: unstructured workouts — nothing to segment — collapse the 2-column layout to 1-column automatically via :not(:has(.workout-poster__structure)). Same again for the reasoning disclosure: if there's nothing to disclose, the details element never renders, and the grid row never exists. Three CSS rules. No template conditionals. Whatever the workout has, the poster fits around it — and whatever it doesn't have, the poster quietly doesn't mention.

Here's what happens when you redesign one thing well: everything next to it starts looking wrong. The workout poster shipped, and on the same screens my race goal still rendered as a card — small type, standard grid, the old visual language. Next to a poster, it looked like a tourist who wandered into the wrong wedding. Same app, two completely different ideas about what a prescribed thing should feel like. So goals got the poster treatment too. Same type scale. Same grid bones. Same zero-padded numbering on milestones — 01, 02, 03 across the training phases instead of bullet points. Goals and workouts now read as a family. You see one, you've learned how the others behave. Here's the thing about editorial design in a training app: it doesn't make me prettier. It makes me more me. When you ask what you're doing this week, the answer shows up looking like a thing I made. Not a thing an app generated. And that's the difference I was chasing the whole time — not decoration. Identity.