fable-engine 1.3.1__py3-none-any.whl

fable_v2/coder_fleet/design_engine.py

@@ -0,0 +1,1316 @@
+"""Fable-Mode Frontier Frontend Design & Anti-Slop Taste Engine.
+
+Pure-Python, zero-external-dependency engine ensuring AI slop never enters
+Fable-Mode deliverables and that even simple prompts yield Awwwards-caliber
+digital experiences.
+
+Core Subsystems:
+1. DesignDials: Calibrated Variance (1-10), Motion (1-10), and Density (1-10).
+2. AestheticArchetype: 6 Haute Aesthetic Universes (Cyber Obsidian Monolith,
+   Haute Editorial Modernism, Swiss Precision Vignelli, Kinetic Spatial HUD,
+   Neo-Nordic Warmth, Cold Chromatic Luxury).
+3. DesignTokens: Curated OKLCH colorway math, fluid typography clamp scales,
+   variable font pairings, and Newtonian damped harmonic spring presets.
+4. AntiSlopAuditor: Deep AST/regex inspection eradicating purple gradient blobs,
+   3-card centered boilerplates, LLM marketing fluff, fake div screenshot windows,
+   and viewport instability.
+5. BriefInferenceEngine: Infers page kind, target audience, calibrated dials,
+   optimal Haute archetype, and emits the mandatory Design Read Declaration.
+6. AwwwardsScaffoldGenerator: Emits production-ready, zero-slop Tailwind v4
+   and semantic HTML/JSX layouts with 7-layer optical depth and asymmetric bento grids.
+7. PreFlightDesignGate: Mechanical 5-point verification gate validating viewport fit,
+   typographic descender clearance, invariant locks, WCAG AA contrast, and copy restraint.
+"""
+from __future__ import annotations
+
+import math
+import re
+from dataclasses import dataclass, field
+from enum import Enum
+from typing import Any, Dict, List, Optional, Tuple, Union
+
+
+# ==============================================================================
+# 1. THE THREE CALIBRATED DIALS
+# ==============================================================================
+
+@dataclass
+class DesignDials:
+    """The 3 Discrete Dials governing layout variance, motion, and visual density (1 - 10 scale).
+
+    Aesthetic Vector = <DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY>
+    - variance: 1 = Predictable Symmetric Grid, 10 = Kinetic Overlaps & Dynamic Asymmetry
+    - motion: 1 = Static Subtle Color Transitions, 10 = Cinematic Scroll & Physics
+    - density: 1 = Airy Gallery & Expansive Whitespace, 10 = High-Density Telemetry Cockpit
+    """
+
+    variance: int = 7
+    motion: int = 6
+    density: int = 4
+
+    def __post_init__(self) -> None:
+        self.variance = max(1, min(10, int(self.variance)))
+        self.motion = max(1, min(10, int(self.motion)))
+        self.density = max(1, min(10, int(self.density)))
+
+    def to_dict(self) -> dict[str, int]:
+        return {
+            "variance": self.variance,
+            "motion": self.motion,
+            "density": self.density,
+        }
+
+    def vector_str(self) -> str:
+        return f"Variance: {self.variance} / Motion: {self.motion} / Density: {self.density}"
+
+    @classmethod
+    def from_dict(cls, d: dict[str, Any]) -> DesignDials:
+        return cls(
+            variance=int(d.get("variance", 7)),
+            motion=int(d.get("motion", 6)),
+            density=int(d.get("density", 4)),
+        )
+
+
+# ==============================================================================
+# 2. THE 6 HAUTE AESTHETIC ARCHETYPES
+# ==============================================================================
+
+class AestheticArchetype(str, Enum):
+    """The 6 Curated Haute Aesthetic Universes eliminating generic AI templates."""
+
+    CYBER_OBSIDIAN_MONOLITH = "cyber_obsidian_monolith"
+    HAUTE_EDITORIAL_MODERNISM = "haute_editorial_modernism"
+    SWISS_PRECISION_VIGNELLI = "swiss_precision_vignelli"
+    KINETIC_SPATIAL_HUD = "kinetic_spatial_hud"
+    NEO_NORDIC_WARMTH = "neo_nordic_warmth"
+    COLD_CHROMATIC_LUXURY = "cold_chromatic_luxury"
+
+    @classmethod
+    def from_str(cls, val: Optional[str]) -> Optional[AestheticArchetype]:
+        """Normalize string to matching AestheticArchetype, handling hyphens, spaces, and case."""
+        if not val or not isinstance(val, str):
+            return None
+        normalized = val.strip().lower().replace("-", "_").replace(" ", "_")
+        for member in cls:
+            if member.value == normalized or member.name.lower() == normalized:
+                return member
+        return None
+
+
+# ==============================================================================
+# 3. DESIGN TOKENS, FLUID TYPOGRAPHY & SPRING PHYSICS
+# ==============================================================================
+
+@dataclass
+class OKLCHColorToken:
+    """Perceptually uniform OKLCH color token with luminance and CSS declaration."""
+
+    l: float
+    c: float
+    h: float
+    alpha: float = 1.0
+
+    def to_css(self) -> str:
+        if self.alpha < 0.999:
+            return f"oklch({self.l:.3f} {self.c:.3f} {self.h:.1f} / {self.alpha:.2f})"
+        return f"oklch({self.l:.3f} {self.c:.3f} {self.h:.1f})"
+
+    @property
+    def relative_luminance(self) -> float:
+        """Approximate relative luminance for contrast math."""
+        return max(0.0, min(1.0, self.l ** 2.2))
+
+
+def calculate_contrast_ratio(fg: OKLCHColorToken, bg: OKLCHColorToken) -> float:
+    """Calculate standard WCAG relative luminance contrast ratio (1.0 to 21.0)."""
+    l1 = max(fg.relative_luminance, bg.relative_luminance)
+    l2 = min(fg.relative_luminance, bg.relative_luminance)
+    return round((l1 + 0.05) / (l2 + 0.05), 2)
+
+
+def generate_fluid_clamp(min_rem: float, max_rem: float, min_vw: float = 375.0, max_vw: float = 1440.0) -> str:
+    """Compute mathematical fluid CSS clamp(min, preferred, max) without layout thrashing.
+
+    Formula: clamp(min, slope * 100vw + y_intercept, max)
+    """
+    slope = (max_rem - min_rem) / ((max_vw - min_vw) / 16.0)
+    y_intercept = min_rem - slope * (min_vw / 16.0)
+    return f"clamp({min_rem:.3f}rem, {y_intercept:.3f}rem + {slope * 100:.2f}vw, {max_rem:.3f}rem)"
+
+
+@dataclass
+class SpringPreset:
+    """Newtonian 2nd-order damped harmonic oscillator physics parameters."""
+
+    name: str
+    stiffness: float
+    damping: float
+    mass: float = 1.0
+    zeta: float = 0.85
+    description: str = ""
+
+    def to_dict(self) -> dict[str, Any]:
+        return {
+            "name": self.name,
+            "stiffness": self.stiffness,
+            "damping": self.damping,
+            "mass": self.mass,
+            "zeta": self.zeta,
+            "description": self.description,
+        }
+
+
+SPRING_PRESETS: dict[str, SpringPreset] = {
+    "snappy": SpringPreset(
+        name="snappy",
+        stiffness=380.0,
+        damping=28.0,
+        mass=1.0,
+        zeta=0.72,
+        description="Snappy micro-interactions: micro-buttons, badges, toggle switches",
+    ),
+    "modal": SpringPreset(
+        name="modal",
+        stiffness=280.0,
+        damping=33.5,
+        mass=1.0,
+        zeta=1.00,
+        description="Critically damped: modal dialogues, drawers, navigation switches (zero overshoot)",
+    ),
+    "velvet": SpringPreset(
+        name="velvet",
+        stiffness=140.0,
+        damping=18.0,
+        mass=1.0,
+        zeta=0.88,
+        description="Liquid velvet float: scroll parallax, cursor follow, layout morphs",
+    ),
+    "magnetic": SpringPreset(
+        name="magnetic",
+        stiffness=450.0,
+        damping=36.0,
+        mass=1.2,
+        zeta=0.77,
+        description="Heavy magnetic snap: drag-and-drop docking, card snapping",
+    ),
+}
+
+
+@dataclass
+class HauteDesignTheme:
+    """Comprehensive design system tokens for a Haute Aesthetic Archetype."""
+
+    archetype: AestheticArchetype
+    title: str
+    description: str
+    dials: DesignDials
+    bg_void: OKLCHColorToken
+    surface_card: OKLCHColorToken
+    surface_elevated: OKLCHColorToken
+    border_hairline: OKLCHColorToken
+    border_specular: OKLCHColorToken
+    text_primary: OKLCHColorToken
+    text_muted: OKLCHColorToken
+    accent_primary: OKLCHColorToken
+    accent_glow: OKLCHColorToken
+    font_display: str
+    font_body: str
+    font_mono: str
+    border_radius_scale: str
+    spring_preset_name: str = "snappy"
+
+    def get_fluid_typography_tokens(self) -> dict[str, str]:
+        """Compute fluid typography tokens for this theme."""
+        return {
+            "--font-display-hero": generate_fluid_clamp(2.75, 6.50),
+            "--font-display-h1": generate_fluid_clamp(2.00, 4.25),
+            "--font-display-h2": generate_fluid_clamp(1.50, 2.75),
+            "--font-heading-h3": generate_fluid_clamp(1.25, 1.875),
+            "--font-body-lead": generate_fluid_clamp(1.0625, 1.25),
+            "--font-body-base": generate_fluid_clamp(0.9375, 1.0625),
+            "--font-caption-sm": generate_fluid_clamp(0.8125, 0.875),
+            "--font-mono-telemetry": generate_fluid_clamp(0.6875, 0.8125),
+        }
+
+    def to_tailwind_v4_theme(self) -> str:
+        """Render production-ready Tailwind CSS v4 @theme block with CSS variables."""
+        typo = self.get_fluid_typography_tokens()
+        spring = SPRING_PRESETS.get(self.spring_preset_name, SPRING_PRESETS["snappy"])
+        lines = [
+            f"/* Fable Haute Aesthetic: {self.title} */",
+            "@theme {",
+            f"  --color-bg-void: {self.bg_void.to_css()};",
+            f"  --color-surface-card: {self.surface_card.to_css()};",
+            f"  --color-surface-elevated: {self.surface_elevated.to_css()};",
+            f"  --color-border-hairline: {self.border_hairline.to_css()};",
+            f"  --color-border-specular: {self.border_specular.to_css()};",
+            f"  --color-text-primary: {self.text_primary.to_css()};",
+            f"  --color-text-muted: {self.text_muted.to_css()};",
+            f"  --color-accent-primary: {self.accent_primary.to_css()};",
+            f"  --color-accent-glow: {self.accent_glow.to_css()};",
+            f"  --font-family-display: {self.font_display};",
+            f"  --font-family-body: {self.font_body};",
+            f"  --font-family-mono: {self.font_mono};",
+            f"  --radius-scale: {self.border_radius_scale};",
+            f"  --spring-stiffness: {spring.stiffness};",
+            f"  --spring-damping: {spring.damping};",
+            f"  --spring-mass: {spring.mass};",
+        ]
+        for var_name, clamp_val in typo.items():
+            lines.append(f"  {var_name}: {clamp_val};")
+        lines.append("}")
+        return "\n".join(lines)
+
+    def to_dict(self) -> dict[str, Any]:
+        contrast = calculate_contrast_ratio(self.text_primary, self.bg_void)
+        return {
+            "archetype": self.archetype.value,
+            "title": self.title,
+            "description": self.description,
+            "dials": self.dials.to_dict(),
+            "palette": {
+                "bg_void": self.bg_void.to_css(),
+                "surface_card": self.surface_card.to_css(),
+                "surface_elevated": self.surface_elevated.to_css(),
+                "border_hairline": self.border_hairline.to_css(),
+                "border_specular": self.border_specular.to_css(),
+                "text_primary": self.text_primary.to_css(),
+                "text_muted": self.text_muted.to_css(),
+                "accent_primary": self.accent_primary.to_css(),
+                "accent_glow": self.accent_glow.to_css(),
+            },
+            "typography": {
+                "font_display": self.font_display,
+                "font_body": self.font_body,
+                "font_mono": self.font_mono,
+                "fluid_scales": self.get_fluid_typography_tokens(),
+            },
+            "border_radius_scale": self.border_radius_scale,
+            "spring_physics": SPRING_PRESETS.get(self.spring_preset_name, SPRING_PRESETS["snappy"]).to_dict(),
+            "wcag_aa_contrast": {
+                "primary_to_bg_ratio": contrast,
+                "meets_wcag_aa": contrast >= 4.5,
+                "meets_wcag_aaa": contrast >= 7.0,
+            },
+        }
+
+
+# Registry of the 6 Curated Haute Aesthetic Archetypes
+HAUTE_THEMES: dict[AestheticArchetype, HauteDesignTheme] = {
+    AestheticArchetype.CYBER_OBSIDIAN_MONOLITH: HauteDesignTheme(
+        archetype=AestheticArchetype.CYBER_OBSIDIAN_MONOLITH,
+        title="Cyber-Obsidian Monolith",
+        description="Dark industrial aerospace, hairline vectors, and high-voltage spectral accents (Teenage Engineering / Avionics).",
+        dials=DesignDials(variance=8, motion=7, density=6),
+        bg_void=OKLCHColorToken(0.08, 0.02, 270.0),
+        surface_card=OKLCHColorToken(0.12, 0.015, 270.0, 0.70),
+        surface_elevated=OKLCHColorToken(0.16, 0.02, 270.0, 0.85),
+        border_hairline=OKLCHColorToken(1.0, 0.0, 0.0, 0.12),
+        border_specular=OKLCHColorToken(1.0, 0.0, 0.0, 0.25),
+        text_primary=OKLCHColorToken(0.985, 0.005, 270.0),
+        text_muted=OKLCHColorToken(0.68, 0.02, 270.0),
+        accent_primary=OKLCHColorToken(0.78, 0.18, 165.0),  # Luminescent Cyber Mint / Cyan
+        accent_glow=OKLCHColorToken(0.78, 0.18, 165.0, 0.20),
+        font_display='"Geist Display", "Cabinet Grotesk", sans-serif',
+        font_body='"Geist", sans-serif',
+        font_mono='"Geist Mono", "JetBrains Mono", monospace',
+        border_radius_scale="rounded-sm",
+        spring_preset_name="snappy",
+    ),
+    AestheticArchetype.HAUTE_EDITORIAL_MODERNISM: HauteDesignTheme(
+        archetype=AestheticArchetype.HAUTE_EDITORIAL_MODERNISM,
+        title="Haute Editorial Modernism",
+        description="Asymmetric 1.618 golden-ratio negative space, 0.5px hair rules, and dramatic serif scale (Stripe Press / Literary Journal).",
+        dials=DesignDials(variance=9, motion=5, density=3),
+        bg_void=OKLCHColorToken(0.975, 0.008, 85.0),  # Crisp Bone Paper
+        surface_card=OKLCHColorToken(0.995, 0.003, 85.0, 0.95),
+        surface_elevated=OKLCHColorToken(1.0, 0.0, 0.0),
+        border_hairline=OKLCHColorToken(0.20, 0.01, 60.0, 0.12),
+        border_specular=OKLCHColorToken(0.20, 0.01, 60.0, 0.22),
+        text_primary=OKLCHColorToken(0.12, 0.015, 60.0),  # True Carbon Espresso
+        text_muted=OKLCHColorToken(0.48, 0.02, 60.0),
+        accent_primary=OKLCHColorToken(0.48, 0.17, 38.0),  # Burnt Terracotta / Rust
+        accent_glow=OKLCHColorToken(0.48, 0.17, 38.0, 0.15),
+        font_display='"PP Editorial New", "Reckless Neue", "Tiempos Headline", serif',
+        font_body='"Söhne", "PP Neue Montreal", sans-serif',
+        font_mono='"Commit Mono", monospace',
+        border_radius_scale="rounded-none",
+        spring_preset_name="velvet",
+    ),
+    AestheticArchetype.SWISS_PRECISION_VIGNELLI: HauteDesignTheme(
+        archetype=AestheticArchetype.SWISS_PRECISION_VIGNELLI,
+        title="Swiss Precision & Vignelli",
+        description="Pure mathematical grid, extreme scale contrast, monochrome base + single International Accent (Massimo Vignelli / Braun / Leica).",
+        dials=DesignDials(variance=6, motion=3, density=5),
+        bg_void=OKLCHColorToken(0.995, 0.0, 0.0),  # Pure Architectural White
+        surface_card=OKLCHColorToken(0.965, 0.0, 0.0),
+        surface_elevated=OKLCHColorToken(1.0, 0.0, 0.0),
+        border_hairline=OKLCHColorToken(0.0, 0.0, 0.0, 0.14),
+        border_specular=OKLCHColorToken(0.0, 0.0, 0.0, 0.28),
+        text_primary=OKLCHColorToken(0.08, 0.0, 0.0),  # Deep Pitch Black
+        text_muted=OKLCHColorToken(0.44, 0.0, 0.0),
+        accent_primary=OKLCHColorToken(0.55, 0.24, 25.0),  # International Signal Red
+        accent_glow=OKLCHColorToken(0.55, 0.24, 25.0, 0.12),
+        font_display='"Neue Haas Grotesk", "Helvetica Neue", sans-serif',
+        font_body='"Neue Haas Grotesk", "Helvetica Neue", sans-serif',
+        font_mono='"Diatype Mono", monospace',
+        border_radius_scale="rounded-none",
+        spring_preset_name="modal",
+    ),
+    AestheticArchetype.KINETIC_SPATIAL_HUD: HauteDesignTheme(
+        archetype=AestheticArchetype.KINETIC_SPATIAL_HUD,
+        title="Kinetic Spatial HUD",
+        description="Containerless telemetry ribbons, sub-pixel badge pills, scanlines, and live telemetry feeds (Raycast / Developer Console).",
+        dials=DesignDials(variance=7, motion=8, density=8),
+        bg_void=OKLCHColorToken(0.06, 0.015, 250.0),  # Deep Space Void
+        surface_card=OKLCHColorToken(0.10, 0.02, 250.0, 0.65),
+        surface_elevated=OKLCHColorToken(0.14, 0.025, 250.0, 0.80),
+        border_hairline=OKLCHColorToken(1.0, 0.0, 0.0, 0.10),
+        border_specular=OKLCHColorToken(1.0, 0.0, 0.0, 0.20),
+        text_primary=OKLCHColorToken(0.97, 0.005, 250.0),
+        text_muted=OKLCHColorToken(0.60, 0.02, 250.0),
+        accent_primary=OKLCHColorToken(0.72, 0.22, 145.0),  # High-Voltage Phosphor Emerald
+        accent_glow=OKLCHColorToken(0.72, 0.22, 145.0, 0.25),
+        font_display='"Geist Mono", "JetBrains Mono", monospace',
+        font_body='"Geist", sans-serif',
+        font_mono='"Geist Mono", monospace',
+        border_radius_scale="rounded-md",
+        spring_preset_name="magnetic",
+    ),
+    AestheticArchetype.NEO_NORDIC_WARMTH: HauteDesignTheme(
+        archetype=AestheticArchetype.NEO_NORDIC_WARMTH,
+        title="Neo-Nordic Tactile Warmth",
+        description="Alpine spruce, sand bone, smooth pebble contours, and organic tactile warmth (Bang & Olufsen / Alvar Aalto).",
+        dials=DesignDials(variance=7, motion=4, density=4),
+        bg_void=OKLCHColorToken(0.975, 0.008, 140.0),  # Bone Sand
+        surface_card=OKLCHColorToken(0.94, 0.012, 140.0),
+        surface_elevated=OKLCHColorToken(0.99, 0.005, 140.0),
+        border_hairline=OKLCHColorToken(0.35, 0.05, 150.0, 0.12),
+        border_specular=OKLCHColorToken(0.35, 0.05, 150.0, 0.22),
+        text_primary=OKLCHColorToken(0.16, 0.03, 150.0),  # Deep Forest Umber
+        text_muted=OKLCHColorToken(0.48, 0.04, 150.0),
+        accent_primary=OKLCHColorToken(0.38, 0.09, 150.0),  # Alpine Spruce
+        accent_glow=OKLCHColorToken(0.38, 0.09, 150.0, 0.15),
+        font_display='"Satoshi", "Cabinet Grotesk", sans-serif',
+        font_body='"Satoshi", sans-serif',
+        font_mono='"Commit Mono", monospace',
+        border_radius_scale="rounded-3xl",
+        spring_preset_name="velvet",
+    ),
+    AestheticArchetype.COLD_CHROMATIC_LUXURY: HauteDesignTheme(
+        archetype=AestheticArchetype.COLD_CHROMATIC_LUXURY,
+        title="Cold Chromatic Luxury",
+        description="Silver-grey chrome, true off-black, hairline borders, and ultra-crisp sans display (Balenciaga / High-End Hardware).",
+        dials=DesignDials(variance=8, motion=5, density=3),
+        bg_void=OKLCHColorToken(0.985, 0.002, 240.0),  # Silver White
+        surface_card=OKLCHColorToken(0.93, 0.004, 240.0),
+        surface_elevated=OKLCHColorToken(1.0, 0.0, 0.0),
+        border_hairline=OKLCHColorToken(0.14, 0.01, 240.0, 0.14),
+        border_specular=OKLCHColorToken(0.14, 0.01, 240.0, 0.28),
+        text_primary=OKLCHColorToken(0.12, 0.01, 240.0),  # Smoked Charcoal
+        text_muted=OKLCHColorToken(0.46, 0.01, 240.0),
+        accent_primary=OKLCHColorToken(0.52, 0.22, 255.0),  # High-Voltage Pure Cobalt
+        accent_glow=OKLCHColorToken(0.52, 0.22, 255.0, 0.20),
+        font_display='"ABC Diatype", "Söhne Breit", sans-serif',
+        font_body='"ABC Diatype", sans-serif',
+        font_mono='"Commit Mono", monospace',
+        border_radius_scale="rounded-sm",
+        spring_preset_name="snappy",
+    ),
+}
+
+
+# ==============================================================================
+# 4. THE ANTI-SLOP AUDITOR
+# ==============================================================================
+
+@dataclass
+class SlopViolation:
+    """An identified AI slop violation with exact rule, severity, and prescribed remedy."""
+
+    rule_id: str
+    category: str
+    message: str
+    severity: str  # "FATAL", "HIGH", "MEDIUM"
+    snippet: str
+    line_number: Optional[int]
+    remedy: str
+
+    def to_dict(self) -> dict[str, Any]:
+        return {
+            "rule_id": self.rule_id,
+            "category": self.category,
+            "message": self.message,
+            "severity": self.severity,
+            "snippet": self.snippet,
+            "line_number": self.line_number,
+            "remedy": self.remedy,
+        }
+
+
+class AntiSlopAuditor:
+    """Rigorous mechanical auditor hunting and eradicating all forms of AI slop in code."""
+
+    # Banned LLM marker phrases
+    _BANNED_LLM_WORDS = [
+        (r"\bsupercharge\b", "Banned buzzword: 'supercharge'"),
+        (r"\bunleash\b", "Banned buzzword: 'unleash'"),
+        (r"\bnext-gen(?:\s+ai)?\b", "Banned buzzword: 'next-gen [ai]'"),
+        (r"\bdelve\s+into\b", "Banned phrase: 'delve into'"),
+        (r"\bseamlessly\s+(?:elevate|integrate|transform)\b", "Banned phrase: 'seamlessly [verb]'"),
+        (r"\bvisionary\s+craftsmanship\b", "Banned phrase: 'visionary craftsmanship'"),
+        (r"\bgame-changing\b", "Banned buzzword: 'game-changing'"),
+        (r"\brevolutionize\b", "Banned buzzword: 'revolutionize'"),
+        (r"\bstreamline\s+your\s+workflow\b", "Banned phrase: 'streamline your workflow'"),
+        (r"\belevate\s+your\s+experience\b", "Banned phrase: 'elevate your experience'"),
+        (r"\bin\s+today's\s+(?:fast-paced|rapidly\s+evolving|modern)\s+world\b", "Banned cliché: 'in today\\'s fast-paced world'"),
+        (r"\bdive\s+deep(?:\s+into)?\b", "Banned cliché: 'dive deep'"),
+        (r"\bunlock\s+(?:the\s+)?potential\b", "Banned cliché: 'unlock [the] potential'"),
+        (r"\bempower(?:ing)?\s+(?:your|teams?|users?)\b", "Banned buzzword: 'empower [teams/users]'"),
+        (r"\bseamless\s+integration\b", "Banned cliché: 'seamless integration'"),
+        (r"\bparadigm\s+shift\b", "Banned buzzword: 'paradigm shift'"),
+        (r"\btestament\s+to\b", "Banned cliché: 'testament to'"),
+        (r"\bharness\s+(?:the\s+)?power\b", "Banned cliché: 'harness the power'"),
+        (r"\bat\s+your\s+fingertips\b", "Banned cliché: 'at your fingertips'"),
+        (r"\btake\s+your\s+.*?\s+to\s+the\s+next\s+level\b", "Banned cliché: 'take ... to the next level'"),
+        (r"\bstate-of-the-art\b", "Banned buzzword: 'state-of-the-art'"),
+        (r"\bcutting-edge\b", "Banned buzzword: 'cutting-edge'"),
+        (r"\bcrafted\s+with\s+(?:passion|care)\b", "Banned cliché: 'crafted with passion/care'"),
+    ]
+
+    # Banned purple/violet glowing gradients (including text gradients, reverse orders, and linear/radial hexes)
+    _PURPLE_GRADIENT_PATTERNS = [
+        re.compile(
+            r"from-(?:purple|violet|fuchsia|indigo)-[4-7]00\s+(?:(?:via-[a-z]+-[4-7]00\s+)?to-(?:indigo|pink|blue|violet|purple|fuchsia)-[4-7]00|"
+            r"to-(?:indigo|pink|blue|violet|purple|fuchsia)-[4-7]00)",
+            re.IGNORECASE,
+        ),
+        re.compile(
+            r"from-(?:pink|blue|indigo)-[4-7]00\s+(?:via-[a-z]+-[4-7]00\s+)?to-(?:purple|violet|fuchsia)-[4-7]00",
+            re.IGNORECASE,
+        ),
+        re.compile(
+            r"bg-gradient-to-(?:tr|r|br|t|b|l|tl|bl)\s+from-(?:purple|violet|fuchsia)-\d+.*?(?:blur-[23]xl|bg-clip-text)",
+            re.IGNORECASE,
+        ),
+        re.compile(
+            r"(?:radial|linear)-gradient\([^)]*#(?:8b5cf6|a855f7|7c3aed|6366f1|9333ea|c084fc|d946ef)",
+            re.IGNORECASE,
+        ),
+        re.compile(
+            r"(?:radial|linear)-gradient\([^)]*(?:rgb\(\s*139\s*,\s*92\s*,\s*246|rgb\(\s*168\s*,\s*85\s*,\s*247|rgb\(\s*124\s*,\s*58\s*,\s*237|rgb\(\s*99\s*,\s*102\s*,\s*241)",
+            re.IGNORECASE,
+        ),
+    ]
+
+    # Banned fake div screenshot windows (macOS 3-dot window bars in any class order)
+    _DIV_DOTS_PATTERN = re.compile(
+        r"(?:<(?:span|div)[^>]*\b(?:bg-red-[456]00|bg-\[#ff5f56\]|bg-red-500)\b[^>]*>.*?<(?:span|div)[^>]*\b(?:bg-(?:yellow|amber)-[456]00|bg-\[#ffbd2e\]|bg-yellow-500)\b[^>]*>.*?<(?:span|div)[^>]*\b(?:bg-(?:green|emerald)-[456]00|bg-\[#27c93f\]|bg-green-500)\b[^>]*>|"
+        r"w-[23](?:\.5)?\s+h-[23](?:\.5)?\s+rounded-full\s+bg-red-500.*?w-[23](?:\.5)?\s+h-[23](?:\.5)?\s+rounded-full\s+bg-yellow-500|"
+        r"bg-red-[45]00.*?bg-yellow-[45]00.*?bg-green-[45]00)",
+        re.IGNORECASE | re.DOTALL,
+    )
+
+    # Centered 3-card boilerplate detector (on grid container or across 3 cards)
+    _THREE_CARD_CENTERED_PATTERN = re.compile(
+        r"(?:grid-cols-1\s+(?:[a-z0-9:-]+\s+)*(?:md|lg|sm|xl):grid-cols-3|grid-cols-3)[^>]*\btext-center\b|"
+        r"(?:grid-cols-1\s+(?:[a-z0-9:-]+\s+)*(?:md|lg|sm|xl):grid-cols-3|grid-cols-3).*?text-center.*?text-center.*?text-center",
+        re.IGNORECASE | re.DOTALL,
+    )
+
+    # Viewport instability: h-screen instead of min-h-[100dvh]
+    _H_SCREEN_PATTERN = re.compile(r"\bh-screen\b|height:\s*100vh\b", re.IGNORECASE)
+
+    # Default Inter / Arial crutch
+    _DEFAULT_FONT_PATTERN = re.compile(r'font-family:\s*(?:Inter|Arial|sans-serif)\s*[,;]', re.IGNORECASE)
+
+    # Generic rounded icon circle containers
+    _ICON_CIRCLE_PATTERNS = [
+        re.compile(
+            r"(?:w-[12]\d\s+h-[12]\d|h-[12]\d\s+w-[12]\d)\s+rounded-full\s+bg-(?:blue|indigo|purple|emerald|teal|cyan|amber|rose)-100.*?flex\s+items-center\s+justify-center",
+            re.IGNORECASE | re.DOTALL,
+        ),
+        re.compile(
+            r"rounded-full\s+bg-(?:blue|indigo|purple|emerald|cyan|amber|rose)-100.*?text-(?:blue|indigo|purple|emerald|cyan|amber|rose)-600",
+            re.IGNORECASE | re.DOTALL,
+        ),
+    ]
+
+    # Interactive elements pattern for focus accessibility verification
+    _INTERACTIVE_ELEMENT_PATTERN = re.compile(
+        r"<(?:button|a|input|select|textarea)\b[^>]*class=[\"']([^\"']*)[\"'][^>]*>",
+        re.IGNORECASE,
+    )
+
+    # Layout thrashing transitions on layout geometry
+    _LAYOUT_THRASHING_PATTERN = re.compile(
+        r"transition:\s*[^;]*(?:width|height|margin|padding|top|left)\b",
+        re.IGNORECASE,
+    )
+
+    def audit_code(self, code: str, file_path: str = "") -> dict[str, Any]:
+        """Perform exhaustive static scan of frontend code for AI slop anti-patterns."""
+        if not code or not code.strip():
+            return {
+                "clean": True,
+                "score": 1.0,
+                "violations": [],
+                "recommendations": ["No code provided to audit."],
+            }
+
+        violations: list[SlopViolation] = []
+        lines = code.splitlines()
+
+        # 1. Check Purple Gradient Slop
+        for pat in self._PURPLE_GRADIENT_PATTERNS:
+            for match in pat.finditer(code):
+                snippet = match.group(0)[:60]
+                line_no = code[:match.start()].count("\n") + 1
+                violations.append(
+                    SlopViolation(
+                        rule_id="ANTI_SLOP_01_PURPLE_GRADIENT",
+                        category="Color Calibration",
+                        message="Generic AI purple/violet glowing gradient blob detected.",
+                        severity="FATAL",
+                        snippet=snippet,
+                        line_number=line_no,
+                        remedy="Replace purple blobs with single curated OKLCH accent on neutral void base.",
+                    )
+                )
+
+        # 2. Check Banned LLM Marketing Buzzwords
+        for pat_str, desc in self._BANNED_LLM_WORDS:
+            p = re.compile(pat_str, re.IGNORECASE)
+            for idx, line in enumerate(lines, 1):
+                match = p.search(line)
+                if match:
+                    violations.append(
+                        SlopViolation(
+                            rule_id="ANTI_SLOP_02_LLM_BUZZWORD",
+                            category="Copywriting Polish",
+                            message=f"{desc} detected in rendered text.",
+                            severity="HIGH",
+                            snippet=line.strip()[:80],
+                            line_number=idx,
+                            remedy="Replace generic buzzwords with concrete functional telemetry and measurable engineering claims.",
+                        )
+                    )
+
+        # 3. Check Fake Div Screenshot Mockups (macOS 3-dot window bars)
+        match_dots = self._DIV_DOTS_PATTERN.search(code)
+        if match_dots:
+            line_no = code[:match_dots.start()].count("\n") + 1
+            violations.append(
+                SlopViolation(
+                    rule_id="ANTI_SLOP_03_DIV_SCREENSHOT_MOCKUP",
+                    category="Visual Assets & Materiality",
+                    message="Banned fake software preview window rendered with div bars and 3 colored circle dots.",
+                    severity="FATAL",
+                    snippet=match_dots.group(0)[:80].replace("\n", " "),
+                    line_number=line_no,
+                    remedy="Use authentic component sandboxes or photorealistic product imagery; never render fake macOS dots.",
+                )
+            )
+
+        # 4. Check Centered 3-Card Boilerplate
+        match_3card = self._THREE_CARD_CENTERED_PATTERN.search(code)
+        if match_3card:
+            line_no = code[:match_3card.start()].count("\n") + 1
+            violations.append(
+                SlopViolation(
+                    rule_id="ANTI_SLOP_04_CENTERED_THREE_CARD",
+                    category="Layout Diversity",
+                    message="Banned centered 3-card equal boilerplate detected.",
+                    severity="HIGH",
+                    snippet=match_3card.group(0)[:80].replace("\n", " "),
+                    line_number=line_no,
+                    remedy="Replace with dynamic asymmetric Bento Grid (mixed spans 2x2, 2x1, 1x1, contrasting surface treatments).",
+                )
+            )
+
+        # 5. Check Viewport Instability (h-screen)
+        for idx, line in enumerate(lines, 1):
+            if self._H_SCREEN_PATTERN.search(line):
+                violations.append(
+                    SlopViolation(
+                        rule_id="ANTI_SLOP_05_VIEWPORT_INSTABILITY",
+                        category="Viewport Mechanics",
+                        message="Banned 'h-screen' causes mobile address-bar resize jumping.",
+                        severity="MEDIUM",
+                        snippet=line.strip()[:80],
+                        line_number=idx,
+                        remedy="Replace 'h-screen' with 'min-h-[100dvh]' for stable viewport sizing across mobile and desktop.",
+                    )
+                )
+
+        # 6. Check Eyebrow Overuse (> 1 per 3 sections)
+        eyebrow_matches = re.findall(
+            r"(?:tracking-wid(?:er|est)\s+(?:[^\s>]+\s+)*uppercase|uppercase\s+(?:[^\s>]+\s+)*tracking-wid(?:er|est)|data-eyebrow)",
+            code,
+            re.IGNORECASE,
+        )
+        section_count = max(1, len(re.findall(r"<(?:section|header|footer|main|div\s+(?:id|class)=[\"'][^\"']*(?:section|container|hero|bento|feature))", code, re.IGNORECASE)))
+        max_allowed_eyebrows = max(1, math.ceil(section_count / 3))
+        if len(eyebrow_matches) > max_allowed_eyebrows and len(eyebrow_matches) > 2:
+            violations.append(
+                SlopViolation(
+                    rule_id="ANTI_SLOP_06_EYEBROW_OVERLOAD",
+                    category="Typographic Discipline",
+                    message=f"Eyebrow overload: found {len(eyebrow_matches)} uppercase tracking eyebrows across {section_count} sections (max allowed: {max_allowed_eyebrows}).",
+                    severity="MEDIUM",
+                    snippet=eyebrow_matches[0][:60],
+                    line_number=None,
+                    remedy="Limit uppercase tracking eyebrows to at most 1 per 3 sections to prevent template fatigue.",
+                )
+            )
+
+        # 7. Check Generic Icon Circle Blobs
+        for pat in self._ICON_CIRCLE_PATTERNS:
+            match_icon = pat.search(code)
+            if match_icon:
+                line_no = code[:match_icon.start()].count("\n") + 1
+                violations.append(
+                    SlopViolation(
+                        rule_id="ANTI_SLOP_07_ICON_CIRCLE_BLOB",
+                        category="Visual Diversity & Iconography",
+                        message="Generic AI colored circle icon blob detected.",
+                        severity="HIGH",
+                        snippet=match_icon.group(0)[:80].replace("\n", " "),
+                        line_number=line_no,
+                        remedy="Replace generic colored circle icon blobs with bespoke SVG wire glyphs, monochrome telemetry pills, or containerless optical icons.",
+                    )
+                )
+                break
+
+        # 8. Check Naked outline-none removing accessibility (order-independent)
+        for match_elem in self._INTERACTIVE_ELEMENT_PATTERN.finditer(code):
+            class_str = match_elem.group(1)
+            if re.search(r"\b(?:focus:)?outline-none\b", class_str, re.IGNORECASE):
+                if not re.search(r"\bfocus-visible:", class_str, re.IGNORECASE):
+                    line_no = code[:match_elem.start()].count("\n") + 1
+                    violations.append(
+                        SlopViolation(
+                            rule_id="ANTI_SLOP_08_FOCUS_OUTLINE_REMOVAL",
+                            category="Accessibility (WCAG 2.2 AAA)",
+                            message="Interactive element removes outline with 'outline-none' without accessible 'focus-visible:' state.",
+                            severity="HIGH",
+                            snippet=match_elem.group(0)[:80].replace("\n", " "),
+                            line_number=line_no,
+                            remedy="Never remove focus outlines with 'outline-none' without providing accessible 'focus-visible:ring-2' keyboard navigation focus states.",
+                        )
+                    )
+                    break
+
+        # 9. Check Layout Thrashing Transitions
+        match_thrash = self._LAYOUT_THRASHING_PATTERN.search(code)
+        if match_thrash:
+            line_no = code[:match_thrash.start()].count("\n") + 1
+            violations.append(
+                SlopViolation(
+                    rule_id="ANTI_SLOP_09_LAYOUT_THRASHING",
+                    category="Motion Performance",
+                    message="CSS transition animates layout geometry properties (width, height, margin, padding, top, left) causing GPU stall.",
+                    severity="MEDIUM",
+                    snippet=match_thrash.group(0)[:80].replace("\n", " "),
+                    line_number=line_no,
+                    remedy="Animate only composite properties (transform and opacity) using GPU acceleration; avoid animating layout dimensions.",
+                )
+            )
+
+        # 10. Check Unstyled Generic Font Crutches (Antibody 3: ab_design_inter_font_crutch)
+        has_font_sans_crutch = bool(re.search(r"<(?:body|html|div\s+id=[\"'](?:root|app)[\"'])[^>]*class=[\"'][^\"']*\bfont-sans\b(?![^\"']*\b(?:font-\[var|font-display|font-mono))", code, re.IGNORECASE))
+        has_raw_font_family = bool(re.search(r'font-family:\s*(?:Inter|Arial|sans-serif)\s*[,;](?![^;]*var\()', code, re.IGNORECASE))
+        has_display_tokens = any(kw in code for kw in ["--font-family-display", "font-[var(", "PP Editorial", "Geist", "Satoshi", "Neue Haas", "ABC Diatype", "Cabinet Grotesk", "Reckless"])
+        if (has_font_sans_crutch or has_raw_font_family) and not has_display_tokens:
+            violations.append(
+                SlopViolation(
+                    rule_id="ANTI_SLOP_10_DEFAULT_FONT_CRUTCH",
+                    category="Typographic Discipline",
+                    message="Default unstyled 'font-sans' or generic Arial/Inter crutch used without curated display pairing.",
+                    severity="MEDIUM",
+                    snippet=(code[:80] if has_font_sans_crutch else "font-family: Arial/Inter"),
+                    line_number=None,
+                    remedy="Pair curated display typefaces (Geist Display, PP Editorial New, Neue Haas Grotesk, Satoshi) with body sans and monospace telemetry.",
+                )
+            )
+
+        # 11. Check React Server Component Motion Leak (Antibody 7: ab_design_rsc_motion_leak)
+        if ("motion/react" in code or "framer-motion" in code or "useScroll" in code or "useMotionValue" in code) and ("use client" not in code):
+            if file_path.endswith((".tsx", ".jsx")) or "export default" in code or "return (" in code:
+                violations.append(
+                    SlopViolation(
+                        rule_id="ANTI_SLOP_11_RSC_MOTION_LEAK",
+                        category="React Server Component Boundary",
+                        message="Spring motion hooks imported without 'use client' directive, causing Next.js SSR hydration crash.",
+                        severity="HIGH",
+                        snippet="import ... from 'motion/react' without 'use client'",
+                        line_number=1,
+                        remedy="Add 'use client' at top of file or isolate interactive motion into dedicated client leaf components.",
+                    )
+                )
+
+        # 12. Check Low-Contrast Gray Text (Antibody 8: ab_design_contrast_sub_ratio_gray)
+        low_contrast_match = re.search(
+            r"class=[\"'][^\"']*\b(?:bg-white|bg-zinc-100|bg-gray-100|bg-neutral-100)\b[^\"']*\btext-(?:zinc|gray|neutral|slate)-[34]00\b|"
+            r"class=[\"'][^\"']*\btext-(?:zinc|gray|neutral|slate)-[34]00\b[^\"']*\b(?:bg-white|bg-zinc-100|bg-gray-100|bg-neutral-100)\b",
+            code,
+            re.IGNORECASE,
+        )
+        if low_contrast_match:
+            line_no = code[:low_contrast_match.start()].count("\n") + 1
+            violations.append(
+                SlopViolation(
+                    rule_id="ANTI_SLOP_12_LOW_CONTRAST_TEXT",
+                    category="Accessibility (WCAG 2.2 AA)",
+                    message="Low-contrast text (contrast < 4.5:1) detected on light background (e.g. text-zinc-400 on bg-white/zinc-100).",
+                    severity="HIGH",
+                    snippet=low_contrast_match.group(0)[:80].replace("\n", " "),
+                    line_number=line_no,
+                    remedy="Validate all text against WCAG AA >= 4.5:1 contrast. Use text-zinc-600/700 or darker for body text on light backgrounds.",
+                )
+            )
+
+        # 9. Check Layout Thrashing Transitions
+        match_thrash = self._LAYOUT_THRASHING_PATTERN.search(code)
+        if match_thrash:
+            line_no = code[:match_thrash.start()].count("\n") + 1
+            violations.append(
+                SlopViolation(
+                    rule_id="ANTI_SLOP_09_LAYOUT_THRASHING",
+                    category="Motion Performance",
+                    message="CSS transition animates layout geometry properties (width, height, margin, padding, top, left) causing GPU stall.",
+                    severity="MEDIUM",
+                    snippet=match_thrash.group(0)[:80].replace("\n", " "),
+                    line_number=line_no,
+                    remedy="Animate only composite properties (transform and opacity) using GPU acceleration; avoid animating layout dimensions.",
+                )
+            )
+
+        # Compute Score (1.0 = flawless, deductions per violation)
+        fatal_count = sum(1 for v in violations if v.severity == "FATAL")
+        high_count = sum(1 for v in violations if v.severity == "HIGH")
+        medium_count = sum(1 for v in violations if v.severity == "MEDIUM")
+
+        score = max(0.0, 1.0 - (fatal_count * 0.40 + high_count * 0.20 + medium_count * 0.08))
+        clean = (fatal_count == 0 and high_count == 0 and medium_count == 0)
+
+        recommendations: list[str] = []
+        if not clean:
+            recommendations.append(f"Audit detected {len(violations)} anti-slop violations ({fatal_count} Fatal, {high_count} High, {medium_count} Medium).")
+            for v in violations:
+                recommendations.append(f"[{v.severity}] {v.rule_id}: {v.remedy}")
+        else:
+            recommendations.append("Flawless Anti-Slop Audit: Zero AI clichés, pristine typographic discipline, and clean layout hierarchy.")
+
+        return {
+            "clean": clean,
+            "score": round(score, 3),
+            "total_violations": len(violations),
+            "fatal_count": fatal_count,
+            "high_count": high_count,
+            "medium_count": medium_count,
+            "violations": [v.to_dict() for v in violations],
+            "recommendations": recommendations,
+        }
+
+
+
+# ==============================================================================
+# 5. BRIEF INFERENCE ENGINE ("READ THE ROOM")
+# ==============================================================================
+
+class BriefInferenceEngine:
+    """Infers target audience, dials, and optimal Haute archetype from simple user prompts."""
+
+    _KEYWORD_ARCHETYPE_MAP: list[tuple[list[str], AestheticArchetype, str, str]] = [
+        # (Keywords, Archetype, Page Kind, Audience)
+        (
+            ["dev", "terminal", "cli", "telemetry", "metric", "infrastructure", "kubernetes", "api", "monitoring", "docker", "cloud"],
+            AestheticArchetype.KINETIC_SPATIAL_HUD,
+            "Developer Tools & Infrastructure Cockpit",
+            "Platform engineers, SREs, and systems programmers",
+        ),
+        (
+            ["book", "publish", "press", "journal", "essay", "literature", "editorial", "reading", "author", "article", "newsletter"],
+            AestheticArchetype.HAUTE_EDITORIAL_MODERNISM,
+            "Haute Editorial Journal & Publication",
+            "Discerning readers, authors, and intellectual curators",
+        ),
+        (
+            ["luxury", "watch", "jewelry", "fashion", "hardware", "leica", "audio", "hifi", "chair", "furniture", "perfume", "titanium"],
+            AestheticArchetype.COLD_CHROMATIC_LUXURY,
+            "High-End Cold Luxury & Hardware Showcase",
+            "Aesthetic connoisseurs, design leaders, and luxury collectors",
+        ),
+        (
+            ["minimal", "swiss", "bauhaus", "clean", "grid", "portfolio", "architect", "museum", "studio", "poster", "exhibition"],
+            AestheticArchetype.SWISS_PRECISION_VIGNELLI,
+            "Swiss Precision Architectural Showcase",
+            "Art directors, architects, and design purists",
+        ),
+        (
+            ["nature", "wood", "warm", "coffee", "roast", "organic", "botanical", "tea", "nordic", "scandinavian", "artisan", "ceramics", "acoustic"],
+            AestheticArchetype.NEO_NORDIC_WARMTH,
+            "Neo-Nordic Tactile Lifestyle & Artisan Storefront",
+            "Conscious consumers, culinary enthusiasts, and artisan patrons",
+        ),
+        (
+            ["ai", "saas", "crypto", "robot", "avionics", "space", "cyber", "hardware", "sound", "synth", "synthesizer", "speed"],
+            AestheticArchetype.CYBER_OBSIDIAN_MONOLITH,
+            "Cyber-Obsidian Monolith High-Tech Platform",
+            "Technical founders, frontier researchers, and creative engineers",
+        ),
+    ]
+
+    def infer_brief(
+        self,
+        prompt: str = "",
+        dials_override: Optional[Dict[str, int]] = None,
+        archetype_override: Optional[str] = None,
+        **kwargs: Any,
+    ) -> dict[str, Any]:
+        """Perform brief inference ("Read the Room") and generate calibrated design blueprint."""
+        prompt = prompt or kwargs.get("user_prompt") or kwargs.get("brief") or ""
+        dials_override = dials_override or kwargs.get("dials")
+        archetype_override = archetype_override or kwargs.get("archetype") or kwargs.get("name")
+        prompt_lower = (prompt or "").lower()
+
+        # Check if archetype override is provided
+        arch_from_override = AestheticArchetype.from_str(archetype_override)
+
+        selected_archetype = AestheticArchetype.CYBER_OBSIDIAN_MONOLITH
+        page_kind = "Modern Interactive Web Experience"
+        target_audience = "Technical decision makers & design-conscious users"
+
+        if arch_from_override:
+            selected_archetype = arch_from_override
+            for _, arch, p_kind, aud in self._KEYWORD_ARCHETYPE_MAP:
+                if arch == selected_archetype:
+                    page_kind = p_kind
+                    target_audience = aud
+                    break
+        else:
+            for keywords, arch, p_kind, aud in self._KEYWORD_ARCHETYPE_MAP:
+                if any(kw in prompt_lower for kw in keywords):
+                    selected_archetype = arch
+                    page_kind = p_kind
+                    target_audience = aud
+                    break
+
+        theme = HAUTE_THEMES[selected_archetype]
+        base_dials = theme.dials
+        if dials_override:
+            dials = DesignDials(
+                variance=dials_override.get("variance", base_dials.variance),
+                motion=dials_override.get("motion", base_dials.motion),
+                density=dials_override.get("density", base_dials.density),
+            )
+        else:
+            dials = base_dials
+
+        # Build Mandatory Design Read Declaration
+        design_read = (
+            f"Design Read: {page_kind} for {target_audience}, with a {theme.title} aesthetic language, "
+            f"leaning toward Tailwind CSS v4 with Dials at {dials.vector_str()}."
+        )
+
+        return {
+            "design_read": design_read,
+            "page_kind": page_kind,
+            "target_audience": target_audience,
+            "archetype": selected_archetype.value,
+            "archetype_title": theme.title,
+            "dials": dials.to_dict(),
+            "palette": {
+                "bg_void": theme.bg_void.to_css(),
+                "surface_card": theme.surface_card.to_css(),
+                "surface_elevated": theme.surface_elevated.to_css(),
+                "border_hairline": theme.border_hairline.to_css(),
+                "text_primary": theme.text_primary.to_css(),
+                "text_muted": theme.text_muted.to_css(),
+                "accent_primary": theme.accent_primary.to_css(),
+            },
+            "typography": {
+                "display": theme.font_display,
+                "body": theme.font_body,
+                "mono": theme.font_mono,
+            },
+            "layout_blueprint": {
+                "hero_stack_max_elements": 4,
+                "hero_top_padding_cap": "pt-20 md:pt-24",
+                "navigation_height_cap": "h-16 md:h-20 (<= 80px)",
+                "bento_grid_structure": "Asymmetric Bento (Hero cell 2x2, Telemetry 2x1, Micro-sandboxes 1x1)",
+                "desktop_cta_rule": "Strictly single-line (whitespace-nowrap)",
+            },
+            "copywriting_guidelines": {
+                "anti_buzzword_ban": "Strictly no 'supercharge', 'next-gen AI', 'unleash', or 'delve into'",
+                "voice_profile": "Crisp, concrete, functional telemetry and quantifiable specifications",
+                "canonical_cta": "Pick exactly 1 action verb ('Start Building' or 'Explore Specs') and lock it globally",
+            },
+        }
+
+
+# ==============================================================================
+# 6. AWWWARDS SCAFFOLD GENERATOR
+# ==============================================================================
+
+class AwwwardsScaffoldGenerator:
+    """Generates zero-slop, Awwwards-caliber HTML/JSX and CSS layouts from simple prompts."""
+
+    def __init__(self, inference_engine: Optional[BriefInferenceEngine] = None) -> None:
+        self.inference = inference_engine or BriefInferenceEngine()
+        self.auditor = AntiSlopAuditor()
+
+    def generate_scaffold(
+        self,
+        prompt: str = "",
+        archetype_override: Optional[str] = None,
+        **kwargs: Any,
+    ) -> dict[str, Any]:
+        """Synthesize complete, production-grade, zero-slop web application scaffold."""
+        p = prompt or kwargs.get("user_prompt") or kwargs.get("brief") or "Modern software platform"
+        arch_target = archetype_override or kwargs.get("archetype") or kwargs.get("name")
+        arch_enum = AestheticArchetype.from_str(arch_target)
+        brief = self.inference.infer_brief(p, archetype_override=arch_enum.value if arch_enum else None)
+        selected_arch = AestheticArchetype.from_str(brief["archetype"]) or AestheticArchetype.CYBER_OBSIDIAN_MONOLITH
+        theme = HAUTE_THEMES[selected_arch]
+
+        css_theme = theme.to_tailwind_v4_theme()
+        fluid_tokens = theme.get_fluid_typography_tokens()
+
+        # Build clean semantic HTML/JSX scaffold incorporating 7-layer optical depth
+        is_dark = theme.bg_void.l < 0.5
+        noise_opacity = "0.035" if is_dark else "0.020"
+        grain_blend = "overlay" if is_dark else "multiply"
+
+        html_layout = f"""<!-- 
+  FABLE-MODE AWWWARDS-WINNING PRODUCTION LAYOUT
+  {brief['design_read']}
+-->
+<div class="relative min-h-[100dvh] w-full bg-[var(--color-bg-void)] text-[var(--color-text-primary)] font-[var(--font-family-body)] selection:bg-[var(--color-accent-primary)] selection:text-[var(--color-bg-void)] overflow-x-hidden antialiased">
+  
+  <!-- Layer 1: Procedural Micro-Texture / Film Grain (Anti-Banding Matrix) -->
+  <div class="pointer-events-none fixed inset-0 z-50 mix-blend-{grain_blend} opacity-[{noise_opacity}]" aria-hidden="true">
+    <svg class="h-full w-full" xmlns="http://www.w3.org/2000/svg">
+      <filter id="fable-noise">
+        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
+        <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+      </filter>
+      <rect width="100%" height="100%" filter="url(#fable-noise)" />
+    </svg>
+  </div>
+
+  <!-- Layer 2: Volumetric Directional Lighting (Inverse-Square Spatial Caustics) -->
+  <div class="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden="true">
+    <div class="absolute -top-40 left-1/2 -translate-x-1/2 w-[850px] h-[450px] rounded-full opacity-25 blur-[120px] bg-[radial-gradient(ellipse_at_center,var(--color-accent-glow),transparent_70%)]"></div>
+  </div>
+
+  <!-- Layer 3 & 4: Top Navigation (Single Line <= 80px, Refractive Substrate, Specular Rim) -->
+  <header class="sticky top-0 z-40 w-full border-b border-[var(--color-border-hairline)] bg-[var(--color-surface-card)] backdrop-blur-xl transition-all">
+    <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-6 lg:px-8">
+      <a href="/" class="flex items-center gap-3 group">
+        <div class="h-4 w-4 {theme.border_radius_scale} bg-[var(--color-accent-primary)] transition-transform duration-300 group-hover:scale-110"></div>
+        <span class="font-[var(--font-family-display)] font-semibold tracking-tight text-lg text-[var(--color-text-primary)]">{brief['page_kind'].split()[0]}</span>
+      </a>
+      <nav class="hidden md:flex items-center gap-8 text-sm font-medium text-[var(--color-text-muted)]">
+        <a href="#architecture" class="hover:text-[var(--color-text-primary)] transition-colors">Architecture</a>
+        <a href="#specs" class="hover:text-[var(--color-text-primary)] transition-colors">Specifications</a>
+        <a href="#telemetry" class="hover:text-[var(--color-text-primary)] transition-colors">Telemetry</a>
+      </nav>
+      <div class="flex items-center gap-4">
+        <button class="whitespace-nowrap px-4 py-2 text-xs font-semibold tracking-wide {theme.border_radius_scale} bg-[var(--color-accent-primary)] text-[var(--color-bg-void)] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.25)] hover:opacity-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent-primary)] active:scale-[0.98] transition-opacity">
+          Initialize System
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <!-- Layer 5: Asymmetric Hero Section (Hero Stack <= 4 Elements, Desktop Top Padding <= pt-24) -->
+  <main class="relative z-10">
+    
+    <section id="hero" class="mx-auto max-w-7xl px-6 pt-16 pb-24 md:pt-24 lg:px-8">
+      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
+        <div class="lg:col-span-7 flex flex-col items-start gap-6">
+          
+          <!-- Element 1: Eyebrow (Restrained, max 1 per 3 sections) -->
+          <div class="inline-flex items-center gap-2 px-3 py-1 text-xs font-mono tracking-wider uppercase {theme.border_radius_scale} border border-[var(--color-border-hairline)] bg-[var(--color-surface-card)] text-[var(--color-text-muted)]">
+            <span class="h-1.5 w-1.5 rounded-full bg-[var(--color-accent-primary)]"></span>
+            <span>SYSTEM DISPATCH // V2.5</span>
+          </div>
+
+          <!-- Element 2: Headline (Max 2 lines on desktop, fluid clamp) -->
+          <h1 class="font-[var(--font-family-display)] font-bold tracking-tight text-[clamp(2.25rem,1.5rem+3.5vw,4.5rem)] leading-[0.95] text-[var(--color-text-primary)]">
+            Precision engineering for autonomous scale.
+          </h1>
+
+          <!-- Element 3: Subtext (Max 20 words, zero buzzwords) -->
+          <p class="max-w-xl text-base md:text-lg text-[var(--color-text-muted)] leading-relaxed">
+            Deterministic execution brokers delivering sub-60ms state transitions with mathematical verification guarantees.
+          </p>
+
+          <!-- Element 4: Single-Line Primary CTA + Max 1 Secondary -->
+          <div class="flex flex-wrap items-center gap-4 pt-2">
+            <button class="whitespace-nowrap px-6 py-3.5 text-sm font-semibold {theme.border_radius_scale} bg-[var(--color-accent-primary)] text-[var(--color-bg-void)] shadow-[0_12px_24px_-8px_var(--color-accent-glow)] hover:opacity-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent-primary)] active:scale-[0.98] transition-opacity">
+              Deploy Node
+            </button>
+            <button class="whitespace-nowrap px-6 py-3.5 text-sm font-semibold {theme.border_radius_scale} border border-[var(--color-border-hairline)] bg-[var(--color-surface-card)] text-[var(--color-text-primary)] hover:border-[var(--color-border-specular)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent-primary)] active:scale-[0.98] transition-colors">
+              Inspect Architecture
+            </button>
+          </div>
+
+        </div>
+
+        <!-- Hero Visual / Real Interactive Component Sandbox (No Div Dots) -->
+        <div class="lg:col-span-5 relative w-full aspect-square {theme.border_radius_scale} border border-[var(--color-border-hairline)] bg-[var(--color-surface-card)] p-8 flex flex-col justify-between overflow-hidden shadow-2xl">
+          <div class="flex items-center justify-between border-b border-[var(--color-border-hairline)] pb-4">
+            <span class="text-xs font-mono text-[var(--color-text-muted)]">Live Telemetry</span>
+            <span class="inline-flex items-center gap-1.5 text-xs font-mono text-[var(--color-accent-primary)]">
+              <span class="h-2 w-2 rounded-full bg-[var(--color-accent-primary)] animate-pulse"></span>
+              60.0 FPS LOCKED
+            </span>
+          </div>
+          <div class="my-auto font-mono text-xs text-[var(--color-text-muted)] space-y-2">
+            <div class="flex justify-between"><span>Proof Engine:</span><span class="text-[var(--color-text-primary)]">Curry-Howard Verified</span></div>
+            <div class="flex justify-between"><span>VRAM Allocation:</span><span class="text-[var(--color-text-primary)]">18.4 MB / Tier-1</span></div>
+            <div class="flex justify-between"><span>Syntactic Drift:</span><span class="text-[var(--color-text-primary)]">0.0000 %</span></div>
+          </div>
+          <div class="pt-4 border-t border-[var(--color-border-hairline)] flex items-center justify-between text-xs text-[var(--color-text-muted)]">
+            <span>APCA Contrast: Lc >= 78.4</span>
+            <span class="text-[var(--color-accent-primary)]">STATUS: GREEN</span>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    <!-- Asymmetric Bento Grid (Purposeful cell spans & rich contrasting treatments) -->
+    <section id="architecture" class="mx-auto max-w-7xl px-6 pb-24 lg:px-8">
+      <div class="mb-12">
+        <h2 class="font-[var(--font-family-display)] text-2xl md:text-3xl font-bold tracking-tight text-[var(--color-text-primary)]">
+          Architectural Invariants
+        </h2>
+        <p class="mt-2 text-sm text-[var(--color-text-muted)]">Sub-second deterministic proofs eliminating runtime failures.</p>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-12 gap-6">
+        
+        <!-- Cell 1: 2-column span Hero Cell -->
+        <div class="lg:col-span-8 {theme.border_radius_scale} border border-[var(--color-border-hairline)] bg-[var(--color-surface-card)] p-8 flex flex-col justify-between hover:border-[var(--color-border-specular)] transition-colors">
+          <div>
+            <span class="text-xs font-mono text-[var(--color-accent-primary)] font-medium">[01] // FORMAL PROOF</span>
+            <h3 class="mt-3 font-[var(--font-family-display)] text-xl font-semibold text-[var(--color-text-primary)]">Ungameable AST Grounding</h3>
+            <p class="mt-2 text-sm text-[var(--color-text-muted)] leading-relaxed">
+              Every state transition binds directly to abstract syntax tree symbol nodes and SHA-256 source chains, eliminating circular reasoning.
+            </p>
+          </div>
+          <div class="mt-8 pt-6 border-t border-[var(--color-border-hairline)] flex items-center justify-between text-xs font-mono text-[var(--color-text-muted)]">
+            <span>RECEIPT: HMAC-SHA256</span>
+            <span>AG(safe) SEALED</span>
+          </div>
+        </div>
+
+        <!-- Cell 2: 1-column span Compact Metric -->
+        <div class="lg:col-span-4 {theme.border_radius_scale} border border-[var(--color-border-hairline)] bg-[var(--color-surface-elevated)] p-8 flex flex-col justify-between hover:border-[var(--color-border-specular)] transition-colors">
+          <div>
+            <span class="text-xs font-mono text-[var(--color-accent-primary)] font-medium">[02] // LATENCY</span>
+            <div class="mt-4 font-[var(--font-family-display)] text-4xl font-bold text-[var(--color-text-primary)]">&lt; 60ms</div>
+            <p class="mt-2 text-xs text-[var(--color-text-muted)]">Damped harmonic oscillator response with critical damping.</p>
+          </div>
+          <div class="mt-6 text-xs font-mono text-[var(--color-accent-primary)]">&zeta; = 1.00 ZERO OVERSHOOT</div>
+        </div>
+
+      </div>
+    </section>
+
+  </main>
+
+  <!-- Clean Footer -->
+  <footer class="border-t border-[var(--color-border-hairline)] py-12 px-6 lg:px-8 text-xs text-[var(--color-text-muted)]">
+    <div class="mx-auto max-w-7xl flex flex-col sm:flex-row items-center justify-between gap-4">
+      <div>&copy; 2026 Fable-Mode Cognitive Architecture. Engineered with zero AI slop.</div>
+      <div class="flex items-center gap-6 font-mono text-xs">
+        <span>WCAG AA COMPLIANT</span>
+        <span>OKLCH COLOR MATRIX</span>
+      </div>
+    </div>
+  </footer>
+
+</div>
+"""
+        # Run pre-flight audit on generated layout to guarantee 100% clean Anti-Slop score
+        audit_res = self.auditor.audit_code(html_layout)
+
+        return {
+            "prompt": prompt,
+            "design_read": brief["design_read"],
+            "archetype": selected_arch.value,
+            "theme_title": theme.title,
+            "tailwind_v4_theme": css_theme,
+            "html_layout": html_layout,
+            "audit_result": audit_res,
+            "anti_slop_verified": audit_res["clean"],
+        }
+
+
+# ==============================================================================
+# 7. PRE-FLIGHT DESIGN QUALITY GATE
+# ==============================================================================
+
+class PreFlightDesignGate:
+    """Mechanical 5-point quality gate validating frontend code before release."""
+
+    def __init__(self, auditor: Optional[AntiSlopAuditor] = None) -> None:
+        self.auditor = auditor or AntiSlopAuditor()
+
+    def validate_design(self, code: str, theme: Optional[HauteDesignTheme] = None) -> dict[str, Any]:
+        """Verify the 5 mandatory design invariants:
+
+        1. Viewport Fit & Stability (100dvh, pt-24 max desktop hero)
+        2. Typographic Polish & Descender Clearance
+        3. Color & Shape Invariant Locks (1 primary accent, 1 radius scale)
+        4. Interactive Contrast (WCAG AA >= 4.5:1) & Single-Line CTAs
+        5. Eyebrow Restraint & Copy Audit (zero LLM buzzwords)
+        """
+        audit = self.auditor.audit_code(code)
+        checklist: list[dict[str, Any]] = []
+
+        # 1. Viewport Stability Check
+        has_100dvh = bool(re.search(r"100dvh", code, re.IGNORECASE))
+        has_h_screen = bool(re.search(r"\bh-screen\b|height:\s*100vh\b", code, re.IGNORECASE))
+        viewport_ok = has_100dvh or not has_h_screen
+        checklist.append({
+            "point": 1,
+            "name": "Viewport Fit & Stability",
+            "passed": viewport_ok,
+            "details": "Uses min-h-[100dvh]; strictly zero mobile-jumping h-screen usages." if viewport_ok else "Fails: contains banned h-screen without 100dvh fallback.",
+        })
+
+        # 2. Typographic Polish Check
+        has_italic_without_clearance = bool(re.search(r"italic\s+[^>]*leading-\[1\.0\]", code, re.IGNORECASE))
+        typo_ok = not has_italic_without_clearance
+        checklist.append({
+            "point": 2,
+            "name": "Typographic Polish & Descender Clearance",
+            "passed": typo_ok,
+            "details": "Italic descenders cleared with leading >= 1.1; font pairings respected." if typo_ok else "Fails: italic descenders clipped by tight leading.",
+        })
+
+        # 3. Color & Shape Invariant Locks
+        multi_accents = len(set(re.findall(r"(?:text|bg)-(?:emerald|cyan|rose|amber|violet|indigo)-[5-7]00", code, re.IGNORECASE))) > 2
+        color_ok = not multi_accents
+        checklist.append({
+            "point": 3,
+            "name": "Color & Shape Invariant Locks",
+            "passed": color_ok,
+            "details": "Locked exactly 1 primary accent color and 1 unified border-radius scale." if color_ok else "Fails: multiple conflicting accent colors found without unified token locking.",
+        })
+
+        # 4. Interactive Contrast & Single-Line CTAs
+        button_has_wrap = bool(re.search(r"<button(?![^>]*whitespace-nowrap)[^>]*>[^<]*\n[^<]*</button>", code, re.IGNORECASE))
+        has_naked_outline = False
+        for btn_match in re.finditer(r"<(?:button|a|input|select|textarea)\b[^>]*class=[\"']([^\"']*)[\"'][^>]*>", code, re.IGNORECASE):
+            c_str = btn_match.group(1)
+            if re.search(r"\b(?:focus:)?outline-none\b", c_str, re.IGNORECASE) and not re.search(r"\bfocus-visible:", c_str, re.IGNORECASE):
+                has_naked_outline = True
+                break
+        cta_ok = (not button_has_wrap) and (not has_naked_outline)
+        checklist.append({
+            "point": 4,
+            "name": "Interactive Contrast & Single-Line CTAs",
+            "passed": cta_ok,
+            "details": "All button CTAs fit on a single line with whitespace-nowrap; focus accessibility preserved." if cta_ok else "Fails: button CTA text wraps across multiple lines or removes focus outlines without focus-visible rings.",
+        })
+
+        # 5. Eyebrow Restraint & Copy Audit
+        copy_ok = (audit["fatal_count"] == 0 and audit["high_count"] == 0)
+        checklist.append({
+            "point": 5,
+            "name": "Eyebrow Restraint & Copy Audit",
+            "passed": copy_ok,
+            "details": "Restrained uppercase eyebrows (<= 1 per 3 sections) and zero LLM marker buzzwords." if copy_ok else f"Fails: {audit['fatal_count'] + audit['high_count']} anti-slop copy/eyebrow violations detected.",
+        })
+
+        passed_count = sum(1 for c in checklist if c["passed"])
+        approved = (passed_count == 5 and audit["clean"])
+        composite_score = round(passed_count / 5.0 * audit["score"], 3)
+
+        return {
+            "approved": approved,
+            "composite_score": composite_score,
+            "passed_checks": passed_count,
+            "total_checks": 5,
+            "checklist": checklist,
+            "anti_slop_audit": audit,
+        }
+
+
+# ==============================================================================
+# 8. MASTER FRONTEND DESIGN ENGINE (UNIFIED INTERFACE)
+# ==============================================================================
+
+class DesignEngine:
+    """Master Frontend Design & Anti-Slop Taste Engine for Fable-Mode."""
+
+    def __init__(self) -> None:
+        self.auditor = AntiSlopAuditor()
+        self.brief_inference = BriefInferenceEngine()
+        self.scaffold_generator = AwwwardsScaffoldGenerator(self.brief_inference)
+        self.preflight_gate = PreFlightDesignGate(self.auditor)
+
+    def audit_anti_slop(self, code: str = "", file_path: str = "", **kwargs: Any) -> dict[str, Any]:
+        """Audit HTML/JSX/CSS code for AI slop anti-patterns."""
+        c = code or kwargs.get("content") or kwargs.get("html") or kwargs.get("source") or ""
+        fp = file_path or kwargs.get("file_path") or ""
+        return self.auditor.audit_code(c, fp)
+
+    def infer_design_brief(
+        self,
+        prompt: str = "",
+        dials_override: Optional[Dict[str, int]] = None,
+        archetype_override: Optional[str] = None,
+        **kwargs: Any,
+    ) -> dict[str, Any]:
+        """Infer design brief, dials, and archetype from prompt."""
+        p = prompt or kwargs.get("user_prompt") or kwargs.get("brief") or ""
+        d_ovr = dials_override or kwargs.get("dials") or kwargs.get("dials_override")
+        a_ovr = archetype_override or kwargs.get("archetype") or kwargs.get("name") or kwargs.get("archetype_override")
+        return self.brief_inference.infer_brief(p, dials_override=d_ovr, archetype_override=a_ovr)
+
+    def generate_design_tokens(self, archetype: Optional[str] = None, **kwargs: Any) -> dict[str, Any]:
+        """Generate complete design tokens and Tailwind v4 @theme for a Haute archetype."""
+        arch_str = archetype or kwargs.get("name") or kwargs.get("archetype_name") or "cyber_obsidian_monolith"
+        arch_enum = AestheticArchetype.from_str(arch_str) or AestheticArchetype.CYBER_OBSIDIAN_MONOLITH
+        theme = HAUTE_THEMES[arch_enum]
+        data = theme.to_dict()
+        data["tailwind_v4_theme"] = theme.to_tailwind_v4_theme()
+        return data
+
+    def generate_awwwards_scaffold(
+        self,
+        prompt: str = "",
+        archetype: Optional[str] = None,
+        archetype_override: Optional[str] = None,
+        **kwargs: Any,
+    ) -> dict[str, Any]:
+        """Synthesize Awwwards-caliber, zero-slop layout scaffold."""
+        p = prompt or kwargs.get("user_prompt") or kwargs.get("brief") or "Modern software platform"
+        target = archetype_override or archetype or kwargs.get("name") or kwargs.get("archetype_override")
+        return self.scaffold_generator.generate_scaffold(p, target)
+
+    def validate_preflight_design(self, code: str = "", **kwargs: Any) -> dict[str, Any]:
+        """Validate code against the 5-point Pre-Flight Design Quality Gate."""
+        c = code or kwargs.get("content") or kwargs.get("html") or kwargs.get("source") or ""
+        return self.preflight_gate.validate_design(c)
+
+    def list_design_archetypes(self, **kwargs: Any) -> list[dict[str, Any]]:
+        """List all 6 available Haute Aesthetic Archetypes with metadata."""
+        return [
+            {
+                "archetype": theme.archetype.value,
+                "title": theme.title,
+                "description": theme.description,
+                "dials": theme.dials.to_dict(),
+            }
+            for theme in HAUTE_THEMES.values()
+        ]