@stylecrib/cli 0.3.1 → 0.3.3

package/themes/vet-modern/tokens.ts

@@ -0,0 +1,194 @@
+import type { Direction } from "../schema";
+
+// vet-modern — Bond Vet / Modern Animal walk-in-friendly clinical.
+// Soft sage-green accent on cream, friendly Inter, dense-but-soft booking
+// chrome. Clinical competence with the bedside manner of a Brooklyn corner
+// clinic — not a hospital EHR, not a pet-DTC playful boutique. The page
+// books an appointment fast.
+export const vetModern: Direction = {
+  name: "vet-modern" as Direction["name"],
+  ethos:
+    "Bond Vet sage-and-cream walk-in · Modern Animal hotel-lobby clinical · " +
+    "Small Door membership-friendly chrome · Heart + Paw spa-meets-clinic warmth · " +
+    "GoodVets neighborhood-clinic candor",
+  references: [
+    { brand: "Bond Vet", trait: "soft sage on cream + walk-in-friendly booking chrome" },
+    { brand: "Modern Animal", trait: "hotel-lobby clinical, generous whitespace, membership-first" },
+    { brand: "Small Door Veterinary", trait: "membership-friendly chrome, app-led scheduling" },
+    { brand: "Heart + Paw", trait: "spa-meets-clinic warmth, pet-portrait photography" },
+    { brand: "GoodVets", trait: "neighborhood-clinic candor, locations-first IA" },
+  ],
+  feel:
+    "Walk-in-friendly clinical. Cream-tinted surfaces with one principled sage-green " +
+    "accent — never two competing colors. Friendly Inter, dense-but-soft booking chrome, " +
+    "tabular numerics for times and prices. The page is a tool: locations grid resolves " +
+    "to hours, services list resolves to a price range, booking widget resolves to a " +
+    "Tuesday-2:30 slot in two taps. Clinical competence without the EHR coldness.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Bond Vet / Modern Animal — Inter as display reads competent + approachable",
+      googleFont: "Inter",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "same family — clinical tools use one face; hierarchy via weight + size",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "ui-monospace", "SFMono-Regular", "monospace"],
+      from: "appointment times, prices, clinic hours — tabular numerics, instrument feel",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.015em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "tnum", "calt"',
+    h1ScaleClamp: "clamp(1.875rem, 4vw, 3rem)",      // tool-first; not magazine-large
+    bodyBaseSize: "0.9375rem",                         // 15px — denser than marketing
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "60 24% 97%", from: "Bond Vet warm cream — softer than dashboard-white, never yellow-spa" },
+    foreground: { hsl: "168 28% 14%", from: "deep evergreen-ink — never black; ties to the sage accent without competing" },
+    card: { hsl: "0 0% 100%", from: "true white card — lifts cleanly off cream for booking-panel tiles" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "152 38% 42%", from: "Bond Vet sage-green — principal action, the single brand color" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on sage" },
+    secondary: { hsl: "60 22% 93%", from: "deeper cream — secondary panel, location-card bg" },
+    secondaryForeground: { hsl: "168 28% 18%", from: "evergreen ink on cream panel" },
+    muted: { hsl: "60 18% 95%", from: "table-row stripe — quietest cream, near-bg" },
+    mutedForeground: { hsl: "168 10% 42%", from: "soft slate-sage — captions, hours, sub-labels" },
+    accent: { hsl: "152 30% 90%", from: "sage-tint — hover and selected-slot surface" },
+    accentForeground: { hsl: "152 38% 24%", from: "deep sage on tint" },
+    border: { hsl: "60 16% 86%", from: "warm hairline — Bond directory rule, never cool gray" },
+    input: { hsl: "60 16% 86%", from: "same as border" },
+    ring: { hsl: "152 38% 42%", from: "primary sage, focus only" },
+    destructive: { hsl: "352 64% 50%", from: "warm clinical red — cancel-appointment, urgent-care alert" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on warm red" },
+    brand: {
+      sage: { hsl: "152 38% 42%", from: "= primary; Bond Vet principal — the single brand color" },
+      "sage-soft": { hsl: "152 30% 90%", from: "alias for accent — booked-slot pill, included-in-membership chip" },
+      "sage-deep": { hsl: "152 42% 28%", from: "hover/active sage — buttons darken to this on press" },
+      cream: { hsl: "60 24% 97%", from: "alias for background — Bond cream paper" },
+      kraft: { hsl: "40 22% 80%", from: "deeper warm border — location-card divider, hours-list rule" },
+      sun: { hsl: "44 84% 60%", from: "Modern Animal walk-in-available amber — clinic-open-now indicator, never primary" },
+      "sun-soft": { hsl: "44 84% 92%", from: "amber tint — same-day-availability chip background" },
+      ink: { hsl: "168 28% 14%", from: "alias for foreground — deep evergreen, never pure black" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 64, 80],   // dashboard-allowed micro-steps
+    containerMax: "max-w-7xl",                              // tool-wide — booking grids edge-to-edge
+    containerPadding: "px-4 lg:px-6",
+    sectionPadding: {
+      hero: "pt-16 pb-10 lg:pt-20 lg:pb-14",
+      default: "py-12 lg:py-18",
+      tight: "py-8 lg:py-12",
+    },
+  },
+
+  radius: {
+    base: "0.625rem",                  // 10px — softer than dense-utility, less pillowy than DTC
+    pillsAllowed: true,                // pills core — appointment-status, service-type, availability
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-clinic":
+        "0 1px 2px hsl(168 30% 20% / 0.04), 0 4px 12px hsl(168 30% 20% / 0.06)",
+      "shadow-clinic-lg":
+        "0 2px 4px hsl(168 30% 20% / 0.05), 0 12px 28px hsl(168 30% 20% / 0.08)",
+      "shadow-booking":
+        "0 4px 8px hsl(168 30% 20% / 0.06), 0 24px 48px hsl(168 30% 20% / 0.12)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 380,
+      loop: 1800,
+      ambient: 0,                      // no ambient on a booking tool
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 380,
+        iteration: "once",
+        purpose: "panel and row entrance — short, dashboard-quick",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.97); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 180,
+        iteration: "once",
+        purpose: "modal, popover, slot-picker — confirms click without delay",
+      },
+      "soft-pulse": {
+        css:
+          "0%, 100% { opacity: 1; }\n" +
+          "50% { opacity: 0.5; }",
+        defaultDuration: 1800,
+        iteration: "infinite",
+        purpose: "open-now indicator dot and live-availability ping — quiet attention",
+      },
+      "shimmer": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 1400,
+        iteration: "infinite",
+        purpose: "appointment-list and slot-grid loading skeleton",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Primary = solid sage fill, white text, rounded-lg, shadow-clinic. " +
+      "Secondary = white fill with 1px warm border, evergreen-ink text. Tertiary = sage text-link. " +
+      "Destructive = warm-red ghost (border + text), upgrades to solid only on confirm step. " +
+      "Hover: shadow-clinic-lg + 4% darken to sage-deep, never scale (jumpiness in clinical chrome reads error-prone).",
+    card:
+      "Rounded-lg, white fill on cream background, 1px warm border, shadow-clinic. " +
+      "Internal padding p-5 lg:p-6 (denser than marketing). " +
+      "Location-card variant: 4px sage top-border when open-now, 4px kraft top-border when closed-today. " +
+      "Booking-widget card uses shadow-booking for emphasis — the primary tool on the page.",
+    input:
+      "Rounded-md, 1px warm border, white background. Compact height (h-9). " +
+      "Label sits above in Inter 500. Focus = 2px sage ring at 40% opacity. " +
+      "Pet-name and reason-for-visit inputs may show a small paw glyph in left padding. " +
+      "Inline validation appears as the user types — clinical forms need real-time feedback.",
+    cta:
+      "Primary sage solid is the dashboard default — 'Book appointment', 'Find a clinic', 'Become a member'. " +
+      "Side-by-side primary + secondary is allowed for booking flows (primary = book now, secondary = see all times). " +
+      "Sun (amber) is reserved for walk-in-available context — chip only, never a button face.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--sage) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/web3-restraint/THEME.md

@@ -0,0 +1,87 @@
+# Design Direction — Web3-Restraint
+
+## Ethos
+Ethereum Foundation slate · Vitalik blog hairlines · paradigm.xyz mono grid · a16z report formality · Allium Labs docs technical-paper restraint
+
+## Feel
+The opposite of crypto-onchain. A whitepaper, not a launch page. Monospace labels, hairline rules, two near-blacks, one near-paper, no gradient and no glow. Color is reserved for inline code, links, and the rare diagram callout. The page reads like a footnote in a research index.
+
+## Reference brands
+- **ethereum.org** → slate grey neutrals, Inter body sized restrained, sparse chrome. The headline is information, not a banner.
+- **Vitalik blog (vitalik.eth.limo)** → serif body, hairline rules, near-zero ornament. Long-form research at default browser leading.
+- **paradigm.xyz** → monospace prominence, black-on-white, structured two-column grid. The mono is a first-class face, not a code-block ghetto.
+- **a16z crypto reports** → formal layout, restrained color, whitepaper-style document conventions.
+- **Allium Labs docs** → light gray surfaces, JetBrains Mono for labels and code, technical-paper density without claustrophobia.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Do not introduce numbered or generic tokens — if a new color is needed, name a brand it traces to.
+
+Surface stack is **near-paper slate** (background) → pure white (card) → slightly cooler slate (secondary/muted/accent). Depth comes from 1px hairline borders, never from fill differentiation. The palette is monochromatic by intent — one chromatic accent (`--brand-link`) and one warning (`--destructive`). Everything else is slate.
+
+Brand tokens: `--ink`, `--paper`, `--ink-soft`, `--link`, `--code-bg`, `--rule-strong`. Primary shares the foreground ink — there is no separate brand color, because the brand IS the restraint.
+
+## Typography
+- **Display:** Inter (ethereum.org display). h1–h4. Tracking `-0.01em` — tight but not aggressive. Display sits restrained at clamp(1.75rem, 3.5vw, 2.5rem); never larger.
+- **Body:** Source Serif Pro (Vitalik blog body). Body base **16px** with **line-height 1.65** — research-paper leading, optimized for long-form arguments.
+- **Mono:** JetBrains Mono (paradigm.xyz / Allium docs). First-class face: section labels in uppercase 0.75rem mono, inline code, addresses, callout markers. Letter-spacing `0.04em` on uppercase mono labels.
+
+H1 uses `clamp(1.75rem, 3.5vw, 2.5rem)` — deliberately small. Numbers always use `font-variant-numeric: tabular-nums` and `"zero"` for the slashed zero. Font features: `"tnum"`, `"zero"`, `"ss01"`.
+
+## Spacing
+- **Container:** `max-w-3xl px-4 lg:px-8` — paradigm.xyz reading-column width, 768px. Wider columns break the whitepaper rhythm.
+- **Section padding tiers:**
+  - Hero: `pt-16 pb-10 lg:pt-24 lg:pb-16` (the abstract is the hero — no banner)
+  - 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 96. No arbitrary spacing.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. Pure black and pure white are forbidden — `--paper` (near-paper slate) and `--ink` (deep slate) replace them.
+
+The palette is intentionally monochromatic. Chromatic accent is reserved for `--brand-link` (the only true color in the design), which doubles as the focus ring. `--destructive` exists for alerts but is muted, never bright.
+
+## Radius
+`--radius: 0.125rem` (2px). **Barely-there rounding** — sharp enough to feel technical, soft enough to not feel hostile. Pills are disallowed (`pillsAllowed: false`) — they read web-app, not research-paper. Status indicators use plain text with a leading mono dash.
+
+## Shadows
+**Minimal.** Three utilities: `.hairline-top`, `.hairline-bottom`, `.rule-strong`. All are 1px border-equivalents (top edge, bottom edge, or stronger figure separator). No drop shadows. No glows. The figure separator (`--rule-strong`) is the heaviest element on the page.
+
+## Motion
+Single keyframe: `fade-in` (pure opacity, 200ms). That is the only entrance. No translate, no scale, no marquee, no parallax, no ambient loops. Figures and callouts **appear** — they do not arrive.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — wrapped in a media query in the single motion utility. Loop and ambient durations are zero by design; this direction rejects ambient motion entirely.
+
+## Component patterns
+- **Buttons:** text link primary by default — link-blue, no underline at rest, underline on hover. The single solid button per page (download-pdf, abstract-cta) is a ghost: 1px ink border with ink text, no fill. Filled solid buttons in primary color are one-of-one moments and **never carry gradient or shadow**.
+- **Cards:** 1px hairline border, white fill against the slate bg, no shadow, 2px radius. Padding `p-6 lg:p-8`. Title in Inter 600 at body+1 size, label in mono uppercase 0.75rem above. Cards never carry color fill — color is reserved for inline code and link.
+- **Inputs:** border-bottom only (1px `--border`). No full box. Label sits above in mono uppercase 0.75rem with letter-spacing `0.04em`. Focus thickens the border-bottom to 2px in `--ring` blue. Placeholder is italic in `--mutedForeground`.
+- **CTA links:** inline text link in `--link`, underline on hover only. Section-level CTA is a hairline-bordered ghost button with ink text. **Never a chip, never a gradient, never a glow.** The link IS the design.
+
+## Recommended rich media
+This direction is hostile to glossy imagery. Lead media is **diagrams, charts, and figures** — never hero photography. Figures are flat 2D, single-line-weight, monochromatic with a single accent stroke in `--brand-link`. Think paradigm.xyz architecture diagrams or ethereum.org protocol illustrations. Charts are unfilled line charts on a white card with a 1px `--rule-strong` axis and JetBrains Mono labels.
+
+**AI tool recommendations:** **Excalidraw** for hand-drawn-feel architecture diagrams (matches the technical-paper aesthetic). **D2** or **Mermaid** rendered with custom theme matching the slate palette for system diagrams. **Recharts** or **Observable Plot** for data viz — both support flat-fill, single-color, axis-only styling. Avoid Midjourney and Flux entirely — generative photography breaks the whitepaper feel instantly.
+
+**Aspect ratios:** 16:9 for diagrams and architecture figures (matches whitepaper PDF figure conventions). Square 1:1 acceptable for small inline diagrams. Never 3:2 or 4:5 — those signal editorial photography, which this direction rejects.
+
+**Video:** disallowed by default. Research papers don't autoplay. If a demo video is essential, embed as a static poster image with a play-button overlay that opens the video in a new tab — never inline autoplay.
+
+**Performance:** every figure must be inline SVG or AVIF ≤30 KB. The page should weigh under 200 KB total. LCP under 1.5s. If a figure pushes past 50 KB, it is too detailed — simplify the diagram.
+
+**Avoid:** all stock photography, 3D renders, gradient backgrounds, glassmorphic surfaces, holographic textures, generative AI photography, lens flare, particle systems, animated GIFs, blockchain-glyph clipart (purple-and-orange node-graph nonsense), NFT-aesthetic anything. This direction is the **explicit antidote** to onchain visual language.
+
+**Accessibility:** every figure has a full prose caption that reproduces the diagram's claim in words. Diagrams must work as text descriptions. Alt-text follows the same standard.
+
+## 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(--brand-link) / 0.15)` background — pale link-blue wash, academic-highlighter feel.
+- **Focus ring:** `2px solid hsl(var(--ring))` in link-blue. Visible but not loud.
+- **Scrollbar:** thin — matches the hairline rule language.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason. The Director's consistency pass lists all exceptions for human review.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/web3-restraint/tokens.ts

@@ -0,0 +1,154 @@
+import type { Direction } from "../schema";
+
+export const web3Restraint: Direction = {
+  name: "web3-restraint",
+  ethos:
+    "Ethereum Foundation slate · Vitalik blog hairlines · paradigm.xyz mono grid · a16z report formality · Allium docs technical-paper restraint",
+  references: [
+    { brand: "ethereum.org", trait: "slate grey neutrals, Inter body, sparse chrome" },
+    { brand: "Vitalik blog (vitalik.eth.limo)", trait: "serif body, hairline rules, near-zero ornament" },
+    { brand: "paradigm.xyz", trait: "monospace prominence, black-on-white, structured grid" },
+    { brand: "a16z crypto reports", trait: "formal layout, restrained color, two-column whitepaper" },
+    { brand: "Allium Labs docs", trait: "light gray surfaces, JetBrains Mono for code and labels" },
+  ],
+  feel:
+    "The opposite of crypto-onchain. A whitepaper, not a launch page. " +
+    "Monospace labels, hairline rules, two near-blacks, one near-paper, no gradient and no glow. " +
+    "Color is reserved for inline code, links, and the rare diagram callout. The page reads like a footnote in a research index.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "ethereum.org display — Inter sized restrained, never above 3rem; the headline is information, not a banner",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    body: {
+      family: "Source Serif Pro",
+      fallback: ["Iowan Old Style", "Georgia", "serif"],
+      from: "Vitalik blog body — readable serif at long-form length, paired with sans display and mono labels",
+      googleFont: "Source+Serif+Pro",
+      weights: [400, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "SF Mono", "ui-monospace", "Menlo", "monospace"],
+      from: "paradigm.xyz / Allium docs — mono is a first-class face for labels, addresses, and section markers",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",                 // Inter at display size sits tight, not negative-aggressive
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "zero", "ss01"',  // tabular figures + slashed zero — whitepaper convention
+    h1ScaleClamp: "clamp(1.75rem, 3.5vw, 2.5rem)",  // restrained — Vitalik's blog H1 is ~2rem
+    bodyBaseSize: "1rem",                        // 16px — paradigm and ethereum.org default
+    bodyLineHeight: "1.65",                      // research-paper leading
+  },
+
+  colors: {
+    background: { hsl: "210 17% 98%", from: "near-paper slate — ethereum.org page bg, the lightest cool gray that still reads as paper" },
+    foreground: { hsl: "215 25% 15%", from: "deep slate ink — paradigm.xyz body color, near-black with cool bias" },
+    card: { hsl: "0 0% 100%", from: "pure white card — sits one tier above the slate background, no warm tint" },
+    popover: { hsl: "0 0% 100%", from: "same as card; depth from hairline border only" },
+    primary: { hsl: "215 25% 15%", from: "same as foreground — link and primary share the ink color, paradigm.xyz convention" },
+    primaryForeground: { hsl: "210 17% 98%", from: "paper on ink — used only for the rare solid button" },
+    secondary: { hsl: "210 14% 94%", from: "Allium Labs docs sidebar gray — secondary surfaces, one tier above bg" },
+    secondaryForeground: { hsl: "215 25% 15%", from: "ink on secondary slate" },
+    muted: { hsl: "210 14% 94%", from: "same as secondary — restraint refuses to invent extra grays" },
+    mutedForeground: { hsl: "215 12% 42%", from: "ethereum.org caption gray — bylines, footnotes, table meta" },
+    accent: { hsl: "210 14% 94%", from: "same as secondary — hover state, no new hue" },
+    accentForeground: { hsl: "215 25% 15%", from: "ink on hover" },
+    border: { hsl: "215 16% 88%", from: "hairline slate — Vitalik blog rule color, barely visible at 1px" },
+    input: { hsl: "215 16% 88%", from: "same as border — inputs read as hairline-ruled fields, never filled boxes" },
+    ring: { hsl: "212 80% 45%", from: "= brand.link — focus and link share the only chromatic accent in the palette" },
+    destructive: { hsl: "358 65% 42%", from: "academic-paper alert red — distinct from link blue, not saturated" },
+    destructiveForeground: { hsl: "210 17% 98%", from: "paper on alert" },
+    brand: {
+      ink: { hsl: "215 25% 15%", from: "= foreground; deep slate ink, also semantic for primary text" },
+      paper: { hsl: "210 17% 98%", from: "= background; near-paper slate" },
+      "ink-soft": { hsl: "215 18% 28%", from: "subheadings and lead paragraphs — one tier above body ink" },
+      link: { hsl: "212 80% 45%", from: "ethereum.org link blue — the only real color in the palette, used for href and focus" },
+      "code-bg": { hsl: "210 16% 96%", from: "Allium docs inline-code surface — flatter than card, sits under JetBrains Mono" },
+      "rule-strong": { hsl: "215 20% 70%", from: "paradigm.xyz section-rule gray — stronger than border, used for figure separators" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96],  // medium — whitepaper rhythm, not luxury
+    containerMax: "max-w-3xl",                              // 768px reading column — paradigm.xyz body width
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-16 pb-10 lg:pt-24 lg:pb-16",                // the abstract is the hero, not a banner
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "0.125rem",                            // 2px — barely-there rounding, paradigm.xyz button feel
+    pillsAllowed: false,                          // no pills — they read web-app, not research-paper
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-top":
+        "0 -1px 0 0 hsl(var(--border))",         // section divider rule, top edge
+      "hairline-bottom":
+        "0 1px 0 0 hsl(var(--border))",          // section divider rule, bottom edge
+      "rule-strong":
+        "0 1px 0 0 hsl(var(--brand-rule-strong))", // figure separator, slightly heavier than hairline
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 200,                                // brief, technical — no slow fades
+      loop: 0,                                    // no loops — research papers don't pulse
+      ambient: 0,                                 // no ambient motion
+    },
+    keyframes: {
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "the only entrance — pure opacity, no translate, no scale; figures and callouts appear, they do not arrive",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Text link primary by default — link-blue, no underline at rest, underline on hover. " +
+      "The single solid button per page (the abstract CTA, the download-pdf) renders as a 1px ink border with ink text, no fill. " +
+      "Filled solid buttons in primary color are reserved for one-of-one moments and never carry gradient or shadow.",
+    card:
+      "1px hairline border, white fill against the slate bg, no shadow, 2px radius. " +
+      "Internal padding p-6 lg:p-8. Title in Inter 600 at body-+1 size, label in mono uppercase 0.75rem above. " +
+      "Cards never carry color fill — color is reserved for inline code and link.",
+    input:
+      "Border-bottom only (1px --border). No full box. Label sits above in mono uppercase 0.75rem with letter-spacing 0.04em. " +
+      "Focus thickens the border-bottom to 2px in --ring blue. Placeholder is italic in mutedForeground.",
+    cta:
+      "Inline text link in --link, underline on hover only. Section-level CTA is a hairline-bordered ghost button with ink text. " +
+      "Never a chip, never a gradient, never a glow. The link IS the design.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--brand-link) / 0.15)",  // pale link-blue wash — academic highlighter
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",        // 2px solid in link-blue — visible but not loud
+    scrollbarStyle: "thin",                          // thin slate scrollbar matches the hairline language
+  },
+};

package/themes/wellness-active/THEME.md

@@ -0,0 +1,102 @@
+# Design Direction — Wellness-Active
+
+## Ethos
+Strava signal-orange · Whoop recovery-green · Peloton matte-black · Garmin tabular density · Athletic Greens premium cream
+
+## Feel
+Dark cinematic canvas with one electric signal color burning through each section. Oversized metric numerals — PRs, heart-rate zones, strain scores — set in tabular mono. Body-in-motion photography, kinetic graph reveals, a dashboard that reads like a podium. This is the "I just hit a PR" aesthetic: performance and recovery treated as twin disciplines.
+
+## Reference brands
+- **Strava** → signal-orange on near-black, map-and-data hero. Orange is THE activity color; it shows up once per section and means *effort logged*.
+- **Whoop** → deep graphite black, signal-green recovery state, ring-and-graph hero. Recovery is its own semantic color, never decorative.
+- **Peloton** → matte black canvas, signal-red urgency, cinematic instructor portraits with ken-burns drift.
+- **Garmin Connect** → dark dashboard, signal-blue HUD plots, dense tabular health data with tabular-num mono.
+- **Athletic Greens** → warm cream foreground on dark — the premium-supplement off-white that keeps the brand from feeling cheap-tech.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Do not introduce numbered or generic tokens — if a new color is needed, name a brand it traces to.
+
+Surface stack is **graphite black** (background) → one stop up (card) → two stops up (popover) → matte-steel (secondary/muted/accent). Depth comes from hairline borders plus a single `card-lift` drop shadow for metric tiles.
+
+Brand tokens: `--signal-orange`, `--recovery-green`, `--strain-blue`, `--zone-yellow`, `--cream`, `--graphite`. Primary is Strava signal-orange; recovery actions (sleep, rest, mark complete) swap to recovery-green as a semantic — never a stylistic — choice.
+
+## Typography
+- **Display:** Archivo (Strava/Whoop modern grotesque). h1–h4, broad caps, athletic stance at weight 800. Tracking `-0.02em` — big display tightens at scale.
+- **Body:** Inter (Garmin/Peloton clean UI sans). Body base **16px** with **line-height 1.55** — this is a dashboard, not a magazine.
+- **Mono:** JetBrains Mono. Tabular numerics for splits, BPM, watts, recovery % — instrument-cluster heritage.
+
+H1 uses `clamp(3.5rem, 11vw, 9rem)` — oversized because *the metric is the headline*. PR numbers, total miles, recovery scores get the full Archivo display treatment. Numbers always use `font-variant-numeric: tabular-nums`. Font features: `"tnum"`, `"ss01"`, `"cv11"`.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-10` — wide. Graphs and split-tables need horizontal room.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-12 lg:pt-32 lg:pb-20`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-10 lg:py-14`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128. No arbitrary spacing.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens.
+
+The signal-orange rule: **one signal color burns per section**, and it is almost always orange. Recovery-green is reserved for explicit recovery semantics (sleep score, rest day, completed-and-cooled-down). Strain-blue and zone-yellow live in graph plots only — they describe data, they do not decorate UI.
+
+Pure white and pure black are forbidden. `--cream` (warm Athletic Greens off-white) replaces white. `--graphite` (Whoop deep black with a slight blue bias) replaces black.
+
+## Radius
+`--radius: 0.5rem`. Soft enough for metric tiles, never pillow. Pills ARE allowed (`pillsAllowed: true`) — zone tags, activity-type chips and heart-rate badges read as pills because that's the established sport-tech convention.
+
+## Shadows
+**Glow.** Three utilities:
+- `.glow-signal` — orange glow, used for active live-session tiles
+- `.glow-recovery` — green glow, used for recovery/rest tiles
+- `.card-lift` — neutral drop shadow for default metric tiles, no color tint
+
+Drop shadows lean dark (HSL 220 14% 0%) because the canvas is graphite — light-tinted shadows would muddy.
+
+## Motion
+Six keyframes — this direction is animated because dashboards perform:
+- `metric-count` (700ms) — the headline number rises into place before its label
+- `graph-trace` (1600ms) — SVG line-graph draws left-to-right on enter
+- `heartbeat` (1800ms, infinite) — live-session BPM dot pulses in a real cardiac rhythm, *not* a sine wave
+- `strain-ring` (1400ms) — Whoop-style circular progress ring fills to current value
+- `ken-burns-hero` (18000ms, infinite) — Peloton instructor portrait drift
+- `pulse-signal` (2200ms, infinite) — single start-workout CTA heartbeat ring
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored in every utility — heartbeat collapses to a static dot, graph-trace shows instantly, ken-burns disables.
+
+## Component patterns
+- **Buttons:** primary = signal-orange filled rectangle, graphite text, uppercase tracking `0.08em` label. Secondary = transparent + 1px border, cream text, hover lifts to `--accent`. Tertiary = signal-orange text-link with underline-on-hover. Recovery actions use recovery-green fill — semantic, not stylistic.
+- **Cards:** `0.5rem` radius, hairline border, bg-card. Padding `p-6 lg:p-8`. Headline metric in oversized Archivo display, label in mono uppercase tracking `0.1em`. Live-session cards use `glow-signal`; recovery cards use `glow-recovery`; default tiles use `card-lift`.
+- **Inputs:** full box, 1px `--border`, `0.5rem` radius. Label above in mono uppercase tracking `0.08em`. Focus ring is signal-orange, 2px. Units (bpm, kg, km) live in a mono suffix slot inside the input.
+- **CTA:** hero start-workout button uses `pulse-signal` — one per page only. Inline CTAs are signal-orange text-links. **Never a green primary** unless it is semantically a recovery action.
+
+## Recommended rich media
+Wellness-Active leans on **body-in-motion photography**: silhouettes against sunrise, mid-stride runners, weight-room shadows, peloton riders shot from low angles with rim light. Color-grade toward **Kodak Vision3 500T with crushed shadows and warm highlights** — cinematic athletic, never glossy stock. Instructor portraits should feel Peloton-cinematic: shallow depth, ambient gym backlight, mid-effort breath captured.
+
+Data visualization is first-class media in this direction. Heart-rate plots, strain rings, split tables, calendar heatmaps, route polylines — these *are* the imagery. SVG line plots use 2px strokes in signal-orange, strain-blue or zone-yellow depending on what's measured. Route maps render in Mapbox dark style with a 3px signal-orange polyline.
+
+**AI tool recommendations:** **Midjourney / Flux** prompts like *"athlete mid-stride at dawn, low rim light, Kodak Vision3 500T, shallow depth of field, cinematic"* for hero photography; *"Peloton instructor portrait, gym backlight, anamorphic lens flare suppressed, 50mm"* for portraiture. Avoid anything that reads "stock fitness model on white background" — the canvas is dark, the energy is *during* the workout, not the marketing shoot.
+
+**Aspect ratios:** 21:9 cinematic for hero (Peloton/Strava cover-shot convention); 4:5 portrait for instructor cards; 16:9 for embedded session replays. Never 1:1 square (Instagram fitness influencer territory, wrong feel).
+
+**Video:** loops are welcome but kept silent and short — autoplay muted, ≤6s, AV1 ≤2 MB. Ken-burns on a still is preferable to actual video where the still does the job. Hero session-replays use a poster image and click-to-play, never autoplay sound.
+
+**Performance:** hero AVIF ≤200 KB at 2400w; instructor cards ≤90 KB; SVG plot data inlined (≤8 KB). LCP under 2s. Dark backgrounds tolerate higher JPEG compression than light — exploit that.
+
+**Avoid:** generic stock fitness photography (smiling on white), gradient overlays on photos (we use color grade, not CSS gradient), kale-and-yoga-mat lifestyle stock (that's a different wellness aesthetic), pastel illustration (this is hard signal, not soft).
+
+**Accessibility:** all data viz needs a tabular fallback view. A line plot must also exist as a sortable table. Color is never the only signal — recovery-green status always pairs with a "Recovered" text label. Long-form alt-text for hero photography: describe the action, not the brand.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established. Expect early conventions around `<MetricTile>`, `<HeartRatePlot>`, `<StrainRing>`, `<SessionCard>`.
+
+## Details
+- **Selection:** `hsl(var(--signal-orange) / 0.35)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring))` — thicker than editorial, this is a touch-and-tap dashboard.
+- **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.