Design Principles for Clean UIs

Less is More

Every element on screen should earn its place. If it doesn’t serve the reader, it shouldn’t be there.

Typography Matters

The right font at the right size with the right line height makes the difference between a page that feels cramped and one that feels inviting.

Key Numbers

• Body text: 16-18px
• Line height: 1.6-1.8
• Max line width: 65-75 characters
• Heading scale: 1.25 ratio

Whitespace is Not Wasted Space

Generous padding and margins guide the eye. They create hierarchy without relying on heavy borders or backgrounds.

Color with Purpose

A limited palette forces intentionality:

• One primary action color
• Neutral grays for text hierarchy
• Minimal accent for emphasis

Dark mode isn’t just “invert everything.” It requires separate consideration for contrast, elevation, and readability.

Motion as Communication

Animation should communicate state changes, not distract:

• Subtle hover states (confirm interactivity)
• Page transitions (maintain spatial awareness)
• Loading indicators (acknowledge the wait)

Never animate for decoration alone.