@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/stadium-sport/THEME.md

@@ -0,0 +1,114 @@
+# Design Direction — Stadium Sport
+
+## Ethos
+Nike condensed display · Bleacher Report energy · ESPN broadcast urgency · Adidas three-stripe heritage · Champions League stadium scale
+
+## Feel
+High-energy broadcast aesthetic. Condensed bold display type at oversized "JUMBOTRON" scale. Action photography is the lead medium; UI is a stadium scoreboard. Reads as live and urgent — not contemplative. The surface should feel like a broadcast graphics layer over a packed stadium, not a magazine spread.
+
+## Reference brands
+- **Nike** → condensed all-caps headlines, athletic urgency, swoosh momentum. Display type carries the brand; copy moves at the speed of an athlete.
+- **Bleacher Report** → energetic sports media, dense action photography. Information density and a relentless feed of moments.
+- **ESPN SportsCenter** → broadcast urgency, score tickers, primary-red. The lower-third aesthetic — scores, timecodes, LIVE chips.
+- **Adidas** → three-stripe industrial heritage, technical sportswear. Hairline panel gaps and industrial grays underneath the urgency.
+- **Champions League / UEFA** → stadium-scale typography, monumental moments. The H1 is a wall, not a headline.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand·trait. Untraceable tokens fail review.
+
+Surface stack steps in ~3% lightness from `bg → card → popover → secondary → muted → accent`, holding a near-neutral hue (`0 0%`) — the stadium void is achromatic, the scarlet is the only color event. Depth comes from **hairline borders, the scarlet glow, and the JUMBOTRON drop shadow** — not from blanket fill contrast.
+
+Brand tokens: `--scarlet` (Nike/ESPN urgency, alias of primary), `--jet` (Champions League pure void, behind broadcast graphics), `--electric` (ESPN broadcast electric blue, for score overlays and lower-third accents), `--gold-medal` (championship gold, trophy and winner moments).
+
+Primary is **broadcast scarlet** (`16 90% 50%`) — the only saturated color on the page. Use it for the single hero CTA per surface, the LIVE dot, and broadcast-urgency moments. Electric blue and gold-medal are reserved as named accents — never elevated to the primary slot.
+
+## Typography
+- **Display:** Anton (Nike condensed headline canonical). Single weight 400 — Anton ships as one cut. ALL CAPS by default; tracking `0.02em` to give condensed glyphs broadcast clarity at scale.
+- **Body:** Inter (clean, neutral — lets photography lead). Base 16px, line-height 1.55. Tracking `0`. Inter is the broadcast caption voice; the type does not perform, the photography does.
+- **Mono:** JetBrains Mono. Reserved for scores, stats, timecodes, jersey numbers, prices, any tabular numeric — broadcast score-ticker DNA. `"tnum"` on by default.
+
+H1 uses `clamp(3.5rem, 10vw, 8.5rem)` — **JUMBOTRON scale**. Display headings default to `text-transform: uppercase`. Font features: `"tnum", "ss01", "cv11"`.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-8`. Action photography and 21:9 hero footage demand width.
+- **Section padding tiers:**
+  - Hero: `pt-16 pb-12 lg:pt-24 lg:pb-16` — tight relative to editorial directions; broadcast pacing.
+  - Default: `py-12 lg:py-20`
+  - Tight: `py-8 lg:py-12`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 80 96 128. **Medium-high density** — broadcast information-dense, not crammed.
+
+## Color
+No hex in component files. All color via tokens. Opacity via `/N` modifier on token. Pure white is forbidden in body — `--foreground` (`0 0% 98%`) is broadcast white, never `#fff`. Pure black is reserved for `--jet` (`0 0% 4%`) — used as the void behind broadcast overlays; the live `--background` is `0 0% 8%` (deep broadcast black with the slightest lift off true black).
+
+Scarlet and gold-medal are **never used together at full saturation on the same surface** — they fight. Convention: scarlet for urgency, CTAs, LIVE; gold-medal for championship/winner moments; electric blue for data overlays and score callouts.
+
+## Radius
+`--radius: 0.25rem` (4px). **Sharp athletic, not pillow-soft.** Pills are disallowed (`pillsAllowed: false`) — pills read lifestyle app; broadcast UI is rectangular scoreboard tiles. Every corner is a scoreboard corner.
+
+## Shadows
+**Glow style.** Three utilities:
+- `.glow-scarlet` — `0 0 0 1px scarlet/0.4, 0 8px 24px scarlet/0.28, 0 32px 80px scarlet/0.22`. Multi-layer scarlet halo plus a 1px ring. Use on primary CTAs and hero/feature cards holding rich action photography.
+- `.shadow-jumbotron` — `0 16px 32px jet/0.6, 0 40px 80px jet/0.5`. Heavy mono drop shadow — the broadcast-overlay weight. Sits under primary buttons and floating scoreboard tiles.
+- `.glow-electric` — `0 0 0 1px electric/0.4, 0 8px 24px electric/0.28`. Score-overlay and data-callout glow.
+
+Conventional drop shadows outside these utilities are forbidden. The glow IS the elevation language, and the jumbotron shadow IS the broadcast-overlay depth.
+
+## Motion
+Four keyframes. High-energy — durations cluster at **400–500ms (reveals), 1s (LIVE loops), 24s (ticker ambient)**:
+- `score-flip` (400ms once) — vertical card flip (`rotateX 0 → -90 → 0`). Stat reveals, flip-clock score changes.
+- `slide-bold` (500ms once) — opacity + 40px translate from below. Headline entrance, broadcast lower-third.
+- `pulse-urgent` (1000ms infinite) — expanding scarlet box-shadow ring + opacity pulse. The LIVE-indicator heartbeat. **One per surface max.**
+- `ticker-scroll` (24000ms infinite) — `translateX(0 → -50%)`. Score-ticker bottom bar.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — every keyframe is wrapped in the media query and `pulse-urgent` / `ticker-scroll` collapse to a static frame.
+
+## Component patterns
+- **Buttons:** primary is **solid scarlet, ALL CAPS Anton**, tracking `0.04em`, `rounded-sm`, paired with `.shadow-jumbotron`. It reads like a stadium-scoreboard tile. Secondary is ghost (1px border + foreground text, also ALL CAPS condensed). **No pill shapes.**
+- **Cards:** sharp `rounded-sm`, hairline 1px `--border`, `bg-card` one stop above the void. Padding `p-5 lg:p-8` — broadcast info-dense. Hero/feature cards holding action photography may use `.glow-scarlet` or `.shadow-jumbotron`. Stat cards lead with mono numerals (JetBrains Mono, tabular-nums).
+- **Inputs:** full `rounded-sm` box, 1px border, `bg-card`. Focus = `2px solid var(--ring)` (scarlet). Label above in `font-display` (Anton) `tracking-[0.06em] uppercase` small size.
+- **CTAs:** primary scarlet ALL CAPS Anton button with `.shadow-jumbotron` is the default. `.pulse-urgent` permitted on a single LIVE/now indicator per surface — never more than one. Tertiary is a foreground text link with 1px underline at 4px offset.
+
+## Component families
+None at install time. Likely first families as the project grows: `ScoreCard` (flip-clock + mono numerals), `LiveBadge` (pulse-urgent dot + label), `TickerStrip` (ticker-scroll bottom bar), `JumbotronHeadline` (clamp-scaled Anton over hero photography).
+
+## Recommended rich media
+
+**Cover medium.** Action photography (athletes mid-motion) is the lead. Stadium aerials anchor section openers; slow-motion video loops at 21:9 carry the hero. Broadcast overlay graphics — scoreboards, lower-thirds, stat callouts — layer over the photography, not replace it.
+
+**AI tool recommendations.**
+- *Photography / hero stills:* **Midjourney** or **Flux**. Prompt pattern: `"Nike sports campaign photography, slow-motion athlete, stadium light, dramatic shadows, 35mm, broadcast aesthetic"`. Vary sport (sprint, basketball, football, cycling), lens (35mm / 85mm / drone-aerial), and lighting (stadium floodlights / golden-hour pre-game / night-game) to keep a set cohesive.
+- *Video:* **Sora**, **Runway**, or **Pika** for hero loops. Prompt with shot language: `"slow-motion athlete, stadium broadcast lens, anamorphic flare, 24fps cinema, no cuts"`. Hold shots long; the slowdown is the drama.
+- *Broadcast overlays:* design in Figma / Recraft, render as PNG/SVG, composite over photography. Scoreboards, lower-thirds, LIVE chips, score callouts — these are graphic elements, not AI-generated.
+
+**Aspect ratios.**
+- **21:9** widescreen for hero stills and video — cinematic broadcast feel.
+- **16:9** for action loops and mid-page video.
+- **1:1** for athlete-portrait grid tiles.
+- **Never vertical 9:16** for hero — this language is broadcast, not TikTok.
+
+**Color grading.** High contrast, deep blacks, scarlet accents pulled forward. Stadium lighting is the natural palette — floodlit greens, hardwood ambers, ice-rink whites, night-game blue casts. Skin tones run warm, never orange. Preserve crowd grain — packed stadiums are part of the look.
+
+**Performance budgets.**
+- Hero photos: ≤200 KB AVIF/WebP at 1920w.
+- Hero videos: ≤8 MB at 1080p, `autoplay muted loop playsinline`, mobile fallback to a still poster frame.
+- Lazy-load anything below the fold; the first paint is the hero photograph + JUMBOTRON headline.
+
+**What to AVOID.**
+- Editorial pacing — long-form spreads, contemplative whitespace. This direction broadcasts, doesn't whisper.
+- Soft pastels — every saturated color here is scarlet, electric blue, or gold-medal. No mauves, no sage, no cream.
+- Decorative serif type — Anton is the only display face. No serifs anywhere; serifs read editorial, not broadcast.
+- Stock studio sports photography with logos blurred — use AI-generated or attributed action photography that reads as a real moment.
+- Vertical 9:16 hero video — this is a stadium, not a phone feed.
+
+**Accessibility.** Every video has a still `poster` attribute. Alt-text names the action and the sport (`"sprinter mid-stride at the finish line under stadium floodlights"`). Decorative overlays use `aria-hidden="true"`. Captions on any video with audio. `pulse-urgent` and `ticker-scroll` are disabled under `prefers-reduced-motion`.
+
+## Details
+- **Selection:** `hsl(var(--scarlet) / 0.35)` background, foreground text — a flash of broadcast scarlet.
+- **Focus ring:** `2px solid hsl(var(--ring))` — visible, scarlet, never quiet.
+- **Scrollbar:** thin.
+
+## 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/stadium-sport/tokens.ts

@@ -0,0 +1,187 @@
+import type { Direction } from "../schema";
+
+export const stadiumSport: Direction = {
+  name: "stadium-sport",
+  ethos:
+    "Nike condensed display · Bleacher Report energy · ESPN broadcast urgency · " +
+    "Adidas three-stripe heritage · Champions League stadium scale",
+  references: [
+    { brand: "Nike", trait: "condensed all-caps headlines, athletic urgency, swoosh momentum" },
+    { brand: "Bleacher Report", trait: "energetic sports media, dense action photography" },
+    { brand: "ESPN SportsCenter", trait: "broadcast urgency, score tickers, primary-red" },
+    { brand: "Adidas", trait: "three-stripe industrial heritage, technical sportswear" },
+    { brand: "Champions League / UEFA", trait: "stadium-scale typography, monumental moments" },
+  ],
+  feel:
+    "High-energy broadcast aesthetic. Condensed bold display type at oversized 'JUMBOTRON' scale. " +
+    "Action photography is the lead medium; UI is a stadium scoreboard. " +
+    "Reads as live and urgent — not contemplative.",
+
+  fonts: {
+    display: {
+      family: "Anton",
+      fallback: ["Oswald", "Impact", "Haettenschweiler", "Arial Narrow Bold", "sans-serif"],
+      from: "Nike condensed headline — broadcast-poster weight, JUMBOTRON-scale all-caps",
+      googleFont: "Anton",
+      weights: [400],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "clean, neutral body — lets action photography lead, ESPN caption voice",
+      googleFont: "Inter",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "scores, stats, timecodes, tabular numerics — broadcast score-ticker DNA",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "0.02em",          // condensed display sans needs a touch of air for broadcast clarity
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "ss01", "cv11"',
+    h1ScaleClamp: "clamp(3.5rem, 10vw, 8.5rem)",   // JUMBOTRON scale — Champions League monumental
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "0 0% 8%", from: "deep broadcast black — Champions League stadium void" },
+    foreground: { hsl: "0 0% 98%", from: "high-contrast broadcast white — ESPN graphics layer" },
+    card: { hsl: "0 0% 11%", from: "elevated scoreboard surface, one stop above the void" },
+    popover: { hsl: "0 0% 13%", from: "broadcast overlay popover — two stops above the void" },
+    primary: { hsl: "16 90% 50%", from: "Nike orange / ESPN scarlet — broadcast urgency accent" },
+    primaryForeground: { hsl: "0 0% 98%", from: "broadcast white on scarlet — CTA legibility" },
+    secondary: { hsl: "0 0% 16%", from: "Adidas industrial gray — technical sportswear shadowed tier" },
+    secondaryForeground: { hsl: "0 0% 98%", from: "broadcast white on Adidas industrial gray" },
+    muted: { hsl: "0 0% 18%", from: "Adidas industrial gray, one tick lighter — muted scoreboard panel" },
+    mutedForeground: { hsl: "0 0% 70%", from: "Bleacher Report caption gray — secondary stat text" },
+    accent: { hsl: "0 0% 20%", from: "Adidas industrial gray — broadcast hover panel highlight" },
+    accentForeground: { hsl: "0 0% 98%", from: "broadcast white on accent panel" },
+    border: { hsl: "0 0% 22%", from: "Adidas three-stripe hairline — visible scoreboard panel-gap" },
+    input: { hsl: "0 0% 22%", from: "Adidas hairline — same language as border" },
+    ring: { hsl: "16 90% 50%", from: "Nike scarlet — focus ring is the broadcast-urgency accent" },
+    destructive: { hsl: "0 85% 55%", from: "ESPN penalty-card red — louder than scarlet, alert hue" },
+    destructiveForeground: { hsl: "0 0% 98%", from: "broadcast white on penalty red" },
+    brand: {
+      scarlet: { hsl: "16 90% 50%", from: "Nike/ESPN scarlet — alias of primary, broadcast urgency" },
+      jet: { hsl: "0 0% 4%", from: "Champions League stadium black — the pure void behind broadcast graphics" },
+      electric: { hsl: "210 100% 55%", from: "ESPN broadcast electric blue — score overlay/lower-third accent" },
+      "gold-medal": { hsl: "44 95% 55%", from: "Champions League championship gold — trophy and winner accent" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128],   // medium-high density — broadcast info-dense
+    containerMax: "max-w-7xl",         // wide — action photography and 21:9 hero footage need it
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-16 pb-12 lg:pt-24 lg:pb-16",
+      default: "py-12 lg:py-20",
+      tight: "py-8 lg:py-12",
+    },
+  },
+
+  radius: {
+    base: "0.25rem",                  // 4px — sharp athletic, not pillow-soft, scoreboard rectangle
+    pillsAllowed: false,              // pills read lifestyle app; broadcast UI is rectangles and tickers
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-scarlet":
+        "0 0 0 1px hsl(var(--scarlet) / 0.4), " +
+        "0 8px 24px hsl(var(--scarlet) / 0.28), " +
+        "0 32px 80px hsl(var(--scarlet) / 0.22)",
+      "shadow-jumbotron":
+        "0 16px 32px hsl(var(--jet) / 0.6), " +
+        "0 40px 80px hsl(var(--jet) / 0.5)",
+      "glow-electric":
+        "0 0 0 1px hsl(var(--electric) / 0.4), " +
+        "0 8px 24px hsl(var(--electric) / 0.28)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 500,                    // slide-bold — fast, broadcast-cut entrance
+      loop: 1000,                     // pulse-urgent — LIVE-indicator heartbeat
+      ambient: 12000,                 // ticker marquee, ambient scoreboard motion
+    },
+    keyframes: {
+      "score-flip": {
+        css:
+          "0% { transform: rotateX(0); }\n" +
+          "50% { transform: rotateX(-90deg); }\n" +
+          "100% { transform: rotateX(0); }",
+        defaultDuration: 400,
+        iteration: "once",
+        purpose: "vertical card flip for stat reveals — flip-clock score change",
+      },
+      "slide-bold": {
+        css:
+          "from { opacity: 0; transform: translateY(40px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 500,
+        iteration: "once",
+        purpose: "slide-in from below for headlines — broadcast lower-third entrance",
+      },
+      "pulse-urgent": {
+        css:
+          "0%, 100% { box-shadow: 0 0 0 0 hsl(var(--scarlet) / 0.7); opacity: 1; }\n" +
+          "50% { box-shadow: 0 0 0 10px hsl(var(--scarlet) / 0); opacity: 0.85; }",
+        defaultDuration: 1000,
+        iteration: "infinite",
+        purpose: "signal pulse for LIVE indicators — the on-air heartbeat",
+      },
+      "ticker-scroll": {
+        css:
+          "from { transform: translateX(0); }\n" +
+          "to { transform: translateX(-50%); }",
+        defaultDuration: 24000,
+        iteration: "infinite",
+        purpose: "horizontal score-ticker scroll — broadcast bottom-bar",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Primary = solid scarlet (bg-primary, primary-foreground text), font-display (Anton), " +
+      "ALL CAPS, tracking 0.04em, sharp rect (rounded-sm). " +
+      "Drop shadow uses mono ink (.shadow-jumbotron) — broadcast-overlay weight. " +
+      "Secondary is ghost (1px border, foreground text, ALL CAPS condensed). " +
+      "No pill shapes — every CTA reads like a stadium scoreboard tile.",
+    card:
+      "Sharp rounded-sm corners, hairline 1px var(--border), bg-card one stop above the void. " +
+      "Padding p-5 lg:p-8 — broadcast info-dense. " +
+      "Hero/feature cards holding rich media may use .glow-scarlet or .shadow-jumbotron. " +
+      "Stat cards lead with mono numerals (JetBrains Mono, tabular-nums).",
+    input:
+      "Full rounded-sm box, 1px border, bg-card. Focus = 2px scarlet ring. " +
+      "Label above in font-display (Anton) tracking 0.06em uppercase at small size; " +
+      "helper text below in mutedForeground.",
+    cta:
+      "Primary = solid scarlet ALL CAPS Anton button with .shadow-jumbotron — the broadcast-CTA. " +
+      ".pulse-urgent permitted on a single LIVE/now indicator per surface, never on more than one. " +
+      "Tertiary is a foreground-color text link with 1px underline at 4px offset — score-ticker honest.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--scarlet) / 0.35)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/streetwear-hype/THEME.md

@@ -0,0 +1,100 @@
+# Design Direction — Streetwear Hype
+
+## Ethos
+Supreme red box logo · Off-White typewriter italics · Stüssy graffiti heritage · Palace tri-ferg · Yeezy beige neutrality
+
+## Feel
+Hype-culture pageantry. Bold Futura-style display in confident caps. Red box logo treatments. Typewriter Courier italics in "QUOTES" everywhere (the Virgil signature). Sticker-style hard-offset shadows. Reads as drop-day energy.
+
+## Reference brands
+- **Supreme** → red box logo, blackletter italic, sticker culture. The rectangle is the brand.
+- **Off-White / Virgil Abloh** → Helvetica with quote-marks around "EVERYTHING", industrial typewriter. Captions on the world.
+- **Stüssy** → graffiti-script signature, surf-skate heritage. The original hand-drawn drop.
+- **Palace** → tri-ferg logo, British irony, neon highlights. The wink inside the hype.
+- **Yeezy** → Kanye's beige neutrality. The high-end streetwear move — bone is louder than color.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin. The surface stack is **bone** (background) → **bone** (card) → **deeper oat** (muted) — Yeezy neutrality carries through. Depth never comes from soft fill differentiation; it comes from **hard tar borders** and the **`.shadow-sticker`** utility.
+
+Brand tokens (named, never numbered): `--supreme-red` (= primary), `--palace-neon` (= accent), `--safety-orange` (= destructive), `--bone` (= background), `--tar` (= foreground). Five tokens, no more — this is not maximalist's eight-color paint box; it is a tight box-logo system.
+
+Primary is **Supreme red** (`0 95% 50%`) — the canonical hype-drop accent. Foreground is **hard tar** (`0 0% 4%`), one tick off pure black for ink fidelity. Background is **Yeezy oat** (`35 25% 95%`), warm bone — never pure white.
+
+## Typography
+- **Display:** Inter at weight **900** with very tight tracking (`-0.04em`). This is the open-source stand-in for **Druk Wide / Futura Heavy** — confident bold sans in all caps. Loaded as `Inter:wght@900` from Google Fonts. The drop-poster voice.
+- **Body:** **Courier Prime** at 16px (`Courier+Prime:wght@400;700`). The Off-White / Virgil industrial-typewriter signature — running prose looks like a shipping label. Line-height `1.5`. Body tracking `0.02em` to let Courier breathe.
+- **Mono:** **Courier Prime again.** Virgil convention: mono and body are the same face. Mono is not a separate voice — it is the voice.
+
+Font features: `"ss01", "tnum"` — tabular figures for drop-lists, price tags, and SKU tables. H1 clamps at `clamp(2.75rem, 8vw, 6rem)` — drop-poster scale, all caps, unafraid.
+
+**The quote-mark idiom.** Headings and labels regularly wrap a single word in straight quotes: `"HOODIE"`, `"E-MAIL"`, `"SHOP ALL"`. This is the Virgil signature and it is on-direction. The `quotes-jitter` keyframe (see Motion) is built for it.
+
+## Spacing
+- **Container:** `max-w-5xl px-4 lg:px-8` — drop-page width. Wide enough for product flatlay grids and the manifesto column; tighter than maximalist's decoration-padded `5xl`.
+- **Section padding tiers:**
+  - Hero: `pt-16 pb-12 lg:pt-24 lg:pb-16` — drop-banner generosity, but the type does the work, not the whitespace.
+  - Default: `py-12 lg:py-20`
+  - Tight: `py-8 lg:py-12`
+- **Allowed scale values:** 2 4 6 8 12 16 20 24 32 48. Medium-high density — sharper than maximalist, looser than brutalist. The `2` step is reserved for inline icon-to-text gaps.
+
+## Color
+No hex anywhere. **Bone (`--background`) and tar (`--foreground`) are the foundation** — pure white and pure black are out of language. The drop palette is precisely five tokens: bone, tar, Supreme red, Palace neon, safety orange. Every additional color reads as a different direction.
+
+Components are encouraged to override their background with `--tar` (the box-logo inverse panel) or `--supreme-red` (the box-logo itself). Palace neon is the highlight, never the primary — it lives at hover state and selection. Safety orange is the destructive lane, kept far from Supreme red so the two never collide.
+
+## Radius
+`--radius: 0`. **Sharp box-logo corners only.** Pills are disallowed (`pillsAllowed: false`) — status badges, capsule buttons, and rounded inputs all read web-app, not drop-page. The entire language is right angles; the only "rounding" allowed is the sticker shadow's offset.
+
+## Shadows
+**Style: none.** A single utility: **`.shadow-sticker`** — `4px 4px 0 0 hsl(var(--foreground))`. Hard offset, zero blur, foreground-colored. This is the sticker-decal / Supreme paste-up move and it is the only shadow this language ships. Soft drop shadows, glows, and ambient elevations are out of direction.
+
+## Motion
+Drop-day timing. Two keyframes:
+
+- **`box-pop`** — scale `0.92 → 1.02 → 1`, 200ms once. Supreme box-logo entrance with overshoot. Used for primary buttons, badges, drop banners — the "it just dropped" feel.
+- **`quotes-jitter`** — rotate `-1deg → 1deg → -1deg`, 800ms infinite. Subtle Virgil-style vibrating italic. Applied to text wrapped in quote marks (`"FOR DISPLAY ONLY"`). The twitch is small enough to feel like a glitch and large enough to read as intentional.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored — the jitter is suppressed entirely under reduced motion, and `box-pop` collapses to a no-op.
+
+## Component patterns
+- **Buttons:** Primary = the Supreme red box. Bold Inter 900 caps on `--supreme-red` background, sharp 0 radius, no internal border. Hover engages `.shadow-sticker` — the button gains a 4px 4px tar offset like a sticker just got slapped on. Secondary = the inverse: tar panel with bone caps. **No ghost buttons, no pills, no rounded.** Drop-day energy commits to fill and right angles.
+- **Cards:** 1px or 2px hard tar border, bone background (or any brand token as panel override). Sharp 0 radius. Internal padding `p-6 lg:p-8`. Title in Inter 900 caps, often with quote marks around a single word (`"HOODIE"`). Optional `.shadow-sticker` for the drop-flyer pinned-to-the-wall look.
+- **Inputs:** full box with 2px tar border, bone bg. Sharp corners. Label sits above in Courier caps with quote marks (`"E-MAIL"`). Focus shifts border to Supreme red (the ring). **No border-bottom-only treatment** — that's editorial language.
+- **CTAs:** filled red box-logo rectangle, bold Inter 900 caps, sticker shadow on hover. Secondary CTAs may be Courier-italic links wrapped in quote marks (`"SHOP ALL"`) with an underline. **Never a plain text link without quotes** — every CTA carries the Virgil signature.
+
+## Component families
+None at install time. Patterns to expect: red-box-logo CTAs, tar inverse panels, sticker-shadow cards, quote-mark headlines, Courier-italic captions, drop-list tables with tabular figures. The Director appends conventions here as they're established.
+
+## Details
+- **Selection:** `hsl(var(--brand-palace-neon) / 0.6)` background, foreground text. The high-vibration Palace neon doubles as selection — the only place neon touches body type.
+- **Focus ring:** `2px solid hsl(var(--ring))` — Supreme red, 2px to match input border weight. Visible against bone without overwhelming the box-logo language.
+- **Scrollbar:** auto. Native — drop pages let the browser scrollbar through; restyling it is a soft-modern affordance.
+
+## Recommended rich media
+
+**Cover imagery.** Streetwear lookbook photography (model on warm seamless or street, harsh on-camera flash style), product flatlays, sticker art, screen-print textures. Imagery should read as if it came off a drop-day Instagram grid — direct, bright-flashed, no romance.
+
+**AI tool recommendations.**
+- **Midjourney** with prompts like `"streetwear lookbook photography, on-camera flash, Supreme drop, warm beige seamless, harsh shadow, Virgil Abloh aesthetic"` — the lookbook hero shot.
+- **Recraft** for sticker / graphic mark generation — the Supreme paste-up, the Stüssy script tag, the tri-ferg sticker.
+- **Carbon / Ray.so** with a custom theme on warm bone background for "drop list" text panels — release schedules, SKU tables, manifesto blocks rendered as image.
+
+**Aspect ratios.** 1:1 square (drop-post Instagram standard, the native format for this language) and 4:5 portrait (product-page primary). 16:9 landscape is out of direction — drop-day imagery is square or vertical.
+
+**Color in imagery.** Imagery sits on the bone/red/tar/neon system. A lookbook shot may have one Palace neon prop and otherwise read tar-on-bone. Product flatlays should feature **at least one** of: Supreme red, Palace neon, or safety orange — but not all three.
+
+**What to AVOID.**
+- Warm color grading on photography (this direction is bone + red + black + neon — not the cream-grade of maximalist or the teal-and-orange of cinematic)
+- Gradient meshes — every gradient in this language is "off"
+- Decorative serifs anywhere — confident industrial type is the direction; if a serif appears, it is the wrong direction
+- Soft drop shadows on imagery (the language is `.shadow-sticker` only — hard offset, zero blur)
+- Pastel palettes, watercolor textures, hand-drawn flourishes (those are saturday-morning or runway-fashion)
+- Lifestyle stock photography with smiling models in coffee shops
+
+**Accessibility.** The Supreme-red-on-bone primary CTA meets WCAG AA at 16px+ bold; verify any red-on-bone body text — it doesn't pass at small sizes, so body type stays tar. Palace neon on bone fails AA for body text by design — it is reserved for selection, hover highlights, and large display only. Alt-text should describe the drop, not the photography: "white Supreme box-logo tee on bone seamless" not "model wearing shirt."
+
+## 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/streetwear-hype/tokens.ts

@@ -0,0 +1,174 @@
+import type { Direction } from "../schema";
+
+export const streetwearHype: Direction = {
+  name: "streetwear-hype",
+  ethos:
+    "Supreme red box logo · Off-White typewriter italics · Stüssy graffiti heritage · Palace tri-ferg · Yeezy beige neutrality",
+  references: [
+    { brand: "Supreme", trait: "red box logo, blackletter italic, sticker culture" },
+    { brand: "Off-White / Virgil Abloh", trait: 'Helvetica with quote-marks around "EVERYTHING", industrial typewriter' },
+    { brand: "Stüssy", trait: "graffiti-script signature, surf-skate heritage" },
+    { brand: "Palace", trait: "tri-ferg logo, British irony, neon highlights" },
+    { brand: "Yeezy", trait: "Kanye's beige neutrality — the high-end streetwear move" },
+  ],
+  feel:
+    "Hype-culture pageantry. Bold Futura-style display in confident caps. Red box logo treatments. " +
+    'Typewriter Courier italics in "QUOTES" everywhere (the Virgil signature). Sticker-style hard-offset ' +
+    "shadows. Reads as drop-day energy.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["Futura", "Helvetica Neue", "Arial Black", "system-ui", "sans-serif"],
+      from: "Druk Wide / Futura Heavy stand-in — Inter at weight 900 with very tight tracking; confident bold sans, the drop-poster voice",
+      googleFont: "Inter:wght@900",
+      weights: [400, 900],
+    },
+    body: {
+      family: "Courier Prime",
+      fallback: ["Courier New", "Inter", "ui-monospace", "monospace"],
+      from: "Off-White / Virgil industrial typewriter — Courier as body face is the Virgil signature, prose looks like a shipping label",
+      googleFont: "Courier+Prime:wght@400;700",
+      weights: [400, 700],
+    },
+    mono: {
+      family: "Courier Prime",
+      fallback: ["Courier New", "ui-monospace", "SFMono-Regular", "monospace"],
+      from: "Virgil convention — body AND mono share Courier; mono is not a separate voice, it is the voice",
+      googleFont: "Courier+Prime:wght@400;700",
+      weights: [400, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.04em",            // Druk/Futura caps want very tight tracking — Inter 900 needs it tighter still
+    bodyTracking: "0.02em",                // Courier Prime widens slightly — Virgil's typewriter caption look
+    fontFeatureSettings: '"ss01", "tnum"', // tabular figures — drop-list and price-tag heritage
+    h1ScaleClamp: "clamp(2.75rem, 8vw, 6rem)",  // drop-poster scale: large, all-caps, unafraid
+    bodyBaseSize: "1rem",                  // 16px Courier — typewriter dignity
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "35 25% 95%", from: "Yeezy oat — Kanye beige neutrality, the high-end streetwear bone surface" },
+    foreground: { hsl: "0 0% 4%", from: "hard black — Supreme box-logo ink, screen-print black" },
+    card: { hsl: "35 25% 95%", from: "same as background — surfaces don't differentiate by fill; depth comes from sticker shadow" },
+    popover: { hsl: "35 25% 95%", from: "same as background — Yeezy oat throughout, no nested fills" },
+    primary: { hsl: "0 95% 50%", from: "Supreme red box logo — the canonical hype-drop accent" },
+    primaryForeground: { hsl: "35 25% 95%", from: "Yeezy oat on Supreme red — bone cream on the box logo, never pure white" },
+    secondary: { hsl: "0 0% 4%", from: "tar black — secondary action is the box-logo inverse, hard black panel" },
+    secondaryForeground: { hsl: "35 25% 95%", from: "Yeezy oat on tar — the screen-print negative" },
+    muted: { hsl: "35 15% 88%", from: "deeper oat — Yeezy quiet panel, muted backdrop for body copy" },
+    mutedForeground: { hsl: "0 0% 30%", from: "Off-White industrial gray — typewriter caption color, secondary text" },
+    accent: { hsl: "90 95% 55%", from: "= brand.palace-neon — Palace neon yellow-green, hover and highlight accent" },
+    accentForeground: { hsl: "0 0% 4%", from: "tar on Palace neon — only legible direction" },
+    border: { hsl: "0 0% 4%", from: "tar — hard black 1px (or 2px) border, screen-print outline" },
+    input: { hsl: "0 0% 4%", from: "same as border — inputs wear the hard black box-logo outline" },
+    ring: { hsl: "0 95% 50%", from: "Supreme red — focus only, matches primary" },
+    destructive: { hsl: "24 100% 55%", from: "= brand.safety-orange — industrial caution orange, distinct from Supreme red" },
+    destructiveForeground: { hsl: "0 0% 4%", from: "tar on safety orange — hazard-sign legibility" },
+    brand: {
+      "supreme-red": {
+        hsl: "0 95% 50%",
+        from: "= primary; Supreme red box logo, the canonical hype-drop accent, also semantic for brand-mark surfaces",
+      },
+      "palace-neon": {
+        hsl: "90 95% 55%",
+        from: "Palace neon yellow-green — tri-ferg highlight, British-irony zing against the bone/black system",
+      },
+      "safety-orange": {
+        hsl: "24 100% 55%",
+        from: "industrial caution orange — Virgil's construction-site signage, hazard tape, shipping label energy",
+      },
+      bone: {
+        hsl: "35 25% 95%",
+        from: "= background; Yeezy oat — Kanye beige neutrality, also a named token because components reach for it as fill",
+      },
+      tar: {
+        hsl: "0 0% 4%",
+        from: "= foreground; hard black ink, screen-print black, also semantic for the box-logo inverse panel",
+      },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 12, 16, 20, 24, 32, 48],   // medium-high — drop-poster compositions need room for type, but density stays sharp
+    containerMax: "max-w-5xl",                      // drop-page width — wide enough for product flatlay grids and the manifesto column
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-16 pb-12 lg:pt-24 lg:pb-16",
+      default: "py-12 lg:py-20",
+      tight: "py-8 lg:py-12",
+    },
+  },
+
+  radius: {
+    base: "0",                              // sharp box-logo corners — the entire language is right angles
+    pillsAllowed: false,                    // no pills — drop-day energy is rectangular, sticker-decal, screen-print
+  },
+
+  shadows: {
+    style: "none",
+    utilities: {
+      "shadow-sticker":
+        "4px 4px 0 0 hsl(var(--foreground))",  // hard offset, zero blur — sticker decal feel, Supreme paste-up energy
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 200,                          // box-pop entrance — drop-day immediacy
+      loop: 800,                            // quotes-jitter — slow vibrating italic
+      ambient: 800,                         // same as loop — there is no slow ambient in this language
+    },
+    keyframes: {
+      "box-pop": {
+        css:
+          "0% { transform: scale(0.92); }\n" +
+          "60% { transform: scale(1.02); }\n" +
+          "100% { transform: scale(1); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "drop-day entrance — Supreme box-logo arriving with overshoot, used for primary buttons, badges, drop banners",
+      },
+      "quotes-jitter": {
+        css:
+          "0%, 100% { transform: rotate(-1deg); }\n" +
+          "50% { transform: rotate(1deg); }",
+        defaultDuration: 800,
+        iteration: "infinite",
+        purpose: 'subtle vibrating Virgil-style italic — applied to text wrapped in quote marks ("FOR DISPLAY ONLY") to mimic the Off-White twitch',
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = Supreme red box. Bold caps Inter 900 on Supreme red bg, sharp 0 radius, no internal border. " +
+      "Hover engages .shadow-sticker (the 4px 4px hard-offset sticker decal). Secondary = tar black panel with bone caps. " +
+      "No ghost buttons, no pills, no rounded — drop-day energy commits to fill and right angles.",
+    card:
+      "1px or 2px hard tar border, bone background (or any brand token as panel override). Sharp 0 radius. " +
+      'Internal padding p-6 lg:p-8. Title in Inter 900 caps, often with quote marks around a single word ("HOODIE"). ' +
+      "Optional .shadow-sticker for the drop-flyer pinned-to-the-wall look.",
+    input:
+      "Full box with 2px tar border, bone bg. Sharp corners. Label sits above in Courier caps with quote marks " +
+      '("E-MAIL"). Focus shifts border to Supreme red (ring). No border-bottom-only — that is editorial language.',
+    cta:
+      "Filled red box-logo rectangle with bold Inter 900 caps. Sticker shadow on hover. " +
+      'Secondary CTAs may be Courier-italic links wrapped in quote marks ("SHOP ALL") with an underline. ' +
+      "Never a plain text link without quotes — every CTA carries the Virgil signature.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--brand-palace-neon) / 0.6)",  // Palace neon highlight — the high-vibration accent doubles as selection
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",              // Supreme red, 2px — matches the input border weight
+    scrollbarStyle: "auto",                                // native — drop pages let the browser scrollbar through
+  },
+};