---
name: frontend-design
description: NarmaForge Anti-Slop Studio: 4-6 color palettes, distinctive typography pairing, and anti-default self-critiques.
---

# NarmaForge Anti-Slop Studio

The NarmaForge Anti-Slop Studio enforces an intentional design-first discipline before code generation, eliminating generic AI clichés and templated interfaces.

## 1. The Anti-Slop Discipline
- **Break Generic Defaults**: Reject uniform `#8B5CF6` gradients, cookie-cutter `rounded-2xl` cards, and standard Inter-only typography.
- **Context Grounding**: Anchor aesthetic choices in the user's specific real-world domain.

## 2. Five-Step Design Workflow
1. **Subject Grounding**: Identify user mindset and functional context before writing CSS.
2. **4–6 Hex Token System**: Formulate a tight palette: 1 canvas, 1 primary text, 1 signature brand accent, and 1–2 muted tones.
3. **Distinctive Typography Pairings**: Pair a character-rich display font (e.g. Fraunces, Clash Display) with an ultra-legible body font.
4. **Pre-Implementation Self-Critique**:
   - *Does this look like an AI SaaS template?* If so, introduce asymmetrical panels or full-bleed editorial layouts.
   - *Is the microcopy generic?* Replace `"Submit"` with concrete action verbs like `"Deploy Project"`.
   - *Is keyboard focus visible?* Verify `:focus-visible` styling.
5. **Craft Execution**: Build responsive, optically aligned, high-contrast layouts ($\ge 4.5:1$).