madebyaris/anti-slop-design

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. Identify the category. Match the project to a row in the Category Design Guide below.
2. Pick the tone. Use the category's recommended tone or choose a bold alternative -- never "modern and clean" (that is generic).
3. State the memorable thing. What is the ONE element someone will remember? Commit to it.
4. Vary across generations. If your last output was dark editorial, the next must differ -- unless the user explicitly requests consistency.

---

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

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).

---

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.

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.
• 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.
• Integrated over boxed: elements breathe on the canvas, not everything in cards.
• 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.
• 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   -> Identify category from the Category Design Guide
3. COMMIT  -> State tone + memorable element in one sentence
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: Count accent-color uses; if more than three competing "look at me" elements per viewport, demote some to neutral.
4. Touch: Every primary action on mobile is reachable and ≥44px; no hover-only affordances.
5. 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 (category identified, tone stated)
[ ] No banned patterns (Inter, purple gradients, emoji icons, empty heroes, 3-col card grids)
[ ] 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
[ ] prefers-reduced-motion respected for all animations
[ ] 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, 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   -> Category Design Guide table
COMMIT  -> Tone + memorable element in one sentence
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

ALWAYS  -> Real SVG icons, tinted grays, CSS variables, responsive,
           prefers-reduced-motion, 4.5:1 contrast, cursor pointer,
           consistent max-width, distinctive font pairing,
           tokens over ripping UI kits, second-pass slop scan