@stylecrib/cli 0.3.1 → 0.3.2

package/themes/wellness-active/tokens.ts

@@ -0,0 +1,203 @@
+import type { Direction } from "../schema";
+
+export const wellnessActive: Direction = {
+  name: "wellness-active",
+  ethos:
+    "Strava signal-orange · Whoop recovery-green · Peloton matte-black · Garmin tabular density · Athletic Greens premium cream",
+  references: [
+    { brand: "Strava", trait: "signal orange on near-black + map-and-data hero" },
+    { brand: "Whoop", trait: "deep black + signal green + recovery-graph hero" },
+    { brand: "Peloton", trait: "matte black + signal red + cinematic instructor portraits" },
+    { brand: "Garmin Connect", trait: "dark canvas + signal blue + dense health tabular" },
+    { brand: "Athletic Greens", trait: "warm cream + serif + premium-supplement restraint" },
+  ],
+  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.",
+
+  fonts: {
+    display: {
+      family: "Archivo",
+      fallback: ["Inter", "Helvetica Neue", "system-ui", "-apple-system", "sans-serif"],
+      from: "Strava/Whoop modern grotesque — broad caps, athletic stance, broadcast-poster weight at 800",
+      googleFont: "Archivo",
+      weights: [400, 600, 800, 900],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "sans-serif"],
+      from: "Garmin/Peloton clean sans — neutral UI body, never decorative under data",
+      googleFont: "Inter",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "tabular numerics for splits, BPM, watts, recovery % — instrument-cluster heritage from Garmin",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",          // big athletic display tightens at scale — Strava header feel
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "ss01", "cv11"',
+    h1ScaleClamp: "clamp(3.5rem, 11vw, 9rem)",   // oversized PR-number scale — the metric IS the headline
+    bodyBaseSize: "1rem",                         // 16px — comfortable on dark surfaces
+    bodyLineHeight: "1.55",                       // tighter than editorial; this is a dashboard, not a magazine
+  },
+
+  colors: {
+    background: { hsl: "220 14% 5%", from: "Whoop deep black — graphite, not pure ink" },
+    foreground: { hsl: "36 18% 95%", from: "Athletic Greens warm cream — premium, never bone-white on dark" },
+    card: { hsl: "220 12% 8%", from: "elevated surface, one stop up from canvas — graph-card tier" },
+    popover: { hsl: "220 11% 11%", from: "menu/popover surface, two stops up" },
+    primary: { hsl: "18 96% 56%", from: "Strava signal orange — the canonical activity color, used on PRs and CTAs" },
+    primaryForeground: { hsl: "220 14% 5%", from: "graphite on Strava orange — never cream, contrast law" },
+    secondary: { hsl: "220 10% 13%", from: "Peloton matte-steel tier — secondary surface, deeper grain" },
+    secondaryForeground: { hsl: "36 18% 95%", from: "cream on matte-steel" },
+    muted: { hsl: "220 9% 15%", from: "muted surface — same family as secondary, fractionally lighter" },
+    mutedForeground: { hsl: "36 8% 65%", from: "warm-tinted secondary text — locker-room gray" },
+    accent: { hsl: "220 10% 18%", from: "hover surface, Peloton brushed-steel highlight" },
+    accentForeground: { hsl: "36 18% 95%", from: "cream on accent steel" },
+    border: { hsl: "220 8% 20%", from: "Garmin hairline panel-gap — engineered, visible only on inspection" },
+    input: { hsl: "220 8% 20%", from: "same as border — single hairline language" },
+    ring: { hsl: "18 96% 56%", from: "Strava orange — focus is the signal color, never neutral" },
+    destructive: { hsl: "0 84% 58%", from: "Peloton signal red — heart-rate-max alert, not decoration" },
+    destructiveForeground: { hsl: "36 18% 95%", from: "cream on alert red" },
+    brand: {
+      "signal-orange": { hsl: "18 96% 56%", from: "Strava 1828 — the activity orange, also primary" },
+      "recovery-green": { hsl: "142 72% 48%", from: "Whoop recovery green — the rested-and-ready state, also success" },
+      "strain-blue": { hsl: "204 96% 58%", from: "Garmin/Whoop strain blue — cardio-zone HUD, instrument cluster" },
+      "zone-yellow": { hsl: "48 100% 56%", from: "Strava/Garmin tempo-zone yellow — threshold tier on heart-rate plots" },
+      cream: { hsl: "36 18% 95%", from: "Athletic Greens warm cream — premium-supplement off-white, also foreground" },
+      graphite: { hsl: "220 14% 5%", from: "Whoop graphite — the canvas, also background" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128],   // medium density — dashboards breathe but pack data
+    containerMax: "max-w-7xl",         // wide — graphs and split-tables need horizontal room
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-20 pb-12 lg:pt-32 lg:pb-20",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",                   // soft enough for cards, never pillow — sport-tech chamfer
+    pillsAllowed: true,               // zone tags, heart-rate badges and activity-type chips read as pills
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-signal":
+        "0 0 0 1px hsl(var(--signal-orange) / 0.4), " +
+        "0 8px 24px hsl(var(--signal-orange) / 0.2), " +
+        "0 40px 100px hsl(var(--signal-orange) / 0.25)",
+      "glow-recovery":
+        "0 0 0 1px hsl(var(--recovery-green) / 0.4), " +
+        "0 8px 24px hsl(var(--recovery-green) / 0.18), " +
+        "0 40px 100px hsl(var(--recovery-green) / 0.22)",
+      "card-lift":
+        "0 1px 0 0 hsl(var(--border)), " +
+        "0 24px 60px hsl(220 14% 0% / 0.45)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 700,                    // graph rise-in — fast enough to feel responsive, slow enough to read
+      loop: 1800,                     // heartbeat pulses, strain rings
+      ambient: 18000,                 // ken-burns over hero training photography
+    },
+    keyframes: {
+      "metric-count": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 700,
+        iteration: "once",
+        purpose: "PR/metric number entrance — the headline number rises into place before the label",
+      },
+      "graph-trace": {
+        css:
+          "from { stroke-dashoffset: 1000; }\n" +
+          "to { stroke-dashoffset: 0; }",
+        defaultDuration: 1600,
+        iteration: "once",
+        purpose: "SVG line-graph reveal — heart-rate trace draws left-to-right as the section enters viewport",
+      },
+      "heartbeat": {
+        css:
+          "0%, 100% { transform: scale(1); }\n" +
+          "12% { transform: scale(1.08); }\n" +
+          "24% { transform: scale(1); }\n" +
+          "36% { transform: scale(1.04); }\n" +
+          "48% { transform: scale(1); }",
+        defaultDuration: 1800,
+        iteration: "infinite",
+        purpose: "live-session indicator — BPM dot pulses in a real cardiac rhythm, not a sine wave",
+      },
+      "strain-ring": {
+        css:
+          "0% { stroke-dasharray: 0 360; }\n" +
+          "100% { stroke-dasharray: 280 360; }",
+        defaultDuration: 1400,
+        iteration: "once",
+        purpose: "Whoop-style circular progress ring fills to the current strain value on reveal",
+      },
+      "ken-burns-hero": {
+        css:
+          "0% { transform: scale(1.06) translate(0, 0); }\n" +
+          "100% { transform: scale(1.16) translate(-2%, -1%); }",
+        defaultDuration: 18000,
+        iteration: "infinite",
+        purpose: "hero training photography drift — Peloton instructor portrait, slow camera push",
+      },
+      "pulse-signal": {
+        css:
+          "0%, 100% { box-shadow: 0 0 0 0 hsl(var(--signal-orange) / 0.55); }\n" +
+          "50% { box-shadow: 0 0 0 14px hsl(var(--signal-orange) / 0); }",
+        defaultDuration: 2200,
+        iteration: "infinite",
+        purpose: "single primary CTA heartbeat ring — start-workout button, one per page only",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary action = signal-orange filled rectangle, graphite text, 0.5rem radius, uppercase tracking 0.08em label. " +
+      "Secondary = transparent with 1px border in --border, cream text, hover lifts to --accent. " +
+      "Tertiary = text-link in signal-orange, underline-on-hover. " +
+      "Recovery actions (rest, sleep, mark complete) use recovery-green fill instead of orange — semantic, not decorative.",
+    card:
+      "0.5rem radius, hairline border (--border), bg-card one stop above canvas. " +
+      "Padding p-6 lg:p-8. Metric cards use card-lift shadow; live-session cards use glow-signal; " +
+      "recovery cards use glow-recovery. Headline metric in oversized Archivo display, label in mono uppercase tracking 0.1em.",
+    input:
+      "Full box, 1px --border, bg-card, 0.5rem radius. Label sits 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:
+      "The single hero start-workout button uses pulse-signal glow. " +
+      "Inline CTAs are text-links in signal-orange. Never a green primary unless it is semantically a recovery action.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--signal-orange) / 0.35)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/wellness-spa/THEME.md

@@ -0,0 +1,93 @@
+# Design Direction — Wellness-Spa
+
+## Ethos
+Aman cream restraint · Six Senses warm sand · The Class deep cream · Hotel Esencia earth · Open meditation softness
+
+## Feel
+Luxury wellness retreat. The page reads like a folded cotton robe on a stone shelf — quiet, considered, expensive in its withholding. Cream and stone surfaces, a single restrained sage or terracotta accent, vast negative space, slow pacing. The site is for a retreat-booking, a spa-membership, a meditation-app premium tier, a wellness-resort brochure — anywhere the value proposition is *less*, not *more*. The page settles; it does not perform.
+
+## Reference brands
+- **Aman** → cream paper, EB Garamond display, extreme restraint, vast whitespace as luxury signal.
+- **Six Senses** → warm sand and cream pairing, serif headings, photography of stone, water, linen.
+- **The Class by Taryn Toomey** → deep cream surfaces, restrained typography, ceremonial pacing.
+- **Hotel Esencia** → warm earth-tone accent (terracotta-sage palette), EB Garamond, brochure-feel.
+- **Open** → meditation-app warmth, Plus Jakarta as humanist body, soft gradient restraint.
+
+## 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 **cream paper** (background AND card — no card differentiation) → **deeper cream** (secondary) → **stone** (muted) → **sage-soft or terracotta-soft** (the two restrained accent tints). Depth comes from hairline rules and whitespace, never from fill differentiation. The card token equals the background token on purpose — the page is one continuous surface.
+
+Brand tokens: `--cream`, `--cream-deep`, `--sage`, `--sage-soft`, `--terracotta`, `--terracotta-soft`, `--stone`, `--ink`. Primary is **Six Senses sage** — used sparingly, never as a marketing color, never on more than one CTA per page. Terracotta is the second accent for warmth moments (retreat-photography pairing, treatment-icon strokes).
+
+## Typography
+- **Display:** EB Garamond (Aman/Hotel Esencia feel). h1–h4, weights 400/500. Italic variants are core, not decoration. Tracking `-0.01em` — barely-tightened.
+- **Body:** Plus Jakarta Sans (Open/Six Senses feel), weights 300/400/500. Body base **17px** with **line-height 1.75** — pacing comes from line-height. Tracking `0.005em` — a hair of open tracking for luxury sans breath.
+- **Mono:** JetBrains Mono. Used only for booking-confirmation numerals and treatment-duration metadata. Sparingly is the point — mono is a tool font and this brand is not a tool.
+
+H1 uses `clamp(2.5rem, 6vw, 4.5rem)`. Numbers use lining figures by default but treatment durations and prices may use old-style figures with `"onum"`. Font features: `"liga"`, `"dlig"`, `"kern"` — ligatures on for luxury serif rendering.
+
+## Spacing
+- **Container:** `max-w-4xl px-6 lg:px-12` — narrow; this is a brochure column, not a marketing splash. The retreat is exclusive; the layout reflects it.
+- **Section padding tiers:**
+  - Hero: `pt-32 pb-24 lg:pt-48 lg:pb-32` (oversized — ceremony)
+  - Default: `py-24 lg:py-40`
+  - Tight: `py-16 lg:py-24`
+- **Allowed scale values:** 4 8 12 16 24 32 48 64 96 128 160 192. Sparse on purpose — the gaps in the scale (no 6, no 10, no 14) prevent fussy small adjustments. If a layout needs a 10px gap, the answer is reconsidering whether the element belongs.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. Pure white and pure black are forbidden — `--cream` and `--ink` (a deep earth-tone) replace them. Sage and terracotta are the only saturated colors, and "saturated" is generous — both are heavily desaturated.
+
+The single sage accent appears at most twice per page: once on the primary CTA (sage-fill rectangle), once on a treatment-icon stroke or hairline rule. Terracotta is rarer — reserved for retreat-photography pairing, seasonal-offering moments, and warmth-needed editorial accents. The restraint is the brand; if the page reads colorful, the brand has collapsed.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Aman, Six Senses, Hotel Esencia do not round corners; rounding reads app/SaaS and undermines the heritage-hospitality language. Pills are disallowed (`pillsAllowed: false`) — tags and status indicators are framed by hairline top/bottom rules or rendered as small-caps text, never as pills.
+
+## Shadows
+**Minimal.** Two utilities:
+- `.shadow-quiet` — single 1px bottom rule in stone-tinted color; the only "shadow" most components ever receive
+- `.shadow-popover` — soft warm shadow for popover/modal lift (booking-confirmation modal, treatment-detail overlay)
+
+No drop shadows on cards (there are no cards). No glows. No colored shadows. Depth is whitespace.
+
+## Motion
+Three keyframes — `fade-rise` (section entrance, **1400ms** — slower than editorial, retreat pacing), `fade-in` (image and quote-block entrance, 1200ms, opacity only when transform would feel restless), `ken-burns-still` (hero retreat-landscape photograph, 32000ms infinite, barely-perceptible push — only on the lead image, never elsewhere).
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — wrapped in a media query in every motion utility. **No looped motion** beyond the single hero ken-burns. The page settles; it does not perform. Reveal at 1400ms is deliberate — visitors to a luxury retreat brochure expect ceremony, not snappy SaaS responsiveness.
+
+## Component patterns
+- **Buttons:** Text-link CTAs by default — foreground earth-ink with a hairline underline appearing on hover. Solid sage-fill is reserved for the single primary action per page (Reserve, Book Stay, Begin Membership). No secondary solid buttons. No icon-only buttons. Destructive uses muted-terracotta text-link with a confirm step, never a red fill.
+- **Cards:** No card chrome at all. Content sits directly on cream, separated by hairline rules and generous whitespace. Internal padding `p-8 lg:p-12`. Title in EB Garamond italic or roman; body in Plus Jakarta 400. When grouping is essential, a single top hairline rule does the work — never a filled card, never a rounded container.
+- **Inputs:** Border-bottom only, 1px stone. Cream background, no full box. Label sits above in small-caps Plus Jakarta with letter-spacing `0.12em`. Focus = sage 1px underline, no glow. Placeholder italic, lowercase.
+- **CTAs:** Primary CTA is a text-link with hairline underline in foreground ink. The single hero action per page may use a sage-fill rectangle with cream text — once, never twice. All other actions are text-links. Marketing flourish does not exist in this language.
+
+## Recommended rich media
+Wellness-spa photography is **the most important asset on the page**. Hero imagery is **stone, water, linen, plant** — environmental landscape from the retreat, the spa pool at sunrise, a folded towel on a teak bench, a single ceramic bowl on a stone shelf. Photography is color-graded to warm late-afternoon light — golden-hour highlights, gentle shadows, never mid-day flat. Kodak Portra 400 or Fuji Pro 400H feel.
+
+Portraits are rare and editorial when used — a guest in profile reading on a daybed, a practitioner's hands in mid-treatment, never face-forward smiling stock. The audience is buying the *experience*, and a stock-smiling face short-circuits the imagination.
+
+**AI tool recommendations:** **Midjourney / Flux** with prompts like *"luxury retreat landscape photography, stone and water and linen, late afternoon golden hour, Portra 400, depth of field, editorial"*; *"hands holding ceramic tea bowl, soft window light, slight film grain, environmental wellness"*. **Recraft** for single-stroke line illustrations of treatments (massage table, meditation cushion) in earth-tone monoline. Avoid Midjourney's default people-and-smiles output — luxury wellness photography is environment-first, people-rare-and-editorial.
+
+**Aspect ratios:** 3:2 landscape (heritage photographic standard) or 4:5 portrait for environmental verticals. Never 16:9 (cinematic, wrong feel for this brand). Never 1:1 (Instagram-aesthetic, breaks the brochure language).
+
+**Video:** generally avoided. If used, a single hero with a poster image and a play button — never autoplay loop. A 6-second ambient loop of water-on-stone or linen-in-breeze is acceptable for the hero only, ≤2 MB, H.265, no audio. Treatment-walkthrough video is wrong for this brand — the experience is described in prose, photographed in stills.
+
+**Performance:** hero image ≤180 KB AVIF at 1800w (slightly larger budget than editorial — the photography is core to conversion). Inline figures ≤80 KB. LCP under 2.5s.
+
+**Avoid:** stock photography of yoga-poses-on-cliff, glowing-pill renders, gradient backgrounds, glassmorphic anything, AI photos with uncanny smiles or weird hands, anything that looks like a 2015 spa brochure (overhead flatlay of crystals and dropper bottles is over), 3D rendered water droplets, lens flare, gold-foil overlays.
+
+**Accessibility:** alt-text is descriptive and ceremonial: *"A folded linen robe rests on a teak bench beside a stone basin filled with water, late afternoon light catching the surface."* The *"Image: …"* prefix is not enough — describe as if for a guest who has never visited.
+
+## Component families
+None at install time. The hint sheet for treatment-listing, room-detail, retreat-program, and booking-flow patterns lives in the design-system handoff once the first views ship; the Director appends them here as patterns stabilize.
+
+## Details
+- **Selection:** `hsl(var(--sage) / 0.20)` background, foreground text.
+- **Focus ring:** `1px solid hsl(var(--ring))` — thin, quiet sage. Never a 2px glow ring; that is dashboard language.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands (a single rounded element for a booking-trust-badge that must match a third-party payment partner, a terracotta-fill button for a one-off seasonal landing page), 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/wellness-spa/tokens.ts

@@ -0,0 +1,173 @@
+import type { Direction } from "../schema";
+
+export const wellnessSpa: Direction = {
+  name: "wellness-spa",
+  ethos:
+    "Aman cream restraint · Six Senses warm sand · The Class deep cream · Hotel Esencia earth · Open meditation softness",
+  references: [
+    { brand: "Aman", trait: "cream + EB Garamond + extreme restraint" },
+    { brand: "Six Senses", trait: "sand + warm cream + serif heads" },
+    { brand: "The Class by Taryn Toomey", trait: "deep cream + restrained type" },
+    { brand: "Hotel Esencia", trait: "warm earth tones + EB Garamond" },
+    { brand: "Open", trait: "soft gradient + Plus Jakarta restraint" },
+  ],
+  feel:
+    "Luxury wellness retreat. Cream and stone surfaces, a single restrained sage or " +
+    "terracotta accent, vast negative space, slow pacing. The page reads like a folded " +
+    "cotton robe on a stone shelf — quiet, considered, expensive in its withholding.",
+
+  fonts: {
+    display: {
+      family: "EB Garamond",
+      fallback: ["Cormorant Garamond", "Garamond", "Georgia", "serif"],
+      from: "Aman/Hotel Esencia serif — old-world hospitality, never sans for headings",
+      googleFont: "EB+Garamond",
+      weights: [400, 500],
+    },
+    body: {
+      family: "Plus Jakarta Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+      from: "Open/Six Senses body — humanist sans with warmth, never cold geometric",
+      googleFont: "Plus+Jakarta+Sans",
+      weights: [300, 400, 500],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "booking-confirmation numerals and treatment-duration metadata — used sparingly",
+      googleFont: "JetBrains+Mono",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",        // serif at large size — barely-tightened
+    bodyTracking: "0.005em",            // hair of open tracking — luxury sans breath
+    fontFeatureSettings: '"liga", "dlig", "kern"',
+    h1ScaleClamp: "clamp(2.5rem, 6vw, 4.5rem)",
+    bodyBaseSize: "1.0625rem",          // 17px — readable in a slow scroll
+    bodyLineHeight: "1.75",             // generous — pacing comes from line-height
+  },
+
+  colors: {
+    background: { hsl: "36 30% 95%", from: "Aman cream — warm paper, slightly toasted" },
+    foreground: { hsl: "28 18% 18%", from: "Hotel Esencia deep earth ink — softer than black, never cool" },
+    card: { hsl: "36 30% 95%", from: "same as background — no card chrome, restraint over differentiation" },
+    popover: { hsl: "36 34% 97%", from: "fractionally lighter cream — popover lifts via tone, not shadow" },
+    primary: { hsl: "150 18% 38%", from: "Six Senses sage — the single restrained accent, used sparingly" },
+    primaryForeground: { hsl: "36 30% 95%", from: "cream on sage" },
+    secondary: { hsl: "36 24% 92%", from: "deeper cream — secondary surface, only one tone off bg" },
+    secondaryForeground: { hsl: "28 18% 18%", from: "earth ink on deeper cream" },
+    muted: { hsl: "36 22% 90%", from: "stone — slightly cooler than secondary, used for inset zones" },
+    mutedForeground: { hsl: "28 12% 44%", from: "earth-gray — captions, treatment-duration labels" },
+    accent: { hsl: "20 26% 86%", from: "warm terracotta-stone — second accent tint, retreat warmth" },
+    accentForeground: { hsl: "20 32% 24%", from: "deep terracotta on its tint" },
+    border: { hsl: "36 18% 84%", from: "stone hairline — visible on cream, never harsh" },
+    input: { hsl: "36 18% 84%", from: "same as border" },
+    ring: { hsl: "150 18% 38%", from: "primary sage, used for focus" },
+    destructive: { hsl: "16 50% 48%", from: "muted terracotta-red — cancel-booking, never alarm-red" },
+    destructiveForeground: { hsl: "36 30% 95%", from: "cream on muted terracotta" },
+    brand: {
+      cream: { hsl: "36 30% 95%", from: "alias for background — Aman cream paper" },
+      "cream-deep": { hsl: "36 24% 92%", from: "secondary cream — one tone deeper" },
+      sage: { hsl: "150 18% 38%", from: "Six Senses sage — the canonical luxury wellness accent" },
+      "sage-soft": { hsl: "150 14% 88%", from: "sage tint — restrained badge surface, used once per view" },
+      terracotta: { hsl: "20 50% 52%", from: "Hotel Esencia warm earth — secondary accent, retreat-warmth moments" },
+      "terracotta-soft": { hsl: "20 26% 86%", from: "alias for accent — warm-stone hover surface" },
+      stone: { hsl: "36 12% 70%", from: "warm stone — divider lines, muted icon, treatment-icon stroke" },
+      ink: { hsl: "28 18% 18%", from: "alias for foreground — earth ink" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160, 192],   // restrained — sparse on purpose
+    containerMax: "max-w-4xl",          // narrow — prose-leaning, retreat-brochure column
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-32 pb-24 lg:pt-48 lg:pb-32",
+      default: "py-24 lg:py-40",
+      tight: "py-16 lg:py-24",
+    },
+  },
+
+  radius: {
+    base: "0",                          // sharp corners — Aman/Six Senses do not round; rounding reads app
+    pillsAllowed: false,                // pills are app-language; here tags are framed by hairline rules
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "shadow-quiet":
+        "0 1px 0 hsl(36 18% 80%)",
+      "shadow-popover":
+        "0 2px 4px hsl(28 18% 18% / 0.04), 0 12px 32px hsl(28 18% 18% / 0.08)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1400,                     // slower than editorial — retreat pacing
+      loop: 0,                          // no looped motion
+      ambient: 32000,                   // single ambient ken-burns on hero photography only
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(20px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1400,
+        iteration: "once",
+        purpose: "section entrance — slow, ceremonial, never abrupt",
+      },
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose: "image and quote-block entrance — opacity only when transform would feel restless",
+      },
+      "ken-burns-still": {
+        css:
+          "0% { transform: scale(1.04) translate(0, 0); }\n" +
+          "100% { transform: scale(1.10) translate(-1%, -0.5%); }",
+        defaultDuration: 32000,
+        iteration: "infinite",
+        purpose: "hero retreat-landscape photograph — barely-perceptible push, only on the lead image",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Text-link CTAs by default — foreground earth-ink with hairline underline appearing on hover. " +
+      "Solid sage-fill is reserved for the single primary action per page (Reserve, Book Stay). " +
+      "No secondary solid buttons. No icon-only buttons. " +
+      "Destructive uses muted-terracotta text-link with confirm step, never a red fill.",
+    card:
+      "No card chrome at all. Content sits directly on cream, separated by hairline rules and generous whitespace. " +
+      "Internal padding p-8 lg:p-12. Title in EB Garamond italic or roman; body in Plus Jakarta 400. " +
+      "When grouping is essential, a single top hairline rule does the work — never a filled card.",
+    input:
+      "Border-bottom only, 1px stone. White-cream background, no full box. " +
+      "Label sits above in small-caps Plus Jakarta with letter-spacing 0.12em. " +
+      "Focus = sage 1px underline, no glow. Placeholder italic, lowercase.",
+    cta:
+      "Primary CTA is a text-link with hairline underline in foreground ink. " +
+      "The single hero action per page may use a sage-fill rectangle with cream text — once, never twice. " +
+      "All other actions are text-links. Marketing flourish does not exist in this language.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--sage) / 0.20)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/y2k-chrome/THEME.md

@@ -0,0 +1,118 @@
+# Design Direction — Y2K Chrome
+
+## Ethos
+iMac G4 translucent · iPod gleam · MTV 2001 chrome · Bose Wave optimism · early-WinAmp futurism · Sony VAIO magnesium-and-blue
+
+## Feel
+Optimistic-tech nostalgia. Translucent surfaces, chrome gleams, soft cool gradients (silver-to-blue), bubble buttons. Rounded everything. The world hasn't ended yet and the future is shiny.
+
+Soft-modern is the closest sibling — same rounded vocabulary, same monochromatic cool-gray surface stack — but where soft-modern stays matte and quiet, y2k-chrome wets the surface, adds the bevel, and lights the dome from inside.
+
+## Reference brands
+- **Apple iMac G3/G4** → translucent shells, candy-colored optimism. The dome with the light on behind it.
+- **Apple iPod (original)** → chrome back, click-wheel gleam. The bevel and the catch of light.
+- **MTV (2001 broadcast graphics)** → chrome wordmarks, lens flares, cyan lower-thirds.
+- **Bose Wave radio** → soft silver product optimism. Brushed aluminum, no sharp corners.
+- **WinAmp (original)** → skinnable futurism, cyan VU meters. The glow accent at peak.
+- **Sony VAIO** → magnesium-and-blue laptop era. Cool palette, lavender accent strip.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin.
+
+Surface stack is **cool gray** (background) → white (card, translucent shell) → soft silver (secondary/muted) → chrome (accent hover). Depth comes from the `.gleam` and `.chrome-edge` utilities, not from hue shift — the palette stays inside 200°-260° hue at all times.
+
+Brand tokens: `--chrome-light`, `--chrome-mid`, `--chrome-deep` (the three stops of a brushed-metal gradient), `--cyan-hot` (WinAmp/MTV peak cyan, used as glow only), `--lavender` (Y2K secondary — Bondi-era lilac, VAIO accent, tags and status).
+
+Primary is **iMac-era cyan-blue** (`200 95% 50%`) — the .com-boom hero color. Never a saturated warm hue, never a desaturated enterprise blue.
+
+## Typography
+- **Display:** Eurostile (canonical Y2K display face — geometric, tech-feel, broadcast-graphic energy). Bahnschrift is the equivalent on Windows; DM Sans is the web-safe Google Fonts fallback. h1–h4, weights 400/500/700.
+- **Body:** Inter. Clean, neutral — lets the chrome chrome itself. The body text doesn't compete with the gleam.
+- **Mono:** Space Mono. Geometric mono with personality — feels like OS X 10.0 dock fonts and old VAIO BIOS screens. Captions, code, dock-style labels.
+
+Headings track `0.01em` — slight *positive* tracking; Eurostile/Bahnschrift breathes wider, and the broadcast-graphic feel wants the air. Body tracks `0`. H1 uses `clamp(2.25rem, 5.5vw, 4rem)`. Inter stylistic sets `"ss01", "cv11"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-8`.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-10 lg:py-16`
+- **Allowed scale values:** 4 6 8 10 12 16 20 24 32 48. Medium density — decoration takes some room.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier. Pure black is forbidden — `--foreground` is `220 25% 12%` (deep cool black, never warm).
+
+Warm hues are forbidden across the palette. If you reach for amber or coral, you've left the direction. The destructive token is pulled toward magenta-red (`350°`) rather than fire-red (`12°`) to stay inside the cool envelope.
+
+## Radius
+`--radius: 1rem` (16px). **Very rounded — iMac G4 dome territory.** Pills are allowed (`pillsAllowed: true`) and encouraged for compact actions and tags. Hard right angles read "developer demo," not Y2K product — keep things rounded.
+
+## Shadows
+Four glow-style utilities — multi-layer, with inset highlights that simulate a wet acrylic surface.
+
+- `.gleam` — the signature. Inset top highlight (the catch of light) + inset bottom shade (the bevel underside) + cyan-tinted drop shadow (the iMac shelf glow). The default for cards and bubble buttons.
+- `.gleam-lg` — hover lift. Larger spread, deeper bevel.
+- `.chrome-edge` — multi-stop gradient border simulation. Inset hairlines at chrome-light → chrome-mid → chrome-deep. Use on inputs and ghost buttons where a single-color border would look flat.
+- `.glow-cyan` — WinAmp peak indicator and focus state. 1px cyan ring + 24px cyan-hot glow.
+
+Shadows lean **cool** — the drop-shadow color is tinted with cyan, not neutral gray. Never warm, never harsh black.
+
+## Motion
+Three keyframes, all gentle:
+- `scale-in` (200ms) — standard appear for bubble buttons, modals, popovers. Confirms the click without bouncing.
+- `pulse-glow` (3000ms loop) — slow ambient oscillation on glow accents. The WinAmp VU meter at rest.
+- `gleam-sweep` (4000ms loop) — light sweep across a chrome surface. The catch of light moving across an iPod back. Hero cards only; do not litter.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)` — smooth easings only, no springs, no bounce. `prefers-reduced-motion` is honored — `pulse-glow` and `gleam-sweep` collapse to a static state.
+
+## Component patterns
+- **Buttons:** gradient-filled bubble (cyan-to-blue, top-light to bottom-dark) with inner highlight via `.gleam`. Very rounded (`rounded-2xl`); pills allowed for compact actions. Solid is the norm — text-links are the ghost variant. Hover: `.gleam-lg` + 1.02 scale; never a flat color swap.
+- **Cards:** translucent white on cool-gray background, `.chrome-edge` border, `rounded-2xl`, `.gleam` shadow. Padding `p-6 lg:p-8`. Title in Eurostile/Bahnschrift display. Hover lifts to `.gleam-lg`. Optional `.gleam-sweep` strip on hero cards only.
+- **Inputs:** full `rounded-xl` box, `.chrome-edge` inset border, `bg-card`. Focus uses `.glow-cyan` ring. Label above; helper text below in `mutedForeground`.
+- **CTAs:** gradient bubble button is the default. Secondary CTAs are ghost (chrome-edge + foreground text) or text-link in primary cyan with underline-on-hover.
+
+## Component families
+None at install time. As `*Tile`, `*Capsule`, `*Dock` families emerge, the Director lists them here with their shared pattern.
+
+## Recommended rich media
+
+This direction leans hard on imagery — chrome is visual. The hero is rarely just type.
+
+**Cover & hero imagery:**
+- Product-shot photography on white seamless, Apple-marketing style — a single subject, centered, soft cool lighting, no warm fill.
+- Chrome 3D renders: glass orbs, metallic bubble buttons, brushed-aluminum slabs, translucent acrylic shells.
+- Glassy translucent UI screenshots presented at angle, with lens flares on hero highlights.
+
+**AI tool recommendations:**
+- **Midjourney / Flux** for renders. Prompt scaffold: *"Y2K aesthetic, chrome, translucent iMac G4, cyan and silver, glossy 3D render, Octane render"*. Append a single subject and a 16:9 or 1:1 ratio.
+- **Spline** for actual interactive 3D chrome surfaces — embed a live render rather than baking a static image.
+- **Magnific** or **Topaz Photo AI** for upscaling vintage Y2K product photography sourced from real catalogs and press kits.
+- **Lottie** with custom shimmer/gleam animations for hero accents. Pair with `.pulse-glow` or `.gleam-sweep` from the CSS layer for a layered effect.
+
+**Aspect ratios:**
+- 16:9 hero with a centered chrome subject (the iMac press-shot composition).
+- 1:1 product shots for cards and feature grids.
+- 4:3 retro tech-poster format for editorial moments.
+
+**Color discipline for imagery:**
+Stay within the cool palette. Never warm photography, never amber-graded video, always cyan/silver/lavender. If the source image has a warm cast, regrade it before use — the palette breaks the moment a warm hue lands.
+
+**What to AVOID:**
+- Warm vintage filters — that is mid-century territory, not Y2K.
+- Grunge textures, distress, scan-line overlays — that is brutalist.
+- Saturated maximalist palettes (hot pink + lime + orange) — that is Memphis revival, a different direction entirely.
+
+**Accessibility:**
+Imagery in this direction is heavily decorative. Mark chrome accents, gleam strips, and ambient 3D renders with `aria-hidden="true"`. Reserve `alt` text for content imagery (people, products, screenshots that convey information). Never describe the gleam.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.25)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.6)` — cyan, visible, paired with `.glow-cyan` on bubble buttons.
+- **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.