frontend-design

Define a clear aesthetic direction first, such as brutalist, editorial, or retro-futuristic, then implement it with distinctive font pairings, a dominant color palette with sharp accents, and unexpected layouts. Avoid default fonts like Inter or Arial and cliched purple gradients.

Generic designs rely on overused fonts like Inter, Roboto, and Arial, cliched purple-gradient color schemes, predictable component patterns, and cookie-cutter layouts. Distinctive work commits to one strong aesthetic direction with characterful typography and intentional composition.

Pair a distinctive display font with a refined body font, choosing characterful and unexpected typefaces rather than system defaults. Avoid commonly converged choices like Space Grotesk, Inter, Roboto, and Arial to keep each design unique.

Yes, the design guidelines apply to HTML/CSS/JS, React, Vue, and other frameworks. For React, the Motion library is recommended for animations, while plain HTML projects should prioritize CSS-only animation solutions.

Focus on high-impact moments such as one well-orchestrated page load with staggered reveals using animation-delay, plus scroll-triggered effects and surprising hover states. Match animation complexity to the aesthetic vision, elaborate for maximalist designs and restrained for minimalist ones.