Design Eye Secrets

“Design eye” isn’t magic. It’s a handful of rules pros apply without thinking. Learn them once and you’ll never un-see them.

The 10 secrets

1. Whitespace is a feature — Double the space around sections. Crowded looks cheap; roomy looks premium.
2. Use a spacing scale — Pick 4–6 sizes (e.g. 8, 16, 24, 40, 64) and use only those. Block themes let you set this in theme.json.
3. Two fonts, max — One characterful display font, one readable text font.
4. Cap line length — About 45–75 characters per line for body text.
5. One hero, one action — Every screen should make the next step obvious with a single high-contrast button.
6. A small palette — 1 brand color, 1 accent, neutrals. Use the accent sparingly so it pops.
7. Contrast is accessibility — Aim for WCAG AA: 4.5:1 for body text. Check with a contrast tool.
8. Align everything — Invisible grid lines make layouts feel calm. Left-align long text.
9. Consistent corners & shadows — Same radius and shadow style everywhere.
10. Real content first — Design with real headlines and images, not lorem ipsum.

Cutting-edge techniques worth trying

• Fluid typeUse clamp() so headings scale smoothly across screens.
• Container queriesComponents that adapt to their container, not just the viewport.
• View transitionsSmooth page-to-page animations as a progressive enhancement.
• Style variationsShip multiple looks in one block theme via theme.json.
• Dark modeRespect prefers-color-scheme and offer a toggle (like this site!).
• Micro-interactionsTiny hover and focus feedback that makes UI feel alive.

Design tools

Design guides

Think you’ve got the eye? Take the Design Eye quiz 🎨