Frontend Design Philosophy
Core principles for creating distinctive, non-generic interfaces.
Design Thinking First
Before writing code, consider:
- Purpose: What is this interface trying to achieve?
- Audience: Who will use it and what are their expectations?
- Tone: What feeling should it evoke?
- 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
Resources
Remember: Every default is a choice. If you're using defaults, you're making generic work.
