anti-slop-design

name	anti-slop-design
description	Category-aware design skill that builds distinctive, production-grade UIs. Brand-vs-product register, color strategy commitment, scene-based theme choice, palettes, font pairings, UX patterns, shadcn/token integration, empty-error-loading copy, secondary slop signals, multimodal design parity from mocks, and a pre-ship second pass. Framework-agnostic.
license	MIT
metadata	{"version":"1.2.0","category":"design","sources":["Project design systems and token files","Platform accessibility guidance","Established product and editorial design patterns"],"model_assumptions":[{"multimodal-input":"recommended"}]}

Anti-Slop Design Skill ("Taste Layer")

Build UIs that look like a senior designer made them, not a language model. This skill enforces category-aware design thinking, concrete palettes, and a pre-delivery quality gate.

When to Use

• Building any UI: landing page, dashboard, app screen, marketing site
• User asks to "design", "build a page", "create a component", or "make it look good"
• User asks to "create a design system" or "set up design tokens"
• Reviewing or improving existing UI code

For full pages or multi-section layouts, also read reference.md in this skill directory. It contains section anatomy patterns, extended slop catalog, microcopy examples, stack-specific notes, common mistakes per category, CSS token starters, and a mobile-first checklist. Skip it for single-component work.

---

Step 0: Read Design Context

Before designing anything, inspect the project:

1. Check the package manifest for styling approach (Tailwind, CSS Modules, styled-components, vanilla CSS).
2. Check for existing design tokens: tailwind.config.*, theme.ts, CSS variable files, globals.css.
3. Check for existing font imports (Google Fonts @import, next/font, @font-face).
4. Check for an existing icon library (lucide-react, heroicons, phosphor, etc.).
5. If a design system already exists, respect it. Extend, do not replace.

Skip this step only for standalone demos or canvases with no project context.

---

Step 1: Design Thinking

Before writing any UI code, commit to a direction. Never skip this.

1. Pick the register. Every surface is brand (marketing, landing, campaign, portfolio -- design IS the product) or product (app UI, dashboard, admin, tool -- design SERVES the task). Brand surfaces earn drama; product surfaces earn clarity, restraint, and density control. Two common slop sources: brand drama applied to product UI, and timid product defaults applied to brand pages.
2. Identify the category. Match the project to a row in the Category Design Guide below.
3. Pick the tone. Use the category's recommended tone or choose a bold alternative -- never "modern and clean" (that is generic). Tone vocabulary to draw from: brutally minimal, maximalist, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, industrial/utilitarian.
4. Choose the theme from a scene, not a category. Dark vs. light is never a default. Write one sentence of physical scene -- who uses this, where, under what ambient light, in what mood -- and let it force the answer. "SRE glancing at incident severity at 2am in a dim room" forces dark; "the category is observability" forces nothing.
5. Pick a color strategy (see Color Strategy below) before picking any hex values.
6. State the memorable thing. What is the ONE element someone will remember? Commit to it.
7. Vary across generations. If your last output was dark editorial, the next must differ -- unless the user explicitly requests consistency.

Intentionality over intensity. Bold maximalism and refined minimalism both work; the only failure is timid genericness. Match implementation complexity to the vision: maximalist directions need elaborate code and orchestrated effects; minimal directions need precision in spacing, type, and subtle detail. Restraint executed well is a strong direction, not a missing one.

---

Color Strategy (commit before picking hexes)

Four steps on a commitment axis -- choose one deliberately per surface:

Strategy	What it means	Use for
Restrained	Tinted neutrals + one accent on ≤10% of the surface	Product UI default, dense dashboards, minimalist brand
Committed	One saturated color carries 30–60% of the surface	Identity-driven brand pages, bold landing heroes
Full palette	3–4 named color roles, each used deliberately	Campaigns, editorial layouts, data visualization
Drenched	The surface IS the color	Brand heroes, campaign moments, posters

The accent-counting rule in the Slop Second Pass applies to Restrained only -- Committed, Full palette, and Drenched exceed it on purpose. Do not collapse every design to Restrained by reflex, and do not "decorate" a Restrained product surface into Committed by accident.

Mechanics: prefer OKLCH when the stack allows. Tint every neutral toward the brand hue (chroma 0.005–0.01 is enough -- never pure gray). Reduce chroma as lightness approaches 0 or 100; high chroma at the extremes looks garish.

---

Banned Patterns ("AI Slop")

These are the statistical median of AI training data. Never generate them:

• Three-column card grids with centered icons and centered text
• Indigo/purple gradients on buttons or text (unless explicitly requested)
• Thick gray borders and over-boxed layouts
• Emoji as UI icons
• Inter, Roboto, Arial, system-ui, Space Grotesk as default fonts
• Empty hero sections with no imagery or decorative elements
• Generic "Lorem ipsum" placeholder text
• Colored-circle-initial avatars
• 5-star yellow rating widgets
• Cookie-cutter components with no context-specific character
• Side-stripe accent borders (border-left: 4px solid on cards, callouts, alerts) -- use full borders, background tints, or a leading icon instead
• Gradient text (background-clip: text over a gradient) -- emphasize with weight, size, or a solid color
• The hero-metric template (big number + small label + gradient accent) as the only dashboard idea
• Nested cards (a card inside a card) -- flatten, or separate with background shifts
• Modal as the first thought -- exhaust inline editing and progressive disclosure before reaching for a dialog

Secondary slop signals (also avoid)

These patterns are nearly as common as the list above; treat them as soft bans unless the user explicitly wants them.

• Glass stacks: multiple nested backdrop-blur panels filling the page — reads as template UI; use glass for one focal layer only.
• Blob clusters: three overlapping blurred circles (purple/pink/cyan) behind every hero — substitute category-specific texture, photography, or one intentional mesh.
• Fake social proof: "Trusted by" with placeholder logos, repeated generic company names, or SVG boxes labeled "Logo".
• Abstract 3D illustration overload: same glossy shapes on every SaaS landing — prefer product screenshots, UI chrome, or category-appropriate photography.
• Identical section rhythm: every block is py-24 + headline + subtitle + grid — vary vertical rhythm, full-bleed breaks, or editorial pulls.
• Motion soup: everything fades in on scroll with the same delay — stagger meaningfully or reserve motion for one hero moment.
• Generic microcopy: "Welcome!", "No data available", "Something went wrong" with no next step — write voice-specific, actionable copy (see reference.md).

---

Multimodal Design Parity (M3)

When the user provides a design mock, screenshot, or reference image, treat the image as the contract for the build. On M3 the runtime can read the image directly; do not paraphrase from a guessed description.

• Read the image file in the current session and reference the exact path in your closeout.
• Cite the region you are matching (hero block, top-right nav, footer) when reviewing deviations — generic "looks right" is not a citation.
• After the build, re-read the resulting state (post-change screenshot/frame) and compare against the reference; state "visually matched" only when you actually opened both.
• If the reference is a low-fidelity wireframe, design for the wireframe's intent, not its pixel values; if the reference is a high-fidelity mock, match the values.
• For multi-image sets (desktop, tablet, mobile mockups), re-read each before claiming a responsive match.

Stack And Kit Integration

When the project already uses shadcn/ui, Radix, MUI, or similar:

1. Do not replace the component library for marketing polish — map the Category Design Guide to semantic tokens (--primary, --background, --muted, radius) so primitives stay accessible.
2. Override at theme / CSS variable layer first; only fork components when layout truly demands it.
3. For Tailwind v4, prefer @theme or token files that align with existing globals.css — avoid parallel conflicting palettes.

---

Copy, Empty, And Error States

• Headlines and CTAs should sound like this product, not any SaaS: ban "Empower your workflow", "Unlock potential", "Streamline operations" unless ironic.
• Empty states: explain what will appear, one primary action, optional illustration that matches category — not a gray box and "Nothing here".
• Errors: what failed, what the user can do, support or retry — not only red text "Error".
• Loading: prefer skeleton shapes that match final layout; avoid infinite shimmer on unrelated blocks.

---

Category Design Guide

Match the project to a category. Use the palette, fonts, and patterns as your starting point -- then push further.

Category-reflex check. These tables are a floor, not a ceiling. If someone could guess your palette from the category name alone (healthcare → teal on white, fintech → navy + gold, gaming → neon on black), you have reproduced the training-data median -- the polished version of slop. Run the scene sentence, the tone choice, and any brand inputs against the table until the domain no longer fully predicts the design.

SaaS / Developer Tools

Aspect	Guidance
Palette	Slate base (#0f172a, #1e293b), brand accent (teal #14b8a6, blue #3b82f6, or lime #84cc16), surface #f8fafc
Fonts	Display: Plus Jakarta Sans, Geist, Satoshi. Body: DM Sans, Source Sans 3
Tone	Precise, confident, developer-friendly. Dense information without clutter
UX patterns	Product screenshot above fold, feature comparison grids, code snippets, transparent pricing, trust badges (SOC 2, uptime), developer docs link in nav
Atmosphere	Subtle dot-grid or noise backgrounds, monospace accents for technical credibility, dark mode as primary
Avoid	Marketing fluff, stock photography of people pointing at screens, excessive whitespace that wastes developer attention

E-commerce / Retail

Aspect	Guidance
Palette	Warm neutrals (#faf9f6, #292524), accent for CTAs (coral #f97316, rose #e11d48), gold for premium (#d4a574)
Fonts	Display: Playfair Display, Fraunces (luxury), Bricolage Grotesque (casual). Body: DM Sans, Outfit
Tone	Product-led. The merchandise is the hero, not the UI chrome
UX patterns	Large product imagery, quick-add-to-cart, persistent cart indicator, urgency signals (stock count, not fake timers), filters/sort, social proof near buy button
Atmosphere	Clean product photography on neutral backgrounds, lifestyle imagery for context, subtle hover zoom on products
Avoid	Cluttered sidebars, aggressive pop-ups, fake urgency countdown timers, tiny product images

Fintech / Banking

Aspect	Guidance
Palette	Deep navy (#0b1f33, #1e3a5f), trust teal (#0d9488), muted gold (#b8860b), surface #f0f4f8
Fonts	Display: Newsreader, Instrument Serif. Body: Geist, DM Sans
Tone	Authoritative, calm, trustworthy. Every pixel communicates stability
UX patterns	Compliance badges above fold, transparent fee structures, account dashboards with clear hierarchy, monospace for financial figures, security indicators
Atmosphere	Subtle gradients (navy-to-dark), fine-line geometric patterns, minimal motion (stability over playfulness)
Avoid	Flashy animations, crypto-bro neon aesthetics (unless explicitly a crypto project), hiding fees, cluttered dashboards

Healthcare / Medical

Aspect	Guidance
Palette	Clinical blue (#1e40af, #3b82f6), calming teal (#0d9488), soft green (#86efac), warm surface #f0fdf4 or #f8fafc
Fonts	Display: Source Serif 4, Fraunces. Body: Source Sans 3, DM Sans
Tone	Calm, trustworthy, accessible. Patients are anxious -- reduce cognitive load
UX patterns	Clear appointment CTAs, provider credentials visible, HIPAA/certification badges, large touch targets, high contrast for aging users, simple forms
Atmosphere	Soft gradients, organic rounded shapes, generous whitespace, calming imagery (nature, not sterile stock photos)
Avoid	Red as primary (triggers alarm), dense data tables for patients, small text, complex navigation, clinical coldness

Portfolio / Personal

Aspect	Guidance
Palette	Achromatic base (#0a0a0a, #fafafa) with one signature accent that reflects personality
Fonts	Display: Cormorant Garamond, Instrument Serif, Bricolage Grotesque. Body: Satoshi, DM Sans
Tone	The work speaks. Minimal chrome, maximum project visibility
UX patterns	Project grid or scroll-based case studies, hover reveals, smooth page transitions, concise bio, contact CTA
Atmosphere	Dramatic whitespace or dramatic darkness, project imagery as the primary texture, subtle cursor effects
Avoid	Walls of text about yourself before showing work, generic "About Me" sections with stock icons, skill-bar charts

Blog / Editorial / Media

Aspect	Guidance
Palette	Rich ink (#1a1a2e, #0f172a), warm paper (#fefce8, #faf5ee), accent for links/highlights
Fonts	Display: Lora, Libre Baskerville, Newsreader. Body: Source Serif 4, Merriweather, Charter
Tone	Typographic excellence. The reading experience is the product
UX patterns	65-75 character line length, generous line-height (1.6-1.8), clear article hierarchy, pull quotes, related articles, reading time estimate
Atmosphere	Paper-like textures, drop caps, editorial grid with asymmetric image placement, subtle serif elegance
Avoid	Sidebar clutter, auto-playing media, pop-ups that interrupt reading, tiny body text, infinite scroll without pagination option

Restaurant / Food & Beverage

Aspect	Guidance
Palette	Warm earth tones (terracotta #c2703e, olive #606c38, cream #fefae0) or moody dark (charcoal #1a1a1a, burgundy #722f37)
Fonts	Display: Cormorant Garamond, Playfair Display (upscale), Bricolage Grotesque (casual). Body: DM Sans, Outfit
Tone	Appetizing. The food and atmosphere are the stars
UX patterns	Menu with prices (not PDF), reservation CTA always visible, hours + location prominent, food photography hero, online ordering link
Atmosphere	Full-bleed food photography, warm lighting in imagery, textured backgrounds (linen, wood grain), subtle parallax
Avoid	PDF-only menus, tiny text, auto-playing background music, Flash-era animations, hiding the phone number

Real Estate / Property

Aspect	Guidance
Palette	Sophisticated neutrals (#1c1917, #44403c), forest green (#166534), warm gold (#b45309), surface #fafaf9
Fonts	Display: Instrument Serif, Newsreader. Body: DM Sans, Geist
Tone	Aspirational but trustworthy. Properties sell on emotion and credibility
UX patterns	Search/filter as hero, large property photos with gallery, map integration, agent contact prominent, virtual tour links, neighborhood info
Atmosphere	Full-bleed property photography, clean card layouts for listings, map-based browsing, subtle hover transitions
Avoid	Tiny listing thumbnails, cluttered search forms, hiding agent contact info, auto-rotating carousels

Education / EdTech

Aspect	Guidance
Palette	Friendly blue (#2563eb, #60a5fa), warm yellow (#fbbf24), green for progress (#22c55e), light surface #f8fafc
Fonts	Display: Plus Jakarta Sans, Bricolage Grotesque. Body: DM Sans, Nunito
Tone	Encouraging, clear, structured. Reduce anxiety about learning
UX patterns	Progress indicators, clear course structure, achievement badges, readable content areas, accessible navigation, search
Atmosphere	Friendly illustrations (not stock photos), subtle gradients, rounded shapes, generous spacing
Avoid	Overwhelming dashboards, tiny text, complex navigation trees, gamification that distracts from learning

Agency / Creative Studio

Aspect	Guidance
Palette	Bold and opinionated -- this is where you push hardest. Achromatic with one electric accent, or full maximalist color
Fonts	Display: Oversized sans (Neue Montreal, Satoshi at 80px+), or dramatic serif (Cormorant at scale). Body: matching sans
Tone	The website IS the portfolio. Every interaction demonstrates capability
UX patterns	Case study scroll, dramatic transitions, cursor effects, work grid with hover reveals, minimal nav, bold typography as layout
Atmosphere	Custom effects (not templates), smooth scroll, video backgrounds, experimental layouts, grain/noise textures
Avoid	Template-looking layouts, generic stock imagery, conservative corporate feel, listing services without showing work

Legal / Corporate / Professional Services

Aspect	Guidance
Palette	Warm charcoal (#1c1917, #292524), muted gold (#b8860b, #d4a574), deep navy (#1e3a5f), cream surface #fffbeb
Fonts	Display: Newsreader, Instrument Serif, Cormorant Garamond. Body: Source Sans 3, DM Sans
Tone	Authoritative, established, trustworthy. Quiet confidence, not flashy
UX patterns	Attorney/team bios with credentials, practice area navigation, consultation CTA always visible, testimonials, case results
Atmosphere	Editorial whitespace, subtle serif elegance, muted photography, fine horizontal rules as dividers
Avoid	Gavel/scales-of-justice stock photos, aggressive CTAs, flashy animations, hiding contact information

Entertainment / Gaming

Aspect	Guidance
Palette	Deep dark (#0f0f1a, #1a1a2e), neon accents (cyan #06b6d4, magenta #ec4899, electric purple #8b5cf6)
Fonts	Display: Bold geometric sans (Satoshi, Outfit at heavy weights), or custom display faces. Body: DM Sans, Geist
Tone	High energy, immersive, community-driven
UX patterns	Hero with video/animation, game/content cards with hover effects, leaderboards, community features, trailer embeds, release countdowns
Atmosphere	Particle effects, glow/bloom on accents, dark mode primary, animated backgrounds, sound design cues
Avoid	Flat corporate layouts, excessive text blocks, slow page loads from unoptimized assets, inaccessible color contrast on neon

Non-profit / Charity

Aspect	Guidance
Palette	Warm and human -- earth tones (#92400e, #166534), warm blue (#1d4ed8), hopeful accents (amber #f59e0b), light surface
Fonts	Display: Fraunces, Source Serif 4. Body: DM Sans, Source Sans 3
Tone	Emotionally honest without manipulation. Impact-focused, transparent
UX patterns	Impact metrics above fold, donation CTA persistent but not aggressive, story-driven sections, transparency (where money goes), volunteer/event CTAs
Atmosphere	Real photography of people and communities (not stock), warm color grading, generous whitespace, human-scale typography
Avoid	Guilt-driven dark patterns, hiding financial information, stock photos of sad children, aggressive pop-up donation asks

Travel / Hospitality

Aspect	Guidance
Palette	Sky and earth (ocean blue #0369a1, sand #d4a574, sunset coral #fb923c), warm surface #fffbeb
Fonts	Display: Cormorant Garamond, Playfair Display (luxury), Bricolage Grotesque (adventure). Body: DM Sans, Outfit
Tone	Aspirational. The user should feel the destination before booking
UX patterns	Full-bleed destination photography, search/date picker as hero, itinerary builders, reviews near booking CTA, map integration
Atmosphere	Cinematic imagery, parallax scrolling on landscapes, warm color grading, immersive full-width sections
Avoid	Tiny thumbnails, complex multi-step booking without progress indication, hiding total prices, generic city stock photos

Fitness / Wellness / Beauty

Aspect	Guidance
Palette	Split by sub-tone. Fitness: bold (charcoal #171717, electric orange #f97316, lime #84cc16). Wellness: soft (sage #a3b18a, cream #fefae0, blush #fecdd3). Beauty: luxe (rose gold #b76e79, deep plum #581c87, pearl #f5f5f4)
Fonts	Fitness: Satoshi, Outfit (bold weights). Wellness: Fraunces, Cormorant Garamond. Beauty: Instrument Serif, DM Sans
Tone	Fitness: energizing, bold. Wellness: calming, nurturing. Beauty: luxurious, aspirational
UX patterns	Transformation stories, booking/scheduling CTA, class/service listings, trainer/practitioner bios, before/after (tastefully), membership pricing
Atmosphere	Fitness: high-contrast, dynamic angles, action photography. Wellness: soft gradients, organic shapes, nature imagery. Beauty: clean product shots, soft lighting, editorial layouts
Avoid	Unrealistic body imagery, aggressive "transform yourself" language for wellness, cluttered service menus, hiding prices

---

The Taste Layer Principles

These apply universally across all categories.

Typography

• Distinctive font pairings mandatory -- use the category guide as starting point.
• Hierarchy through weight and color, not just size. De-emphasize secondary text with tinted muted colors, not smaller-and-black.
• Keep ≥1.25 ratio between adjacent scale steps -- flat scales read as no hierarchy at all.
• Tighten letter-spacing as display size grows (-0.01em to -0.04em above ~32px); never negative-track body text.
• Cap body measure at 65–75ch regardless of category.
• Left-align body text. Center-align only for short hero headlines.

Color

• Cohesive palette via CSS variables. One dominant + one sharp accent beats an evenly-distributed rainbow.
• Tinted grays (slate, zinc, stone) that complement the primary. Never pure neutral gray.
• Dark mode: rich deep colors (#0A0A0B, #0f172a), not #000. Light mode: warm/cool off-whites, not #FFF.

Spacing and Layout

• Start with too much whitespace, then tighten. Strict 4px-based spacing scale.
• Vary spacing for rhythm -- identical padding on every section is monotony, not consistency.
• Integrated over boxed: elements breathe on the canvas, not everything in cards. Cards are the lazy default -- use them only when grouping is truly the right affordance, and never nest them.
• Spatial composition is a tool: asymmetry, overlap, diagonal flow, and one deliberate grid-breaking element beat a perfectly safe stack of centered blocks (brand surfaces especially).
• All sections share the same max-width and horizontal padding -- edges align hero to footer.
• Hero: height: 100svh with symmetric vertical padding for true optical centering.

Motion

• Orchestrated page entrance with staggered animation-delay reveals.
• IntersectionObserver for scroll-triggered fade-up/slide-in below the fold.
• Animate only transform and opacity -- never layout properties (width, height, top, margin).
• Ease out with exponential curves (ease-out-quart/quint/expo). No bounce or elastic in product UI; reserve spring physics for deliberately playful brand moments.
• Hover states that surprise: scale, color shift, shadow, underline. Not just opacity.
• Always respect prefers-reduced-motion.

Backgrounds and Atmosphere

• Match to category: gradient meshes for luxury, noise/grain for tactile premium, dot-grids for technical, organic shapes for wellness.
• Glassmorphism only when it serves the design, not as a default.

Borders and Depth

• Separate with whitespace or subtle background shifts. Use ring-1 ring-black/5 for subtle edges.
• Shadows only for true elevation (dropdowns, floating nav). No decorative drop shadows.

Icons

• Real SVG only: Lucide, Heroicons, Phosphor, Hugeicons. Never emoji.
• Style matches tone: stroke for minimal, filled for bold, duotone for marketing.
• Sizes: 16-20px inline, 24px nav, 32-48px feature callouts.

Imagery

• Hero sections never visually empty: real photography (Unsplash, Pexels), product screenshots, or decorative SVG.
• Real headshots for testimonials, not colored-circle initials.
• When photography unavailable: animated SVG shapes, gradient blobs, or geometric patterns.

---

Design System Generation

When asked to create a design system or set up tokens, output this structure:

Master Tokens

Category: [matched from Category Design Guide]
Tone: [one sentence]

Palette (CSS variables):
  --color-primary:    [hex]
  --color-secondary:  [hex]
  --color-accent:     [hex]
  --color-surface:    [hex]
  --color-surface-alt:[hex]
  --color-text:       [hex]
  --color-text-muted: [hex]
  --color-success:    [hex]
  --color-warning:    [hex]
  --color-error:      [hex]

Typography:
  --font-display: '[Display Font]', [fallback]
  --font-body:    '[Body Font]', [fallback]
  --font-mono:    '[Mono Font]', monospace  (if needed)

  Scale: 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 48 / 60 / 72

Spacing (4px base):
  4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96

Border radius:
  --radius-sm: 4px
  --radius-md: 8px
  --radius-lg: 16px
  --radius-full: 9999px

Shadows:
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05)
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08)
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12)

Page Overrides (Optional)

When a specific page deviates from the master (e.g., a marketing landing page within a SaaS dashboard), document the override:

Page: [name]
Overrides:
  --color-surface: [different hex]
  Tone shift: [e.g., "more playful than the dashboard default"]
  Additional font: [if needed]

---

Domain-Specific Patterns

Domain	Key rules
Landing pages	Hero with 100svh centering, consistent max-width across sections, real imagery or decorative SVG fills, single primary CTA per section
Dashboards	Dense but hierarchical, semantic status colors, real chart libraries (Recharts, Chart.js with fixed-height containers), data tables with proper alignment
Forms	Accessible labels on every input, clear error states with color + icon + text, logical tab order, generous touch targets (44px min)
Marketing sites	Story-driven scroll, social proof near CTAs, distinctive hero that is not a three-column card grid, real testimonial photos
Mobile / responsive	44px minimum touch targets, fluid typography (clamp()), thumb-zone navigation, no horizontal scroll, test at 375px and 768px

---

Workflow

1. READ    -> Inspect project: styling approach, existing tokens, fonts, icons
2. MATCH   -> Register (brand vs product) + category from the Category Design Guide
3. COMMIT  -> Scene sentence (theme) + color strategy + tone + memorable element
4. BUILD   -> Apply category palette, fonts, and patterns + Taste Layer principles
5. CHECK   -> Run Pre-Delivery Checklist + Slop second pass before presenting

---

Slop Second Pass (before ship)

After the main checklist, scan once for:

1. Sameness: If two sections could swap places with no loss of meaning, differentiate structure or merge them.
2. Proof: At least one place shows real product, real data shape, or real imagery — not only abstract shapes and lorem.
3. One accent rule (Restrained strategy only): Count accent-color uses; if more than three competing "look at me" elements per viewport, demote some to neutral. For Committed/Full/Drenched strategies, check instead that the color commitment is consistent, not accidental.
4. Category reflex: Could someone guess the palette from the category name alone? If yes, push at least one axis (theme, accent, type) off the median.
5. Touch: Every primary action on mobile is reachable and ≥44px; no hover-only affordances.
6. Voice: Read headings aloud — if they could apply to any competitor, rewrite.

---

Pre-Delivery Checklist

Before presenting any UI code, verify every item:

[ ] Design thinking completed (register + category identified, scene sentence written, color strategy + tone stated)
[ ] No banned patterns (Inter, purple gradients, emoji icons, empty heroes, 3-col card grids)
[ ] No side-stripe borders, gradient text, nested cards, or reflexive modals
[ ] Font pairing is distinctive and matches category
[ ] Icons from real SVG library (Lucide, Heroicons, Phosphor)
[ ] Hero and feature areas have imagery or decorative fills
[ ] Color palette uses CSS variables, tinted grays, no pure #000/#FFF
[ ] Sections share consistent max-width and padding
[ ] Responsive: tested mentally at 375px, 768px, 1024px, 1440px
[ ] Motion animates only transform/opacity with ease-out curves; prefers-reduced-motion respected
[ ] Accessibility: 4.5:1 contrast, visible focus states, form labels
[ ] Cursor pointer on all clickable elements
[ ] Hover states provide clear visual feedback (not just opacity)
[ ] No secondary slop: blob trio hero, stacked glass panels, fake logo wall, motion soup
[ ] If shadcn/MUI/Radix: colors/radius mapped to tokens, components not rewritten unnecessarily
[ ] Empty / error / loading states are specific and actionable, not generic placeholders
[ ] Slop second pass completed (sameness, proof, accent discipline, category reflex, touch, voice)

---

Before / After Examples

Before: "AI Slop"

<div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; font-family: Inter, sans-serif;">
  <h3 style="font-size: 20px; font-weight: bold; color: black;">Plan your project</h3>
  <p style="font-size: 14px; color: #374151; margin-top: 8px;">Use our tool to manage tasks.</p>
  <button style="margin-top: 16px; background: linear-gradient(to right, #8b5cf6, #6366f1); color: white; padding: 8px 16px; border-radius: 6px;">
    Get Started
  </button>
</div>

After: Category-Aware (SaaS)

<div style="position: relative; overflow: hidden; border-radius: 16px; background: #f8fafc;
  outline: 1px solid rgba(15,23,42,0.06); padding: 32px; transition: box-shadow 0.3s;">
  <!-- Subtle radial glow from category accent (teal) -->
  <div style="position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 20%, rgba(20,184,166,0.06), transparent 60%);"></div>
  <div style="position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;">
    <span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
      font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
      color: #14b8a6; font-family: 'DM Sans', sans-serif;">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
        stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/>
        <rect x="14" y="3" width="7" height="7" rx="1"/>
        <rect x="3" y="14" width="7" height="7" rx="1"/>
        <rect x="14" y="14" width="7" height="7" rx="1"/></svg>
      Project Management
    </span>
    <h3 style="font-size: 20px; font-weight: 600; letter-spacing: -0.025em;
      color: #0f172a; font-family: 'Plus Jakarta Sans', sans-serif;">Plan your project</h3>
    <p style="font-size: 16px; line-height: 1.6; color: #64748b; font-family: 'DM Sans', sans-serif;">
      Bring tasks, docs, and team communication into one place.</p>
    <button style="display: inline-flex; height: 40px; align-items: center; border-radius: 8px;
      background: #0f172a; padding: 0 24px; font-size: 14px; font-weight: 500; color: #f8fafc;
      cursor: pointer; transition: background 0.2s; font-family: 'DM Sans', sans-serif;">
      Get Started</button>
  </div>
</div>

---

Quick Reference

READ    -> package.json, tailwind.config, existing fonts/icons
MATCH   -> Register (brand vs product) + Category Design Guide table
COMMIT  -> Scene sentence + color strategy + tone + memorable element
BUILD   -> Category palette + fonts + Taste Layer principles
CHECK   -> Pre-Delivery Checklist (no slop, no banned patterns)

BANNED  -> Inter, Roboto, Arial, purple gradients, emoji icons,
           empty heroes, 3-col card grids, thick gray borders,
           colored-circle avatars, pure #000/#FFF,
           blob trio heroes, nested glass, fake logos, generic SaaS copy,
           side-stripe borders, gradient text, nested cards,
           hero-metric template, modal-as-first-thought

ALWAYS  -> Real SVG icons, tinted grays (toward brand hue), CSS variables,
           responsive, prefers-reduced-motion, 4.5:1 contrast, cursor pointer,
           consistent max-width, distinctive font pairing, ≥1.25 type ratio,
           transform/opacity-only motion with ease-out curves,
           tokens over ripping UI kits, second-pass slop scan