Most interfaces that feel slightly off are off by a few pixels. Here are the numbers I use, and why.

Four small rules cover most of it: button sizes, image cards, nested corners and touch targets. Save the drawings, pin them next to your design file, and stop guessing.

Jump to the drawingsRead insights

Four drawings to keep

Each one is drawn to scale. Lines draw in as you scroll.

Smalldense tables, tags1632pxMediumthe default2444pxLargehero, one per screen3252px
Three button sizes32, 44 and 52 pixels tall with 16, 24 and 32 pixels of side padding. The padding grows with the height, so the shape stays a pill. Use one large button per screen.
Title 20Meta 12Body 14 to 16Button 401 : 2 image1616
The image card16 pixels of spacing everywhere, an image at one to two, title 20, meta 12, body 14 to 16 and a 40 pixel button. One spacing value is what makes it calm.
Same radius inside32 / 32outer / inner16 paddingInner = outer − padding32 / 16outer / inner16 padding
Nested cornersInner radius equals outer radius minus the padding between them. A 32 pixel card with 16 pixels of padding needs a 16 pixel inner corner.1
24 × 24WCAG 2.2 AA minimum44 × 44Apple, WCAG AAA48 × 48Material Design
Touch targetsWCAG 2.2 asks for at least 24 by 24 CSS pixels.2 Apple recommends 44 by 44 points and Material Design 48 by 48.3 I design for 44 and never go under 24.

Why these numbers work

Buttons scale as a family

When height and padding grow together, small, medium and large still look like one button in three sizes.

Learn the term

One spacing value

Cards with mixed gaps look busy. A single 16 pixel rhythm reads as order, even when nobody can say why.

Learn the term

Concentric corners

Equal radii inside and out make the inner corner look pinched. Subtracting the padding keeps the curves parallel.

Learn the term

Thumbs, not cursors

A fingertip covers far more than a pixel. Bigger targets mean fewer mis-taps and less frustration.

Learn the term

Good spacing is invisible. People only notice it when it's wrong.

A rule of thumb from fifteen years of client work

Putting it into your design system

Rules only help if they live where the team works.

  • Make spacing a token. One base value, 4 or 8, and multiples of it.
  • Define three button heights and stop there.
  • Write radius tokens in pairs, outer and inner, for each padding you use.
  • Check every icon button against 24 by 24 before handover.
  • Test on a real phone with your thumb, not only in the browser.

Keep reading

All insights

Website design

How I plan, design and build sites for people and AI.

See the service

Colour psychology for brands

What colours signal, and what the research actually supports.

Read the article

Web design statistics

Speed, phones and accessibility, with sources.

See the numbers

Where to next

Colour psychology for brands

What colours signal, and what's proven.

Read the article

Web design statistics

Accessibility and speed, with sources.

See the numbers

About Robert

Who drew these.

Meet me

Want these rules in your own design system?

I set up small, practical design systems for marketing sites. Tell me what you have and I'll suggest the first three tokens to fix.

Book a 20-minute call

Sources

  1. Daniel Cheong, The concentric border-radius rule: why nested rounded corners look slightly wrong, DEV Community. dev.to
  2. W3C, Understanding Success Criterion 2.5.8: Target Size (Minimum), WCAG 2.2. w3.org
  3. Joe Lamyman, Foundations: target sizes, TetraLogical, 20 December 2022, updated 15 May 2023. tetralogical.com
Book a 20-minute call