Design decisions, shown with their measurements.
Every Friday: one interface taken apart in public. The spacing token that made a form feel calmer. The 2px that fixed a button. Why a type scale broke at 3 sizes and what replaced it. Written by people who ship the systems, not just admire them.
11,240 designers subscribed · no dark patterns, we'd be embarrassed
What's in every issue
- One teardown
- 800–1200 words
- A real interface, one decision at a time: why the spacing steps by 4 and not 8 past a certain size, why a modal became a sheet, where a hover state earned its 150ms.
- Token of the week
- 1 value, full reasoning
- A single design token — a radius, a duration, a line-height — with the reasoning that produced it and the two alternatives that lost.
- Reader critique
- 1 submission, redlined
- A screen a reader sent in, marked up the way we'd mark up our own work. Specific enough to disagree with.
- Shelf note
- 1 tool or reference
- Something worth the five minutes: a plugin, a spec, a type foundry, a talk. No affiliate links, no 'sponsored by.'
Issue 47, as it lands
Pixel Weekly <notes@pixelweekly.co>
8:02 AMIssue 47 · The 2px that fixed our button
Issue 475 min read
I spent forty minutes last Tuesday on a button that was, by any reasonable measure, already fine. Then I moved the label 2px left of centre to account for the optical weight of a trailing icon, and three people on the team asked what changed before I told them.
“Centred” is a math term. “Balanced” is a design term. They agree less often than the layout inspector wants you to believe.
Three things worth carrying into your own work this week:
- Icon-plus-label buttons need optical centring, not geometric — nudge the whole group 2–4% toward the icon.
- Test the correction at your smallest supported size first — it's where the error is loudest.
- Write the offset down as a token. The next person to touch this button shouldn't have to re-discover it by eye.
More on the teardown, plus this week's reader submission, below.
Measured carefully,
Maya Okonkwo
Editor, Pixel Weekly
This page measures itself
Flip the Redline overlay switch in the rail. It reads the real DOM — actual getBoundingClientRect() and getComputedStyle() calls on every marked element — and draws padding, size, and an 8pt grid over whatever is currently on screen. Resize the window with it on. The numbers change, because they're not illustrations.
Why bother. Because a newsletter about specificity that can't be specific about its own padding would be making an argument it doesn't believe.
What the overlay reads off this exact card
- padding
- 24px
- radius
- 6px
- border
- 1px #D0D5DD
- grid
- 8pt baseline
These four values come from this card's own stylesheet, not from a caption written to sound convincing.
Who's reading
“The token-of-the-week on line-height cadence is the only explanation of leading I've bookmarked and actually reused in a spec.”
“Issue 31 on modal-vs-sheet is now linked in our team's contribution guide. Nobody's re-litigated that decision since.”
“I disagree with about a third of what runs here, which is exactly why I keep reading it. Most design writing agrees with itself too easily.”
Recent issues
Set 32/34. Sent every Friday.
Why: a closing ask should read like the rest of the page, not shout louder than it. One email a week, and we'll show our work in every one.