Building a calm interface with plain CSS

You do not need a component library to build something that feels clean and professional.

Start with tokens

Define colour, radius and shadow once as custom properties on the root element. Every component reads from them, so the whole site can be re-themed in one place.

Soft, layered shadows

Two shadows, one tight and one wide, both at very low opacity. The result is depth without heaviness.

Generous spacing

Double the padding you think you need, then add a little more. White space is what makes a page feel breathable.

Respect reduced motion

Wrap animations in a prefers-reduced-motion query. A calm interface should stay calm for everyone.