My Design Philosophy: Keep It Simple

I design in code. No Figma, no mockups – just Next.js, Tailwind CSS, and iteration.

Core Principles

1. Clarity over cleverness – Use patterns people know
2. Every element earns its place – If it doesn't solve a problem, remove it
3. Speed is design – Slow interfaces feel broken
4. Consistency builds trust – Same spacing, same patterns everywhere

My Stack

• Framework: Next.js + TypeScript
• Styling: Tailwind CSS
• Components: shadcn/ui primitives
• Icons: Lucide

Design System

Colors

Zinc-based palette, dark mode only:

--background: #09090b;
--surface: #18181b;
--text: #fafafa;
--muted: #a1a1aa;

Spacing

4px base unit. All spacing is multiples of 4.

Typography

• One font: Inter
• Max 6 sizes
• Line height 1.5 for body

Case Study: Basedrop

The homepage is just an upload zone. No hero, no features list.

Why it works:

• User arrives → sees upload immediately
• Drops file → gets link
• Done in 3 steps

40% of users return because it's frictionless.

Common Mistakes I Avoid

• Designing for myself (I'm a power user, most aren't)
• Light gray text on white (poor contrast)
• Inconsistent spacing (breaks visual rhythm)

Accessibility

Non-negotiable:

• Keyboard navigation works
• Proper contrast ratios
• Focus indicators visible
• Semantic HTML

The Process

1. Write down the problem
2. Sketch on paper (2 minutes max)
3. Build in code
4. Test with real users
5. Iterate

No design tools. Just code and feedback.

Related: Building Basedrop • My Journey