@tidyfactor/design 1.5.0

package/brand.json

@@ -0,0 +1,279 @@
+{
+  "name": "TidyFactor Design",
+  "version": "1.5.0",
+  "schemaVersion": "brand-core-v2",
+  "meta": {
+    "product": "TidyFactor Design System",
+    "tagline": "Code-Native Interactive Prototyping Engine",
+    "description": "A zero-bundler, framework-free design system and UI prototyping engine with pluggable CSS foundations and full Arabic/RTL support.",
+    "version": "1.4.0",
+    "lastUpdated": "2026-08-25"
+  },
+  "identity": {
+    "logo": {
+      "full": "assets/logo.svg",
+      "fullDark": "assets/logo-dark.svg",
+      "mark": "assets/logo-mark.svg",
+      "favicon": "assets/favicon.svg",
+      "minClearSpace": "1x logo-mark height on all sides",
+      "minSizePx": 24
+    },
+    "socialPreview": {
+      "ogImage": "assets/og-default.png",
+      "ogDimensions": "1200x630"
+    }
+  },
+  "voice": {
+    "tone": "confident, direct, teacher-not-salesperson",
+    "personality": [
+      "direct",
+      "practical",
+      "warm",
+      "no-fluff"
+    ],
+    "registers": {
+      "professional": "Direct, precise, clear, task-focused for transactions and settings",
+      "casual": "Warm, encouraging, inviting for onboarding and feature discovery",
+      "error": "Empathetic, clear fix provided, zero blame",
+      "success": "Celebratory, concise, clear next step"
+    },
+    "readingLevel": "plain language, avoid jargon unless audience is technical",
+    "doNotUse": [
+      "synergy",
+      "leverage (as a verb)",
+      "revolutionary",
+      "game-changing",
+      "simply/just/easily"
+    ],
+    "preferredPerson": "second person (you)"
+  },
+  "colors": {
+    "light": {
+      "background": "#FFFFFF",
+      "surface": "#F8FAFC",
+      "surface2": "#F1F5F9",
+      "border": "#E2E8F0",
+      "text": "#0F172A",
+      "textMuted": "#64748B",
+      "primary": "#4F46E5",
+      "primaryForeground": "#FFFFFF",
+      "secondary": "#06B6D4",
+      "secondaryForeground": "#FFFFFF",
+      "accent": "#F59E0B",
+      "success": "#12B76A",
+      "warning": "#F79009",
+      "danger": "#EF4444",
+      "info": "#4F46E5",
+      "codeBackground": "#F8FAFC"
+    },
+    "dark": {
+      "background": "#0F172A",
+      "surface": "#1E293B",
+      "surface2": "#334155",
+      "border": "#475569",
+      "text": "#F8FAFC",
+      "textMuted": "#94A3B8",
+      "primary": "#818CF8",
+      "primaryForeground": "#0F172A",
+      "secondary": "#22D3EE",
+      "secondaryForeground": "#0F172A",
+      "accent": "#FBBF24",
+      "success": "#34D399",
+      "warning": "#FBBF24",
+      "danger": "#F87171",
+      "info": "#818CF8",
+      "codeBackground": "#1E293B"
+    },
+    "chartPalette": [
+      "#4F46E5",
+      "#06B6D4",
+      "#F59E0B",
+      "#12B76A",
+      "#EF4444",
+      "#8B5CF6"
+    ],
+    "contrastPolicy": "WCAG AA minimum (4.5:1 body text, 3:1 large text/UI) in both light and dark themes"
+  },
+  "typography": {
+    "families": {
+      "heading": {
+        "primary": "El Messiri",
+        "fallback": "Georgia, serif"
+      },
+      "body": {
+        "primary": "Tajawal",
+        "fallback": "Inter, system-ui, sans-serif"
+      },
+      "display": {
+        "primary": "Outfit",
+        "fallback": "system-ui, sans-serif"
+      },
+      "mono": {
+        "primary": "JetBrains Mono",
+        "fallback": "Menlo, monospace"
+      },
+      "arabicHeading": "El Messiri",
+      "arabicBody": "Tajawal"
+    },
+    "weights": {
+      "light": 300,
+      "regular": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700
+    },
+    "scale": {
+      "xs": "12px",
+      "sm": "14px",
+      "base": "16px",
+      "lg": "18px",
+      "xl": "20px",
+      "2xl": "24px",
+      "3xl": "30px",
+      "4xl": "36px",
+      "5xl": "48px",
+      "6xl": "60px"
+    },
+    "lineHeight": {
+      "tight": 1.2,
+      "normal": 1.5,
+      "relaxed": 1.75
+    },
+    "letterSpacing": {
+      "tight": "-0.02em",
+      "normal": "0",
+      "wide": "0.02em"
+    },
+    "googleFontsUrl": "https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;600;700&family=Outfit:wght@400;500;600;700&family=Tajawal:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap"
+  },
+  "spacing": {
+    "baseUnit": "4px",
+    "scale": {
+      "0": "0px",
+      "1": "4px",
+      "2": "8px",
+      "3": "12px",
+      "4": "16px",
+      "6": "24px",
+      "8": "32px",
+      "12": "48px",
+      "16": "64px",
+      "24": "96px"
+    }
+  },
+  "radius": {
+    "none": "0px",
+    "sm": "6px",
+    "md": "12px",
+    "lg": "16px",
+    "xl": "24px",
+    "full": "9999px",
+    "default": "12px"
+  },
+  "shadows": {
+    "sm": "0 1px 2px rgba(0,0,0,0.06)",
+    "md": "0 4px 12px rgba(0,0,0,0.10)",
+    "lg": "0 12px 32px rgba(0,0,0,0.16)",
+    "focusRing": "0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent)"
+  },
+  "motion": {
+    "duration": {
+      "fast": "120ms",
+      "base": "200ms",
+      "slow": "400ms"
+    },
+    "easing": {
+      "standard": "cubic-bezier(0.4,0,0.2,1)",
+      "emphasized": "cubic-bezier(0.2,0,0,1)",
+      "spring": "cubic-bezier(0.34,1.56,0.64,1)"
+    },
+    "reducedMotion": "honor prefers-reduced-motion: disable scroll-driven and parallax effects, keep only opacity/color transitions",
+    "scope": "cinematic/scroll-driven motion is reserved for marketing surfaces only — never in docs, dashboard, or transactional UI"
+  },
+  "breakpoints": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px"
+  },
+  "iconography": {
+    "set": "lucide",
+    "strokeWidth": 1.75,
+    "sizes": {
+      "sm": "16px",
+      "md": "20px",
+      "lg": "24px"
+    },
+    "rule": "never mix icon sets on the same surface"
+  },
+  "components": {
+    "button": {
+      "radius": "radius.md",
+      "paddingX": "spacing.4",
+      "paddingY": "spacing.2",
+      "primaryBg": "colors.primary",
+      "primaryFg": "colors.primaryForeground",
+      "hoverOpacity": 0.9,
+      "disabledOpacity": 0.5
+    },
+    "input": {
+      "radius": "radius.sm",
+      "border": "colors.border",
+      "focusRing": "shadows.focusRing",
+      "background": "colors.surface"
+    },
+    "card": {
+      "radius": "radius.lg",
+      "border": "colors.border",
+      "background": "colors.surface",
+      "shadow": "shadows.sm"
+    },
+    "codeBlock": {
+      "background": "colors.codeBackground",
+      "radius": "radius.md",
+      "fontFamily": "typography.families.mono"
+    }
+  },
+  "localization": {
+    "defaultLocale": "en",
+    "supportedLocales": [
+      "en",
+      "ar"
+    ],
+    "rtl": true,
+    "rtlLocales": [
+      "ar"
+    ],
+    "mirrorOnRtl": [
+      "sidebar",
+      "breadcrumb",
+      "tableOfContents",
+      "iconsWithDirection"
+    ],
+    "dateFormat": {
+      "en": "MMM D, YYYY",
+      "ar": "D MMMM YYYY"
+    }
+  },
+  "accessibility": {
+    "minTouchTarget": "44px",
+    "focusVisible": "always visible, never suppressed with outline:none without a replacement",
+    "altTextPolicy": "required on every meaningful image; decorative images use alt=''"
+  },
+  "foundation": "native",
+  "school": "minimalist",
+  "usage": {
+    "sharedBy": [
+      "tidyfactor-design",
+      "tidyfactor-cinematic",
+      "future kits (Dashboard, Admin, LMS, Commerce)"
+    ],
+    "rules": [
+      "Every surface reads tokens from this file — never hardcode a hex value or font name inline.",
+      "Brand colors (primary, logo) do not change between light/dark modes — only surface, background, border, and text tokens do.",
+      "If this file changes, regenerate dependent surfaces rather than manually patching colors.",
+      "Extend by adding new tokens, not by overriding existing ones per-surface."
+    ]
+  }
+}

package/memory/01-design-schools.md

@@ -0,0 +1,85 @@
+# Design Schools & Movements — Quick Calibration Index
+
+For complete operational rules, visual tokens, typography pairings, color systems, CSS rules, shadow styles, and anti-patterns across all 20 visual aesthetics, see:
+👉 **[`memory/16-design-movements-guide.md`](16-design-movements-guide.md)** (All 20 Visual Movements & Design Tokens)  
+👉 **[`memory/17-storytelling-industries-ux.md`](17-storytelling-industries-ux.md)** (4 Storytelling Archetypes, 8 Industry Registers, 8 UX Philosophies)  
+👉 **[`memory/18-design-decision-engine.md`](18-design-decision-engine.md)** (9-Step Decision Tree & Anti-Design-Soup Constraint)
+
+---
+
+## 🎨 20 Visual Aesthetics At-A-Glance Index
+1. **Swiss Style**: Objective 12-column grid, sans-serif, high contrast.
+2. **Flat Design**: 2D vector, zero shadows, vibrant color blocks.
+3. **Material Design**: Paper/ink depth, elevation shadows, touch ripples.
+4. **Minimalism**: Extreme negative space, typography focal point.
+5. **Brutalism & Neo-Brutalism**: Hard 4px black offset shadows, 2px borders, pop colors.
+6. **Bauhaus**: Primary color geometry (red/blue/yellow), form follows function.
+7. **Skeuomorphism**: Tactile real-world textures, inner bevels, realistic depth.
+8. **Glassmorphism**: Translucent frosted panels (`backdrop-filter: blur`), spatial layers.
+9. **Maximalism**: Collage layering, kinetic typography, energetic multi-color.
+10. **Industrial Style**: Monospaced data density, blueprint grids, telemetry dots.
+11. **Bento Box UI**: Compartmentalized modular masonry grids, `rounded-2xl` tiles.
+12. **Aurora UI**: Luminescent mesh gradients (`blur(60px)`), dark aura spotlights.
+13. **Neumorphism**: Extruded surface shadows (`inset` + drop), monochromatic grounds.
+14. **Corporate Memphis**: Friendly geometric characters, pastel panels, soft pills.
+15. **Cyberpunk & Vaporwave**: Pitch black grounds, neon cyan/magenta, monospaced HUD.
+16. **Claymorphism**: Soft 3D clay volumes, warm inner light reflections, rounded shapes.
+17. **Isometric Design**: 30° 2D parallel projection vector worlds.
+18. **Kinetic Typography**: Text as the animated hero visual (`clamp()` font scales).
+19. **Organic / Amorphous UI**: Fluid blob shapes (`border-radius: 60% 40% ...`), natural tones.
+20. **Frutiger Aero & Y2K**: Glossy glass buttons, lens flares, vibrant sky blue/lime gradients.
+
+## Bauhaus
+Geometric shapes as structural/decorative elements, primary-plus-black
+palettes, function-follows-form typography. Fits: education, design tools,
+brands wanting to signal craft/foundational thinking. Avoid: costume-party
+Bauhaus (circles+triangles as decoration with no structural logic).
+
+## Brutalism (web)
+Raw, unstyled-looking HTML elements used deliberately, harsh contrast,
+visible grid lines, monospace accents, intentionally "undesigned". Fits:
+developer tools, portfolios, brands wanting to signal authenticity/anti-
+polish. Avoid: actual unstyled defaults mistaken for the aesthetic —
+brutalism is a considered choice, not the absence of one.
+
+## Editorial / Broadsheet
+Hairline rules, dense multi-column text, serif display, byline/dateline
+conventions borrowed from print journalism. Fits: publications, long-form
+content, thought-leadership brands. Avoid: applying hairline-column density
+to a page that has nothing to say at that density (see `frontend-design`'s
+warning on this as an overused AI-design default).
+
+## Minimalism
+Extreme restraint, one accent color maximum, huge whitespace, type doing
+almost all the work. Fits: luxury, premium single-product brands. Avoid:
+minimalism as an excuse for lack of a real design decision — every
+remaining element must be precisely placed.
+
+## Glassmorphism
+Frosted-glass translucent panels, soft shadows, layered depth over a
+blurred background. Fits: modern consumer apps, dashboards wanting a soft/
+approachable data-density feel. Avoid: layering glass panels on glass
+panels — contrast and legibility break down fast.
+
+## Material-influenced
+Elevation via shadow, clear touch targets, motion as spatial logic (things
+move the way physical objects would). Fits: cross-platform app UI,
+utilitarian dashboards. Avoid: importing Material's specific component
+shapes wholesale when the brand wants its own identity — take the
+principles, not the skin.
+
+## Modern SaaS (Vercel/Linear-influenced)
+Near-black or pure-white grounds, one saturated accent, monospace for data/
+code, tight type scale, subtle gradient accents, generous but efficient
+spacing. Fits: developer tools, B2B SaaS, technical dashboards. Avoid:
+defaulting here just because the brief is "a SaaS product" — this look is
+common enough now to read as generic if the brand has no other point of
+view.
+
+## Calibration: defaults to avoid unless the brief asks for them
+Per `frontend-design`'s own calibration: warm-cream + terracotta-serif,
+near-black + single acid-green/vermilion accent, and broadsheet-hairline-
+columns applied regardless of subject are the three most common AI-design
+tells right now. Choosing one deliberately because it fits the brief is
+fine; landing on one by default is the failure mode `school` exists to
+prevent.

package/memory/02-design-tokens.md

@@ -0,0 +1,41 @@
+# Design Tokens — Reference for `tokens`
+
+## Categories and what belongs in each
+
+**Colors** — primary, secondary, accent; a light surface scale
+(background/surface/surface-raised) and a dark equivalent if the project
+supports both themes; semantic colors (success/warning/error/info) derived
+from the palette, not generic red/green/yellow dropped in unrelated to the
+brand.
+
+**Typography** — a display family (used with restraint, per
+`frontend-design`'s principle), a body family, optionally a mono/utility
+family for data. A type scale (e.g. a 1.25 or 1.333 ratio from a base size)
+— not arbitrary per-heading pixel values. Weight and letter-spacing as
+named tokens tied to the scale, not per-instance tweaks.
+
+**Spacing** — one consistent base unit (4px or 8px) and a small named scale
+(`--space-1` through `--space-8` or similar) — every margin/padding/gap in
+the project traces to this scale.
+
+**Radius** — a small fixed set (e.g. none/sm/md/lg/full) — resist a
+different radius value per component.
+
+**Shadow** — a small fixed elevation set (e.g. sm/md/lg), consistent light
+angle/color across all of them (usually a tint of the darkest neutral in
+the palette, not pure black).
+
+**Motion** — duration tokens (fast/base/slow) and easing tokens
+(ease-out for entrances, ease-in for exits, a signature easing curve for
+the brand's characteristic motion if `school` calls for one).
+
+## Naming convention
+`--color-*`, `--font-*`, `--space-*`, `--radius-*`, `--shadow-*`,
+`--ease-*`/`--duration-*` — consistent prefixing so any command (or a human
+reading the CSS) can immediately tell a value's category.
+
+## Contrast policy
+Every text/background pairing derived from tokens should pass WCAG AA
+(4.5:1 for body text, 3:1 for large text/UI components) — check this when
+`school` picks a direction with strong color contrast ambitions
+(near-black grounds, saturated accents), not just at the end.

package/memory/03-narrative-conversion.md

@@ -0,0 +1,47 @@
+# Narrative & Conversion — Reference for `page`/`dashboard`
+
+## Hero as thesis
+The opening of any page states its single job immediately — a headline, a
+demo, a number, whatever form fits the subject. Never a generic "Welcome
+to X" holding pattern. (Shared principle with `frontend-design`, applied
+here as a persistent rule across every page in the prototype, not just one.)
+
+## AIDA (Attention, Interest, Desire, Action)
+A useful ordering check for marketing pages: does the hero earn Attention
+specific to this audience? Does the next section build real Interest (not
+generic feature bullets)? Does the page build Desire before it asks for
+anything? Is the Action (CTA) singular and obvious, not competing with
+three other asks on the same screen?
+
+## StoryBrand-style framing
+The visitor is the hero of their own story, not the brand. Copy and layout
+should cast the product as the guide (the thing that helps), not the
+protagonist. A page that talks entirely about the company/product without
+naming the visitor's problem first usually reads as self-absorbed rather
+than persuasive.
+
+## Jobs-to-be-Done framing (for dashboards/app screens)
+A dashboard screen's design should answer "what job is the person here to
+do right now" before anything else — scanning for an anomaly, completing a
+task, deciding on an action. Information hierarchy follows that job, not a
+generic "show everything" density.
+
+## Structural devices carry meaning, or they don't belong
+Numbered steps, eyebrows, dividers — only use them where they encode
+something real (an actual sequence, an actual category boundary). A
+numbered "01/02/03" on three cards that aren't actually sequential is
+decoration pretending to be information — cut it or fix the content to
+actually be sequential.
+
+## Gestalt basics worth naming
+Proximity (related things grouped, unrelated things separated) and
+continuity (aligned edges read as connected) do more consistency work than
+almost any color/type decision — check these before reaching for a visual
+fix when a page "feels off".
+
+## CTA hierarchy
+One primary action per page/screen, styled as the obvious next step;
+secondary actions visually subordinate (not competing in size/color).
+Repeating the same primary CTA at natural decision points down a long page
+is a legitimate pattern — offering multiple *different* primary actions is
+not.

package/memory/04-motion-principles.md

@@ -0,0 +1,44 @@
+# Motion Principles — Reference for `motion`
+
+Adapted from the classic animation principles, applied to UI motion rather
+than character animation.
+
+## Staging
+One focal change communicated at a time. A section revealing five cards
+simultaneously reads as noise; the same five staggered by ~60-80ms each
+read as a considered sequence.
+
+## Anticipation
+A small pre-state before a bigger change helps the eye track what's about
+to happen (a button's subtle scale-down before a bigger transition, a
+skeleton before content pops in) — used sparingly, not on every
+interaction.
+
+## Ease-out for entrances, ease-in for exits
+Things entering the screen should decelerate into place (ease-out);
+things leaving should accelerate away (ease-in). Using the same easing
+for both reads as mechanical rather than natural.
+
+## Follow-through / slight overshoot
+A very small overshoot-and-settle on an entrance (a card that slightly
+overshoots its final position before settling) reads as more alive than a
+purely linear arrival — use subtly, it's easy to overdo into "bouncy" and
+undermine a restrained direction like Minimalism or Swiss.
+
+## Secondary motion
+A primary element moving (e.g. a hero image entering) can carry a small,
+delayed secondary motion (a shadow settling a beat later, an accent
+element trailing slightly) — this is what separates "orchestrated" motion
+from "everything moves in lockstep".
+
+## Restraint is a choice, not an absence
+Per `frontend-design`: an orchestrated single moment usually lands harder
+than scattered effects everywhere, and excess ambient animation is one of
+the strongest tells that a design is AI-generated. `school`'s chosen
+direction should determine how much motion is appropriate — Minimalism and
+Swiss call for very little; Modern SaaS and Glassmorphism can carry more.
+
+## Non-negotiable: `prefers-reduced-motion`
+Every entrance/scroll/parallax effect in `motion.js` must check this media
+query and fall back to instant or opacity-only transitions — applied
+globally in the shared file, not per page.

package/memory/05-component-anatomy.md

@@ -0,0 +1,34 @@
+# Component Anatomy — Reference for `components`/`states`
+
+## Atomic hierarchy (Atomic Design, adapted)
+- **Atoms** — button, input, label, icon, badge. The smallest named unit;
+  never composed of other named components.
+- **Molecules** — a form field (label + input + error text), a stat
+  (label + value + trend), a nav item (icon + label + active state).
+- **Organisms** — a card, a data table, a navbar, a pricing tile, a modal.
+  Composed from atoms/molecules, still a single reusable named unit.
+- **Templates** (this skill's `page`/`dashboard` output) — organisms
+  arranged into a page's actual layout. This is the one level that's
+  allowed to be page-specific — it's arrangement, not new styling.
+
+A new visual need almost always belongs at the atom/molecule/organism
+level, added once to `components.css`/the foundation library — not
+invented at the template level.
+
+## The full state matrix (apply per interactive component)
+`default → hover → focus-visible → active/pressed → disabled`, plus where
+relevant: `loading`, `empty`, `error`, `success`. A component "supports"
+these states means each has an intentional look, not that the browser
+default happens to apply.
+
+## Naming discipline
+One canonical name per real pattern. A "featured pricing card" and a
+"testimonial card" that share 90% of their structure should be one `.card`
+component with modifiers (`.card--featured`), not two components that will
+quietly diverge over time.
+
+## When something looks like it needs a new component but doesn't
+If the only difference from an existing component is a token value (a
+different accent color, a different size) — that's a modifier class or a
+data attribute, not a new component. New components are for genuinely
+different structure/behavior, not restyled instances.

package/memory/06-quality-bar.md

@@ -0,0 +1,83 @@
+# Quality Bar — Auto-Reject Checklist for `audit`
+
+A prototype fails review if any of these are true, regardless of how good individual pages look in isolation.
+
+## Pre-Emit Self-Critique (1–5 Scores on 6 Axes)
+Before handing back any output, score the artifact on 6 axes:
+- **Philosophy (P)**: Opinionated stance vs generic template default.
+- **Hierarchy (H)**: Clear visual weight & focal structure.
+- **Execution (E)**: Clean layout alignment, zero inline overrides, valid tokens.
+- **Specificity (S)**: Customized specifically to the subject's world/materials.
+- **Restraint (R)**: Zero clutter, excess gradients, or fake cards.
+- **Variety (V)**: Non-repetitive section rhythm across project pages.
+
+*Any score < 3 triggers an automatic revision pass. Output must be stamped:*
+`/* Pre-emit critique: P5 H4 E5 S4 R5 V5 */`
+
+## Compositing & Blend Rules
+- **The Blend Trap**: `mix-blend-mode` (multiply or screen) breaks on any element transformed by GSAP or CSS 3D transforms, creating a visible light/dark rectangle. Use background-removed transparent PNG cutouts (`rembg` + `Pillow`) for animated hero assets. Reserve `mix-blend-mode` strictly for static, untransformed imagery.
+
+
+## Structural (highest severity — breaks the skill's core promise)
+- **Anti-Design-Soup Violation**: Combining more than 1 Primary School, 1 Secondary Influence, 1 Motion Language, 1 Storytelling Style, or 1 UX Philosophy on a single page (unless explicitly requested).
+- Any page has an inline `<style>` block or `style="..."` attribute.
+- Any page has a `<script>` block that isn't `src`-linked to a shared `design-system/*` file.
+- A value (color, font-size, spacing, radius, shadow) appears as a literal in any page without tracing to a token.
+- Two pages render visually different versions of "the same" component (drift), or two components that are 90%+ identical exist under different names (near-duplicate).
+
+## The 16 Named AI Anti-Pattern Tells (Auto-Reject)
+1. **Purple-Gradient Hero**: Purple-to-pink/blue background gradient with white centered text.
+2. **Inter-Everywhere**: Single unpaired font family used across display and body.
+3. **3-Column Feature Grid**: 3 equal columns with icon above 2-line heading above 3-line body.
+4. **Card-in-Card**: Nested container cards with no semantic structural reason.
+5. **Gradient Headline**: `background-clip: text` linear gradient fill on headlines.
+6. **Side-Stripe Card**: 4–6px thick colored border on left edge of card.
+7. **Full-Viewport Centered Hero**: `min-height: 100vh` centered short sentence + big CTA.
+8. **Pure Black / Pure White**: Pure `#000000` or `#ffffff` flat surfaces (must use tinted neutrals).
+9. **Default-Attractor Sameness**: Reusing the same macrostructure on consecutive project pages.
+10. **Specimen Fall-Through**: Defaulting to editorial `01 - HELLO` specimen layout for SaaS/B2B.
+11. **The AI Nav**: Wordmark left, 4-5 links center, CTA right, 1px bottom border.
+12. **The AI Footer**: 4 columns (Product, Company, Resources, Legal) + social row + copyright line.
+13. **Aurora-Blob Background**: Flowing organic mesh blobs in purple/cyan behind hero text.
+14. **Floating-Orb Decoration**: 3D spheres or blurred circles drifting behind hero.
+15. **Italic Headers**: Flipping one word in a headline to italic (`Built to <em>think</em>`) to "look editorial".
+16. **Lazy-Loaded LCP**: Adding `loading="lazy"` to the main hero LCP image (tanks performance).
+
+## Mechanical Anti-Slop & Anti-Generic UI (Rule 8)
+- **Ubiquitous Eyebrows**: More than 1 eyebrow tag (uppercase tracking small label) per 3 sections (`count > ceil(sectionCount / 3)`).
+- **Floating Mid-Screen Hero**: Hero top padding exceeds `pt-24` (6rem) on desktop; headline > 2 lines; subtext > 20 words / 4 lines; primary CTA not visible without scroll.
+- **Wrapped CTA Buttons**: Primary CTA button text wraps to 2+ lines on desktop; CTA text > 3 words.
+- **Duplicate CTA Intent**: Multiple CTAs with the same underlying intent (e.g. mixing "Contact us", "Get in touch", and "Let's talk" on one page).
+- **Un-aligned Card CTAs**: Buttons in a card grid not pinned to the bottom (`mt-auto`), creating jagged horizontal lines.
+- **Invented Metrics**: Inventing fake statistics (*"+47% conversion"*, *"trusted by 50,000+ teams"*)—must use real data or `—` metric placeholders.
+- **Re-Drawn Fake Chrome**: Fake CSS browser window frames (red/yellow/green traffic lights wrapping an iframe) or fake IDE title bars.
+- **Fake Div Screenshots**: Using `<div>` rectangles to fake product UI instead of real images or real component previews.
+
+## ⛔ 11 Explicit Codex & AI-Slop Defect Bans
+1. **Ghost Cards**: Pairing 1px border with soft wide drop shadows `box-shadow: 0 Npx Mpx ...` (M ≥ 16px). Pick a solid border OR a shadow under 8px blur, never both as decoration.
+2. **Over-Rounding (32px+)**: Applying `border-radius: 24px/32px/40px` to rectangular cards and sections. Cards top out at 12–16px radius (pills strictly for tags/buttons).
+3. **Decorative Grid Background Overlays**: Adding two-axis `linear-gradient(... 1px, transparent 1px)` grid background patterns unless the page is an actual map, blueprint, canvas, or measurement tool.
+4. **Side-Stripe Accent Borders**: Colored `border-left` or `border-right` > 1px as a card/alert callout crutch. Rewrite with solid borders or subtle background tinting.
+5. **Warm Cream / Sand Saturated Neutral Default**: Defaulting all body backgrounds to warm beige/sand (`#F5F2EB` or token names like `--sand`, `--cream`, `--paper`). Pick a true neutral or brand-derived hue tint.
+6. **Side-by-Side Saturated Text Gradients**: Applying `background-clip: text` gradients for emphasis. Use weight, size, or solid accent color.
+7. **Reflexive Glassmorphism**: Adding decorative blurs and glass cards without clear spatial/layering purpose.
+8. **Numbered Section Markers on Non-Sequences**: Prefixing non-sequential sections with `01 / 02 / 03`. Sequence numbers earn their place only on real multi-step processes or timelines.
+9. **Sketchy SVG Illustrations**: Using crude 5-30 path SVG illustrations or doodle filters as fallback graphics.
+10. **Diagonal Stripe Background Overlays**: Using `repeating-linear-gradient(...)` stripe overlays in hero/section backgrounds.
+11. **Disjointed Display Heading Letter-Spacing**: Using letter-spacing tighter than `-0.04em` on H1 display headings causing characters to collide.
+
+## Optical Alignment & Typography Hygiene
+- **Data Table Numbers**: Multi-digit metrics or numbers missing `font-variant-numeric: tabular-nums` or monospace font alignment.
+- **Orphaned Headline Words**: Single hanging words on display headers missing `text-wrap: balance` or `text-wrap: pretty`.
+- **Optical Offsets**: Inline icons adjacent to text baselines missing 1-2px vertical optical adjustment.
+- **Sudden Dark Sections**: A random dark-mode section breaking an otherwise light-mode page (or vice versa), reading as a copy-paste AI artifact.
+
+## Interaction Completeness
+- An interactive component is missing hover, active (`scale-[0.98]`), focus-visible, or disabled states.
+- Focus rings are invisible or use browser default instead of token-colored ring.
+
+## Arabic / Bilingual & Accessibility Floor
+- Arabic display type uses any family other than El Messiri (headings) / Tajawal (body).
+- Contrast fails WCAG AA on any token-derived text/background pairing.
+- Touch targets under 44px on mobile/touch viewports.
+- `prefers-reduced-motion` not respected globally.

package/memory/07-consistency-contract.md

@@ -0,0 +1,33 @@
+# The Consistency Contract — Why the Architecture Is Strict
+
+This is the mechanism, stated once so every command can refer back to it
+instead of re-justifying it each time.
+
+## The problem this skill exists to solve
+A designer (or an agent) building a website one page at a time, with each
+page free to write its own CSS/JS, will drift — not from carelessness, but
+because "just this once" always feels justified in the moment a page needs
+something slightly different. At 5 pages the drift is invisible. At 50
+pages it's the whole project.
+
+## The rule
+Structural separation, not review discipline, is what prevents drift: if a
+page *cannot* carry its own styling logic (no `<style>`, no inline
+`style=`, no per-page `.css`/`.js` file), then drift becomes structurally
+impossible rather than merely discouraged. This is why `page`/`dashboard`
+treat a missing component as a hard stop, not a judgment call — "just add
+it inline this once" is exactly the failure mode being designed against.
+
+## The escape valve
+The rule only works long-term if extending the shared system stays easy —
+if adding a genuinely new component to `components.css` were harder than
+writing 10 lines of scoped CSS, people would route around the rule. The
+`components` command exists specifically to make the correct path (extend
+the shared system) faster than the wrong path (patch locally), not just
+more virtuous.
+
+## What `audit` is actually checking
+Every finding in `audit`'s structural scan traces back to this contract:
+inline styles, per-page scripts, untraced literal values, and near-
+duplicate components are all the same underlying failure — a page solved
+its own problem instead of extending the shared one.