@stylecrib/cli 0.3.1 → 0.3.2

package/themes/crypto-onchain/THEME.md

@@ -0,0 +1,100 @@
+# Design Direction — Crypto-Onchain
+
+## Ethos
+Uniswap pink-magenta gradient · Farcaster warm purple casts · Friend.tech black-gold pixel · Phantom purple glass · OpenSea asset-grid density
+
+## Feel
+Saturated gradients, pixel-art accents, on-chain stat tickers, playful-serious in equal measure. Backgrounds are tinted glass over a near-black purple void; type sits Inter-clean against gradient hero blocks. The 'we live on Base' aesthetic — Web3-native without being a meme coin, dense without being shouty.
+
+## Reference brands
+- **Uniswap** → pink-magenta gradient and Inter type. The gradient is the brand; Inter is the universal sans of the on-chain web.
+- **Farcaster** → warm purple cast cards. Glass-tinted card surfaces with hairline borders, purple cast-author chrome.
+- **Friend.tech** → black, gold, pixel-art borders. The pixel-shadow utility (2px hard offset) is borrowed here, the gold-tier badge treatment too.
+- **Phantom (wallet)** → purple gradient glass surfaces. The wallet UI canon: blurred glass cards over a deep purple void.
+- **OpenSea** → Helvetica and dense asset-grid layout. The asset grid is dense, flat, hairline-bordered — the glow goes on the hero, not on every tile.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin.
+
+Surface stack is **purple-tinted void** → `--card` (glass surface, one stop above) → `--popover` (wallet-menu surface). Depth comes from a combination of glass blur, hairline border, and glow shadow — three coordinated languages.
+
+Brand tokens: `--magenta`, `--magenta-deep`, `--purple`, `--purple-deep`, `--gold`, `--cyan`, `--pixel-shadow`, `--success`. Magenta is the canonical primary; purple is the gradient partner. Gold is reserved for Friend.tech-style pixel-tier badges. Cyan is a chain-badge accent for L2 mentions (Base, Optimism). `--success` is distinct from finance-gains green — it's the tx-confirmation pure-on-chain green.
+
+## Typography
+- **Display:** Inter at 700/800 (Uniswap/OpenSea display). h1–h4. Tracking `-0.03em` — Inter tightens hard at heavy weights for the crypto-display feel.
+- **Body:** Inter 400/500 (Phantom/Farcaster body). Body base **16px** with **line-height 1.55**.
+- **Mono:** JetBrains Mono with the slashed-zero feature on. Wallet addresses, tx hashes, gas prices, token amounts. Always `font-variant-numeric: tabular-nums slashed-zero`.
+
+H1 uses `clamp(2.5rem, 7vw, 5.5rem)` — bold. Gradients deserve scale. Font features: `"tnum", "cv11", "ss01", "zero"`. The slashed zero is non-negotiable — distinguishes 0 from O in addresses and hashes.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-8` — wide. Asset grids span the full bleed.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-16 lg:pt-28 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-10 lg:py-14`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 80 96 128. Medium density — the asset grid is dense, but the hero gradient block is generous.
+
+## Color
+No hex anywhere in component files. All color via tokens.
+
+The magenta-to-purple gradient is the signature brand surface. It appears on the hero block, the primary CTA fill, and the focus glow — and only there. Asset grids and tables stay flat, hairline-bordered, no gradient. Gold is reserved for rare-tier badges and pixel-shadow decoration. Cyan is reserved for chain-name badges.
+
+Opacity via `/N` modifier on token. Pure black is forbidden; `--background` (purple-tinted near-black) replaces it. The pixel-shadow color `--pixel-shadow` is the only deeper-than-background color — used exclusively for the 2px hard-offset shadow on pixel-bordered elements.
+
+## Radius
+`--radius: 1rem` (16px). The Uniswap/Phantom rounded glass surface signature. Pills allowed (`pillsAllowed: true`) for token tickers, chain badges, and address chips. Pixel-bordered elements override base radius to `0` — pixel art and rounded glass do not mix on the same element.
+
+## Shadows
+**Glow.** Five utilities: `.glow-magenta` (primary CTA and hero rim), `.glow-purple` (secondary feature emphasis), `.glow-gold` (rare-tier badge highlight), `.pixel-shadow` (2px hard offset, no blur — the Friend.tech pixel-art drop shadow), `.glass` (inset white-top highlight + deep shadow for glass cards).
+
+Glow utilities carry the signal; the page is dark enough that subtle lift is not enough. The pixel-shadow is a deliberate retro citation — it appears only on pixel-art elements (tier badges, retro mint counters, optional Easter-egg ornament).
+
+## Motion
+Six keyframes: `gradient-drift` (12000ms infinite background-position cycle on the hero gradient), `pulse-glow` (2000ms infinite magenta heartbeat ring on the single page-level CTA), `ticker-scroll` (30000ms infinite marquee for on-chain stat tickers), `fade-rise` (500ms entrance for cards and asset-grid tiles), `pixel-blink` (1000ms hard-step cursor blink — no easing), `number-roll` (240ms replace-and-rise on live socket-tick values).
+
+`gradient-drift` is the signature ambient motion — the hero magenta-to-purple gradient slowly cycles its background-position so the page never feels static. `pulse-glow` is reserved for the single page-level Connect Wallet / Swap / Mint CTA — never more than one element per page. `pixel-blink` uses a hard step, no easing, to read genuinely retro.
+
+Easing on everything else: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored — gradient-drift, pulse-glow, and ticker-scroll all freeze when reduced motion is requested.
+
+## Density
+Medium. The asset grid wants density (4–6 columns on desktop); the hero gradient wants generosity. The canonical reading rhythm is 16/24/32, with 6/8 for asset-card internal padding and 80/128 for hero vertical breathing.
+
+## Component patterns
+- **Buttons:** primary CTAs use a magenta→purple gradient fill with rounded-2xl (16px) and `glow-magenta` utility. Secondary is glass-card style (bg-card with `glass` shadow, `--border`). Tertiary is text-link magenta. Connect Wallet is the single page-level `pulse-glow` element. Pill buttons for token selectors and chain switchers.
+- **Cards:** rounded-2xl (16px), 1px `--border`, `bg-card` with `glass` shadow utility. Padding `p-6 lg:p-8`. Hero/feature cards may use `glow-magenta` or `glow-purple`. Asset-grid cards stay flat with hairline border only — density on the grid, glow on the hero. NFT/asset cards use a 1:1 aspect-ratio media block.
+- **Inputs:** full rounded-xl box, 1px `--input` border, `bg-card`. Amount inputs are oversized (text-3xl, mono) — the Uniswap swap-field treatment. Token selector pill sits inside the input on the right. Focus shifts border to magenta with glow.
+- **CTA:** gradient magenta→purple rect for the primary action (Swap, Mint, Bridge, Connect Wallet). Glow utility carries the signal — no plain flat fills on hero CTAs. Pill buttons with brand-soft bg for chain badges (Base, Optimism, Arbitrum) — text in mono, chain logo on the left.
+
+## Recommended rich media
+Crypto-Onchain leans on **gradient backdrops, asset-grid imagery, and pixel-art ornament**. The hero is a magenta-to-purple gradient with optional pixel-art Easter eggs (a single pixel skull, a pixel coin, a pixel ghost) — Friend.tech-style ornament that signals 'we live on-chain' without being a meme coin.
+
+**NFT/asset imagery** is the headline media on marketplace and profile surfaces. Asset tiles are 1:1, lazy-loaded, with `fade-rise` entrance staggered 40ms per tile in the grid. Floor prices, last-sale, and listing currency live in mono under the asset name.
+
+**On-chain stat tickers** — TVL, gas price, ETH/USD, top floor — scroll as a `ticker-scroll` marquee in the lower third of marketing surfaces. The marquee is a real-data feed, not a decoration; if data is unavailable, the marquee hides rather than showing placeholder values.
+
+**AI tool recommendations:** **Midjourney / Flux** with prompts like *"abstract magenta to purple gradient mesh, soft volumetric light, depth, 4k, web3 hero"* for hero gradients; *"isometric pixel art coin, 32x32, gold and black, transparent background, retro game art"* for pixel-art ornament. **Recraft** for the chain-logo and token-icon sets in flat-vector style. **Rive** for the Connect Wallet button micro-interaction — the wallet handshake animation. Avoid Midjourney defaults that produce shiny 3D crypto-bro coins, lambo imagery, or moon-rocket clichés.
+
+**Aspect ratios:** 16:9 for hero gradient blocks. 1:1 for asset tiles and pixel-art ornament. 21:9 ultrawide for marquee tickers. Never 4:3 — that's enterprise software.
+
+**Video:** allowed for hero gradient ambient loops (≤6s, ≤3MB H.265 with poster) and for product demos of Swap/Mint flows. Auto-play silent ambient loops are acceptable on the hero only — gradient-drift in CSS is preferred, but a hand-rendered video gradient at 24fps reads richer when the budget allows.
+
+**Performance:** hero gradient is CSS by default — image fallback only when the gradient is complex enough to need it. Asset-grid images are AVIF at 600w max, ≤40KB each. LCP target 2.0s on marketplace surfaces where the asset grid is the LCP.
+
+**Avoid:** lambo imagery, moon-rocket clichés, generic crypto-bro 3D coins, Matrix green-on-black, blockchain-as-glowing-cube illustration, NFT-cliche Ape imagery, generic "Web3" stock photography, Helvetica Neue (use Inter — that's the actual on-chain canon now), light-mode designs (this direction is dark-only).
+
+**Accessibility:** wallet addresses always render truncated as `0x1234...abcd` with a copy-to-clipboard button and an `aria-label` containing the full address. Gas prices, percentages, and token amounts include unit suffixes in their accessible names (`"3.2 gwei"`, not `"3.2"`). Magenta meets 4.5:1 against the purple-tinted background at body weight; if used at lighter weights, paired with foreground text instead of as text color.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established.
+
+## Details
+- **Selection:** `hsl(var(--magenta) / 0.35)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring))`. Solid magenta — focus is loud on purpose, the page is dark.
+- **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/crypto-onchain/tokens.ts

@@ -0,0 +1,207 @@
+import type { Direction } from "../schema";
+
+export const cryptoOnchain: Direction = {
+  name: "crypto-onchain",
+  ethos:
+    "Uniswap pink-magenta gradient · Farcaster warm purple casts · Friend.tech black-gold pixel · Phantom purple glass · OpenSea asset-grid density",
+  references: [
+    { brand: "Uniswap", trait: "pink-magenta gradient + Inter type" },
+    { brand: "Farcaster", trait: "warm purple cast cards" },
+    { brand: "Friend.tech", trait: "black + gold + pixel-art borders" },
+    { brand: "Phantom (wallet)", trait: "purple gradient glass surfaces" },
+    { brand: "OpenSea", trait: "Helvetica + dense asset-grid layout" },
+  ],
+  feel:
+    "Saturated gradients, pixel-art accents, on-chain stat tickers, playful-serious in equal measure. " +
+    "Backgrounds are tinted glass over a near-black void; type sits Inter-clean against gradient hero blocks. " +
+    "The 'we live on Base' aesthetic — Web3-native without being a meme coin, dense without being shouty.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Uniswap/OpenSea display — Inter heavy weights, the canonical Web3-native face",
+      googleFont: "Inter",
+      weights: [500, 600, 700, 800],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Phantom/Farcaster body — Inter at 400/500 for cast text and wallet UI",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "wallet addresses, tx hashes, gas prices — the on-chain instrument-cluster face",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.03em",         // Inter at heavy weights tightens hard for crypto-display feel
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "cv11", "ss01", "zero"',   // slashed-zero — distinguishes 0 from O in addresses
+    h1ScaleClamp: "clamp(2.5rem, 7vw, 5.5rem)",              // bold — gradients deserve scale
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "270 30% 6%", from: "Phantom near-black with strong purple bias — the void behind glass" },
+    foreground: { hsl: "280 20% 96%", from: "cool off-white with faint purple tint — readable on purple-black" },
+    card: { hsl: "275 28% 10%", from: "glass card surface — one stop above void, sits under blur+gradient" },
+    popover: { hsl: "275 26% 12%", from: "popover surface — wallet menus, swap confirmations" },
+    primary: { hsl: "322 88% 58%", from: "Uniswap magenta-pink — the canonical Web3 primary action color" },
+    primaryForeground: { hsl: "280 20% 96%", from: "near-white on magenta" },
+    secondary: { hsl: "270 24% 16%", from: "purple-shadowed surface, secondary tier" },
+    secondaryForeground: { hsl: "280 20% 96%", from: "near-white on purple secondary" },
+    muted: { hsl: "270 20% 18%", from: "muted surface — quiet panels inside loud gradient pages" },
+    mutedForeground: { hsl: "275 14% 68%", from: "lavender-gray secondary text — captions, address truncations" },
+    accent: { hsl: "270 22% 22%", from: "hover surface — one stop above muted" },
+    accentForeground: { hsl: "280 20% 96%", from: "near-white on accent" },
+    border: { hsl: "270 20% 24%", from: "purple-tinted hairline — visible on glass card edges" },
+    input: { hsl: "270 20% 24%", from: "same as border" },
+    ring: { hsl: "322 88% 58%", from: "= primary magenta — focus ring is the brand pink" },
+    destructive: { hsl: "12 88% 56%", from: "warning orange-red — failed tx, slippage exceeded, insufficient gas" },
+    destructiveForeground: { hsl: "280 20% 96%", from: "near-white on warning" },
+    brand: {
+      magenta: { hsl: "322 88% 58%", from: "= primary; Uniswap magenta, the canonical accent" },
+      "magenta-deep": { hsl: "320 78% 44%", from: "darker magenta — gradient anchor, hover state" },
+      purple: { hsl: "268 78% 62%", from: "Phantom/Farcaster purple — secondary brand accent" },
+      "purple-deep": { hsl: "265 70% 42%", from: "deep purple — gradient anchor with magenta" },
+      gold: { hsl: "42 95% 58%", from: "Friend.tech gold — pixel-border accent, rare-tier badges" },
+      cyan: { hsl: "186 88% 56%", from: "Base-blue-cyan adjacency — chain-badge accent for L2 mentions" },
+      "pixel-shadow": { hsl: "270 30% 4%", from: "deepest void — pixel-art drop-shadow color, 2px hard offset" },
+      success: { hsl: "150 70% 50%", from: "tx confirmation green — distinct from gains in finance, pure on-chain confirm" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128],
+    containerMax: "max-w-7xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-16 lg:pt-28 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "1rem",                       // 16px — Uniswap/Phantom rounded glass surfaces
+    pillsAllowed: true,                 // pills for token tickers, chain badges, address chips
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-magenta":
+        "0 0 0 1px hsl(var(--magenta) / 0.4), " +
+        "0 8px 32px hsl(var(--magenta) / 0.32), " +
+        "0 40px 120px hsl(var(--magenta) / 0.25)",
+      "glow-purple":
+        "0 0 0 1px hsl(var(--purple) / 0.4), " +
+        "0 8px 32px hsl(var(--purple) / 0.3), " +
+        "0 40px 120px hsl(var(--purple) / 0.22)",
+      "glow-gold":
+        "0 0 0 1px hsl(var(--gold) / 0.6), " +
+        "0 4px 16px hsl(var(--gold) / 0.4)",
+      "pixel-shadow":
+        "2px 2px 0 0 hsl(var(--pixel-shadow))",
+      "glass":
+        "inset 0 1px 0 hsl(280 20% 96% / 0.08), " +
+        "0 8px 32px hsl(270 30% 4% / 0.6)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 500,
+      loop: 2000,                        // pulse cadence for live tickers
+      ambient: 12000,                    // slow gradient drift
+    },
+    keyframes: {
+      "gradient-drift": {
+        css:
+          "0%, 100% { background-position: 0% 50%; }\n" +
+          "50% { background-position: 100% 50%; }",
+        defaultDuration: 12000,
+        iteration: "infinite",
+        purpose: "hero gradient backdrop — magenta-to-purple slow drift, the signature ambient motion",
+      },
+      "pulse-glow": {
+        css:
+          "0%, 100% { box-shadow: 0 0 0 0 hsl(var(--magenta) / 0.5); }\n" +
+          "50% { box-shadow: 0 0 0 16px hsl(var(--magenta) / 0); }",
+        defaultDuration: 2000,
+        iteration: "infinite",
+        purpose: "single hero CTA heartbeat — Connect Wallet, Swap, Mint; one element per page only",
+      },
+      "ticker-scroll": {
+        css:
+          "from { transform: translateX(0); }\n" +
+          "to { transform: translateX(-50%); }",
+        defaultDuration: 30000,
+        iteration: "infinite",
+        purpose: "on-chain stat marquee — TVL, gas, floor prices scrolling lower-third",
+      },
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 500,
+        iteration: "once",
+        purpose: "card and asset-grid entrance — short rise, no theatrics",
+      },
+      "pixel-blink": {
+        css:
+          "0%, 50% { opacity: 1; }\n" +
+          "50.01%, 100% { opacity: 0; }",
+        defaultDuration: 1000,
+        iteration: "infinite",
+        purpose: "pixel-art cursor and rare-tier badge blink — hard step, no easing, retro feel",
+      },
+      "number-roll": {
+        css:
+          "from { opacity: 0; transform: translateY(-8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 240,
+        iteration: "once",
+        purpose: "live price/floor/TVL value updates — replace-and-rise on socket tick",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary CTAs use a magenta→purple gradient fill with rounded-2xl (16px) and glow-magenta utility. " +
+      "Secondary is glass-card style (bg-card with glass shadow, --border). Tertiary is text-link magenta. " +
+      "Connect Wallet is the single page-level pulse-glow element. Pill buttons for token selectors and chain switchers.",
+    card:
+      "Rounded-2xl (16px), 1px --border, bg-card with glass shadow utility. Padding p-6 lg:p-8. " +
+      "Hero/feature cards may use glow-magenta or glow-purple. Asset-grid cards stay flat with hairline border only — " +
+      "density on the grid, glow on the hero. NFT/asset cards use 1:1 aspect-ratio media block.",
+    input:
+      "Full rounded-xl box, 1px --input border, bg-card. Amount inputs are oversized (text-3xl, mono) — the Uniswap swap-field treatment. " +
+      "Token selector pill sits inside the input on the right. Focus shifts border to magenta with glow.",
+    cta:
+      "Gradient magenta→purple rect for the primary action (Swap, Mint, Bridge, Connect). " +
+      "Glow utility carries the signal — no plain flat fills on hero CTAs. " +
+      "Pill buttons with brand-soft bg for chain badges (Base, Optimism, Arbitrum) — text in mono, chain logo on the left.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--magenta) / 0.35)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/cycling-brand/THEME.md

@@ -0,0 +1,78 @@
+# Design Direction — Cycling-Brand
+
+## Ethos
+Rapha matte-black heritage · Trek precision engineering · Pinarello Italian curve · Specialized S-Works performance restraint · Castelli pink-band peloton mark
+
+## Feel
+Matte black canvas. Full-bleed road photography — rain-slicked tarmac, peloton blur, alpine col at dawn. Product chrome is restrained — black on black with one Castelli-pink stripe. Heritage display serif for marque names, engineered sans for spec. The site reads like a Rapha catalogue, not a dashboard.
+
+## Reference brands
+- **Rapha** → matte black, full-bleed peloton photography, pink racing-stripe accent.
+- **Trek** → engineered restraint, spec-card density, Project One craft language.
+- **Pinarello** → Italian display serif, asymmetric Onda curve, race-heritage typography.
+- **Specialized S-Works** → performance product chrome, carbon-weave detail photography.
+- **Castelli** → Giro-pink peloton mark, race-kit color discipline, climbing-stripe heritage.
+
+## Tokens
+Surface stack is **kit-black** (background) → **+3% lift** (card) → **+8% lift** (secondary / muted / accent). Brand tokens: `--giro-pink`, `--pink-deep`, `--kit-black`, `--bone`, `--race-gray`, `--champagne-stripe`. Primary is `--giro-pink` — the singular peloton mark. Champagne-stripe is reserved for jersey-detail accents (city collection stripe), never for body surfaces or CTAs.
+
+## Typography
+- **Display:** Cormorant Infant 400/500. Heritage Italian display serif — Pinarello marque typography. Set with `font-style: italic` on model names for race-program elegance. Tracking `-0.015em` at scale.
+- **Body:** Inter 400/500/600/700. Engineered sans for spec lines. 16px base, line-height 1.6 — catalogue prose, not dashboard density.
+- **Mono:** JetBrains Mono. Reserved for tabular spec: frame weight (grams), wheelbase, stack/reach, race distance.
+
+H1 uses `clamp(2.75rem, 7vw, 6rem)` — catalogue scale, never billboard. Race-program headlines are italic display serif by default.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-10` — peloton photography needs full bleed.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-36 lg:pb-24` (long inhale before the page begins)
+  - Default: `py-20 lg:py-28`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128 160. Catalogue rhythm — wide and considered.
+
+## Color
+No hex anywhere — tokens only. There is one pink, and it is Castelli/Giro. There is no signal-blue, no tech-cyan, no green — pink and bone and matte-black are the entire vocabulary. `--destructive` is a separate warning red (flat-tire alert) — never to be used for marketing.
+
+## Radius
+`--radius: 0`. Sharp corners only. Pills disallowed (`pillsAllowed: false`) — race tags, distance markers, and CTAs are all rectangles. Rapha catalogue rule.
+
+## Shadows
+**Soft.** Two utilities: `.card-frame` (1px hairline + 24px×60px deep black drop) for product cards, `.glow-pink` (pink 1px ring + 36px pink glow) for the singular featured product or hero CTA. Nothing else lifts.
+
+## Motion
+Four keyframes: `catalogue-rise` (1000ms entrance — slow, considered page-turn rhythm), `route-pulse` (2400ms loop for Club-Ride map markers — restrained, half-opacity dip), `ken-burns-peloton` (26000ms slow camera push on hero photography — Tour-coverage feel), `pink-sweep` (4000ms gradient stripe sweep on hero product — Castelli climbing-stripe motion).
+
+Easing `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — ken-burns and pink-sweep stop, the page settles.
+
+## Component patterns
+- **Buttons:** primary is Giro-pink filled rectangle (0 radius), kit-black text, uppercase tracking 0.12em. Secondary is transparent 1px border. Tertiary is uppercase pink text-link.
+- **Kit-catalogue product card:** kit-black background, product photo above, model name in italic display serif, two-line spec in body, price in mono tabular bottom-right. Hover lifts to `card-frame` shadow.
+- **Race-calendar row:** five compact rectangles — date in mono, race name in italic display, distance + altitude gain in mono, location in body. Stripe of `--champagne-stripe` along the left for road races, `--giro-pink` for races in the pink-jersey series.
+- **Club-Ride map placeholder:** matte topographic gradient on `--card`, three pulsing pink `route-pulse` markers, distance/elevation legend bottom-left in mono.
+- **Inputs:** full box, 1px border, `bg-card`, 0 radius. Mono uppercase label above (tracking 0.14em). Focus ring Giro-pink 2px.
+
+## Recommended rich media
+Photography is the lead medium — peloton mid-climb on a cobbled section, rider silhouette against an alpine sunrise, mechanic's hands threading a chain in a workshop, rain on a top tube. Aspect ratios 21:9 cinematic for hero, 4:5 portrait for rider features, 3:2 catalogue-standard for product. Black-and-white acceptable for hero; product is full color with deliberate desaturation.
+
+**AI tool recommendations:** Midjourney *"Rapha Cent Cols photography, peloton, rain on tarmac, Magnum Photos, Kodak Portra 400, soft grain, golden hour alpine col"*. Avoid bright cyclist-stock photography — that's gym-tier, not Rapha-tier.
+
+**Video:** hero 8-second peloton clip looped — silent autoplay, ≤6 MB. Stops on `prefers-reduced-motion`.
+
+**Performance:** hero photo ≤220 KB AVIF at 1920w.
+
+**Avoid:** "Three reasons to switch" / SaaS pricing pillars / generic feature cards. Stock cyclist smiling at camera. Carbon-fiber close-ups rendered in 3D. Blue tech-wash. Any neon-yellow-green safety-vest accent — that's commuter, not race.
+
+## Component families
+None at install time.
+
+## Details
+- **Selection:** `hsl(var(--giro-pink) / 0.32)` — the only place pink touches body text.
+- **Focus ring:** 2px solid Giro-pink.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/cycling-brand/tokens.ts

@@ -0,0 +1,185 @@
+import type { Direction } from "../schema";
+
+// cycling-brand — Rapha / Trek / Pinarello atmosphere. Matte black canvas,
+// full-bleed road-cycling photography, restrained product chrome. Premium
+// performance cycling — heritage typography, racing pink as the singular
+// accent (Rapha's house mark), no signal-blue tech-wash.
+export const cyclingBrand: Direction = {
+  name: "cycling-brand" as Direction["name"],
+  ethos:
+    "Rapha matte-black heritage · Trek precision engineering · Pinarello Italian curve · " +
+    "Specialized S-Works performance restraint · Castelli pink-band peloton mark",
+  references: [
+    { brand: "Rapha", trait: "matte black, full-bleed peloton photography, pink racing-stripe accent" },
+    { brand: "Trek", trait: "engineered restraint, spec-card density, Project One craft language" },
+    { brand: "Pinarello", trait: "Italian display serif, asymmetric Onda curve, race-heritage typography" },
+    { brand: "Specialized S-Works", trait: "performance product chrome, carbon-weave detail photography" },
+    { brand: "Castelli", trait: "Giro-pink peloton mark, race-kit color discipline, climbing-stripe heritage" },
+  ],
+  feel:
+    "Matte black canvas. Full-bleed road photography — rain-slicked tarmac, peloton blur, " +
+    "alpine col at dawn. Product chrome is restrained — black on black with one Castelli-pink " +
+    "stripe. Heritage display serif for marque names, engineered sans for spec. The site reads " +
+    "like a Rapha catalogue, not a dashboard.",
+
+  fonts: {
+    display: {
+      family: "Cormorant Infant",
+      fallback: ["EB Garamond", "Cormorant Garamond", "Iowan Old Style", "Times New Roman", "serif"],
+      from: "Pinarello Italian display serif feel — heritage marque typography, racing-program elegance",
+      googleFont: "Cormorant+Infant",
+      weights: [400, 500, 600],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "Helvetica Neue", "sans-serif"],
+      from: "Trek/Specialized engineered sans — neutral spec body, never decorative under product photography",
+      googleFont: "Inter",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+      from: "tabular spec numerics — wheelbase, stack/reach, frame weight in grams, race distances",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.015em",                // display serif tightens at large size — Pinarello marque feel
+    bodyTracking: "0.005em",
+    fontFeatureSettings: '"ss01", "tnum", "calt", "liga"',
+    h1ScaleClamp: "clamp(2.75rem, 7vw, 6rem)",  // catalogue scale — restrained, never billboard
+    bodyBaseSize: "1rem",                       // 16px — comfortable on near-black
+    bodyLineHeight: "1.6",                      // catalogue prose, not dashboard density
+  },
+
+  colors: {
+    background: { hsl: "0 0% 6%", from: "Rapha matte-black — bib-short fabric, never blue-tinted" },
+    foreground: { hsl: "36 14% 92%", from: "warm bone — race-program paper, never harsh white" },
+    card: { hsl: "0 0% 9%", from: "elevated surface — kit-photo studio backdrop, one stop up" },
+    popover: { hsl: "0 0% 12%", from: "menu/popover surface — two stops up" },
+    primary: { hsl: "340 80% 56%", from: "Castelli/Giro pink — the canonical peloton-mark accent, used on CTAs only" },
+    primaryForeground: { hsl: "0 0% 6%", from: "matte black on Giro pink — contrast law" },
+    secondary: { hsl: "0 0% 14%", from: "Rapha shadow tier — secondary surface, deeper kit-photo backdrop" },
+    secondaryForeground: { hsl: "36 14% 92%", from: "bone on shadow tier" },
+    muted: { hsl: "0 0% 16%", from: "muted surface — same family, fractionally lighter" },
+    mutedForeground: { hsl: "36 8% 62%", from: "race-program meta gray — distance, date, rider count" },
+    accent: { hsl: "0 0% 19%", from: "hover surface — brushed-frame highlight" },
+    accentForeground: { hsl: "36 14% 92%", from: "bone on accent" },
+    border: { hsl: "0 0% 22%", from: "frame-tube hairline — engineered, visible only on inspection" },
+    input: { hsl: "0 0% 22%", from: "same as border — single hairline language" },
+    ring: { hsl: "340 80% 56%", from: "Giro pink — focus is the peloton mark, never neutral" },
+    destructive: { hsl: "356 78% 50%", from: "warning red — flat-tire, stop-the-ride alert, never decoration" },
+    destructiveForeground: { hsl: "36 14% 92%", from: "bone on warning red" },
+    brand: {
+      "giro-pink": { hsl: "340 80% 56%", from: "Castelli/Giro maglia rosa — the singular accent, also primary" },
+      "pink-deep": { hsl: "338 70% 38%", from: "deeper Giro pink — used only on hover and gradient anchors" },
+      "kit-black": { hsl: "0 0% 6%", from: "Rapha bib fabric — also background" },
+      bone: { hsl: "36 14% 92%", from: "race-program paper — also foreground" },
+      "race-gray": { hsl: "36 8% 62%", from: "program meta — secondary text" },
+      "champagne-stripe": { hsl: "41 32% 52%", from: "Rapha city-jersey stripe — restrained alternative stripe color" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160],   // catalogue rhythm — wide and considered
+    containerMax: "max-w-7xl",                  // wide — peloton photography needs full bleed
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-36 lg:pb-24",
+      default: "py-20 lg:py-28",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0",                                  // sharp — catalogue rectangle, never web-app pillow
+    pillsAllowed: false,                        // race tags are rectangles, not pills — Rapha rule
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "card-frame":
+        "0 1px 0 0 hsl(var(--border)), " +
+        "0 24px 60px hsl(0 0% 0% / 0.5)",
+      "glow-pink":
+        "0 0 0 1px hsl(var(--giro-pink) / 0.35), " +
+        "0 12px 36px hsl(var(--giro-pink) / 0.2)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1000,                             // catalogue entrance — slow, considered
+      loop: 2400,                               // route-marker pulses
+      ambient: 26000,                           // ken-burns over peloton photography
+    },
+    keyframes: {
+      "catalogue-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(24px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1000,
+        iteration: "once",
+        purpose: "product/section entrance — catalogue page-turn rhythm",
+      },
+      "route-pulse": {
+        css:
+          "0%, 100% { opacity: 1; transform: scale(1); }\n" +
+          "50% { opacity: 0.5; transform: scale(0.92); }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "Club-Ride map marker — start-pin pulses in tempo, restrained",
+      },
+      "ken-burns-peloton": {
+        css:
+          "0% { transform: scale(1.05) translate(0, 0); }\n" +
+          "100% { transform: scale(1.16) translate(-2%, -1%); }",
+        defaultDuration: 26000,
+        iteration: "infinite",
+        purpose: "hero peloton photography drift — slow camera push, Tour-coverage feel",
+      },
+      "pink-sweep": {
+        css:
+          "0% { background-position: -150% 0; }\n" +
+          "100% { background-position: 250% 0; }",
+        defaultDuration: 4000,
+        iteration: "infinite",
+        purpose: "race-stripe gradient sweep on hero product reveal — Castelli climbing-stripe motion",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary action = Giro-pink filled rectangle, kit-black text, 0 radius, uppercase tracking 0.12em label. " +
+      "Secondary = transparent with 1px border in --border, bone text, hover lifts to --accent. " +
+      "Tertiary = text-link in Giro-pink, uppercase tracking 0.08em, underline-on-hover. " +
+      "Never softened with radius. Never a gradient softer than pink → pink-deep.",
+    card:
+      "0 radius, hairline border (--border), bg-card. Padding p-6 lg:p-8. " +
+      "Product cards use card-frame shadow; hero/featured product uses glow-pink. " +
+      "Headline (model name) in display serif italic, spec lines in mono tabular.",
+    input:
+      "Full box, 1px --border, bg-card, 0 radius. Label above in mono uppercase tracking 0.14em. " +
+      "Focus ring is Giro-pink, 2px.",
+    cta:
+      "The hero CTA (shop / register) is a pink-filled rectangle. Inline CTAs are uppercase text-links in pink. " +
+      "Spec-detail CTAs (view geometry, view weight chart) are bone text-links with hairline underline.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--giro-pink) / 0.32)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};