Frontend Design Philosophy

Core principles for creating distinctive, non-generic interfaces.

Design Thinking First

Before writing code, consider:

1. Purpose: What is this interface trying to achieve?
2. Audience: Who will use it and what are their expectations?
3. Tone: What feeling should it evoke?
4. Differentiation: What makes this distinctive?

Pick an Extreme

Rather than defaulting to safe, generic designs, commit to a clear aesthetic direction:

Direction	Characteristics
Brutalist	Raw, honest, utilitarian
Maximalist	Bold, layered, expressive
Minimalist	Restrained, precise, essential
Retro-futuristic	Nostalgic tech, neon, gradients
Luxury	Refined, spacious, premium
Playful	Animated, colorful, delightful

Avoid "AI Slop"

Generic AI-generated aesthetics are immediately recognizable. Avoid:

Category	Avoid
Fonts	Inter, Roboto, Arial, system fonts as primary
Colors	Purple gradients, blue-to-purple fades
Layouts	Centered hero, three-column features
Choices	Rounded corners everywhere, subtle shadows

Anti-Patterns

Category	Avoid
Typography	Single font for all, default system fonts
Color	Gray-on-gray, uninspired palettes
Layout	Symmetrical grids, centered everything
Motion	Hover effects everywhere, bouncy animations

Validation Checklist

• Typography is distinctive (not default fonts)
• Color palette is intentional and limited
• Layout breaks from predictable patterns
• Motion serves purpose and feels polished
• Design direction is clear and consistent
• Responsive behavior maintains quality
• Accessibility not sacrificed for aesthetics

Resources

• Fontshare - Free quality fonts
• Coolors - Color palette generator

---

Remember: Every default is a choice. If you're using defaults, you're making generic work.