css • design

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;
}

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.