@stylecrib/cli 0.3.1 → 0.3.2

package/themes/saturday-morning/tokens.ts

@@ -0,0 +1,281 @@
+import type { Direction } from "../schema";
+
+export const saturdayMorning: Direction = {
+  name: "saturday-morning",
+  ethos:
+    "Cartoon Network playful · Nickelodeon orange splat · Adult Swim ironic edge · Pixar warmth · Adventure Time hand-drawn whimsy",
+  references: [
+    {
+      brand: "Cartoon Network (1990s-2000s bumper graphics)",
+      trait: "chunky bold type, mismatched colors, sticker-pack composition",
+    },
+    {
+      brand: "Nickelodeon",
+      trait: "orange splat, slime green, oversized round shapes",
+    },
+    {
+      brand: "Adult Swim",
+      trait: "ironic late-night minimalism with chunky type, deadpan title cards",
+    },
+    {
+      brand: "Pixar",
+      trait: "warm character lighting, friendly rounded forms",
+    },
+    {
+      brand: "Adventure Time",
+      trait: "hand-drawn wobble, expressive shapes, flat-color whimsy",
+    },
+  ],
+  feel:
+    "Bright, chunky, playful without being childish. Bold display fonts with friendly roundness, " +
+    "many colors used confidently, hard-offset shadow drops give a sticker-pack feel. " +
+    "Reads as fun-but-considered, not Comic-Sans — the cartoon sensibility filtered through " +
+    "an Adult Swim editor's eye.",
+
+  fonts: {
+    display: {
+      family: "Fredoka",
+      fallback: ["Lilita One", "Baloo 2", "Inter", "system-ui", "sans-serif"],
+      from:
+        "Fredoka — chunky friendly rounded display, the cartoon-bumper feel without the Comic-Sans wobble; " +
+        "Lilita One covers the same territory if Fredoka is unavailable",
+      googleFont: "Fredoka:wght@500;700;900",
+      weights: [500, 700, 900],
+    },
+    body: {
+      family: "DM Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from:
+        "DM Sans — friendly rounded sans, soft terminals that pair with Fredoka without competing; " +
+        "the body voice is warm, not corporate",
+      googleFont: "DM+Sans:wght@400;500;700",
+      weights: [400, 500, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from:
+        "JetBrains Mono — rounded humanist mono with personality; reads like a credits crawl on a cartoon bumper",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",       // Fredoka is wide and round; a hair of negative tracking tightens the chunky feel
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "cv11"',
+    h1ScaleClamp: "clamp(2.75rem, 7vw, 5.5rem)", // chunky display wants size — bumper-card territory
+    bodyBaseSize: "1.0625rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: {
+      hsl: "42 90% 92%",
+      from: "bright cream sun — Saturday morning light pouring through the kitchen window",
+    },
+    foreground: {
+      hsl: "275 30% 15%",
+      from:
+        "deep purple-black — not pure black; gives the palette room to sit against it without going gray",
+    },
+    card: {
+      hsl: "42 80% 96%",
+      from: "lighter cream — a card lifted off the cereal-box background",
+    },
+    popover: {
+      hsl: "42 80% 96%",
+      from: "same as card; depth comes from sticker shadow, not hue shift",
+    },
+    primary: {
+      hsl: "325 90% 55%",
+      from: "hot magenta-pink — the Nickelodeon energy color, the principal action",
+    },
+    primaryForeground: {
+      hsl: "42 80% 96%",
+      from: "cream on magenta — the sticker label",
+    },
+    secondary: {
+      hsl: "44 100% 55%",
+      from: "= brand.sun — Cartoon Network sun yellow, secondary action color",
+    },
+    secondaryForeground: {
+      hsl: "275 30% 15%",
+      from: "purple-black on sun yellow",
+    },
+    muted: {
+      hsl: "42 50% 88%",
+      from: "deeper cream — quiet panels inside a bright page",
+    },
+    mutedForeground: {
+      hsl: "275 20% 35%",
+      from: "purple-gray — secondary text that reads against cream and muted alike",
+    },
+    accent: {
+      hsl: "200 95% 60%",
+      from: "= brand.sky — Adventure Time sky blue, hover and selection accent",
+    },
+    accentForeground: {
+      hsl: "275 30% 15%",
+      from: "purple-black on sky blue",
+    },
+    border: {
+      hsl: "275 30% 15%",
+      from:
+        "= foreground; the inked outline around every cartoon shape — thick, intentional, never gray",
+    },
+    input: {
+      hsl: "275 30% 15%",
+      from: "same as border — inputs wear the inked-outline treatment",
+    },
+    ring: {
+      hsl: "325 90% 55%",
+      from: "primary magenta, focus only",
+    },
+    destructive: {
+      hsl: "350 85% 60%",
+      from:
+        "= brand.cherry — Pixar character red; saturated and warm, not blood-red — alerts that still feel hand-drawn",
+    },
+    destructiveForeground: {
+      hsl: "42 80% 96%",
+      from: "cream on alert",
+    },
+    brand: {
+      slime: {
+        hsl: "90 75% 55%",
+        from: "Nickelodeon slime green — the splat color, the late-90s game-show ooze",
+      },
+      sun: {
+        hsl: "44 100% 55%",
+        from: "Cartoon Network sun yellow — the bumper-card highlight, the Adventure Time afternoon",
+      },
+      sky: {
+        hsl: "200 95% 60%",
+        from: "Adventure Time sky blue — the flat-cel backdrop, the candy-kingdom horizon",
+      },
+      cherry: {
+        hsl: "350 85% 60%",
+        from: "Pixar character red — Mr. Incredible chest, warm and saturated, never cool magenta",
+      },
+      grape: {
+        hsl: "275 75% 55%",
+        from: "playful purple — Adult Swim title-card grape, the wink between the bright colors",
+      },
+      magenta: {
+        hsl: "325 90% 55%",
+        from: "= primary; Nickelodeon energy magenta, also the brand-mark color",
+      },
+      cream: {
+        hsl: "42 90% 92%",
+        from: "= background; the kitchen-window light, also a named token for component overrides",
+      },
+      ink: {
+        hsl: "275 30% 15%",
+        from: "= foreground; the inked outline, also semantic for borders",
+      },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 48, 64], // medium — decoration takes room
+    containerMax: "max-w-5xl",
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-32 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "1.5rem",                   // very rounded — pillowy soft, sticker-edge feel
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "none",
+    utilities: {
+      "shadow-sticker":
+        "4px 4px 0 0 hsl(var(--foreground))",     // hard offset, no blur — the sticker/comic peel
+      "shadow-sticker-lg":
+        "6px 6px 0 0 hsl(var(--foreground))",     // hover-lifted sticker — same drop, bigger throw
+      "shadow-sticker-sm":
+        "2px 2px 0 0 hsl(var(--foreground))",     // compact sticker for tags, badges, inline chips
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.34, 1.56, 0.64, 1)", // bouncy spring — overshoot is the language
+    durations: {
+      reveal: 400,                    // bounce-in entrance — spring with overshoot
+      loop: 600,                      // wiggle cycle
+      ambient: 200,                   // pop-color flash on hover
+    },
+    keyframes: {
+      "bounce-in": {
+        css:
+          "0% { opacity: 0; transform: scale(0.6); }\n" +
+          "60% { opacity: 1; transform: scale(1.08); }\n" +
+          "100% { opacity: 1; transform: scale(1); }",
+        defaultDuration: 400,
+        iteration: "once",
+        purpose:
+          "entrance with overshoot — buttons, modals, cards land with a spring; the cartoon-card pop",
+      },
+      "wiggle": {
+        css:
+          "0%, 100% { transform: rotate(0deg); }\n" +
+          "25% { transform: rotate(-3deg); }\n" +
+          "75% { transform: rotate(3deg); }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose:
+          "playful nudge on hover — buttons wiggle when the cursor lands; the Adventure Time wobble",
+      },
+      "pop-color": {
+        css:
+          "0% { filter: hue-rotate(0deg); }\n" +
+          "50% { filter: hue-rotate(20deg) saturate(1.15); }\n" +
+          "100% { filter: hue-rotate(0deg); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose:
+          "color flash on hover — links and tags pulse a hue-shift; the bumper-graphic blink",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Chunky rounded, magenta solid by default with foreground text and a hard `.shadow-sticker` drop. " +
+      "Rounded-3xl baseline (matches `--radius: 1.5rem`); pills allowed for tags and compact actions. " +
+      "Hover: `wiggle` keyframe + lift to `.shadow-sticker-lg`. " +
+      "Secondary buttons swap the magenta for any brand token (sun, sky, slime, grape) — fill is the norm, " +
+      "ghost is the exception.",
+    card:
+      "Thick 2px `--ink` border, brand-token or card-cream background, `rounded-3xl`, " +
+      "`.shadow-sticker` drop. Title in Fredoka display, oversized. Padding `p-6 lg:p-10`. " +
+      "Hover lifts to `.shadow-sticker-lg`. Cards are stickers — they peel off the page.",
+    input:
+      "Full `rounded-2xl` box, 2px `--ink` border, `bg-card`. Label above in DM Sans 500. " +
+      "Focus shifts border to `--ring` (magenta) and adds `.shadow-sticker-sm`. " +
+      "No border-bottom-only treatment — every input is a labeled sticker pocket.",
+    cta:
+      "Filled chunky button is the default — magenta primary or sun-yellow secondary, with the sticker shadow. " +
+      "Pills reserved for tags and toggles. Text-link CTAs use `pop-color` on hover with a thick underline. " +
+      "Never a flat ghost — every CTA carries weight.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--brand-sun) / 0.6)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "3px solid hsl(var(--ring))",
+    scrollbarStyle: "auto",
+  },
+};

package/themes/schema.ts

@@ -0,0 +1,235 @@
+// Shared schema for every design direction in this library.
+// The CLI consumes this shape to emit `tailwind.config.ts` and `src/index.css`.
+// Hand-authoring is fine; runtime validation happens at codegen time.
+
+export type BrandTrait = {
+  brand: string;     // "NYT", "Tesla", "Aman"
+  trait: string;     // "typography", "blackout", "cream paper"
+};
+
+export type HSL = `${number} ${number}% ${number}%`;
+
+export type ColorToken = {
+  hsl: HSL;          // raw triple, no hsl() wrapper — feeds opacity modifier syntax
+  from: string;      // verbatim provenance: "Masters green, restrained" — survives in generated css as a comment
+};
+
+export type FontStack = {
+  family: string;          // primary face the project loads — "EB Garamond", "Manrope"
+  fallback: string[];      // system fallbacks in order
+  from: string;            // brand provenance: "NYT serif feel", "Linear's sans"
+  googleFont?: string;     // url-safe Google Fonts name; null if self-hosted or system-only
+  weights?: number[];      // weights to load (default: [400, 600])
+};
+
+export type MotionTier = "reveal" | "loop" | "ambient";
+
+export type Direction = {
+  // identity
+  name:
+    | "editorial"
+    | "soft-modern"
+    | "dense-utility"
+    | "brutalist"
+    | "cinematic-dark"
+    | "mid-century"
+    | "maximalist"
+    | "outdoor-adventure"
+    | "hyperminimal-mono"
+    | "newsletter"
+    | "y2k-chrome"
+    | "glassmorphic-modern"
+    | "signal-dark"
+    | "couture-luxury"
+    | "stadium-sport"
+    | "performance-engineered"
+    | "saturday-morning"
+    | "enterprise-tech"
+    | "creator-social"
+    | "kaiju-reveal"
+    | "runway-fashion"
+    | "streetwear-hype"
+    | "architectural"
+    | "kinetic-data"
+    | "indie-art-game"
+    | "corporate-grid"
+    | "enterprise-cloud"
+    | "business-tiles"
+    | "acrylic-soft"
+    | "cloud-friendly"
+    | "team-kanban"
+    | "government-civic"
+    | "banking-gravity"
+    | "pharma-clinical"
+    // ──────── Batch 2026-06: 30 new directions across under-covered categories ────────
+    | "fintech-trust"
+    | "fintech-card"
+    | "crypto-onchain"
+    | "web3-restraint"
+    | "education-warm"
+    | "education-formal"
+    | "healthcare-bright"
+    | "telehealth-modern"
+    | "wellness-spa"
+    | "music-streaming"
+    | "music-vinyl"
+    | "podcast-warm"
+    | "realestate-luxury"
+    | "realestate-marketplace"
+    | "marketplace-vintage"
+    | "marketplace-modern"
+    | "gaming-streamer"
+    | "gaming-esports"
+    | "devtool-cli"
+    | "devtool-docs"
+    | "nonprofit-warm"
+    | "agency-portfolio"
+    | "agency-creative"
+    | "studio-photographer"
+    | "studio-architect"
+    | "restaurant-modern"
+    | "hotel-boutique"
+    | "wellness-active"
+    | "food-blog"
+    | "ai-startup"
+    // ──────── Batch 2026-06 (B): 40 new directions, push library past 100 ────────
+    | "travel-luxury"
+    | "vacation-rental"
+    | "airline-modern"
+    | "tourism-board"
+    | "yoga-studio"
+    | "gym-chain"
+    | "sports-league"
+    | "cycling-brand"
+    | "linkedin-pro"
+    | "dating-friendly"
+    | "forum-classic"
+    | "community-niche"
+    | "newspaper-classic"
+    | "magazine-glossy"
+    | "news-tabloid"
+    | "news-tech"
+    | "law-firm"
+    | "lawtech-modern"
+    | "insurance-modern"
+    | "insurance-legacy"
+    | "automotive-luxury"
+    | "automotive-ev"
+    | "motorcycle-brand"
+    | "classic-car"
+    | "beauty-clean"
+    | "beauty-luxury"
+    | "furniture-modern"
+    | "home-decor"
+    | "pet-food"
+    | "baby-modern"
+    | "toys-modern"
+    | "vet-modern"
+    | "solar-residential"
+    | "ev-charging"
+    | "farm-direct"
+    | "logistics-modern"
+    | "museum"
+    | "bookstore-indie"
+    | "publisher-indie"
+    | "nonprofit-arts"
+    | "spotter-bright";
+  ethos: string;                  // one-line brand·trait synthesis
+  references: BrandTrait[];       // 4-6 brands max
+  feel: string;                   // 2-3 sentence prose description
+
+  // typography
+  fonts: {
+    display: FontStack;
+    body: FontStack;
+    mono: FontStack;
+  };
+  typography: {
+    headingTracking: string;      // e.g. "-0.01em"
+    bodyTracking: string;         // e.g. "0" or "0.17em" for cinematic
+    fontFeatureSettings?: string; // e.g. `"ss01", "cv11"` for Manrope
+    h1ScaleClamp: string;         // e.g. "clamp(2.5rem, 6vw, 4.5rem)"
+    bodyBaseSize: string;         // e.g. "1rem", "0.9375rem"
+    bodyLineHeight: string;       // e.g. "1.6"
+  };
+
+  // colors — every token traces to a brand·trait
+  colors: {
+    background: ColorToken;
+    foreground: ColorToken;
+    card: ColorToken;
+    popover: ColorToken;
+    primary: ColorToken;
+    primaryForeground: ColorToken;
+    secondary: ColorToken;
+    secondaryForeground: ColorToken;
+    muted: ColorToken;
+    mutedForeground: ColorToken;
+    accent: ColorToken;
+    accentForeground: ColorToken;
+    border: ColorToken;
+    input: ColorToken;
+    ring: ColorToken;
+    destructive: ColorToken;
+    destructiveForeground: ColorToken;
+    // brand tokens (named, not numbered) — any additional colors the direction calls for
+    brand?: Record<string, ColorToken>;
+  };
+
+  // spacing — base unit + the canonical scale
+  spacing: {
+    base: number;                 // px, almost always 4
+    scale: number[];              // tailwind scale steps actually allowed in this direction
+    containerMax: string;         // "max-w-6xl", "max-w-2xl" for editorial prose-first
+    containerPadding: string;     // "px-4 lg:px-8"
+    sectionPadding: {
+      hero: string;               // "pt-20 pb-12 lg:pt-28 lg:pb-16"
+      default: string;            // "py-16 lg:py-24"
+      tight: string;              // "py-12"
+    };
+  };
+
+  // radius — single source for the rounding language
+  radius: {
+    base: string;                 // "0.4rem" (sharp), "0.75rem" (rounded), "0" (editorial)
+    pillsAllowed: boolean;        // false for editorial/dense-utility; true for soft-modern
+  };
+
+  // shadow language — utilities defined in index.css, named by intent
+  shadows: {
+    style: "minimal" | "soft" | "glow" | "none";
+    utilities: Record<string, string>; // e.g. { "glow-gold": "0 0 0 1px ..., 0 30px 80px ..." }
+  };
+
+  // motion — the project library
+  motion: {
+    easing: string;               // "cubic-bezier(0.22, 1, 0.36, 1)" — universal across directions
+    durations: Record<MotionTier, number>;  // ms
+    keyframes: Record<string, {   // every keyframe the direction ships
+      css: string;                // the @keyframes block body
+      defaultDuration: number;    // ms
+      iteration: "once" | "infinite";
+      purpose: string;            // why this keyframe exists
+    }>;
+    respectsReducedMotion: true;  // hard-coded; non-negotiable
+  };
+
+  // density — informs spacing scale, line-height, component patterns
+  density: "low" | "medium" | "high";
+
+  // component patterns — declarative rules the Director and QA agents enforce
+  patterns: {
+    button: string;               // e.g. "ghost only; no solid-fill on brand-mark colors"
+    card: string;                 // e.g. "hairline border, no fill differentiation from background"
+    input: string;                // e.g. "border-bottom only, no full box"
+    cta: string;                  // e.g. "text link with gold-gradient utility; never a filled rect"
+  };
+
+  // selection + scrollbar + focus — small details that signal "built"
+  details: {
+    selectionBg: string;          // "hsl(var(--gold) / 0.3)"
+    selectionFg: string;          // "hsl(var(--foreground))"
+    focusRing: string;            // "2px solid hsl(var(--ring))"
+    scrollbarStyle: "thin" | "auto" | "none";
+  };
+};

package/themes/signal-dark/BUILD_BRIEF.md

@@ -0,0 +1,168 @@
+# Signal-Dark — Build Brief
+
+> This file is the CONTRACT the theme ships with. It IS the source of truth
+> the `brief-enforcer` subagent reads at commit time and the payload the
+> `Copy for Claude Code` button on the theme detail page hands out.
+>
+> The contract has three sections:
+>   1. MANDATORY BUILD DIRECTIVE — the `You MUST` list.
+>   2. SLOP-BLOCKLIST — the `You MUST NOT` list.
+>   3. CHROME INVENTORY — the allow-list of ornaments this theme may use.
+>
+> Any UI change that touches this theme's section source (or applies this
+> theme to a project) must pass the enforcer against this file.
+
+---
+
+## MANDATORY BUILD DIRECTIVE — you MUST
+
+1. **Hold the warm-black canvas at `#0F0D0C`** (30° warm-bias). Never pure
+   black. On light canvas: cotton-paper `#F7F4F0` (30° warm bias). Never
+   pure white. Both canvases share the register; only tokens invert.
+2. **Use ONE signal color on the page** (the palette variant). No second
+   color for "variety." Status signals use mono labels with a signal-hued
+   dot, not green / orange / blue chips.
+3. **Set the hero display at `clamp(3.5rem, 10vw, 9rem)`** with tight
+   tracking (-0.04em). Type is the primary design element.
+4. **Radius 12px on cards.** Pills allowed only on model-card meta chips +
+   status badges.
+5. **Reserve prominent mono (JetBrains Mono) for CODE-shaped things:**
+   terminal specimens, model IDs, semver tags, CLI output, at-handles.
+   NEVER for decorative eyebrow labels.
+6. **Real Pexels photos for the marketing hero + product surfaces.** No
+   SVG stand-ins for photo-worthy subjects.
+
+---
+
+## SLOP-BLOCKLIST — you MUST NOT
+
+Each is a hard fail. If the section source contains any of these, the
+enforcer verdict is BLOCK.
+
+- **Mono-caps decorative eyebrows** (`SECTION · X`, `WHAT WE X`). CSS
+  fingerprint: `textTransform: uppercase` + `letterSpacing ≥ 0.18em` at
+  `fontSize < 20px`. Not on this theme's chrome inventory, so banned.
+- **Dot-separated decorative metadata rows** (`ISSUE 04 · CHAPTER 03`,
+  `EST. 2019`, `12 MIN READ`). Content-level `·` (`handle · role`,
+  terminal output like `stylecrib qa --ci · 12s · passed`) is fine.
+- **`№` / no. / vol. ornaments.**
+- **`▸ TAG` labels.**
+- **`TRUSTED BY` / `AS SEEN IN` / `COMPOSED BY TEAMS AT`** wordmark strips
+  — content-slop under any name.
+- **Ticker bars, auto-advancing hero sliders (< 6s mutation), cycling
+  headline words** (`we [design][build][ship]`), `AUTO 4s` helpers.
+- **Warm-radial glow gradients as image FALLBACKS.**
+- **Roman-numeral copyright** (`MMXXVI. ALL RIGHTS RESERVED.`).
+- **3-pillar identical feature-card grids as the marketing spine.**
+- **Vague trust copy:** hand-crafted, thoughtfully-made, considered,
+  for-teams-that-care, made-with-love.
+- **Attribution of influence in visible copy** — Tesla, Hugging Face,
+  Apple, Vercel, Cybertruck are STUDIED, never NAMED in slug, copy, or UI.
+
+---
+
+## CHROME INVENTORY — the allow-list
+
+Every ornament this theme may use. Anything visible in the section source
+that is NOT on this list falls under the SLOP-BLOCKLIST above.
+
+- **Full-bleed warm-black hero band** with subtle radial warm+cool mesh
+  backdrop (opacity ~0.4, drifts on `gradient-shift 32s` ambient loop; NOT
+  a purple/pink slop gradient — warm amber + cool blue only, matching
+  `--glow-warm` and `--glow-cool`).
+- **Oversized display h1** in Inter 700 at `clamp(3.5rem, 10vw, 9rem)`,
+  tracking -0.04em, one line-break maximum.
+- **ONE primary CTA per page:** filled signal button, radius 12px,
+  `glow-signal` outer halo on hover only.
+- **ONE ghost secondary next to the primary:** bordered, foreground
+  color, radius 12px, no glow.
+- **Model-card panel:** rounded-xl (12px), 1px border, subtle raised card
+  bg, meta row at top in mono (icon dot + slug + status pill),
+  display-font title, softInk body copy, no shadow beyond hairline border.
+- **Terminal specimen:** rounded-xl (12px) card with a top window bar
+  (err-red · warn-amber · signal dots) + mono CLI title. Body is
+  pre-formatted JetBrains Mono at 13px, signal-yellow prompt glyph (`$ `),
+  softInk body text, mutedInk system text.
+- **Status pill** (mono, rounded-full, px-2.5 py-1 text-[11px]): dot
+  prefix in signal for active, mutedInk otherwise. No colored fills.
+- **Full-bleed marketing hero photograph**, 21:9 or 16:9, warm-shadow
+  cool-highlight grade, hero display text OVERLAID (never a caption card).
+- **Table-style live metrics grid:** label / value / status dot in mono,
+  tabular figures, one row per metric.
+- **3-tier pricing card row**, ONE primary CTA on the middle recommended
+  tier (signal-filled), other tiers use ghost secondary.
+- **Footer:** minimal — brand name, one-line studio note, three columns of
+  links max, small copyright line (regular Arabic numerals, no MMXXVI,
+  no dot-metadata).
+
+---
+
+## SIGNATURE MOVES — verbs, not adjectives
+
+The theme's actual moves you MUST land, not adjectives to gesture at.
+
+- **Fill the hero band with a warm-black canvas + oversized display type**
+  breaking the baseline; hold the mesh-gradient backdrop under it at 0.4
+  opacity, drifting via `gradient-shift 32s` so the horizon never sits
+  still.
+- **Place ONE signal-yellow button per page**, at the point of conversion.
+  Its `glow-signal` halo appears ONLY on hover — never as a static bloom
+  (that's Stripe-Linear-Vercel AI-default slop).
+- **Show a terminal specimen with `$` in signal + real CLI output** — the
+  developer-tool signature. The prompt IS the visual accent, not
+  decorative chrome.
+- **Model-card grid:** put the meta row at the TOP in mono (like a HF
+  model card would show `provider/name · v0.14 · task`); display-font
+  title comes SECOND, body copy underneath. Never invert that order.
+- **Marketing hero:** full-bleed photograph, big-quiet display text laid
+  OVER the photo (not in a caption card next to it). Warm shadows + cool
+  highlights color grade so the yellow signal never competes with the
+  image.
+- **Use tabular figures for all metric numbers** so they align in columns.
+  Non-tabular metric numerals break the register.
+
+---
+
+## COLOR TOKENS (measured)
+
+**Dark canvas**
+- `bg`: `#0F0D0C`   `card`: `#1A1614`   `border`: `#2A231F`
+- `ink`: `#F7F4F0`  `softInk`: `#E4DFD8`  `mutedInk`: `#9F958A`
+
+**Light canvas**
+- `bg`: `#F7F4F0`   `card`: `#FFFFFF`   `border`: `#DED6CB`
+- `ink`: `#0F0D0C`  `softInk`: `#2A231F`  `mutedInk`: `#6C6259`
+
+**Signal** (default `hazard`)
+- Dark canvas: `#FFDF29`   Light canvas: `#B58900`
+
+---
+
+## TYPOGRAPHY
+
+- **Display:** Inter (SF Pro Display approximation), 500 / 600 / 700 / 800.
+  Hero h1 at `clamp(3.5rem, 10vw, 9rem)`, tracking -0.04em (loosens to
+  -0.005em at body).
+- **Body:** Inter, 17px, line-height 1.55, tracking -0.005em.
+- **Mono:** JetBrains Mono — for code / terminal / metric values /
+  @handles ONLY.
+
+---
+
+## SECTION SKELETON (top → bottom)
+
+1. Sticky palette + canvas picker strip (meta-UI, not theme composition).
+2. Masthead nav — brand + 4 nav items + one signal CTA.
+3. Hero — mesh-gradient backdrop, oversized display, one signal CTA +
+   ghost secondary, one paragraph of body copy.
+4. Product surface photograph — full-bleed 21:9, warm-shadow grade, no
+   caption card.
+5. Terminal specimen — rounded-xl card with `$` prompt, real CLI output.
+6. Model-card feature grid (2×2 or 4×1) — mono meta at top, display
+   title, body, status pill.
+7. Marketing hero — full-bleed photograph with oversized display overlay
+   + one signal CTA.
+8. Live metrics table — 4 rows, tabular figures, status dots.
+9. Pricing — 3 tiers, ONE signal CTA on the recommended tier.
+10. Footer — brand + one-line note + three link columns + small
+    copyright.