/* ❌ What devs often do */
h1 { font-size: 42px; }
h2 { font-size: 30px; }
h3 { font-size: 27px; }
p  { font-size: 18px; }
.small { font-size: 15px; }
.tiny { font-size: 13px; }

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p  { font-size: 1rem; }

A practical guide for devs who want better UI without becoming designers.

Most developers don’t want to be designers — and that’s fine. But a little design understanding can make your app feel 10x more professional with the same code.

Let’s get into it. 🚀

1️⃣ Using Too Many Font Sizes

📉 Problem: Random sizes make the UI feel messy and unplanned.

/* ❌ What devs often do */
h1 { font-size: 42px; }
h2 { font-size: 30px; }
h3 { font-size: 27px; }
p  { font-size: 18px; }
.small { font-size: 15px; }
.tiny { font-size: 13px; }

✅ How to Fix

Use a scale and repeat it everywhere.

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p  { font-size: 1rem; }

2️⃣ No Spacing System

📉 Problem: Everything feels cramped or uneven.

✅ Fix

Use a spacing scale:

4px → 8px → 12px → 16px → 24px → 32px → 48px

.section { padding: 24px; margin-bottom: 32px; }

3️⃣ Inconsistent Buttons

📉 Problem: Different borders, shadows, padding = unprofessional.

✅ Fix

Make a ruleset once → reuse everywhere.

button {
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
transition: 0.2s;
}
button:hover { opacity: .9; }
button:active { transform: scale(.97); }

4️⃣ Using Too Many Colors

📉 Problem: More colors ≠ better UI.

🎯 Use 5 max:

Primary

Secondary

Background

Text

Accent

5️⃣ Ignoring Hierarchy

📉 Problem: Users don’t know what to look at first.

✅ Fix

Structure your content:

Big title = what

Subtitle = why

Normal text = details

<h1>Track expenses smarter</h1>
<p>AI categories every transaction automatically.</p>
<button>Get Started</button>

6️⃣ Centering Everything

📉 Problem: Center text = okay. Center paragraphs = painful.

✅ Fix

Center = headings, hero text

Left-align = paragraphs

7️⃣ Low Contrast Text

📉 Light grey looks pretty but is unreadable.

❌ Bad
color: #999;

✅ Fix
color: #1a1a1a;

8️⃣ Inconsistent Icon Styles

📉 Mixed icon styles look amateur.

✅ Fix

Choose ONE library:

Lucide

HeroIcons

Feather

9️⃣ Full-Width Text

📉 Wide paragraphs tire the eyes.

✅ Fix

max-width: 65ch;

🔟 No Visual Grouping

📉 Everything floats = no structure.

✅ Fix with:

Cards

Background blocks

Dividers

Padding + spacing

1️⃣1️⃣ No Interaction Feedback

📉 Buttons feel dead.

✅ Fix

button:hover { opacity: .85; }
button:active { transform: scale(.97); }

1️⃣2️⃣ Popups Everywhere

📉 Popups are not a navigation strategy.

✅ Fix

Use:

inline components drawers side panels

1️⃣3️⃣ Only Using Color for Errors

📉 Not accessible for color-blind users.

❌ Bad

Email invalid

✅ Fix
<p class="error"><span>⚠️</span> Invalid email format</p>

1️⃣4️⃣ Not Testing on Mobile First

📉 Desktop perfect ≠ mobile usable.

✅ Fix

.container { width: 100%; }
@media (min-width: 768px) {
.container { max-width: 700px; margin: auto; }
}

🚀 Final Thoughts

You don’t need to “be a designer.”

You need:

✅ Rules ✅ Consistency ✅ Repeated patterns

✨ Design isn’t decoration. It’s decision-making.