anti-ai-slop-designlisted

# Anti-AI-Slop Design System ## Core Directive Reject cookie-cutter AI aesthetic tropes. Design UIs that reflect the specific brand identity, product context, and audience needs rather than applying repetitive AI visual clichés. ## Principles Over Dogma 1. **Context Over Trends**: Do not blindly apply glassmorphism, dark modes, or specific font pairs (e.g. Space Grotesk) to every product. A medical dashboard needs high contrast and legibility; a gaming app needs vibrant energy. 2. **Intentional Hierarchy**: Use visual scale, whitespace, and font weight to guide the user's eye naturally to the primary action. 3. **Responsive Micro-Interactions**: Use subtle motion to confirm user intent without causing distraction or layout shifts. ## Anti-Patterns to Avoid | Slop Pattern | Why it Feels AI-Generated | Better Alternative | |---|---|---| | **Purple/Indigo Glow Overuse** | Linear `#6366f1` gradient buttons on dark backgrounds | Brand-curated HSL/OKLCH color themes matched to product identity | | **Identical Rounded Cards** | Generic `border-radius: 12px` cards with standard heavy shadows | Layout structures tailored to the content type and visual hierarchy | | **Default Inter Typography** | Using browser default Inter without font weight contrast | Intentional font pairing and scale tailored to readability and brand voice | | **Lifeless Hero Sections** | Centered text + generic CTA button + floating laptop mock | Product-relevant interactive previews, live data, or function