UI Rules for Non-Designers
You do not need to be a designer to make things look good. Just follow these rules.
1. Spacing is Everything
Bad spacing is the #1 reason developer-made UIs look off. Use a consistent scale (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px). Elements that are related should be close together. Elements that are not should have breathing room.
/* Bad — cramped and inconsistent */
.card { padding: 8px; margin: 5px; }
/* Good — consistent 4px scale */
.card { padding: 16px; margin: 12px; }2. Two Fonts Maximum
One heading font (bold, impactful) + one body font (readable, clean). That is all you need. Using more than two fonts is the fastest way to make a site look unprofessional.
Good pairings: Inter + JetBrains Mono, Poppins + Rubik, Playfair Display + Lato
3. Color Rules
Primary — your brand color. Use it for links, buttons, accents.
Background — white or off-white (light mode), dark gray (dark mode).
Text — near-black on light, near-white on dark. Never pure black on pure white (too harsh).
Semantic — green for success, red for errors, amber for warnings.
:root {
--primary: #3b82f6; /* one accent color */
--bg: #fafafa; /* soft off-white */
--text: #1a1a1a; /* near-black */
--border: #e5e7eb; /* subtle borders */
}4. Consistency Over Creativity
- All buttons should look the same. Pick a style and stick to it.
- All cards should have the same border-radius, padding, shadow.
- All form inputs should match — same height, border, focus state.
- If you use rounded buttons everywhere, do not suddenly make one square.
5. The 60-30-10 Rule
60% — neutral background
30% — secondary elements (cards, sidebars)
10% — accent color (buttons, links, highlights)
The Golden Rule
Steal like an artist. Find a site you like, analyze its spacing/fonts/colors, and apply the same system to your project.