Most developers can code a working app. Far fewer can make it look good. The gap isn't talent — it's a handful of learnable rules.
1. Use a Spacing Scale
Stop guessing margins. Stick to a scale: 4, 8, 12, 16, 24, 32, 48, 64px. Tailwind's spacing system is this by default.
2. Limit Your Font Sizes
A typical page needs only 4–5 sizes: hero, heading, subheading, body, caption. More than that creates visual noise.
3. Contrast Is Non-Negotiable
Body text on white background needs a contrast ratio of at least 4.5:1. Use WebAIM's contrast checker before you ship.
4. Align Everything to a Grid
If elements share a left edge, they belong to the same implicit column. Misaligned elements signal carelessness instantly.
5. Use Colour Sparingly
A single accent colour goes a long way. Two complementary colours and a neutral grey covers 99% of UIs. Resist the rainbow.
6. White Space Is a Feature
Cramped layouts feel anxious. Generous padding and margins signal confidence and readability.
7. One Visual Hierarchy Per Screen
Decide what the user should look at first, second, and third. Use size, weight, and colour to communicate that order.
8. Consistent Border Radius
Pick one radius and stick to it. Mixing sharp corners with rounded pills feels accidental.
9. Shadows Should Have a Light Source
All shadows on a page should look like they come from the same direction. Uniform vertical offset with a slight blur reads as natural.
10. Test in Dark Mode
If you support dark mode, test it. Most dark-mode bugs are high-contrast text on a light background that wasn't swapped.
Apply three of these to your next project and the difference will be immediate.