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.