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.
1---2name: frontend-design-philosophy3description: Design thinking principles for distinctive interfaces. Covers aesthetic direction, anti-patterns, and avoiding generic AI-generated aesthetics.4---56# Frontend Design Philosophy78Core principles for creating distinctive, non-generic interfaces.910## Design Thinking First1112Before writing code, consider:13141. **Purpose**: What is this interface trying to achieve?152. **Audience**: Who will use it and what are their expectations?163. **Tone**: What feeling should it evoke?174. **Differentiation**: What makes this distinctive?1819## Pick an Extreme2021Rather than defaulting to safe, generic designs, commit to a clear aesthetic direction:2223| Direction | Characteristics |24|-----------|-----------------|25| **Brutalist** | Raw, honest, utilitarian |26| **Maximalist** | Bold, layered, expressive |27| **Minimalist** | Restrained, precise, essential |28| **Retro-futuristic** | Nostalgic tech, neon, gradients |29| **Luxury** | Refined, spacious, premium |30| **Playful** | Animated, colorful, delightful |3132## Avoid "AI Slop"3334Generic AI-generated aesthetics are immediately recognizable. Avoid:3536| Category | Avoid |37|----------|-------|38| **Fonts** | Inter, Roboto, Arial, system fonts as primary |39| **Colors** | Purple gradients, blue-to-purple fades |40| **Layouts** | Centered hero, three-column features |41| **Choices** | Rounded corners everywhere, subtle shadows |4243## Anti-Patterns4445| Category | Avoid |46|----------|-------|47| Typography | Single font for all, default system fonts |48| Color | Gray-on-gray, uninspired palettes |49| Layout | Symmetrical grids, centered everything |50| Motion | Hover effects everywhere, bouncy animations |5152## Validation Checklist5354- [ ] Typography is distinctive (not default fonts)55- [ ] Color palette is intentional and limited56- [ ] Layout breaks from predictable patterns57- [ ] Motion serves purpose and feels polished58- [ ] Design direction is clear and consistent59- [ ] Responsive behavior maintains quality60- [ ] Accessibility not sacrificed for aesthetics6162## Resources6364- [Fontshare](https://www.fontshare.com/) - Free quality fonts65- [Coolors](https://coolors.co/) - Color palette generator6667---6869**Remember:** Every default is a choice. If you're using defaults, you're making generic work.
majesticlabs-dev