frontend-aesthetics

Prevents AI slop by guiding unique typography, color, motion, and background choices in frontend design.

• Guides typography, color, motion, and background in frontend design
• Prevents generic AI-generated 'slop' aesthetics
• Promotes distinctive, context-aware UI/UX decisions
• Enables creative, memorable design experiences

• Choose beautiful, unique fonts (avoid Inter, Roboto, Arial)
• Use high-contrast font pairings (e.g., serif + monospace)
• Apply extreme weight contrasts (100/200 vs 800/900)
• Commit to cohesive color themes with sharp accents
• Avoid purple gradients on white (ultimate AI slop indicator)
• Use CSS variables for consistent theming
• Prioritize CSS-only animations and staggered reveals
• Layer gradients, patterns, and textures for depth

1. 1.Select one distinctive font and use it decisively
2. 2.Apply sharp, context-driven color palettes (avoid purple gradients)
3. 3.Use gap-* instead of space-x/y in Tailwind v4
4. 4.Layer gradients, patterns, and textures in backgrounds
5. 5.Focus on high-impact animations over scattered micro-interactions
6. 6.Avoid clichés: Inter, system fonts, predictable layouts