@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/government-civic/THEME.md

@@ -0,0 +1,138 @@
+# Design Direction — Government-Civic
+
+## Ethos
+US Web Design System (USWDS) · 21st Century IDEA Act accessibility · USDS public-service restraint · 18F democratic clarity · .gov heritage
+
+## Feel
+Public-service formal. White or deep-navy backgrounds, federal-blue with USWDS-red secondary, Public Sans typography. Strict accessibility (WCAG AAA target where possible; AA minimum), high information density, no decoration. Reads as "a citizen must be able to use this regardless of device, bandwidth, vision, or English literacy."
+
+## Reference brands
+- **USWDS (US Web Design System)** → the federal government's design system. This direction IS USWDS — not "inspired by." Token names, ratios, and patterns trace to it directly.
+- **USDS (US Digital Service)** → public-service restraint. The work is for the citizen, not the agency.
+- **18F (GSA)** → democratic clarity. Plain language, sixth-grade reading level, no insider jargon.
+- **login.gov** → accessibility-first authentication. AA contrast minimum, AAA target.
+- **va.gov** → the VA's digital modernization. Service forms that work for older, lower-bandwidth, lower-literacy users.
+- **irs.gov (post-2021 redesign)** → tax forms rendered as digital services without losing legal precision.
+- **Code for America** → civic-tech ergonomics; the human side of services.
+- **GOV.UK** → international cousin. Different style guide, same religion (service-pattern discipline, plain language, accessibility).
+
+## Brand-book customization
+USWDS is **the** brand book for federal sites. Agencies layer their identity (Treasury seal, DOJ seal, agency wordmark) **on top of** USWDS, but cannot override the underlying token system without losing USWDS compliance and the Section 508 / IDEA Act safety net that comes with it.
+
+**Allowed customization:**
+- `--primary` may shift to an agency brand color when an agency uses a non-USWDS-blue corporate color (DOD navy `220 40% 18%`, Coast Guard cobalt `212 95% 38%`, USPS blue `217 78% 30%`). The replacement still needs to clear **4.5:1 against white** and **3:1 against `--ring` (gold-vivid)** — verify before swapping.
+- Agency logo + wordmark in the header. Always paired with the "An official website of the United States government" banner ribbon at the top — that ribbon is non-removable on federal `.gov` sites.
+- A single agency-seal favicon and one accent surface (e.g., a hero band tinted with the agency color at 8% opacity).
+
+**NOT allowed (compliance-breaking):**
+- Changing the accessibility contrast ratios. WCAG AA is the floor; AAA is the target.
+- Removing or restyling focus rings. The 4px gold-vivid ring stays.
+- Reducing line-height below 1.5 or body font-size below 17px (the IDEA Act readability floor).
+- Removing the language-toggle in the header. Federal sites serving the public must offer translation (Spanish minimum; many add Chinese, Vietnamese, Tagalog, Korean, Arabic).
+- Adding decorative shadows, gradients, glassmorphism, or animation that violates `prefers-reduced-motion`.
+
+**State + local government variants:** USWDS is the **federal** standard, but states and cities frequently inherit it and override `--primary` with their state seal color (California navy `220 60% 22%`, Texas state-flag blue `218 100% 32%`, NYC blue `217 87% 35%`). The override pattern is the same as agency-level: swap `--primary`, leave every other token alone, re-verify the contrast matrix. Some states (e.g., Massachusetts `mass.gov`, Georgia `georgia.gov`) ship lightly-forked USWDS variants — treat those as `government-civic` with a `--primary` override, not as separate directions.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its USWDS provenance (`base-darkest`, `gray-cool-5`, `primary`, `secondary-vivid`, `gold-vivid`, `green-cool`). Do not introduce numbered or generic tokens — if a new color is needed, it must trace to a USWDS palette entry.
+
+Surface stack is **white** (background, card, popover) → `gray-cool-5` (secondary, muted) → `gray-cool-10` (accent, hover only). Depth comes from **1px borders and outlines**, never from shadow or fill drama.
+
+Brand tokens: `--secondary-red` (emphasis, error), `--gold-vivid` (warning + focus ring), `--green-cool` (success), `--gray-cool-5` (surface alias), `--gray-cool-90` (foreground alias), `--base-dark` (mid-tier text), `--base-light` (borders), `--navy-dark` (optional dark-mode bg).
+
+## Typography
+- **Display:** Public Sans, weights 500/600/700. USWDS canonical face. Tracking `-0.005em` — barely tightened.
+- **Body:** Public Sans, **17px floor (1.0625rem)** with **line-height 1.6 minimum**. This is the IDEA Act readability ceiling, not a suggestion. Tracking `0`.
+- **Mono:** Roboto Mono — case numbers, form IDs, codes, EINs. Never used decoratively.
+
+Font features: `"tnum", "ss01"` — tabular numerics so dollar columns and SSNs align. H1 uses `clamp(1.75rem, 4vw, 2.75rem)` — restrained; civic pages are services, not marketing.
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-8` — 1152px. Service-form width; wider columns lose accessibility for low-vision users using browser zoom.
+- **Section padding tiers:**
+  - Hero: `pt-12 pb-10 lg:pt-16 lg:pb-12` (restrained — civic, not promotional)
+  - Default: `py-10 lg:py-16`
+  - Tight: `py-6 lg:py-8`
+- **Allowed scale values:** 2 4 6 8 12 16 20 24 32 40 48 64 80. Mapped to USWDS spacing units; no arbitrary values.
+
+## Color
+No hex anywhere in component files. All color via tokens. Every token has a **measured contrast ratio** noted in its `from:` comment when AA-relevant. Pure black is forbidden — `--foreground` is `218 30% 16%` (base-darkest with a faint navy bias). White (`0 0% 100%`) is permitted because it's the USWDS page surface.
+
+**Color is never the only signal.** Error states pair red with an icon and "Error:" prefix; success pairs green with a check icon; warning pairs gold with an alert icon. Colorblind users (8% of men, including many veterans the VA serves) must be able to use every form without color.
+
+## Radius
+`--radius: 2px`. **Subtle, formal, slight.** Pills are disallowed (`pillsAllowed: false`) — USWDS uses rectangular Alert and Tag patterns, not pills. Pills read consumer/marketing; the federal aesthetic is the rectangle.
+
+## Shadows
+**Minimal.** Two utilities:
+- `.border-strong` — `inset 0 0 0 1px var(--border)`. Border-as-shadow for elevated surfaces.
+- `.focus-ring` — `0 0 0 2px var(--background), 0 0 0 4px var(--ring)`. Double-layer 4px gold ring with a 2px white inner gap so the ring is visible against any surface color.
+
+USWDS uses thin border lines and outlines rather than drop shadows. Reason: accessibility — focus rings must read crisply, and drop shadows reduce focus-ring contrast.
+
+## Motion
+Single keyframe: `fade-in` (200ms, opacity only). **Translate-based reveals are forbidden** — vestibular sensitivity is common in the population federal services serve (veterans with TBI, elderly users, users with inner-ear conditions).
+
+USWDS motion-policy: "use motion sparingly because vestibular sensitivity is common in the population we serve." Reveal duration 200ms maximum. No ambient motion. No infinite loops except a spinner for inline loading (and even that gets paused under `prefers-reduced-motion`).
+
+`prefers-reduced-motion: reduce` is honored in every motion utility — non-negotiable. When set, all animations collapse to `animation-duration: 0.01ms` (functionally instant, but still triggers `animationend` listeners).
+
+## Component patterns
+- **Buttons:** Primary = solid USWDS blue (`hsl(213 92% 32%)`), white text, **2px** radius, **h-10 px-5**. Secondary = ghost with 2px USWDS-blue border, blue text. Danger = secondary-red solid. **Every button has a visible 4px gold-vivid focus ring on `:focus-visible`** (4.5:1 ring contrast). Minimum tap target **44x44px** (Section 508).
+- **Cards:** Sharp 2px corners, 1px `base-light` border, white bg. Padding `p-6 lg:p-8`. No shadow. Title in Public Sans 600. Cards sit; they do not float.
+- **Inputs:** Full box, **h-10**, 1px base border, 2px radius, white bg. **Label always sits above the input — placeholder-only labels are forbidden (Section 508).** Error state = 2px secondary-red left-border + inline message in red with `aria-describedby` linking message to input. Focus ring is gold (not blue) — maximizes contrast against the blue primary actions adjacent to it.
+- **CTAs:** Primary action = solid blue button. In-text CTAs = underlined links in primary blue. Marketing-style hero CTAs do not exist; services have "Start application," "Continue to next step," "Submit." **All link text must make sense out of context** (Section 508 — no "click here," no "learn more" without antecedent).
+- **Alerts (USWDS Alert):** Rectangular bar with 8px-thick left border in semantic color, icon, bold heading, body copy. Variants: `info` (blue), `success` (green-cool), `warning` (gold-vivid), `error` (secondary-red). Never auto-dismiss.
+
+## Accessibility — first-class constraint
+This is not a section; it's the whole direction. The non-negotiables:
+- WCAG **2.2 AA** is the floor; **AAA** is the target. Run axe-core in CI.
+- Body font-size **17px (1.0625rem) minimum**. Body line-height **1.6 minimum**.
+- Form labels **never** placeholder-only. Always `<label for>` with visible text above the input.
+- Focus ring **always visible**, **never removed**, **4.5:1 contrast** against the surface behind it.
+- Color **never** the sole signal — pair with icon + text.
+- Every interactive control is keyboard-reachable in document order. Skip-links land at `<main>`.
+- Language toggle in the header (Spanish minimum). `<html lang>` updates correctly.
+- Heading hierarchy is strict — exactly one h1, no skipped levels.
+- Form errors summarize at the top of the form **and** mark each invalid input with `aria-invalid` + `aria-describedby`.
+- "An official website of the United States government" banner ribbon at the top of every federal page.
+
+## Recommended rich media
+Documentary photography only — **citizens being served** (a person at a service window, a veteran reading paperwork, a family at a passport office), federal facilities (real buildings, real signage), public-service workers in their environment. **Stock photography is forbidden** — too polished, breaks trust, often unrepresentative.
+
+Diagrams and flowcharts are the **dominant** rich media: eligibility-decision trees, service-step indicators (USWDS Step Indicator pattern), application-progress flows. These should be **drawn in the USWDS icon style** (single-stroke, two-tone, geometric) — never decorative.
+
+Iconography is the **USWDS icon set** (the canonical federal icon library, ~250 icons covering services, document types, accessibility, transportation, weather). Lucide / Phosphor are acceptable fallbacks if USWDS lacks the glyph, but house style is USWDS-icon-set first.
+
+**AI tool recommendations: AVOID generative AI imagery in federal contexts.** Disclosure rules under EO 14110 and ongoing federal AI-transparency policy make AI imagery a trust liability — a constituent who recognizes an AI-generated photograph on a `.gov` site has reasonable grounds to distrust everything else on the page. Use **real attributed photography** only: Unsplash for-government accounts, agency public-domain archives (NARA, DOD imagery, NASA), or commissioned documentary work. Always credit: *"Photo: U.S. Department of Veterans Affairs."* If AI is used for a diagram or illustration, **disclose it inline** ("Illustration generated with AI assistance and reviewed by [name]").
+
+**Aspect ratios:** 3:2 (documentary standard) or 4:3 for portrait subjects. Never 16:9 cinematic widescreen — that reads marketing/promotional. Diagrams use whatever serves the content; never decorative crops.
+
+**Video:** rare. When used: short (≤2 min), captioned (open captions burned in OR `<track>` with SRT — both is best), audio-described track for any video conveying non-textual information, transcript available below the video. Never autoplay. Never background-video heroes. ≤8 MB; H.264 or AV1; poster image required.
+
+**Performance:** federal services target users on **3G connections and low-end Android**. Hero image ≤120 KB AVIF at 1600w. LCP **under 2.5s on Slow 4G**. Total page weight under 500 KB for service pages. JavaScript is progressive enhancement — every form must work without it.
+
+**Avoid:** AI-generated photography (trust + disclosure issue), stock imagery, gradient backgrounds, glassmorphism, decorative SVG ornament, drop shadows, marketing-style hero video, autoplay anything, parallax, mouse-tracking effects, animated GIFs, lens flare, 3D renders, illustration styles that read corporate-friendly (Dropbox/Notion era flat-people illustrations), emoji as iconography.
+
+**Accessibility for media:** long-form alt-text for photography, mandatory. Diagrams need both `aria-label` AND an adjacent text description ("Flowchart: Eligibility for Pell Grant. Step 1: …"). Charts must have a data-table alternative directly below them. Video needs captions + transcript + audio description.
+
+## Component families
+USWDS ships ~40 components; this direction inherits all of them by reference. Highest-traffic families:
+- **Banner** (official-government ribbon — always at top, never removed).
+- **Header** (agency wordmark, primary nav, language toggle, search).
+- **Step Indicator** (multi-step service forms — Section 508 mandatory landmark).
+- **Form patterns** (USWDS Form, Fieldset, Date Picker, Combo Box, File Input — all have specific accessibility behavior baked in; do not re-implement).
+- **Alert** (info / success / warning / error — rectangular bar with thick left border).
+- **Summary Box** (callout for service-specific eligibility, fees, deadlines).
+- **Process List** (numbered vertical steps for how-to-apply content).
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.25)` background, foreground text.
+- **Focus ring:** `4px solid hsl(var(--ring))` (gold-vivid). Double-layer with white inner gap via `.focus-ring` utility. **Never thinner. Never removed.**
+- **Scrollbar:** `auto` (OS-native — accessibility-tool users rely on native scrollbar behavior; custom thin scrollbars break for AT).
+
+## Exceptions
+None yet. Any exception must be reviewed against Section 508 and the 21st Century IDEA Act before landing, and documented here with the WCAG criterion it touches and the mitigation.
+
+## Revisions
+- Initial direction, generated at install time. Sourced from USWDS v3.x token system.

package/themes/government-civic/tokens.ts

@@ -0,0 +1,164 @@
+import type { Direction } from "../schema";
+
+export const governmentCivic: Direction = {
+  name: "government-civic",
+  ethos:
+    "US Web Design System (USWDS) · 21st Century IDEA Act accessibility · " +
+    "USDS public-service restraint · 18F democratic clarity · .gov heritage",
+  references: [
+    { brand: "USWDS", trait: "the federal government's design system — the brand book itself" },
+    { brand: "USDS", trait: "public-service restraint, citizen-first" },
+    { brand: "18F", trait: "democratic clarity, plain-language UI" },
+    { brand: "login.gov", trait: "accessibility-first authentication, AA minimum" },
+    { brand: "va.gov", trait: "VA's digital-modernized service" },
+    { brand: "GOV.UK", trait: "international cousin — service-pattern discipline" },
+  ],
+  feel:
+    "Public-service formal. White or deep-navy surfaces, federal-blue with USWDS-red " +
+    "secondary, Public Sans typography. Strict accessibility (WCAG AAA target, AA floor), " +
+    "high information density, no decoration. Reads as 'a citizen must be able to use this " +
+    "regardless of device, bandwidth, vision, or English literacy.'",
+
+  fonts: {
+    display: {
+      family: "Public Sans",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Arial", "sans-serif"],
+      from: "USWDS canonical face — the federal sans, free + open",
+      googleFont: "Public+Sans",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Public Sans",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Arial", "sans-serif"],
+      from: "USWDS canonical face — body and display share the family",
+      googleFont: "Public+Sans",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "Roboto Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Menlo", "Consolas", "monospace"],
+      from: "USWDS canonical mono — case numbers, form IDs, codes",
+      googleFont: "Roboto+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.005em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "ss01"',
+    h1ScaleClamp: "clamp(1.75rem, 4vw, 2.75rem)", // restrained — civic, not marketing
+    bodyBaseSize: "1.0625rem",                     // 17px FLOOR — never smaller, accessibility-mandated
+    bodyLineHeight: "1.6",                         // 1.5 minimum per WCAG; we go 1.6
+  },
+
+  colors: {
+    background: { hsl: "0 0% 100%", from: "federal white — the .gov page surface" },
+    foreground: { hsl: "218 30% 16%", from: "USWDS base-darkest — near-black navy ink" },
+    card: { hsl: "0 0% 100%", from: "card surface = page surface; depth from borders" },
+    popover: { hsl: "0 0% 100%", from: "popovers stay white; bordered, not shadowed" },
+    primary: { hsl: "213 92% 32%", from: "USWDS primary blue #005EA2 — federal interactive blue" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on federal blue, AAA contrast" },
+    secondary: { hsl: "210 20% 96%", from: "USWDS gray-cool-5 — secondary surface tier" },
+    secondaryForeground: { hsl: "218 30% 16%", from: "base-darkest on gray-cool-5" },
+    muted: { hsl: "210 20% 96%", from: "same as secondary — gray-cool-5" },
+    mutedForeground: { hsl: "218 18% 38%", from: "USWDS base — secondary text, still AA against white" },
+    accent: { hsl: "210 24% 92%", from: "gray-cool-10 — hover/active surfaces only" },
+    accentForeground: { hsl: "218 30% 16%", from: "ink on gray-cool-10" },
+    border: { hsl: "214 20% 78%", from: "USWDS base-light — visible 1px rules, structural" },
+    input: { hsl: "214 20% 60%", from: "USWDS base — inputs need higher-contrast borders" },
+    ring: { hsl: "44 91% 50%", from: "USWDS gold-vivid focus ring — 4.5:1 against any surface" },
+    destructive: { hsl: "354 71% 45%", from: "USWDS secondary red — errors, alerts" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on secondary red, AAA" },
+    brand: {
+      "secondary-red": { hsl: "354 71% 45%", from: "USWDS secondary red — emphasis + error" },
+      "gold-vivid": { hsl: "44 91% 50%", from: "USWDS warning gold — also the focus ring" },
+      "green-cool": { hsl: "158 64% 35%", from: "USWDS success — green-cool, AA compliant" },
+      "gray-cool-5": { hsl: "210 20% 96%", from: "surface tier — alias of secondary" },
+      "gray-cool-90": { hsl: "218 30% 16%", from: "alias of foreground — base-darkest" },
+      "base-dark": { hsl: "218 18% 38%", from: "USWDS base — mid-tier text" },
+      "base-light": { hsl: "214 20% 78%", from: "USWDS base-light — borders, dividers" },
+      "navy-dark": { hsl: "218 40% 12%", from: "alternate dark-mode background, deep navy" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80], // USWDS spacing units mapped
+    containerMax: "max-w-6xl",                                // 1152px — service-form width
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-12 pb-10 lg:pt-16 lg:pb-12",                  // restrained — civic hero, not marketing
+      default: "py-10 lg:py-16",
+      tight: "py-6 lg:py-8",
+    },
+  },
+
+  radius: {
+    base: "2px",                       // USWDS subtle — formal, slight, never pill-soft
+    pillsAllowed: false,               // status indicators use rectangular USWDS Alert/Tag patterns
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      // USWDS uses borders + outlines rather than shadows — better focus visibility
+      "border-strong":
+        "inset 0 0 0 1px hsl(var(--border))",
+      "focus-ring":
+        "0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring))", // 4px gold ring, double-layer
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 200,                     // USWDS motion-policy: 200ms reveals only
+      loop: 0,                         // no loops
+      ambient: 0,                      // no ambient — vestibular sensitivity in citizen population
+    },
+    keyframes: {
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose:
+          "the only entrance — opacity only, no transform. Alerts, accordions, " +
+          "validation messages. Translate-based motion is forbidden (vestibular).",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Primary = solid USWDS blue (#005EA2), white text, 2px radius, h-10 px-5. " +
+      "Secondary = ghost with 2px USWDS-blue border, blue text. " +
+      "Danger = USWDS secondary-red solid. " +
+      "ALL buttons MUST show a visible 4px gold-vivid focus ring (4.5:1 contrast) on :focus-visible. " +
+      "Minimum tap target 44x44px (Section 508).",
+    card:
+      "Sharp (2px) corners, 1px USWDS base-light border, white bg. Padding p-6 lg:p-8. " +
+      "No shadows. Headers use h2/h3 in Public Sans 600. Cards never float — they sit.",
+    input:
+      "Full box, h-10, 1px base border (#71767A-equivalent), 2px radius, white bg. " +
+      "Label ALWAYS sits above the input — placeholder is never the label (Section 508). " +
+      "Error state = 2px secondary-red left border + inline message in red with icon. " +
+      "Focus = 4px gold-vivid ring (not blue — blue is button color; gold maximizes contrast).",
+    cta:
+      "Primary action is a solid blue button. In-text CTAs are underlined links in primary blue. " +
+      "Marketing-style hero CTAs do not exist — services have 'Start application' or 'Continue'. " +
+      "All link text must make sense out of context (Section 508 — no 'click here').",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.25)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "4px solid hsl(var(--ring))",   // 4px gold — non-negotiable, never removed
+    scrollbarStyle: "auto",                     // OS-native — accessible to AT users
+  },
+};

package/themes/gym-chain/THEME.md

@@ -0,0 +1,79 @@
+# Design Direction — Gym-Chain
+
+## Ethos
+Equinox matte-black luxury · Barry's red-room theatre · Rumble boxing-poster bravado · SoulCycle ritual atmosphere · F45 functional grid
+
+## Feel
+Matte black with one signal red. Full-bleed athlete photography mid-motion — sweat, lens flare, theatrical spotlight. Condensed display at billboard scale. The page is a venue, not a website. Booking a class feels like buying a ticket.
+
+## Reference brands
+- **Equinox** → matte black, full-bleed campaign photography, restrained gold reserved for member badges.
+- **Barry's Bootcamp** → signal red room, oversized condensed display, boxing-poster confidence.
+- **Rumble Boxing** → neon-red ring lighting, boxing-card typography, hype-build campaigns.
+- **SoulCycle** → ritual studio darkness, candle-and-spot lighting, manifesto copy.
+- **F45 Training** → functional schedule grid, intensity badges, color-coded class types.
+
+## Tokens
+Surface stack is **matte black** (background) → **+8% black** (card) → **+13% black** (secondary / muted / accent). Depth via hairline borders + the `card-deep` shadow. Brand tokens: `--signal-red`, `--red-deep`, `--black`, `--white`, `--gray-stage`, `--gold`. Primary is `--signal-red`. Gold is a *single-purpose* member-only badge color — never a CTA, never decoration.
+
+## Typography
+- **Display:** Bebas Neue 400 — condensed all-caps headline weight. Headlines set UPPERCASE with tracking 0.03em. Billboard scale: `clamp(3.5rem, 11vw, 9rem)`.
+- **Body:** Inter 400/500/600/700. Neutral under heavy display. 16px base, line-height 1.55 (tighter than editorial — this is event copy).
+- **Mono:** JetBrains Mono. Schedule times, intensity tiers, club codes.
+
+Font features: `"tnum", "ss01", "cv11"`. Numbers are always tabular.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-10` — wide, full-bleed photography needs it.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-36 lg:pb-24`
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128 160 200. The big numbers exist on purpose — venue scale.
+
+## Color
+No hex anywhere — tokens only. There is one red, and it is the brand. `--destructive` IS `--signal-red` — error states use the same hue because the brand IS the alarm color. Gold appears only on member badges. No greens, no blues, no warm wood-tones — this is a black box.
+
+## Radius
+`--radius: 0.25rem`. Boxing-card chamfer. Pills are allowed (`pillsAllowed: true`) but reserved for intensity badges and schedule chips, never for primary buttons (those are 0.25rem rectangles, stamp-like).
+
+## Shadows
+**Glow.** Utilities: `.glow-red` (1px red ring + 24px + 100px red glow), `.spotlight` (red upward halo + deep black drop), `.card-deep` (1px hairline + 30px×80px black drop). The default card uses `.card-deep`. Featured class cards use `.glow-red`. Hero photography frames use `.spotlight`.
+
+## Motion
+Five keyframes: `kinetic-rise` (800ms, opacity + 28px translate — fast and kinetic), `intensity-pulse` (2200ms loop for live-class dots), `spotlight-sweep` (6000ms horizontal light-sweep on featured cards), `ken-burns-athlete` (22000ms slow camera push over hero photography), `pulse-red` (2400ms heartbeat ring — exactly one book-now CTA per page).
+
+Easing `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — ambient ken-burns and spotlight-sweep stop, but the page still loads in place.
+
+## Component patterns
+- **Buttons:** primary is signal-red filled rectangle, white text, 0.25rem, uppercase tracking 0.1em in display face. Secondary is transparent with 1px border. Tertiary is uppercase red text-link.
+- **Cards:** 0.25rem radius, hairline border, `bg-card`. Padding `p-6 lg:p-8`. Class cards get `card-deep`, featured cards get `glow-red`.
+- **Class schedule grid:** today's classes as a row of compact dark cards — time in display, name in body bold, intensity as a pill badge (red 1-tier / amber 2-tier / white 3-tier), instructor in mono.
+- **Club locations row:** four cards across, city in display all-caps, address in mono, "OPEN 5AM – 11PM" line in mono uppercase, hero photo background tinted black.
+- **Performance metric callout strip:** four oversized tabular numbers in display, label in mono uppercase below. The numbers ARE the layout.
+- **Inputs:** full box, 1px border, `bg-card`, 0.25rem. Label above in mono uppercase tracking 0.1em. Focus is signal-red 2px.
+
+## Recommended rich media
+Full-bleed athlete photography is the lead medium — mid-motion, theatrical key lighting from one side, deep shadow on the other, grain visible. Boxing-glove close-ups, rower mid-pull, sprint silhouettes against a red-lit wall. Aspect ratios 21:9 cinematic for hero, 4:5 portrait for athlete features. Never high-key wellness stock. Never people smiling at the camera holding a water bottle.
+
+**AI tool recommendations:** Midjourney with *"Equinox campaign photography, low-key red room lighting, athletic body in motion, sweat, film grain, Magnum Photos"*. Avoid the default Midjourney glossy fitness style.
+
+**Video:** hero looped 6-second athlete clip is on-brand — silent, autoplay, ≤4 MB. Stops on `prefers-reduced-motion`.
+
+**Performance:** hero photo ≤200 KB AVIF at 1920w. Spotlight is a CSS gradient, not an image.
+
+**Avoid:** bright cheerful gym stock, white-background product shots, smiling group classes, soft gradients, blue accents, "Three reasons to switch", any "transformation" before/after layout — that's MLM-tier, not Equinox-tier.
+
+## Component families
+None at install time.
+
+## Details
+- **Selection:** `hsl(var(--signal-red) / 0.4)` — red highlight on the matte-black canvas.
+- **Focus ring:** 2px solid signal-red.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/gym-chain/tokens.ts

@@ -0,0 +1,196 @@
+import type { Direction } from "../schema";
+
+// gym-chain — Equinox / Barry's / Rumble atmosphere. Matte black, full-bleed
+// mid-motion athlete photography, signal red accent. The room is dark, the
+// lighting is theatrical, the bass is hitting. Marketing reads as event flyer,
+// not service brochure.
+export const gymChain: Direction = {
+  name: "gym-chain" as Direction["name"],
+  ethos:
+    "Equinox matte-black luxury · Barry's red-room theatre · Rumble boxing-poster bravado · " +
+    "SoulCycle ritual atmosphere · F45 functional grid",
+  references: [
+    { brand: "Equinox", trait: "matte black, full-bleed campaign photography, restrained gold accent" },
+    { brand: "Barry's Bootcamp", trait: "signal red room, oversized condensed display, boxing-poster confidence" },
+    { brand: "Rumble Boxing", trait: "neon-red ring lighting, boxing-card typography, hype-build campaigns" },
+    { brand: "SoulCycle", trait: "ritual studio darkness, candle-and-spot lighting, manifesto copy" },
+    { brand: "F45 Training", trait: "functional-grid schedule, intensity badges, color-coded class types" },
+  ],
+  feel:
+    "Matte black with one signal red. Full-bleed athlete photography mid-motion — sweat, " +
+    "lens flare, theatrical spotlight. Condensed display type at billboard scale. The page " +
+    "is a venue, not a website. Booking a class feels like buying a ticket.",
+
+  fonts: {
+    display: {
+      family: "Bebas Neue",
+      fallback: ["Anton", "Oswald", "Impact", "Arial Narrow Bold", "sans-serif"],
+      from: "Barry's/Rumble condensed all-caps headline — boxing-card poster weight, billboard-scale presence",
+      googleFont: "Bebas+Neue",
+      weights: [400],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "Helvetica Neue", "sans-serif"],
+      from: "Equinox clean modern sans — neutral under heavy display, never decorative under campaign photography",
+      googleFont: "Inter",
+      weights: [400, 500, 600, 700, 800],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+      from: "F45 tabular schedule numerics — class times, intensity tiers, location codes",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "0.03em",                  // condensed display needs positive tracking for billboard clarity
+    bodyTracking: "0.005em",
+    fontFeatureSettings: '"tnum", "ss01", "cv11"',
+    h1ScaleClamp: "clamp(3.5rem, 11vw, 9rem)",  // billboard / event-poster scale
+    bodyBaseSize: "1rem",                       // 16px — comfortable on near-black
+    bodyLineHeight: "1.55",                     // tighter than editorial, this is event copy not prose
+  },
+
+  colors: {
+    background: { hsl: "0 0% 5%", from: "Equinox matte-black studio wall — graphite, never blue-tinted" },
+    foreground: { hsl: "0 0% 96%", from: "white-hot lighting bounce — venue-spotlight white" },
+    card: { hsl: "0 0% 8%", from: "elevated surface — one stop up, intensity-badge tier" },
+    popover: { hsl: "0 0% 11%", from: "menu/popover surface, two stops up" },
+    primary: { hsl: "356 78% 50%", from: "Barry's signal red — the canonical red-room mark, used on CTAs and intensity peaks" },
+    primaryForeground: { hsl: "0 0% 96%", from: "white on signal red" },
+    secondary: { hsl: "0 0% 13%", from: "Equinox shadow-tier — secondary surface, deeper grain" },
+    secondaryForeground: { hsl: "0 0% 96%", from: "white on shadow" },
+    muted: { hsl: "0 0% 15%", from: "muted surface — same family as secondary, fractionally lighter" },
+    mutedForeground: { hsl: "0 0% 62%", from: "stage-light gray — bystander text, instructor bio in low light" },
+    accent: { hsl: "0 0% 18%", from: "hover surface — brushed-steel highlight" },
+    accentForeground: { hsl: "0 0% 96%", from: "white on accent" },
+    border: { hsl: "0 0% 22%", from: "concrete-floor hairline — visible only on inspection" },
+    input: { hsl: "0 0% 22%", from: "same as border — single hairline language" },
+    ring: { hsl: "356 78% 50%", from: "signal red — focus is the brand color, never neutral" },
+    destructive: { hsl: "356 78% 50%", from: "same as primary — there is one red, and it is the brand" },
+    destructiveForeground: { hsl: "0 0% 96%", from: "white on red" },
+    brand: {
+      "signal-red": { hsl: "356 78% 50%", from: "Barry's red-room 356 — the venue's color, also primary" },
+      "red-deep": { hsl: "356 80% 38%", from: "deeper red — used only for gradient-bottom on hero spotlights" },
+      black: { hsl: "0 0% 5%", from: "Equinox matte — the canvas, also background" },
+      white: { hsl: "0 0% 96%", from: "spotlight bounce — the body color, also foreground" },
+      "gray-stage": { hsl: "0 0% 62%", from: "stage-light gray — secondary text" },
+      gold: { hsl: "41 56% 56%", from: "Equinox premium-tier gold — used only on member-only badges, never as primary" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160, 200],   // dramatic — venue scale
+    containerMax: "max-w-7xl",                  // wide — full-bleed photography needs it
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-36 lg:pb-24",
+      default: "py-20 lg:py-32",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0.25rem",                            // tight — boxing-card chamfer, never pillow
+    pillsAllowed: true,                         // intensity badges read as pills, schedule chips too
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-red":
+        "0 0 0 1px hsl(var(--signal-red) / 0.4), " +
+        "0 8px 24px hsl(var(--signal-red) / 0.25), " +
+        "0 40px 100px hsl(var(--signal-red) / 0.3)",
+      "spotlight":
+        "0 -20px 80px hsl(var(--signal-red) / 0.18), " +
+        "0 60px 120px hsl(0 0% 0% / 0.6)",
+      "card-deep":
+        "0 1px 0 0 hsl(var(--border)), " +
+        "0 30px 80px hsl(0 0% 0% / 0.5)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 800,                              // entrance — fast enough to feel kinetic
+      loop: 2200,                               // pulse rings, intensity bars
+      ambient: 22000,                           // ken-burns over hero athlete photography
+    },
+    keyframes: {
+      "kinetic-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(28px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 800,
+        iteration: "once",
+        purpose: "section/headline entrance — kinetic, with momentum",
+      },
+      "intensity-pulse": {
+        css:
+          "0%, 100% { opacity: 1; transform: scale(1); }\n" +
+          "50% { opacity: 0.65; transform: scale(0.96); }",
+        defaultDuration: 2200,
+        iteration: "infinite",
+        purpose: "live class indicator — intensity dot pulses in tempo with red-room beat",
+      },
+      "spotlight-sweep": {
+        css:
+          "0% { background-position: -100% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 6000,
+        iteration: "infinite",
+        purpose: "subtle horizontal light-sweep on featured class card — venue spotlight",
+      },
+      "ken-burns-athlete": {
+        css:
+          "0% { transform: scale(1.08) translate(0, 0); }\n" +
+          "100% { transform: scale(1.2) translate(-3%, -1.5%); }",
+        defaultDuration: 22000,
+        iteration: "infinite",
+        purpose: "hero athlete photography drift — slow camera push, broadcast feel",
+      },
+      "pulse-red": {
+        css:
+          "0%, 100% { box-shadow: 0 0 0 0 hsl(var(--signal-red) / 0.6); }\n" +
+          "50% { box-shadow: 0 0 0 16px hsl(var(--signal-red) / 0); }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "single book-now CTA heartbeat ring — one per page, never more",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary action = signal-red filled rectangle, white text, 0.25rem radius, uppercase tracking 0.1em label, condensed display face. " +
+      "Secondary = transparent with 1px border in --border, white text, hover lifts to --accent. " +
+      "Tertiary = text-link in signal-red, uppercase, underline-on-hover. " +
+      "Never softened, never pilled-out — the button is a boxing-card stamp.",
+    card:
+      "0.25rem radius, hairline border (--border), bg-card. Padding p-6 lg:p-8. " +
+      "Class cards use card-deep shadow; live/featured cards use glow-red; hero photography uses spotlight. " +
+      "Headline in condensed display uppercase, label in mono uppercase tracking 0.1em.",
+    input:
+      "Full box, 1px --border, bg-card, 0.25rem radius. Label sits above in mono uppercase tracking 0.1em. " +
+      "Focus ring is signal-red, 2px.",
+    cta:
+      "The single book-now CTA per page uses pulse-red ring. Inline CTAs are text-links in signal-red, uppercase tracking 0.08em. " +
+      "Never a soft pastel, never a gradient softer than red → red-deep.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--signal-red) / 0.4)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};