A Tiny CSS Checklist for Calm Interfaces
If an interface feels “messy,” it’s usually not because of one big mistake—it’s because a dozen tiny defaults are all pulling in different directions.
Here’s a small checklist I use to keep things calm.
1) Constrain line length
Long lines make reading feel like chasing a loose receipt in the wind.
.prose {
max-width: 72ch;
}
2) Pick a spacing scale (then stop freelancing)
Even a simple scale helps:
:root {
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
}
3) Give links a consistent affordance
If links sometimes look like links and sometimes look like plain text, the UI becomes a scavenger hunt.
4) Make focus states obvious
Keyboard users are not optional. Future-you is also not optional.
5) Use borders/shadows sparingly
One or two elevation levels is usually enough. After that, it’s just a UI layer cake.
That’s it. Small rules, big dividends.