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

[ ] 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.