Frontend Design

Create distinctive, production-grade web interfaces that avoid generic AI aesthetics and feel intentionally crafted.

Principles

• Visual Hierarchy — guide the eye through size, contrast, and spacing
• Typography — use a type scale, limit to 2-3 font weights, ensure readable line lengths
• Color Theory — build palettes from HSL, maintain contrast ratios, use color purposefully
• Spacing System — use a consistent spacing scale (4px/8px grid) throughout
• Motion Design — subtle animations that communicate state changes and guide attention

Anti-Slop Patterns

Avoid the telltale signs of AI-generated UI:

• Generic gradient backgrounds
• Overuse of rounded corners and shadows
• Stock-looking placeholder content
• Every section looking equally important
• Rainbow color palettes with no cohesion