@stylecrib/cli 0.3.1 → 0.3.2

package/themes/telehealth-modern/tokens.ts

@@ -0,0 +1,197 @@
+import type { Direction } from "../schema";
+
+export const telehealthModern: Direction = {
+  name: "telehealth-modern",
+  ethos:
+    "Headway therapist directory · Cerebral lavender soft · Talkspace warm blue · Spruce clinical-tool · Calm Health structured-soft",
+  references: [
+    { brand: "Headway", trait: "warm cream + therapist-directory friendly Inter" },
+    { brand: "Cerebral", trait: "lavender accent + soft elevated cards" },
+    { brand: "Talkspace", trait: "warm blue + friendly typography" },
+    { brand: "Spruce Health", trait: "clinical-tool density + warm accent" },
+    { brand: "Calm Health", trait: "sage + structured but soft surfaces" },
+  ],
+  feel:
+    "Telehealth dashboard energy — schedule, prescribe, document. " +
+    "Cream-tinted surfaces with lavender and warm-blue accents, friendly Inter, " +
+    "dense-but-soft information layout. Clinical-software competence with the bedside " +
+    "manner of a good therapist, not a hospital EHR.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Headway/Cerebral — Inter as display reads competent + approachable without serif theater",
+      googleFont: "Inter",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "same family as display — telehealth dashboards use one face; hierarchy via weight + size",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "IBM Plex Mono",
+      fallback: ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "Spruce dosage strings, ICD codes, MRNs — slightly warmer than JetBrains for patient-facing chrome",
+      googleFont: "IBM+Plex+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.015em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "tnum", "calt"',
+    h1ScaleClamp: "clamp(2rem, 4.5vw, 3.25rem)",   // tool-first — not magazine-large
+    bodyBaseSize: "0.9375rem",                       // 15px — denser than marketing; dashboard standard
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "36 28% 97%", from: "Headway warm cream — softer than dashboard white, less yellow than spa-cream" },
+    foreground: { hsl: "224 32% 14%", from: "deep slate ink — Cerebral readable on cream" },
+    card: { hsl: "0 0% 100%", from: "true white card — lifts cleanly off cream for dashboard panels" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "248 64% 60%", from: "Cerebral lavender — telehealth primary action" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on lavender" },
+    secondary: { hsl: "36 24% 94%", from: "deeper cream — Headway secondary panel" },
+    secondaryForeground: { hsl: "224 32% 18%", from: "slate ink on cream panel" },
+    muted: { hsl: "36 20% 95%", from: "table-row stripe — softer than secondary, near-bg" },
+    mutedForeground: { hsl: "224 12% 46%", from: "slate-gray — captions, timestamps, helper" },
+    accent: { hsl: "210 60% 94%", from: "Talkspace warm-blue tint — hover and info-pill surface" },
+    accentForeground: { hsl: "210 60% 28%", from: "deep warm-blue on tint" },
+    border: { hsl: "36 18% 88%", from: "warm hairline — Headway directory rule, never cool gray" },
+    input: { hsl: "36 18% 88%", from: "same as border" },
+    ring: { hsl: "248 64% 60%", from: "primary lavender, used for focus" },
+    destructive: { hsl: "352 68% 54%", from: "warm clinical red — cancel-appointment, discontinue-Rx" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on warm red" },
+    brand: {
+      lavender: { hsl: "248 64% 60%", from: "Cerebral primary — telehealth mental-health canonical" },
+      "lavender-soft": { hsl: "248 60% 95%", from: "lavender tinted bg — provider-message pill, appointment chip" },
+      "warm-blue": { hsl: "210 70% 56%", from: "Talkspace accent — appointment + booking surface" },
+      "warm-blue-soft": { hsl: "210 60% 94%", from: "alias for accent — info-banner and chat bubble" },
+      sage: { hsl: "150 32% 50%", from: "Calm Health sage — wellness/positive-status indicator" },
+      "sage-soft": { hsl: "150 30% 92%", from: "sage tint — completed-task and adherence-good chip" },
+      amber: { hsl: "36 90% 56%", from: "Spruce attention amber — Rx-refill-due and follow-up needed" },
+      "amber-soft": { hsl: "36 90% 94%", from: "amber tint — pending-state pill" },
+      cream: { hsl: "36 28% 97%", from: "alias for background — Headway cream paper" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 64, 80],   // dense — dashboard-allowed micro-steps
+    containerMax: "max-w-7xl",          // wide — dashboards run edge-to-edge
+    containerPadding: "px-4 lg:px-6",
+    sectionPadding: {
+      hero: "pt-16 pb-12 lg:pt-24 lg:pb-16",
+      default: "py-12 lg:py-20",
+      tight: "py-8 lg:py-12",
+    },
+  },
+
+  radius: {
+    base: "0.625rem",                  // 10px — softer than dense-utility, less pillowy than DTC
+    pillsAllowed: true,                // pills core — appointment-status, Rx-state, adherence
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-panel":
+        "0 1px 2px hsl(224 30% 20% / 0.04), 0 4px 12px hsl(224 30% 20% / 0.06)",
+      "shadow-panel-lg":
+        "0 2px 4px hsl(224 30% 20% / 0.05), 0 12px 28px hsl(224 30% 20% / 0.08)",
+      "shadow-popover":
+        "0 4px 8px hsl(224 30% 20% / 0.06), 0 24px 48px hsl(224 30% 20% / 0.12)",
+      "shadow-inset-soft":
+        "inset 0 1px 0 hsl(0 0% 100% / 0.6)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 400,                     // dashboard responsive — not marketing-slow
+      loop: 1800,
+      ambient: 0,                      // no ambient on a clinical tool
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 400,
+        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, dropdown — confirms click without delay",
+      },
+      "soft-pulse": {
+        css:
+          "0%, 100% { opacity: 1; }\n" +
+          "50% { opacity: 0.55; }",
+        defaultDuration: 1800,
+        iteration: "infinite",
+        purpose: "unread-message dot and live-session indicator — quiet attention",
+      },
+      "shimmer": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 1400,
+        iteration: "infinite",
+        purpose: "appointment-list and chart-row loading skeleton",
+      },
+      "slide-in-right": {
+        css:
+          "from { opacity: 0; transform: translateX(16px); }\n" +
+          "to { opacity: 1; transform: translateX(0); }",
+        defaultDuration: 280,
+        iteration: "once",
+        purpose: "side-panel and chart-detail drawer entrance",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Primary = solid lavender fill, white text, rounded-lg, shadow-panel. " +
+      "Secondary = white fill with 1px border, foreground text. Tertiary = text-link in lavender. " +
+      "Destructive = warm-red ghost (border + text), upgrades to solid only on confirm step. " +
+      "Hover: shadow-panel-lg + 4% darken, never scale (jumpiness in clinical chrome reads error-prone).",
+    card:
+      "Rounded-lg, white fill on cream background, 1px warm border, shadow-panel. " +
+      "Internal padding p-5 lg:p-6 (denser than marketing). " +
+      "Dashboard-tile variant uses a 4px top-border in the brand color matching the data (lavender = session, " +
+      "warm-blue = appointment, sage = adherence, amber = pending).",
+    input:
+      "Rounded-md, 1px warm border, white background. Compact height (h-9). " +
+      "Label sits above in Inter 500. Focus = 2px lavender ring at 40% opacity. " +
+      "Error = warm-red border + warm-red helper text below, no fill change. " +
+      "Inline validation appears as the user types — clinical forms need real-time feedback.",
+    cta:
+      "Primary lavender solid is the dashboard default. " +
+      "Marketing pages may pair primary + warm-blue ghost side-by-side. " +
+      "Appointment-booking CTAs always show the next-available slot in mono inside the button itself.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--lavender) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/tourism-board/THEME.md

@@ -0,0 +1,111 @@
+# Design Direction — Tourism-Board
+
+## Ethos
+Visit Iceland glacial cyan + saturated lava landscape · Brand USA patriotic blue-red traveler-story optimism · Visit Britain heritage red + GREAT-campaign display sans · Tourism New Zealand 100% Pure NZ green · Visit Japan cherry-blossom pink + woodblock indigo
+
+## Feel
+Decoration-first tourism marketing — saturated landscape photography as the page itself. Bold Fraunces display at billboard scale, Source Sans body for the friendly traveler voice. Four bright signal accents anchor the category grid (Adventure cyan, Food saffron, Culture indigo, Nature moss); heritage red is the single CTA color across all categories. Reads like a Visit Iceland campaign poster taped to the wall of a hostel in Reykjavík, not a hotel-aggregator booking flow. Voice writes traveler-warm — *"go midnight-sun chasing in June"*, *"the cinnamon buns in Reykjavík are not optional"*, *"this is the long way around — and the right way"*.
+
+## Reference brands
+- **Visit Iceland** → saturated landscape photography, bold display sans, glacial cyan accent. The dominant template — this direction owes Visit Iceland the photo-first card stack and Adventure category cyan.
+- **Brand USA** → patriotic blue/red optimism, traveler-story-first composition. The traveler-story card-row shape and the heritage-red CTA discipline.
+- **Visit Britain** → heritage red, GREAT-campaign display sans, postcard register. The single primary action color and the postcard-stack pacing.
+- **Tourism New Zealand** → 100% Pure NZ green, full-bleed landscape film-grain. The Nature category moss color and the landscape-drift ken-burns.
+- **Visit Japan** → cherry-blossom pink + woodblock indigo, color-blocking. The Culture category indigo and the seasonal cherry-soft eyebrow.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand origin.
+
+Surface stack is **warm off-white paper** (background — Visit Britain postcard stock) → **pure white photo-card** (card/popover) → **warm paper deeper** (secondary/muted/accent). Depth comes from soft drop shadows on photo-cards plus a hue shift (warm paper sits under white photo-cards). The page is **soft and decorated**, never minimal — tourism-board earns the saturation other directions refuse.
+
+Brand tokens: `--paper-warm` (Visit Britain off-white, background alias), `--ink-deep` (Visit Iceland landscape-ink, foreground), `--britain-red` (GREAT-campaign red, primary alias and the **only** CTA color), `--iceland-cyan` (Adventure category), `--saffron-spice` (Food category), `--indigo-print` (Culture category), `--moss-pure` (Nature category), `--cherry-soft` (Visit Japan seasonal eyebrow, used only on spring-season copy). Primary is `356 76% 48%` — Visit Britain heritage red.
+
+## Typography
+- **Display:** Fraunces at 400/700/900. Heavy serif with optical-size variation — Visit Iceland / Visit Britain GREAT-campaign register. Category titles, destination headlines, traveler-story headers. Tracking `-0.025em` — heavy serifs at billboard scale need it.
+- **Body:** Source Sans Pro at 400/600/700, **16px** with **line-height 1.6**. Friendly traveler-warmth voice, story prose, category descriptions.
+- **Mono:** JetBrains Mono at 400. **Only small** — coordinates (64.1466° N, 21.9426° W), trip durations (12-day itinerary), traveler-story timestamps, photographer credits. Never display, never body.
+
+Hierarchy is photo-first then bold-serif-headline: full-bleed landscape, Fraunces 900 over or beside it, Source Sans body underneath. H1 uses `clamp(3rem, 8vw, 6.5rem)` — campaign-poster scale, billboard register. Numbers always carry `font-variant-numeric: tabular-nums`. Font features: `"liga", "kern", "tnum"`.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-10` — wide enough for 4-up category tiles and full-bleed landscape heroes.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-16 lg:pt-32 lg:pb-24` — campaign-poster hero, landscape-photography-led
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128 160. Medium density — landscape photography breathes, traveler-story cards pack into a row.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier on token.
+
+The palette is **warm paper canvas + heritage red CTA + four category-coded signal colors**. The category discipline is non-negotiable:
+- **Adventure** is always `--iceland-cyan` (`192 80% 42%`).
+- **Food** is always `--saffron-spice` (`32 92% 52%`).
+- **Culture** is always `--indigo-print` (`232 56% 32%`).
+- **Nature** is always `--moss-pure` (`142 48% 36%`).
+
+Mixing a category with the wrong color breaks the entire decoration system. Heritage red is the **only** primary CTA color — category colors do not become buttons. Pure black is forbidden — `--ink-deep` (`215 36% 12%`) replaces it. Pure white is permitted only as `--card` — photo-cards lift off the warm paper via hue shift plus shadow.
+
+## Radius
+`--radius: 0.5rem` (8px). **Postcard-soft, billboard-bold.** Pills are allowed (`pillsAllowed: true`) and are the default for category chips (Adventure · Food · Culture · Nature), filter pills (Spring · Summer · Autumn · Winter), and the traveler-story author tag. The 8px corner reads like a printed postcard edge, not a delivery-app chip.
+
+## Shadows
+**Soft.** Three utilities — postcard-stack register, no glows, no color-tinted drops:
+
+- `.shadow-tile` — default category-tile elevation. Subtle two-layer.
+- `.shadow-postcard` — photo-card and traveler-story-card elevation. Lifted enough to read "postcard sitting on the table."
+- `.shadow-postcard-hover` — hover lift. Deeper drop with the same family.
+
+Shadows are **near-neutral with a slight blue-ink bias**. Color-saturated drops break the campaign-poster register (which keeps the saturation in the photo, not the chrome).
+
+## Motion
+Three keyframes:
+
+- **`postcard-rise`** (700ms once) — tile and story-card entrance. translateY(16px) → 0.
+- **`landscape-drift`** (24000ms infinite) — slow ken-burns on full-bleed landscape photography. Tourism NZ campaign-poster breathing. Hero-only.
+- **`marker-pulse`** (2400ms infinite) — interactive map pin pulse on destination markers. Scale 1 → 1.4 with opacity decay.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — `landscape-drift` and `marker-pulse` are disabled entirely; `postcard-rise` collapses to opacity-only.
+
+## Component patterns
+- **Buttons:** primary = solid heritage-red rect, `rounded-md` (8px), weight 700, optionally tracked-uppercase Fraunces or Source Sans — 'Plan your trip', 'Get the visitor guide', 'See the map'. Secondary = bordered ghost (deep-ink border, paper bg). Category chips are pills, color-coded to category. **One primary CTA per surface** — heritage red is the only CTA color.
+- **Cards (photo / traveler-story):** photo-card = `rounded-lg`, no border, white bg, `.shadow-postcard`. Full-bleed landscape photo top (4:3 or 3:2), category-color chip absolutely positioned upper-left, title in Fraunces display, body in Source Sans, optional traveler attribution row at bottom (avatar + name + trip-date in mono). Hover lifts to `.shadow-postcard-hover`. Category tile = same shape but landscape-photo-as-background with deep gradient overlay and Fraunces 900 white title overlaid.
+- **Inputs:** compact (h-11) `rounded-md`, soft warm border, white bg. Focus uses heritage-red ring (2px at 45%). Search bar carries an embedded search icon and rounded-md corners.
+- **CTAs:** filled heritage-red rect is the primary action. Tertiary CTAs use underline text-link in category color depending on context (cyan for adventure-focused, saffron for food-focused). **Never a gradient button** — tourism-board is bold flat color, never crypto-shimmer.
+
+## Recommended rich media
+**Saturated landscape photography is the entire page.** Glacial cyan ocean, lava-black sand, golden-hour Tuscan hill, cherry-blossom Kyoto street, neon Tokyo crossing, Yellowstone geyser at sunrise, Maori carving in raking afternoon light. Full-bleed, color-graded to the campaign poster, never the empty-tourist-trail real-estate energy.
+
+**AI tool recommendations.** **Midjourney / Flux** for landscape hero photography — *"Visit Iceland landscape photography, lava-black sand beach with glacial blue ice chunks, dramatic overcast sky, saturated color grade, 24mm, --ar 3:2"*. For traveler-story portraits, *"documentary travel portrait, woman with hiking pack at viewpoint, warm afternoon light, 50mm, Kodak Portra 400"*. Avoid Midjourney's default empty-tourist-trail register — explicitly prompt for saturated grade and dramatic light.
+
+**Aspect ratios.** **3:2 landscape** for category tiles and hero photography (the dominant ratio — campaign-poster register). **4:5 portrait** for traveler-story author portraits and food-culture detail shots. **16:9** for the full-bleed hero only. **1:1** is reserved for the map-preview thumbnail.
+
+**Color in imagery.** **Saturate, don't desaturate.** This is the one direction in the library that earns full color saturation — visitors are choosing a destination based on the photograph. Graded toward the campaign register: warm golden hours, dramatic overcast for Iceland-shape destinations, midday saturation for tropical-shape destinations, neon for nightlife-shape destinations.
+
+**Map.** The interactive map preview lives as a flat-illustration map (not a Google-Maps satellite tile), with category-colored pins (cyan Adventure, saffron Food, indigo Culture, moss Nature) that carry the `marker-pulse` animation. Hover reveals a small destination label.
+
+**Traveler stories.** Documentary-portrait photography (50mm, warm late-afternoon light) of real travelers in-destination — at a viewpoint, at a meal, at a craft workshop. Stories run as 3-card rows with avatar + name + trip duration + 2-sentence pull-quote.
+
+**Video.** Hero only — single 28s muted loop of a landscape shot with `landscape-drift` ken-burns. Never autoplay with sound. ≤14 MB AV1.
+
+**Captions.** Destination, region, photographer credit, coordinates — in JetBrains Mono small caps. *"Reynisfjara · South Coast · Photograph by Ragnar Axelsson · 63.4061° N"* style attribution always.
+
+**Performance.** Hero landscape image ≤260 KB AVIF at 2400w; category-tile photography ≤140 KB each; story-card portraits ≤100 KB. LCP under 2.6s.
+
+**Avoid.** Empty-tourist-trail real-estate-listing photography. Stock smiling-couple-on-beach photos. Generic "explore the world" hotel-aggregator language. Lens flare. Pop-up trip-planner modals. Hand-drawn vector illustrations of landmarks (Brand USA tried that era; it didn't age well). Anything that reads more **Booking.com than Visit Iceland.**
+
+**Accessibility.** Long-form alt-text for landscape photography — *"A glacial blue iceberg stranded on lava-black sand at Reynisfjara on the Iceland south coast, photographed under dramatic overcast light."* Category chips must carry a `data-category` attribute and an icon, not color alone — color-blind users need the category in the DOM. Map pins must have `<title>` in SVG.
+
+## Component families
+None at install time. As `*CategoryTile`, `*PhotoCard`, `*TravelerStoryCard`, `*MapPreview`, `*SeasonalEyebrow` families emerge, the Director lists them here.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.25)` background, foreground text — heritage red highlight on warm paper.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — heritage red at 50%.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. A **destination-specific seasonal variant** (cherry-soft for spring Japan pages, midnight-sun cyan for summer Iceland pages, golden-hour for autumn Britain pages) is anticipated as a within-direction modulation. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/tourism-board/tokens.ts

@@ -0,0 +1,173 @@
+import type { Direction } from "../schema";
+
+export const tourismBoard: Direction = {
+  name: "tourism-board",
+  ethos: "Visit Iceland glacial cyan + lava saturation · Brand USA blue-red-bright optimism · Visit Britain heritage red + display sans · Tourism New Zealand pure-NZ green · Visit Japan saturated cherry + indigo",
+  references: [
+    { brand: "Visit Iceland", trait: "saturated landscape photography, bold display sans, glacial cyan accent" },
+    { brand: "Brand USA", trait: "patriotic blue/red optimism, traveler-story-first" },
+    { brand: "Visit Britain", trait: "heritage red, GREAT campaign display sans, postcard register" },
+    { brand: "Tourism New Zealand", trait: "100% Pure NZ green, full-bleed landscape film grain" },
+    { brand: "Visit Japan", trait: "cherry-blossom pink + indigo, woodblock-print color blocking" },
+  ],
+  feel:
+    "Decoration-first tourism marketing — saturated landscape photography as the page itself. " +
+    "Bold display sans at billboard scale, traveler-warmth voice, four bright signal accents that anchor categories " +
+    "(Adventure cyan, Food saffron, Culture indigo, Nature moss). Reads like a Visit Iceland campaign poster, not an OTA.",
+
+  fonts: {
+    display: {
+      family: "Fraunces",
+      fallback: ["Playfair Display", "Source Serif Pro", "Georgia", "serif"],
+      from: "Visit Iceland + Visit Britain GREAT-campaign display register — heavy serif with optical-size variation",
+      googleFont: "Fraunces",
+      weights: [400, 700, 900],
+    },
+    body: {
+      family: "Source Sans Pro",
+      fallback: ["Inter", "system-ui", "sans-serif"],
+      from: "Brand USA / Tourism NZ body sans — friendly, traveler-readable at small sizes",
+      googleFont: "Source+Sans+Pro",
+      weights: [400, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "ui-monospace", "monospace"],
+      from: "small only — coordinates, trip durations, traveler-story timestamps, photographer credits",
+      googleFont: "JetBrains+Mono",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.025em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"liga", "kern", "tnum"',
+    h1ScaleClamp: "clamp(3rem, 8vw, 6.5rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "40 28% 96%", from: "Visit Britain off-white paper — warm postcard stock, never pure white" },
+    foreground: { hsl: "215 36% 12%", from: "Visit Iceland deep-ink — landscape-photo high-contrast text" },
+    card: { hsl: "0 0% 100%", from: "pure white photo-card surface — lifts off warm paper" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "356 76% 48%", from: "Visit Britain heritage red — GREAT-campaign canonical" },
+    primaryForeground: { hsl: "40 28% 96%", from: "paper on heritage red" },
+    secondary: { hsl: "40 24% 92%", from: "warm paper deeper — section divider surfaces" },
+    secondaryForeground: { hsl: "215 36% 12%", from: "deep-ink on warm paper" },
+    muted: { hsl: "40 18% 90%", from: "muted paper — inactive chip bg" },
+    mutedForeground: { hsl: "215 18% 44%", from: "neutral gray — captions, photographer credits" },
+    accent: { hsl: "40 28% 88%", from: "hover paper — one tier deeper than secondary" },
+    accentForeground: { hsl: "215 36% 12%", from: "deep-ink on accent" },
+    border: { hsl: "40 14% 80%", from: "warm paper border — visible but warm" },
+    input: { hsl: "40 14% 78%", from: "input border — slightly deeper" },
+    ring: { hsl: "356 76% 48%", from: "heritage red focus" },
+    destructive: { hsl: "356 76% 48%", from: "alias of primary — heritage red is the warning red" },
+    destructiveForeground: { hsl: "40 28% 96%", from: "paper on heritage red" },
+    brand: {
+      "paper-warm": { hsl: "40 28% 96%", from: "Visit Britain off-white postcard stock — background alias" },
+      "ink-deep": { hsl: "215 36% 12%", from: "Visit Iceland landscape-ink — foreground alias" },
+      "britain-red": { hsl: "356 76% 48%", from: "GREAT-campaign heritage red — primary alias" },
+      "iceland-cyan": { hsl: "192 80% 42%", from: "Visit Iceland glacial cyan — Adventure category color" },
+      "saffron-spice": { hsl: "32 92% 52%", from: "Visit Japan / Brand USA saffron — Food category color" },
+      "indigo-print": { hsl: "232 56% 32%", from: "Visit Japan woodblock indigo — Culture category color" },
+      "moss-pure": { hsl: "142 48% 36%", from: "Tourism NZ 100% Pure moss — Nature category color" },
+      "cherry-soft": { hsl: "346 78% 78%", from: "Visit Japan cherry-blossom pink — used only on Visit Japan seasonal eyebrows" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160],
+    containerMax: "max-w-7xl",
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-20 pb-16 lg:pt-32 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-postcard":
+        "0 2px 4px hsl(215 36% 12% / 0.06), 0 12px 32px hsl(215 36% 12% / 0.10)",
+      "shadow-postcard-hover":
+        "0 4px 8px hsl(215 36% 12% / 0.08), 0 24px 48px hsl(215 36% 12% / 0.14)",
+      "shadow-tile":
+        "0 1px 2px hsl(215 36% 12% / 0.05), 0 6px 18px hsl(215 36% 12% / 0.08)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 700,
+      loop: 3200,
+      ambient: 24000,
+    },
+    keyframes: {
+      "postcard-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 700,
+        iteration: "once",
+        purpose: "tile and story-card entrance — postcard-arriving register",
+      },
+      "landscape-drift": {
+        css:
+          "0% { transform: scale(1.06) translate(0, 0); }\n" +
+          "100% { transform: scale(1.16) translate(-2%, -1%); }",
+        defaultDuration: 24000,
+        iteration: "infinite",
+        purpose: "slow ken-burns on full-bleed landscape photography — campaign-poster breathing",
+      },
+      "marker-pulse": {
+        css:
+          "0%, 100% { transform: scale(1); opacity: 0.85; }\n" +
+          "50% { transform: scale(1.4); opacity: 0.45; }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "interactive map pin pulse — destination markers on the map preview",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid heritage-red rect, rounded-md (8px), weight 700, tracked-uppercase Fraunces or Source Sans. " +
+      "Secondary = bordered ghost (deep-ink border, paper bg). " +
+      "Category chips are pills, color-coded (Adventure cyan, Food saffron, Culture indigo, Nature moss). " +
+      "One primary CTA per surface.",
+    card:
+      "Photo-card = rounded-lg (8px), no border, white bg, .shadow-postcard. " +
+      "Full-bleed photo top (4:3 or 3:2), category-color chip overlay, title in Fraunces display, body in Source Sans. " +
+      "Hover lifts to .shadow-postcard-hover. Traveler-story cards have a portrait avatar + name + trip-date mono caption.",
+    input:
+      "Compact (h-11) rounded-md, soft warm border, white bg. " +
+      "Focus uses heritage-red ring (2px at 45%). Search bar is rounded-md with embedded search icon.",
+    cta:
+      "Filled heritage-red rect for primary actions ('Plan your trip', 'Get the guide'). " +
+      "Tertiary uses underline text-link in category color (cyan/saffron/indigo/moss depending on context). " +
+      "Never a gradient button — tourism-board is bold flat color, not crypto.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.25)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/toys-modern/THEME.md

@@ -0,0 +1,79 @@
+# Design Direction — Toys-Modern
+
+## Ethos
+Lovevery developmental-age system · Maisonette curated-boutique playfulness · KiwiCo monthly-kit anticipation · Tegu magnetic-block primaries · Petit Collage flat-illustration color collage
+
+## Feel
+Bright friendly primaries on warm cream — yolk, tomato, grass, sky — color-blocked like Tegu blocks on a play mat. Generous shape-decoration: dotted developmental timelines, milestone confetti, paper-cut illustration accents. Rounded geometric serif for chrome, friendly humanist sans for body. Reads designed-for-kids without patronizing the parent reading it — Lovevery's trick.
+
+## Reference brands
+- **Lovevery** → developmental-age system + Montessori-restrained primaries. The principal reference for age-band structure.
+- **Maisonette** → curated-boutique playful: cream + sage + tomato, never neon.
+- **KiwiCo** → monthly-kit anticipation; the kit itself is the hero, not a generic feature card.
+- **Tegu** → magnetic-block primaries — saturated tomato/yolk/grass/sky, the canonical palette.
+- **Petit Collage** → flat-illustration color collage, paper-cut shapes as background decoration.
+
+## Tokens
+Surface stack is **warm cream** (background) → **lighter cream** (card) → **deeper cream / sky tint** (secondary / muted / accent). Brand tokens: `--tomato`, `--yolk`, `--grass`, `--sky`, `--plum`, `--cream`, `--ink`. Primary is `--tomato` — the GO color, the block-red. `--yolk` is the milestone/star accent. `--grass` is wellness/completed-stage. `--sky` is the secondary friendly action. `--plum` is **decoration-only** — paper-cut shape blocks, never a CTA or text color on a working surface.
+
+## Typography
+- **Display:** Recoleta (Fraunces fallback). Warm rounded serif — friendly at large sizes, optical-size-aware. Weights 500–700.
+- **Body:** Nunito. Round humanist body, friendly at every size. 16px base, line-height 1.6.
+- **Mono:** Space Mono. Playful kit-numbers ("KIT 24"), age-band labels ("18–24 MO"). Geometric mono with character — not a sterile dev-tool mono.
+
+H1 uses `clamp(2.25rem, 5.5vw, 4rem)`. Tracking `-0.01em` on display, `0.005em` on body.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-10` — decoration needs room.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-16 lg:pt-28 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 48 64 80 96. Note: no fine micro-steps (no 10, 14) — decoration breathes in larger jumps.
+
+## Color
+No hex in components — tokens only. Pure white is forbidden; use `--cream` for paper. Pure black forbidden; use `--ink`. **Color blocking is the language.** Pages may stack `--tomato`, `--yolk`, `--grass`, `--sky` as full-bleed color blocks — Tegu-block fashion — but never *neon* and never *more than four blocks per viewport*. Plum is decoration-only.
+
+## Radius
+`--radius: 1.5rem` (24px). Block-rounded — playful but not bubbly. Pills core for age-band tabs and chips. Sharp corners forbidden except on intentional paper-cut decorative shapes (triangles, squares — set apart from chrome).
+
+## Shadows
+**Soft + lift.** `.shadow-block` standard, `.shadow-block-lift` (4px hard-drop + soft halo — buttons "pop" like Tegu blocks), `.shadow-confetti` (yolk-tinted lift for achievement/milestone moments). No glows.
+
+## Motion
+Four keyframes: `fade-rise` (500ms entrance), `milestone-pop` (480ms scale + rotate for confetti/star moments), `shape-drift` (6000ms ambient drift for background paper-cut shapes — decoration-only), `soft-pulse` (2400ms loop for next-kit-shipping countdown). `prefers-reduced-motion` honored — shape-drift halts entirely under reduced motion.
+
+Easing `cubic-bezier(0.22, 1, 0.36, 1)`.
+
+## Component patterns
+- **Buttons:** primary = tomato solid + cream text, rounded-2xl, shadow-block. Secondary = sky solid + cream text (Tegu siblings, not ghosts). Tertiary = ink text-link with tomato underline. Hover: shadow-block-lift — buttons literally pop.
+- **Cards:** rounded-3xl, cream-card on cream-paper, 1px kraft border, shadow-block. **Age-band cards** get a 4px colored top-border (tomato / yolk / grass / sky / plum) keyed to the band. Decorative shape-blocks (an absolute-positioned tomato circle, a yolk triangle) may sit *behind* a card — paper-cut accent, purely decorative.
+- **Inputs:** rounded-2xl, 2px kraft border (thicker than soft-modern — block-energy), cream-card fill. Focus = 3px tomato ring at 35% opacity.
+- **Age-band tabs:** segmented pills, 6 bands (0–6 / 6–12 / 12–18 / 18–24 / 2–3 / 3–4 yrs). Active = colored fill (band-keyed), cream text, shadow-block-lift. Inactive = cream + kraft border.
+- **Milestone-met chip:** grass pill with a small ★ (yolk star) icon, milestone-pop animation on award.
+- **Monthly kit-feature card:** the largest tile on the page — colored top-band, kit-number in Space Mono, age-band in pill, photo of the actual kit contents, "Subscribe" CTA in primary tomato.
+
+## Recommended rich media
+Photography is the lead medium: kid hands on toys (rarely faces — the toy is the hero), flat-lay overhead shots of kit contents on cream linen, paper-cut illustration accents in tomato/yolk/grass between sections. Color graded warm-cream, never desaturated. Aspect ratios 1:1 square for product, 4:5 portrait for kid-with-toy, 3:2 landscape for environmental "play mat" scenes. Illustration is **paper-cut flat shapes** (Petit Collage / Eric Carle) — never AI-glossy 3D, never cartoon-vector mascots.
+
+**AI tool recommendations:** Midjourney with *"flat paper-cut illustration, Eric Carle style, primary colors on cream paper, no gradients, no shading"* for accents. For product: *"wooden stacking toy on cream linen, overhead flat-lay, natural soft light, no props"*. For kids: *"toddler hands stacking wooden blocks, close-up, natural window light, Kodak Portra 400, no faces visible"*. Avoid bright commercial toy-catalog stock.
+
+**Performance:** hero ≤140 KB AVIF; kit-content flat-lay ≤120 KB; illustration accents ≤30 KB SVG (paper-cut shapes vectorize beautifully). LCP ≤2s.
+
+**Avoid:** cartoon mascot characters (we are not Toys-R-Us), neon brights, glitter/sparkle effects, "STEM" lab-coat shots, child-actor faces with forced smiles, holiday-themed gift-wrap chrome (the brand is year-round), dark-mode toggle, glassmorphic anything.
+
+**Accessibility:** alt-text describes the toy and the play behavior. *"A toddler's hands stack four magnetic wooden blocks into a tower."* Color blocks must meet 4.5:1 contrast when foreground text sits on them — never cream-on-yolk for body copy.
+
+## Component families
+None at install time. Age-band-tab, milestone-chip, kit-feature, and shape-block-decoration are the four canonical bespoke families.
+
+## Details
+- **Selection:** `hsl(var(--yolk) / 0.45)` — bright, playful, the only place yolk touches body text.
+- **Focus ring:** `3px solid hsl(var(--ring) / 0.4)` — visible without screaming.
+- **Scrollbar:** auto (we want the system scrollbar to show in modal / kit-list contexts — adds to the "real product page" feel).
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.