@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/classic-car/THEME.md

@@ -0,0 +1,86 @@
+# Design Direction — Classic-Car
+
+## Ethos
+Singer Vehicle Design warm-cream restraint · Eagle E-Type quiet craftsmanship · Icon 4x4 hand-built honesty · Nardone Automotive monochrome restoration · Touring Superleggera Milanese coachwork
+
+## Feel
+A 1960s coachbuilder's commission book in browser form. Warm cream canvas — sales-brochure paper, never white — with deep navy as the only interaction color. Type is a quiet Garalde serif for body and an oversized italic Cormorant display for build names. Photography is workshop-and-finished-car at golden hour: hand-restored Porsche 911s in a private garage, wood-rim steering wheels on green baize, a single artisan with a polishing cloth. The page should read like a Singer commission book, not a marketplace listing.
+
+## Reference brands
+- **Singer Vehicle Design** → warm cream paper + narrow italic serif + the car restored to a private specification. The page IS the dossier.
+- **Eagle E-Type** → deep navy and cream, hand-rolled coachwork, a single hero photograph per page.
+- **Icon 4x4** → honest workshop tone, sage and tan accents, build-process timeline as marketing.
+- **Nardone Automotive** → near-monochrome restraint, Italian restoration discipline. The cream takes the load.
+- **Touring Superleggera** → Milanese coachwork heritage. Narrow serif headlines over Bodoni-feel italic.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Surface stack is **warm cream** (background) → **lifted cream** (card) → **deeper cream** (secondary/muted). Depth comes from hairline borders on warm hairline color and a single low-key shadow utility on build cards. Pure white is forbidden — `--cream` replaces it; pure black is forbidden — `--navy-ink` replaces it.
+
+Brand tokens: `--cream`, `--cream-deep`, `--navy`, `--navy-ink`, `--sage`, `--leather-tan`. Primary is navy. Sage and leather-tan are reserved for decorative use only — workshop badges, build-step rules, interior swatch dots — never as button faces. Sage is the only allowed third color and must be used sparingly.
+
+## Typography
+- **Display:** Cormorant Garamond (Singer / Touring narrow serif). h1–h4. Tracking `-0.012em`. **Italic is the default display weight** — the sales-brochure handwriting feel.
+- **Body:** Lora (Eagle warm body serif). Body base **17px** with **line-height 1.7** — sales-brochure-comfortable, deliberately slow.
+- **Mono:** JetBrains Mono. Chassis number, year-built, hours-of-labor, base-chassis code. Always `font-variant-numeric: tabular-nums`.
+
+H1 uses `clamp(2.75rem, 7vw, 6rem)` — the build-name-as-chapter-title scale. Font features: `"liga"`, `"dlig"`, `"tnum"`, `"ss01"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-12` — narrower than a real-estate catalog because the commission is private, not a marketplace listing.
+- **Section padding tiers:**
+  - Hero: `pt-28 pb-20 lg:pt-40 lg:pb-32`
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-14 lg:py-20`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 96 128. Density tier is **low**.
+
+## Color
+No hex anywhere. All color via tokens. The palette is intentionally tiny: cream, navy, sage (sparingly), leather-tan (interior swatches). **Never a saturated brand-color button** — navy is the action color across the whole site, just like Singer uses only restraint.
+
+## Radius
+`--radius: 0`. **Sharp corners only** — sales-brochure corners. Pills are disallowed (`pillsAllowed: false`).
+
+## Shadows
+**Minimal.** Two utilities:
+- `.hairline-bottom` — `inset 0 -1px 0 hsl(var(--border))`, the divider rule.
+- `.shadow-card` — a single low-key navy-tinted soft shadow used only on build-card hover.
+
+No glows. No colored shadows beyond the navy-tinted hover.
+
+## Motion
+Three keyframes:
+- `fade-rise` — 1200ms opacity + 20px translate, the standard entrance. Slow on purpose.
+- `ken-burns` — 32000ms infinite scale + translate on the single hero workshop still.
+- `underline-sweep` — 700ms scaleX 0→1 from left origin on text-link hover.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored. **No marquee. No parallax. No glow. No bounce.** The page settles; the car was finished a long time ago.
+
+## Component patterns
+- **Buttons:** Text-link in navy with `underline-sweep` on hover for body CTAs. Solid navy-on-cream rectangle for the single hero action per page. Secondary is hairline-outlined ghost in navy. No pills. Sage is decorative only.
+- **Cards:** Sharp 0 corners, hairline border on lifted-cream surface. Build cards lead with full-width finished-car photography (3:2 landscape), build name in Cormorant italic display, dossier line in mono. Hover lifts to `shadow-card`.
+- **Inputs:** Border-bottom only on cream. Label above in mono-uppercase tracking `0.14em`. Focus shifts border to navy.
+- **CTA links:** Text-link with underline-sweep for the body. Solid navy rectangle for the single hero CTA (Begin a Commission).
+
+## Recommended rich media
+Photography is the entire site. The lead asset on any commissioned build is **finished-car workshop photography** — Singer's hero treatment, Helene Binet meets a private garage. Golden-hour light through workshop windows on the body of a freshly-restored Porsche 911. Interior detail shots (wood-rim wheel, brushed-aluminum gear lever, hand-stitched leather seam) are welcome as secondary frames. **Never showroom-floor stock. Never auction-house catalog photography. Never engine-bay close-ups with chrome reflections — that reads restoration-shop directory, not coachbuilder.**
+
+**AI tool recommendations:** **Midjourney v6+** with prompts like *"restored classic Porsche 911 in private workshop, golden hour light through industrial windows, Singer Vehicle Design hero photograph aesthetic, medium format, 80mm, no people, Kodak Portra 400 grade"*; *"hand-stitched leather seat detail, classic car interior, single warm light, shallow depth of field, restoration coachbuilder aesthetic"*. Avoid Midjourney's default "classic car" prompt — produces auction-house render. Prompt for coachbuilder authorship.
+
+**Aspect ratios:** 3:2 landscape for build hero shots; 4:5 portrait for workshop process and artisan portraits; 21:9 for editorial panoramas. **Never 1:1.**
+
+**Video:** Generally avoided. A single autoplay-muted hero reel of the finished car at golden hour is acceptable — slow ken-burns on a still, not jittery handheld B-roll. ≤6 MB, H.265 or AV1.
+
+**Avoid:** auction-house catalog photography (Pebble Beach concours backdrop tells), engine-bay chrome glamour shots, drone footage of canyon roads (cliché), grandfather-and-grandson lifestyle stock (sincere but generic), red Ferrari thumbnails (wrong cultural register).
+
+## Component families
+None at install time. First likely families: build-card, restoration-timeline, artisan-attribution, commission-inquiry.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` background, foreground text.
+- **Focus ring:** `1px solid hsl(var(--ring))` — thin navy, quiet, never a 2px web-app ring.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/classic-car/tokens.ts

@@ -0,0 +1,173 @@
+import type { Direction } from "../schema";
+
+// Note: name is not in the schema enum at install time; the codegen pipeline
+// accepts new slugs by string and the type guard is updated on next schema sync.
+export const classicCar = {
+  name: "classic-car",
+  ethos:
+    "Singer Vehicle Design warm-cream restraint · Eagle E-Type quiet craftsmanship · Icon 4x4 hand-built honesty · Nardone Automotive monochrome restoration · Touring Superleggera Milanese coachwork",
+  references: [
+    { brand: "Singer Vehicle Design", trait: "warm cream paper, narrow serif headline, the car restored to a private specification" },
+    { brand: "Eagle E-Type", trait: "deep navy + cream, hand-rolled coachwork, single hero photograph per page" },
+    { brand: "Icon 4x4", trait: "honest workshop tone, sage and tan accents, build-process timeline as marketing" },
+    { brand: "Nardone Automotive", trait: "near-monochrome restraint, Italian restoration discipline" },
+    { brand: "Touring Superleggera", trait: "Milanese coachwork heritage, narrow serif over Bodoni-feel" },
+  ],
+  feel:
+    "Warm cream canvas — the paper of a 1960s sales brochure — with a single deep navy as the only interaction color. " +
+    "Type is a quiet Garalde serif for body and an oversized italic display for headlines. " +
+    "Photography is workshop-and-finished-car at golden hour: hand-restored Porsche 911s in a private garage, " +
+    "wood-rim steering wheels on green baize, a single artisan with a polishing cloth. " +
+    "The page reads like a Singer commission book, not a marketplace listing.",
+
+  fonts: {
+    display: {
+      family: "Cormorant Garamond",
+      fallback: ["Cormorant", "EB Garamond", "Garamond", "Didot", "Georgia", "serif"],
+      from: "Singer / Touring narrow serif — Garalde with a sales-brochure italic that anchors the display",
+      googleFont: "Cormorant+Garamond",
+      weights: [400, 500, 600],
+    },
+    body: {
+      family: "Lora",
+      fallback: ["EB Garamond", "Iowan Old Style", "Georgia", "serif"],
+      from: "Eagle E-Type warm body serif — sales-brochure paragraph weight, comfortable for long-form provenance copy",
+      googleFont: "Lora",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "tabular numerics for chassis number, year-built, hours-of-labor — workshop dossier feel",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.012em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"liga", "dlig", "tnum", "ss01"',
+    h1ScaleClamp: "clamp(2.75rem, 7vw, 6rem)",
+    bodyBaseSize: "1.0625rem",                       // 17px — sales-brochure paragraph
+    bodyLineHeight: "1.7",                            // generous — provenance copy reads slowly
+  },
+
+  colors: {
+    background: { hsl: "40 32% 91%", from: "Singer warm cream — the 1960s sales-brochure paper, never white" },
+    foreground: { hsl: "215 42% 16%", from: "Eagle E-Type deep navy ink — body and display, never pure black" },
+    card: { hsl: "40 28% 95%", from: "lifted cream — build-card surface, one tier above paper" },
+    popover: { hsl: "40 28% 95%", from: "same family — depth via hairlines and shadow-card" },
+    primary: { hsl: "215 52% 22%", from: "Eagle deep navy — canonical action color, the only interaction hue" },
+    primaryForeground: { hsl: "40 32% 91%", from: "warm cream on deep navy" },
+    secondary: { hsl: "40 20% 84%", from: "deeper cream tier — quiet panel surface" },
+    secondaryForeground: { hsl: "215 42% 16%", from: "navy on deeper cream" },
+    muted: { hsl: "40 16% 82%", from: "muted cream — workshop-bench warm-grey" },
+    mutedForeground: { hsl: "215 20% 38%", from: "Touring soft navy — secondary copy on cream" },
+    accent: { hsl: "40 22% 88%", from: "hover cream — one tier under secondary" },
+    accentForeground: { hsl: "215 42% 16%", from: "navy on accent cream" },
+    border: { hsl: "40 18% 76%", from: "warm hairline — visible on cream but never assertive" },
+    input: { hsl: "40 18% 76%", from: "same as border — single hairline language" },
+    ring: { hsl: "215 52% 22%", from: "navy — focus ring is the canonical action color" },
+    destructive: { hsl: "12 56% 38%", from: "deep terracotta — workshop-respecting alert tone" },
+    destructiveForeground: { hsl: "40 32% 91%", from: "warm cream on terracotta" },
+    brand: {
+      cream: { hsl: "40 32% 91%", from: "= background; the sales-brochure paper itself" },
+      "cream-deep": { hsl: "40 20% 84%", from: "= secondary; deeper cream for panels" },
+      navy: { hsl: "215 52% 22%", from: "= primary; Eagle deep navy" },
+      "navy-ink": { hsl: "215 42% 16%", from: "= foreground; deepest navy, used as ink" },
+      sage: { hsl: "120 14% 42%", from: "Icon 4x4 workshop sage — a single decorative accent for build-step rules and small badges" },
+      "leather-tan": { hsl: "30 32% 52%", from: "saddle-tan — interior-leather swatches and build-card warmth" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 128],
+    containerMax: "max-w-6xl",          // narrower than realestate-luxury — the build is a private commission, not a catalog
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-28 pb-20 lg:pt-40 lg:pb-32",
+      default: "py-20 lg:py-32",
+      tight: "py-14 lg:py-20",
+    },
+  },
+
+  radius: {
+    base: "0",                          // sharp — sales-brochure corners
+    pillsAllowed: false,                // pills read marketplace; commission books are squared
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-bottom":
+        "inset 0 -1px 0 hsl(var(--border))",
+      "shadow-card":
+        "0 1px 2px hsl(215 42% 16% / 0.04), 0 8px 28px hsl(215 42% 16% / 0.07)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1200,                     // slow on purpose — sales-brochure pacing
+      loop: 2400,
+      ambient: 32000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(20px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose: "section entrance — build reveal, deliberately unhurried",
+      },
+      "ken-burns": {
+        css:
+          "0% { transform: scale(1.03) translate(0, 0); }\n" +
+          "100% { transform: scale(1.10) translate(-1.2%, -0.8%); }",
+        defaultDuration: 32000,
+        iteration: "infinite",
+        purpose: "hero workshop still drift — slow Leica frame on the finished build",
+      },
+      "underline-sweep": {
+        css:
+          "from { transform: scaleX(0); transform-origin: left; }\n" +
+          "to { transform: scaleX(1); transform-origin: left; }",
+        defaultDuration: 700,
+        iteration: "once",
+        purpose: "text-link hover — underline wipes in left-to-right",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",                       // commission book breathing
+
+  patterns: {
+    button:
+      "Text-link CTAs by default — navy color, underline-sweep on hover. " +
+      "Solid-fill reserved for the single hero action per page (navy bg, cream text, sharp corners). " +
+      "Secondary actions are hairline-outlined ghost buttons in navy. " +
+      "No pills. Sage is decorative only — never a button face.",
+    card:
+      "Sharp 0 corners. Hairline border (--border) on lifted-cream surface. Internal padding p-8 lg:p-12. " +
+      "Build cards lead with full-width finished-car photography (3:2 landscape), " +
+      "build name in Cormorant italic display, dossier line in mono. Hover lifts to shadow-card.",
+    input:
+      "Border-bottom only (1px --border) on cream. No full box. " +
+      "Label sits above in mono-uppercase, tracking 0.14em. Focus shifts border to navy.",
+    cta:
+      "Text-link with underline-sweep for the body. Solid navy rectangle for the single hero CTA (Begin a Commission). " +
+      "Never a pill, never a gradient, never a glow.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+} satisfies Partial<Direction> & { name: string };

package/themes/cloud-friendly/THEME.md

@@ -0,0 +1,152 @@
+# Design Direction — Cloud-Friendly
+
+## Ethos
+Salesforce Lightning Design System · Trailhead warmth · cloud-CRM friendliness · Astro mascot palette · ohana community feel
+
+## Feel
+Cloud-CRM friendly enterprise. Lightning blue as the signal, soft cloud-friendly secondary palette (Trailhead's warm peach + teal). Reads approachable-corporate — not stiff like Oracle, not stark like IBM. "We sell to the C-suite but use first names in email." Soft multi-layer shadows, 8px pillowy radius, and the ohana community feel running underneath every surface.
+
+## Reference brands
+- **Salesforce Lightning Design System (LDS)** → the structural backbone. Lightning blue signal, 8px friendly radius, multi-layer blue-tinted shadow drops, cloud surface stack.
+- **Trailhead** → Trailblazer warmth. The reason this direction has a peach accent and an Astro-cream backdrop — the friendly enterprise tone.
+- **Salesforce Tower / Dreamforce** → conference branding. Cloud backdrops, mascot energy, and a permission to be a little playful on the marketing surfaces.
+- **Astro + Codey + the LDS character icons** → the mascot palette (cream, peach, soft sky). Direction ships with hooks for character illustration without requiring it.
+- **Tableau** (acquired) → data-viz integration patterns. Layered teal accents, friendly chart palette that coexists with Lightning blue.
+
+## Tokens
+HSL triples in `src/index.css`. Lightning blue (`212 88% 41%`, hex `#0176D3`) is the primary signal — the brand mark, focus ring, default CTA. Surface stack is monochromatic-cool: `--background` (`210 36% 96%`, Lightning cloud-bg) lifts to `--card` (pure white) with a soft blue-tinted shadow.
+
+Brand tokens are named for their provenance:
+- `--peach-warm` (`14 95% 70%`) — Trailhead warmth accent, community-moment highlight, never primary CTA.
+- `--teal-fresh` (`174 60% 45%`) — secondary accent, Tableau-adjacent. Info chips, data-viz layers, calm complement to Lightning blue.
+- `--success-green` (`140 60% 40%`) — closed-won, record-saved, task-complete. The "good outcome" signal.
+- `--astro-cream` (`38 80% 90%`) — mascot-warmth backdrop, soft cream behind Astro/Codey illustration moments.
+- `--cloud-tint` (`210 36% 96%`) — alias of background, used by name when nesting cloud-tinted surfaces inside cards.
+
+The semantic rule: Lightning blue is the only affirmative signal at the chrome level. Peach is for warmth/community accent. Teal is for info/data. Green is for closed-won/success state. Red is destructive only. Astro-cream is decorative backdrop, never a foreground surface for text.
+
+## Typography
+- **Display:** Inter, weights 500/600/700. h1–h4. Tracking `-0.01em` on headings.
+- **Body:** Inter, 15px (`0.9375rem`), line-height 1.55, tracking `0`.
+- **Mono:** JetBrains Mono, weights 400/500. Apex code, formula fields, record IDs, API names.
+
+**Note on Salesforce Sans:** the official Salesforce Sans face is proprietary and not redistributable. Inter is the deliberate open-source stand-in — same neutral humanist register, same readability at CRM-table density. If a downstream brand has a Salesforce Sans license and wants to swap it in, override the `display` and `body` font stacks in `tokens.ts`; nothing else needs to change.
+
+Font features: `"cv11", "ss01", "tnum"` — Inter stylistic sets for single-story a/g, tabular figures for record lists and reports.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-8` — CRM record pages and dashboards claim more screen than a marketing site.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-12 lg:pt-28 lg:pb-16`
+  - Default: `py-12 lg:py-20`
+  - Tight: `py-8 lg:py-12`
+- **Allowed scale:** 4 6 8 10 12 16 20 24 32 40 48 64 80.
+
+Medium density. The reference is the Lightning record page and Sales Cloud console — utility-first but not packed to the brim like Nvidia developer docs.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier. Pure white is allowed for cards (`--card`). Pure black is forbidden — `--foreground` is `218 41% 19%` (Lightning deep navy).
+
+Semantic discipline:
+- **Lightning blue** (`212 88% 41%`) — primary, links, focus, brand mark. The signal.
+- **Success green** (`140 60% 40%`) — closed-won, saved, completed. The good outcome.
+- **Destructive red** (`0 72% 50%`) — record delete, error toast. Never decorative.
+- **Peach warm** (`14 95% 70%`) — Trailhead community accent, warmth highlight. Used sparingly.
+- **Teal fresh** (`174 60% 45%`) — info chips, Tableau-style data accent. Calm.
+- **Astro cream** (`38 80% 90%`) — backdrop only, behind mascot or onboarding illustration.
+
+## Radius
+`--radius: 0.5rem` (8px). **Pillowy-friendly, Lightning-rounded.** Pills are allowed (`pillsAllowed: true`) for status chips, list-view filters, and Trailhead-style badges. Inputs use a slightly tighter 6px feel via `rounded-md`. Cards use 8px via `rounded-lg`. Avoid sharp 2-4px (reads enterprise-tech / Oracle-Redwood) and avoid 16px+ (reads consumer-product).
+
+## Shadows
+Style is **"soft"** — Lightning shadow utilities. Multi-layer soft blue-tinted drops; never neutral gray, never pure black.
+
+Utilities:
+- `.shadow-lightning` — default card lift. `0 1px 2px` + `0 4px 12px`, both at 6-8% opacity of blue-tinted slate.
+- `.shadow-lightning-lg` — hover lift, larger spread. `0 2px 4px` + `0 12px 32px`.
+- `.shadow-lightning-inset` — top-edge highlight for raised surfaces (subtle 60%-white inset).
+- `.shadow-glow-blue` — focus-state ring around primary controls. `0 0 0 1px` + `0 0 0 3px` of Lightning blue.
+
+Shadows use `212 50% 30%` slate-blue at 6-10% opacity — the soft Lightning drop. Visible enough that cards lift off the cloud-tint background; quiet enough that record pages don't read as marketing.
+
+## Motion
+- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
+- **Duration tiers:** reveal (250ms entry / 200ms exit), loop (2s), ambient (0 — no ambient drift on a CRM surface).
+- **Keyframes:**
+  - `fade-rise` (250ms) — standard entry for record panels, list rows, modal content. Short translate-up + opacity.
+  - `scale-in` (200ms) — popovers, tooltips, action menus, modal containers. Lightning convention.
+  - `toast-slide` (250ms) — success/error notification slide-in, Lightning toast pattern.
+
+Smooth easings. No bounce, no spring, no parallax. The CRM is a workspace, not a marketing reel. `prefers-reduced-motion` honored throughout.
+
+## Brand-book customization
+**Salesforce ships as a family of industry clouds. This direction ships with Lightning blue as default, with explicit override hooks for cloud-specific themes.**
+
+### Industry cloud variants
+Each Salesforce industry cloud carries its own primary tint over the same Lightning structure. To re-skin, override `--primary` (and `--ring`, which aliases it) in `tokens.ts` — everything else stays:
+- **Sales Cloud / Service Cloud (default)** — Lightning blue `212 88% 41%`. The shipped value.
+- **Health Cloud** — clinical blue (closer to `205 80% 45%`). Slightly cooler, more medical-trust register.
+- **Financial Services Cloud** — slate-blue (closer to `215 35% 35%`). Lower saturation, banking-gravity feel.
+- **Public Sector Cloud** — civic teal (closer to `188 65% 38%`). Government-adjacent without leaving Lightning structure.
+- **Marketing Cloud / Pardot** — warmer Lightning blue plus a louder peach-warm accent allowance.
+
+Industry-cloud overrides change `--primary` only. The cloud-tint background, navy foreground, soft shadow stack, and 8px radius are constant — that's what makes this direction recognizable as Salesforce.
+
+### Trailhead vs Sales Cloud tone
+- **Trailhead surfaces** (learning, community, onboarding, certification) get the full warm palette: peach-warm accent active, Astro-cream backdrops permitted, mascot illustration encouraged. More color, more personality, more permission to be playful.
+- **Sales Cloud / Service Cloud surfaces** (record pages, list views, reports) stay reserved: Lightning blue chrome, mono record meta, peach reserved for occasional milestone/celebration toasts (closed-won, anniversary), Astro-cream forbidden except as illustration backdrop on the empty-state.
+
+The direction supports both registers without two separate themes — turn the warmth dial up or down via accent-token usage frequency, not by re-skinning.
+
+### Override hooks
+Implementers can swap any of the following without forking the direction:
+- `--primary` — corporate brand color (industry cloud, customer co-brand, partner program).
+- Display font — if a customer has a licensed Salesforce Sans, Sohne, or in-house display face, swap the `fonts.display.family` and `googleFont` fields. Inter is the fallback.
+- Radius scale — `--radius` accepts `0.375rem` (sharper, more Service Cloud) up to `0.625rem` (softer, more Trailhead). Don't exceed 10px or the direction starts reading consumer-product.
+- Button style — primary defaults to solid Lightning blue, but the secondary outline-blue is interchangeable with a ghost-blue (transparent + blue text) for surfaces that need lower visual weight (record-page action bars with 3+ actions).
+
+## Component patterns
+- **Buttons:** primary = solid Salesforce blue, white text, 8px radius, `shadow-lightning`, weight 600. Secondary = blue outline (`border-primary text-primary bg-transparent`). Success = solid `success-green` for closed-won and record-saved patterns. Tertiary = primary-color text link, no underline at rest. Sizes: default (`h-9 px-4 text-sm`), small (`h-8 px-3 text-xs`).
+- **Cards:** `rounded-lg` (8px), 1px border, `bg-card` (white), `shadow-lightning`. Padding `p-5 lg:p-6`. Header row uses bottom border with mono record-meta on the right. Hover lifts to `shadow-lightning-lg`.
+- **Inputs:** `rounded-md` (6px) box, 1px border, `bg-card`. Focus uses `shadow-glow-blue` ring instead of a thick outline. Label above in foreground weight-500; required-field marker uses destructive. Helper below in `mutedForeground`; inline validation in destructive.
+- **CTAs:** primary = Salesforce blue button. Secondary = blue-outline ghost. Success-green reserved for confirmed/closed-won states (toasts, badges, "Mark Complete"), never for marketing CTA. One primary action per surface; record-page action bar may hold up to three.
+
+## Component families
+None at install time. Expected emerging families:
+- **Record cards** (`*RecordCard`, `*OpportunityCard`) — Lightning card chrome, mono record ID in the meta row, navy title, peach-warm badge for milestones, success-green pill for closed-won state.
+- **Trailhead-style badges** (`*TrailBadge`, `*CertBadge`) — rounded-full pills with peach-warm or teal-fresh accent, weight-600 mono label, soft drop shadow.
+- **List views** (`*ListView`, `*KanbanColumn`) — Lightning hairline borders, 32px row height default, hover row-tint to `--accent`, status chip on the right edge.
+
+## Recommended rich media
+Salesforce-cloud is **photography-warm and mascot-friendly**, the opposite of enterprise-tech's diagram-heavy reserve. The aesthetic is Dreamforce keynote: real diverse teams in soft natural light, real product UI screenshots, and the occasional Astro/Codey character moment.
+
+**Hero media:**
+- **Enterprise photography** — diverse teams, warm natural light, candid collaboration, real laptops on real desks. Trailhead campaign register: friendly enterprise, never stock-photo-stiff. Avoid the silver-haired-CEO trope.
+- **Product UI screenshots** — Lightning record pages, Sales Cloud Kanban, Service Cloud case timelines. Present cleanly with a soft Lightning drop shadow and 8px corner radius; never bare-cropped.
+- **Astro-style mascot illustrations** — decorative accents on empty-states, onboarding flows, Trailhead-tone surfaces. Astro-cream backdrop. Used sparingly; mascots on a record page read as childish.
+- **Data-viz panels** — Tableau-adjacent dashboard captures with the teal-fresh accent threading through. Friendly chart palette, never the dark-mode dashboard look.
+
+**AI tool recommendations:**
+- **Midjourney** for enterprise photography. Prompts like *"Trailhead campaign photography, warm friendly enterprise, diverse team, soft natural lighting, candid collaboration, real office, no stock photo staging, 35mm"*. Push toward warm rather than cool color grading.
+- **Recraft** for Astro-mascot-adjacent character illustration. Prompts like *"friendly cloud mascot character, soft palette, peach and cream, vector illustration, Salesforce Astro style, approachable corporate"* — useful for empty-state and onboarding moments.
+- **Figma / native UI capture** for product screenshots — Lightning is a real UI surface; screenshot it cleanly rather than rendering it.
+- **Tableau Public / native chart export** for data-viz hero moments — the real chart is more credible than an AI render of a chart.
+
+**Aspect ratios:** 16:9 for hero photography and dashboard captures; 4:3 for product UI screenshots; 1:1 for mascot illustrations and headshots; natural aspect for inline charts.
+
+**Performance:** AVIF photography ≤140 KB at 1600w; UI screenshot AVIF ≤100 KB at 1200w; mascot SVG inline (≤12 KB each); no autoplay video with sound. LCP target <1.8s on 4G — Salesforce customers run these surfaces on corporate networks but often on the marketing site over consumer connections.
+
+**Avoid:** stock-photo CEO portraits, dark moody photography, cinematic grain, glassmorphic chrome on UI screenshots, purple/violet gradients (that's Lovable/Linear territory), Y2K chrome, brutalist crops, anything that signals consumer-startup over enterprise-with-a-soul.
+
+**Accessibility:** WCAG AA on `210 36% 96%` cloud-tint background requires foreground at ≥`218 41% 30%` minimum (we use `218 41% 19%`, well above). Lightning blue on white passes AA at all sizes. Success-green / peach-warm / teal-fresh used as status accents always need a non-color signal (icon, text label) — color-blind users complete deals too.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.18)` Lightning-blue tint, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — visible, friendly, matches the soft register.
+- **Scrollbar:** thin, slate-toned.
+
+## Exceptions
+None yet. When an intentional violation lands (e.g. a Trailhead surface uses a full peach-warm hero CTA instead of Lightning blue, or a Public Sector cloud override ships civic teal as `--primary`), document it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time. Authored to provide a Salesforce-family aesthetic — Lightning + Trailhead + Astro — that the more reserved enterprise directions (enterprise-tech, enterprise-cloud, business-tiles, corporate-grid) don't cover. Fills the "approachable-corporate CRM" slot in the library.

package/themes/cloud-friendly/tokens.ts

@@ -0,0 +1,181 @@
+import type { Direction } from "../schema";
+
+export const cloudFriendly: Direction = {
+  name: "cloud-friendly",
+  ethos:
+    "Salesforce Lightning Design System · Trailhead warmth · cloud-CRM friendliness · Astro mascot palette · ohana community feel",
+  references: [
+    { brand: "Salesforce Lightning Design System (LDS)", trait: "Lightning blue signal, cloud surfaces, 8px friendly radius" },
+    { brand: "Trailhead", trait: "Trailblazer warmth — friendly enterprise tone, peach + teal" },
+    { brand: "Salesforce Tower / Dreamforce", trait: "conference brand warmth, cloud backdrops, mascot energy" },
+    { brand: "Astro + Codey (LDS character icons)", trait: "mascot palette — cream, peach, soft sky" },
+    { brand: "Tableau", trait: "data-viz integration patterns, layered teal accents" },
+  ],
+  feel:
+    "Cloud-CRM friendly enterprise. Lightning blue as the signal, soft cloud-friendly secondary palette " +
+    "(Trailhead's warm peach + teal). Reads approachable-corporate — not stiff like Oracle, not stark like IBM. " +
+    "'We sell to the C-suite but use first names in email.' Soft multi-layer shadows, 8px pillowy radius, " +
+    "and the ohana community feel running underneath every surface.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Inter stands in for Salesforce Sans (proprietary) — same neutral humanist register",
+      googleFont: "Inter",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Inter — Salesforce Sans alternative, readable at CRM-table density",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "JetBrains Mono — Apex snippets, record IDs, formula fields, API names",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "tnum"',
+    h1ScaleClamp: "clamp(2rem, 4.5vw, 3.25rem)",
+    bodyBaseSize: "0.9375rem",
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "210 36% 96%", from: "Lightning cloud-bg — very light cool blue-tinted surface" },
+    foreground: { hsl: "218 41% 19%", from: "Lightning text-primary — deep navy ink" },
+    card: { hsl: "0 0% 100%", from: "pure white card — lifts off the cloud-tint background" },
+    popover: { hsl: "0 0% 100%", from: "pure white popover, same as card" },
+
+    primary: { hsl: "212 88% 41%", from: "Salesforce blue #0176D3 — Lightning brand mark, the signal" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on Salesforce blue" },
+
+    secondary: { hsl: "210 30% 92%", from: "Lightning secondary surface — one tier deeper than bg" },
+    secondaryForeground: { hsl: "218 41% 19%", from: "Lightning navy ink on cool gray" },
+    muted: { hsl: "210 30% 92%", from: "muted surface — same as secondary" },
+    mutedForeground: { hsl: "215 16% 47%", from: "Lightning meta gray — captions, helper text, field labels" },
+    accent: { hsl: "210 32% 89%", from: "hover surface — one tier deeper than secondary" },
+    accentForeground: { hsl: "218 41% 19%", from: "Lightning navy on hover surface" },
+
+    border: { hsl: "214 25% 85%", from: "Lightning hairline border — visible, friendly, not heavy" },
+    input: { hsl: "214 25% 85%", from: "Lightning input border — same as structural border" },
+    ring: { hsl: "212 88% 41%", from: "Salesforce blue — focus ring on active primary states" },
+
+    destructive: { hsl: "0 72% 50%", from: "Lightning destructive red — record delete, error state" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on Lightning red" },
+
+    brand: {
+      "peach-warm": { hsl: "14 95% 70%", from: "Trailhead warmth accent — Trailblazer peach, community moments" },
+      "teal-fresh": { hsl: "174 60% 45%", from: "secondary accent — Tableau-adjacent teal, info chips and data layers" },
+      "success-green": { hsl: "140 60% 40%", from: "closed-won green — opportunity won, task complete, success toast" },
+      "astro-cream": { hsl: "38 80% 90%", from: "Astro mascot warmth backdrop — soft cream behind illustration" },
+      "cloud-tint": { hsl: "210 36% 96%", from: "alias of background — Lightning cloud-bg for nested surfaces" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80],
+    containerMax: "max-w-7xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-12 lg:pt-28 lg:pb-16",
+      default: "py-12 lg:py-20",
+      tight: "py-8 lg:py-12",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-lightning":
+        "0 1px 2px hsl(212 50% 30% / 0.06), 0 4px 12px hsl(212 50% 30% / 0.08)",
+      "shadow-lightning-lg":
+        "0 2px 4px hsl(212 50% 30% / 0.06), 0 12px 32px hsl(212 50% 30% / 0.10)",
+      "shadow-lightning-inset":
+        "inset 0 1px 0 hsl(0 0% 100% / 0.6)",
+      "shadow-glow-blue":
+        "0 0 0 1px hsl(var(--primary) / 0.5), 0 0 0 3px hsl(var(--primary) / 0.15)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 250,
+      loop: 2000,
+      ambient: 0,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 250,
+        iteration: "once",
+        purpose: "250ms entry — record panels, list rows, modal contents land softly",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.97); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "200ms exit-paired entry — popovers, tooltips, action menus, modals",
+      },
+      "toast-slide": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 250,
+        iteration: "once",
+        purpose: "250ms success/error toast slide — Lightning notification convention",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid Salesforce blue, white text, 8px radius, shadow-lightning, weight 600. " +
+      "Secondary = brand-blue outline (border-primary text-primary bg-transparent). " +
+      "Success = solid success-green for closed-won / record-saved patterns. " +
+      "Tertiary = primary-color text-link, no underline at rest. " +
+      "Sizes: default (h-9 px-4 text-sm), small (h-8 px-3 text-xs).",
+    card:
+      "Rounded-lg (8px), 1px border, bg-card (white), shadow-lightning. " +
+      "Padding p-5 lg:p-6. Header row uses bottom border with mono record-meta on the right. " +
+      "Hover lifts to shadow-lightning-lg. CRM-utility density — not marketing elevation.",
+    input:
+      "Rounded-md (6px) box, 1px border, bg-card. Focus = shadow-glow-blue ring (no thick outline). " +
+      "Label above in foreground weight-500; required-field marker uses destructive. " +
+      "Helper below in mutedForeground; inline validation in destructive.",
+    cta:
+      "Primary = Salesforce blue button. Secondary = blue-outline ghost. " +
+      "Success-green reserved for confirmed/closed-won states, never for marketing CTA. " +
+      "One primary action per surface; record-page action bar may hold up to three.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.18)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};