@stylecrib/cli 0.3.1 → 0.3.3

package/themes/runway-fashion/tokens.ts

@@ -0,0 +1,167 @@
+import type { Direction } from "../schema";
+
+export const runwayFashion: Direction = {
+  name: "runway-fashion",
+  ethos:
+    "Chanel high-contrast b/w · Vogue runway photography · Saint Laurent disciplined restraint · Comme des Garçons asymmetric type · Helmut Newton drama",
+  references: [
+    { brand: "Chanel", trait: "binary black-and-white, no color, oversized display serif on runway photography" },
+    { brand: "Vogue", trait: "issue typography, fashion plate restraint, couture-magazine cover scale" },
+    { brand: "Saint Laurent", trait: "disciplined minimalism, geometric, all-caps sparse-tracked wordmark" },
+    { brand: "Comme des Garçons", trait: "Rei Kawakubo asymmetric layouts, deliberate 'wrong' type" },
+    { brand: "Helmut Newton", trait: "high-drama runway photography, deep shadows, Tri-X film grain" },
+  ],
+  feel:
+    "Binary pure-black-on-pure-white (or inverted). Oversized Didone serif at " +
+    "editorial scale — the hero is the type, set Vogue-cover large in italic Playfair. " +
+    "A single tiny couture-red accent is permitted, used once per page. Couture severity: " +
+    "this direction rejects color. The opposite of soft-modern.",
+
+  fonts: {
+    display: {
+      family: "Playfair Display",
+      fallback: ["Bodoni Moda", "Didot", "Bodoni 72", "Bodoni", "Times New Roman", "serif"],
+      from: "Vogue/Chanel Didone-style high-contrast serif — oversized italic is the cover move",
+      googleFont: "Playfair+Display:wght@400;700;900",
+      weights: [400, 700, 900],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "sans-serif"],
+      from: "Saint Laurent body restraint — clean sans so the serif is the design; never decorative",
+      googleFont: "Inter",
+      weights: [400, 500],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "Vogue issue-number metadata — 'Vol 47 / Spring', tiny, used only for masthead bookkeeping",
+      googleFont: "JetBrains+Mono",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",         // Didone display at Vogue scale wants the optical tighten
+    bodyTracking: "0",                  // body is neutral so the display serif carries the page
+    fontFeatureSettings: '"kern", "liga", "dlig", "tnum"',  // discretionary ligatures for italic Playfair
+    h1ScaleClamp: "clamp(4rem, 10vw, 9rem)",  // Vogue-cover scale — italic Playfair as hero
+    bodyBaseSize: "1rem",               // 16px — Saint Laurent restraint
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "0 0% 100%", from: "Chanel pure white — couture stock, no warmth, no paper-cream" },
+    foreground: { hsl: "0 0% 0%", from: "Chanel pure black — couture ink, the binary opposite of the page" },
+    card: { hsl: "0 0% 100%", from: "Saint Laurent surface restraint — no card differentiation; the page is the surface" },
+    popover: { hsl: "0 0% 100%", from: "Saint Laurent restraint — depth is forbidden, popovers sit on white" },
+    primary: { hsl: "0 0% 0%", from: "Chanel black IS the primary — the couture-red accent is reserved for one moment" },
+    primaryForeground: { hsl: "0 0% 100%", from: "Chanel pure white on black — couture inversion" },
+    secondary: { hsl: "0 0% 100%", from: "Saint Laurent secondary surface — no second tier; differentiate by typographic weight" },
+    secondaryForeground: { hsl: "0 0% 0%", from: "Chanel black, always — no gray-on-gray dilution" },
+    muted: { hsl: "0 0% 98%", from: "Vogue ivory — barely-off-white for layering masthead metadata blocks" },
+    mutedForeground: { hsl: "0 0% 40%", from: "Helmut Newton mid-tone — caption gray, instrument-feel for credit lines" },
+    accent: { hsl: "0 0% 98%", from: "Vogue ivory hover surface — same as muted; restraint over distinction" },
+    accentForeground: { hsl: "0 0% 0%", from: "Chanel black on hover" },
+    border: { hsl: "0 0% 0%", from: "Saint Laurent 1px black rule — couture line, never softened to gray" },
+    input: { hsl: "0 0% 0%", from: "Saint Laurent input rule — same as border; inputs are hairlines on the page" },
+    ring: { hsl: "0 0% 0%", from: "Chanel black focus ring — no accent leakage, couture severity" },
+    destructive: { hsl: "0 100% 45%", from: "Chanel lipstick — same single red as the couture accent; destructive shares the one color" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "Chanel pure white on couture-red" },
+    brand: {
+      "couture-red": {
+        hsl: "0 100% 45%",
+        from: "Chanel lipstick — the SINGLE red accent, used ONCE per page maximum, never twice",
+      },
+      ivory: {
+        hsl: "0 0% 98%",
+        from: "Vogue ivory — barely-off-white for layering masthead and credit blocks",
+      },
+      noir: {
+        hsl: "0 0% 4%",
+        from: "Helmut Newton deep ink — for layered black-on-black runway photography overlays",
+      },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160],   // couture-generous; low density wants more air
+    containerMax: "max-w-6xl",                              // 1152px — Vogue cover proportions
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-32 pb-24 lg:pt-48 lg:pb-32",                // oversized — cover-of-the-issue scale
+      default: "py-24 lg:py-32",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0",                          // sharp couture corners — Chanel and Saint Laurent never rounded
+    pillsAllowed: false,                // pills are anti-couture; status uses rectangles or text
+  },
+
+  shadows: {
+    style: "none",                      // drops are forbidden; composition does the work
+    utilities: {},                      // intentionally empty — no shadow utilities ship
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 600,                      // runway-walk pacing — deliberate, never hurried
+      loop: 0,                          // no loops — the page is a printed cover
+      ambient: 0,                       // no ambient motion — couture stillness
+    },
+    keyframes: {
+      "runway-step": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose:
+          "deliberate runway-walk pacing — 600ms opacity-only fade between hero slides. No transform; the model walks, the page does not.",
+      },
+      "cover-flip": {
+        css:
+          "from { opacity: 0; transform: translateX(8px); }\n" +
+          "to { opacity: 1; transform: translateX(0); }",
+        defaultDuration: 300,
+        iteration: "once",
+        purpose:
+          "Vogue cover reveal — 300ms 8px slide for cover-of-the-issue transitions. Used sparingly; once per page maximum.",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Two states, no middle ground. " +
+      "Primary text-link = ALL CAPS, sparse-tracked (`letter-spacing: 0.2em`), text-underline, black on white — the Saint Laurent wordmark move. " +
+      "Primary filled = oversized 'SHOP' rectangle in pure black with white text, ALL CAPS, sparse-tracked. " +
+      "The couture-red filled rectangle is reserved for the single primary action per page — never repeated. " +
+      "No ghost mid-state, no hover lift, no rounded corners.",
+    card:
+      "No card chrome. Editorial blocks sit directly on the page, separated by oversized whitespace. " +
+      "When grouping is required, a single 1px black rule above. No fill, no shadow, no rounded corners. " +
+      "Titles in italic Playfair Display at Vogue-cover scale; body in 16px Inter.",
+    input:
+      "1px black border, sharp corners, white background. Label above in ALL CAPS sparse-tracked mono. " +
+      "Focus = 1px inset black ring, no glow. Placeholder italic Playfair, lowercase — the one place italic is permitted in chrome.",
+    cta:
+      "Default CTA is the Saint Laurent ALL-CAPS sparse-tracked text-underline link. " +
+      "The couture-red filled rectangle is the ONE marketing moment per page — the Chanel-lipstick accent. " +
+      "There is no second.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--foreground))",        // black selection — pure couture inversion
+    selectionFg: "hsl(var(--background))",        // white text on black
+    focusRing: "1px solid hsl(var(--ring))",      // 1px black, no offset, no glow
+    scrollbarStyle: "thin",                       // thin black rule — the only chrome detail allowed
+  },
+};

package/themes/saturday-morning/THEME.md

@@ -0,0 +1,117 @@
+# Design Direction — Saturday Morning
+
+## Ethos
+Cartoon Network playful · Nickelodeon orange splat · Adult Swim ironic edge · Pixar warmth · Adventure Time hand-drawn 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.
+
+Maximalist is the closest sibling — same many-colors confidence, same brand-token bg overrides on components — but where maximalist works in editorial sharp corners and Wes Anderson serifs, saturday-morning rounds every edge into pillow shapes and lets a chunky display sans do the talking. The shadows are the giveaway: maximalist refuses shadows, saturday-morning lives on hard 4px sticker drops.
+
+## Reference brands
+- **Cartoon Network (1990s-2000s bumper graphics)** → chunky bold type, mismatched colors, sticker-pack composition. The bumper card between commercials, not the show itself.
+- **Nickelodeon** → orange splat, slime green, oversized round shapes. The splat is the brand and the brand is the splat.
+- **Adult Swim** → ironic late-night minimalism with chunky type. Deadpan title cards on a single color — the wink that keeps this direction out of the kid zone.
+- **Pixar** → warm character lighting, friendly rounded forms. Not photorealism — the *warmth* of Pixar, the soft-edge geometry.
+- **Adventure Time** → hand-drawn wobble, expressive shapes, flat-color whimsy. The candy-kingdom palette and the slight imperfection that makes a vector line feel hand-traced.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin.
+
+Surface stack is **bright cream** (background) → **lighter cream** (card) → **deeper cream** (muted) — the sun pouring through the kitchen window on a Saturday at 7am. Depth comes from **thick 2px `--ink` borders** and the **hard-offset sticker shadows**, never from hue shift on the cream tiers.
+
+Brand tokens (named, never numbered): `--slime` (Nick slime green), `--sun` (Cartoon Network sun yellow, = secondary), `--sky` (Adventure Time sky blue, = accent), `--cherry` (Pixar character red, = destructive), `--grape` (Adult Swim title-card purple), `--magenta` (= primary), `--cream` (= background), `--ink` (= foreground). At least five named accent colors is the minimum — this direction is built around having many.
+
+Primary is **hot magenta-pink** (`325 90% 55%`) — the Nickelodeon energy color, the splat saturation. Foreground is **deep purple-black** (`275 30% 15%`), never pure black; the slight hue gives the candy palette room to sit against it. Pure white and pure black are forbidden — `--cream` and `--ink` replace them.
+
+## Typography
+- **Display:** Fredoka (chunky friendly rounded display — the cartoon-bumper feel without the Comic-Sans wobble). Lilita One covers the same territory if Fredoka is unavailable. Weights 500/700/900. h1–h4.
+- **Body:** DM Sans (friendly rounded sans, soft terminals that pair with Fredoka without competing). 17px (`1.0625rem`), line-height 1.6.
+- **Mono:** JetBrains Mono (rounded humanist mono with personality — reads like a credits crawl on a cartoon bumper). Captions, code, micro-labels.
+
+H1 uses `clamp(2.75rem, 7vw, 5.5rem)` — chunky display wants size, bumper-card territory. Heading tracking `-0.01em` — Fredoka is wide and round; a hair of negative tracking tightens the chunky feel. Body tracks `0`. Font features `"ss01", "cv11"` on DM Sans.
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-10`.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 48 64. Medium density — decoration takes room.
+
+## Color
+No hex anywhere in component files. Color is the medium. Components are *encouraged* to override their background with any brand token — a card may be slime-green, a callout may be sky-blue, a tag row may run sun → cherry → grape across five chips. The cream background is the canvas, not a default.
+
+The palette is **bright and warm by default**. If you reach for a desaturated enterprise blue or a moody gray, you've left the direction. The destructive token is warm cherry-red (`350°`), not magenta-red, because alerts should still feel hand-drawn.
+
+## Radius
+`--radius: 1.5rem` (24px). **Very rounded — pillowy soft, sticker-edge feel.** Pills are allowed (`pillsAllowed: true`) and encouraged for tags, toggles, and compact actions. Hard right angles read "developer demo" or "editorial," not Saturday morning — keep everything round.
+
+## Shadows
+`style: "none"` — meaning no gaussian-blur drop shadows. The depth language is **hard-offset sticker shadows** instead: a flat color block, 4px down and 4px right, no blur. The peel of a vinyl sticker, the layered cel of a cartoon background.
+
+- `.shadow-sticker` — the signature. `4px 4px 0 0 hsl(var(--foreground))`. The default for buttons and cards.
+- `.shadow-sticker-lg` — hover-lifted. `6px 6px 0 0`. The sticker peels further off the page.
+- `.shadow-sticker-sm` — compact. `2px 2px 0 0`. For tags, badges, inline chips.
+
+Soft gaussian shadows are forbidden — they belong to soft-modern. The sticker shadow is non-negotiable here; it's how depth happens.
+
+## Motion
+Three keyframes, all bouncy:
+- `bounce-in` (400ms once) — entrance with overshoot. `cubic-bezier(0.34, 1.56, 0.64, 1)`. Buttons, modals, cards land with a spring — the cartoon-card pop.
+- `wiggle` (600ms once) — rotate ±3deg playful nudge on hover. The Adventure Time wobble.
+- `pop-color` (200ms once) — hue-rotate flash on hover for links and tags. The bumper-graphic blink.
+
+Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)` — overshoot is the language. Smooth easings without bounce are wrong for this direction. `prefers-reduced-motion` honored — `wiggle` and `bounce-in` collapse to static states, `pop-color` collapses to a flat color swap.
+
+## Component patterns
+- **Buttons:** chunky rounded, magenta solid by default with foreground text and a hard `.shadow-sticker` drop. `rounded-3xl` baseline; pills allowed for tags and compact actions. Hover triggers `wiggle` + lifts to `.shadow-sticker-lg`. Secondary buttons swap magenta for any brand token (sun, sky, slime, grape). Fill is the norm, ghost is the exception.
+- **Cards:** 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.
+- **Inputs:** 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.
+- **CTAs:** 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.
+
+## Component families
+None at install time. Patterns to expect: sticker-shadow cards, color-block tag rows, oversized chunky-display heroes, mono-label captions. The Director appends conventions here as they're established.
+
+## Details
+- **Selection:** `hsl(var(--brand-sun) / 0.6)` background, foreground text. Sun-yellow highlights the way a kid drags a crayon across a coloring book.
+- **Focus ring:** `3px solid hsl(var(--ring))` — thick magenta to match the chunky border language. A 1px ring would disappear against the decoration.
+- **Scrollbar:** auto. Native scrollbars are fine; the page already carries enough decoration.
+
+## Recommended rich media
+
+This direction leans on imagery — the cartoon sensibility wants illustration alongside type.
+
+**Cover & hero imagery:**
+- Flat illustrations in the Adventure Time / Cuphead-rubber-hose vocabulary — hand-drawn wobble, flat color, thick inked outline.
+- Character-led photography — a single warm-lit subject (Pixar feel), placed centrally on a brand-token background.
+- Expressive iconography — chunky outlined icons that feel custom-drawn, not Material/Heroicon-set.
+
+**AI tool recommendations:**
+- **Recraft** for vector flat illustrations with hand-drawn wobble. Best match for the Adventure Time / Push Pin lineage.
+- **Midjourney / Flux** for character renders. Prompt scaffold: *"Cartoon Network bumper graphics, flat illustration, chunky colors, hand-drawn wobble, Adventure Time aesthetic"*. Append a single subject and a 1:1 or 4:5 aspect ratio.
+- **Stable Diffusion + a custom rubber-hose LoRA** for character-led illustration with consistent style.
+
+**Aspect ratios:**
+- 1:1 square (Instagram-friendly, fits the sticker-card layout).
+- 4:5 portrait (cartoon character-card framing).
+- 16:9 landscape allowed for bumper-strip heroes; not the default.
+
+**Color discipline for imagery:**
+Lean into the full brand palette — every illustration uses at least 3 of the named tokens (magenta, slime, sun, sky, cherry, grape). A single-color image reads as a different direction. Backgrounds in imagery should match or contrast cream — never go dark moody.
+
+**What to AVOID:**
+- Photorealism — character-led warmth is fine, but documentary-real photography breaks the cartoon sensibility.
+- Gradient meshes and soft-glow renders — that's soft-modern territory, not Saturday morning.
+- Dark moody palettes — `--background` is bright cream; dark heroes break the kitchen-window-light premise.
+- Comic Sans literally, or anything that drifts toward "kids' birthday clip-art" — chunky is the goal, naive is the failure mode.
+- Soft gaussian drop shadows on imagery — flat sticker shadows or nothing.
+
+**Accessibility:**
+High decoration count means more `aria-hidden` on purely ornamental elements (sticker peels, wiggle hover targets that aren't focusable, decorative wobble ornaments). Alt-text must distinguish content imagery from ornament. Color contrast is preserved by `--ink` on cream and by `--ink` on every brand token; verify any custom color-on-color pairing meets WCAG AA before shipping — magenta-on-sun and slime-on-sky in particular need a contrast check.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

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",
+  },
+};