frontend-design

Commit to a specific aesthetic direction before coding, pair a distinctive display font with a refined body font, and use dominant colors with sharp accents. Avoid generic fonts like Inter and Arial, purple-gradient cliches, and predictable component layouts.

Generic output comes from overused font families (Inter, Roboto, Arial), cliched color schemes like purple gradients on white, predictable layouts, and cookie-cutter components lacking context-specific character. Intentional, differentiated choices fix this.

It supports plain HTML/CSS/JS as well as React and Vue. For React projects, the Motion library is recommended for animations, while CSS-only solutions are preferred for plain HTML.

Prioritize one well-orchestrated page load with staggered reveals using animation-delay over scattered micro-interactions. Add scroll-triggered effects and surprising hover states, matching animation complexity to the overall aesthetic vision.

Both work when executed with intentionality. Maximalist designs need elaborate code with extensive animations and effects, while minimalist designs need restraint, precise spacing, refined typography, and subtle detail work.