@stylecrib/cli 0.3.1 → 0.3.3

package/themes/farm-direct/tokens.ts

@@ -0,0 +1,180 @@
+import type { Direction } from "../schema";
+
+// farm-direct — Misfits Market / Imperfect Foods / Hungryroot friendly produce
+// box subscription. Warm cream + friendly green, hand-drawn warmth, sourcing
+// story over price. Reads like a farmers-market chalkboard, not a grocery aisle.
+
+export const farmDirect: Direction = {
+  name: "farm-direct" as Direction["name"],
+  ethos:
+    "Misfits Market chalkboard-cream + carrot-orange · Imperfect Foods rescued-produce green · " +
+    "Hungryroot friendly-box configurator · Thrive Market warm-trust serif · Daily Harvest pastel pantry",
+  references: [
+    { brand: "Misfits Market", trait: "chalkboard-cream surface + carrot-orange accent" },
+    { brand: "Imperfect Foods", trait: "rescued-produce green, ugly-fruit-is-beautiful chrome" },
+    { brand: "Hungryroot", trait: "friendly box configurator, soft pastel produce cards" },
+    { brand: "Thrive Market", trait: "warm-trust serif, member-impact metrics gravity" },
+    { brand: "Daily Harvest", trait: "pastel pantry palette, glossy produce hero shots" },
+  ],
+  feel:
+    "Warm cream paper canvas with a friendly farm-green primary and a carrot-orange secondary. " +
+    "Headings carry a soft serif warmth; body sits in a rounded humanist sans. Box cards have pillow-rounded " +
+    "corners and produce illustrations sit inside them like a chalk drawing. Numbers report sourcing impact, " +
+    "not pricing pillars. The page is a farmers-market stand, not a checkout aisle.",
+
+  fonts: {
+    display: {
+      family: "Fraunces",
+      fallback: ["Georgia", "Cambria", "Times New Roman", "serif"],
+      from: "Misfits Market / Thrive Market display — Fraunces' soft soft-serif warmth at heavy weights",
+      googleFont: "Fraunces",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Nunito",
+      fallback: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+      from: "Hungryroot body — Nunito rounded humanist, friendly at 16px",
+      googleFont: "Nunito",
+      weights: [400, 500, 700],
+    },
+    mono: {
+      family: "DM Mono",
+      fallback: ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "monospace"],
+      from: "lbs-rescued / farms-supported tickers — wider mono, friendlier than IBM Plex",
+      googleFont: "DM+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.015em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "ss01"',
+    h1ScaleClamp: "clamp(2.5rem, 5.5vw, 4rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "42 38% 95%", from: "warm cream chalkboard — Misfits Market canvas, not paper-white" },
+    foreground: { hsl: "78 25% 14%", from: "deep olive-ink — reads warm against cream, never pure black" },
+    card: { hsl: "40 50% 98%", from: "lifted cream card — half a degree above background" },
+    popover: { hsl: "40 50% 98%", from: "same as card" },
+    primary: { hsl: "138 42% 38%", from: "Imperfect Foods farm-green — rescued-produce signal" },
+    primaryForeground: { hsl: "42 38% 95%", from: "cream on farm-green" },
+    secondary: { hsl: "42 34% 90%", from: "deeper cream — secondary surface for inset panels" },
+    secondaryForeground: { hsl: "78 25% 14%", from: "olive ink on deeper cream" },
+    muted: { hsl: "42 30% 88%", from: "muted cream — disabled, divider blocks" },
+    mutedForeground: { hsl: "78 14% 40%", from: "warm gray-green — captions, weight units, farm meta" },
+    accent: { hsl: "138 35% 92%", from: "pale farm-green hover — selected-box surface" },
+    accentForeground: { hsl: "138 45% 22%", from: "deep farm-green ink on pale" },
+    border: { hsl: "42 22% 82%", from: "warm cream hairline — soft, not assertive" },
+    input: { hsl: "42 22% 82%", from: "same as border" },
+    ring: { hsl: "138 42% 38%", from: "primary farm-green — focus ring" },
+    destructive: { hsl: "12 70% 50%", from: "tomato red — distinct from carrot accent, used for skip/remove" },
+    destructiveForeground: { hsl: "42 38% 95%", from: "cream on tomato" },
+    brand: {
+      "farm-green": { hsl: "138 42% 38%", from: "= primary; Imperfect Foods rescued-produce signal" },
+      "farm-green-deep": { hsl: "138 48% 24%", from: "hover, gradient anchor" },
+      "farm-green-soft": { hsl: "138 35% 92%", from: "pale farm-green badge bg, in-season highlight" },
+      "carrot-orange": { hsl: "22 82% 56%", from: "Misfits Market carrot — friendly secondary accent, used on box-size selectors" },
+      "tomato-soft": { hsl: "12 60% 92%", from: "pale tomato — out-of-stock or low-quantity badge" },
+      "chalk-blue": { hsl: "208 35% 58%", from: "chalkboard sky-blue — used on the sourcing map water tone" },
+      "earth-clay": { hsl: "26 32% 62%", from: "earth tone — sourcing-map land tone, basket weave illustration" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96],
+    containerMax: "max-w-6xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-32 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "1rem",
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-basket":
+        "0 1px 2px hsl(78 25% 14% / 0.04), 0 8px 24px hsl(78 25% 14% / 0.06)",
+      "shadow-card":
+        "0 1px 2px hsl(78 25% 14% / 0.04), 0 3px 8px hsl(78 25% 14% / 0.05)",
+      "shadow-pop":
+        "0 4px 16px hsl(78 25% 14% / 0.10), 0 1px 2px hsl(78 25% 14% / 0.05)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 500,
+      loop: 2400,
+      ambient: 22000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 500,
+        iteration: "once",
+        purpose: "produce-card and box-configurator entrance — friendly rise",
+      },
+      "box-bump": {
+        css:
+          "0%, 100% { transform: scale(1); }\n" +
+          "50% { transform: scale(1.04); }",
+        defaultDuration: 280,
+        iteration: "once",
+        purpose: "box-size selector bumps when changed — playful confirm",
+      },
+      "drift": {
+        css:
+          "0% { transform: translateY(0); }\n" +
+          "50% { transform: translateY(-6px); }\n" +
+          "100% { transform: translateY(0); }",
+        defaultDuration: 22000,
+        iteration: "infinite",
+        purpose: "ambient drift on produce-illustration glyphs — slow, decorative",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Solid farm-green primary (rounded-full, shadow-card) for the single commit — Pick this box, Subscribe. " +
+      "Secondary is ghost (1.5px border in foreground). Tertiary is text-link farm-green-deep with underline-on-hover. " +
+      "Hover deepens fill to farm-green-deep with a 1px y-translate — playful, not theatrical.",
+    card:
+      "Rounded-2xl (1rem), 1px --border, bg-card (lifted cream), shadow-card. Padding p-6. " +
+      "Box-preview card uses shadow-basket and contains a produce-illustration cluster. " +
+      "Title in display serif (Fraunces), body in Nunito.",
+    input:
+      "Full rounded-xl box, 1px --input border, bg-card. Label above in body-medium 14px. " +
+      "Zip-code and email inputs lead with a small farm-green glyph. Focus = 2px farm-green ring at 50% opacity.",
+    cta:
+      "Primary farm-green pill button for the box commit. " +
+      "Box-size selector uses three pill chips — carrot-orange when selected, ghost when not. " +
+      "Sourcing-story farm callouts on the map use pop-out cards with shadow-pop. " +
+      "Impact metrics (lbs rescued, farms supported) display large in mono with tabular-nums.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/fintech-card/THEME.md

@@ -0,0 +1,96 @@
+# Design Direction — Fintech-Card
+
+## Ethos
+Mercury cream + bordered tables · Brex terracotta + dark sidebar · Ramp modular cards · Stripe dashboard density · Pleo warm-pink chrome
+
+## Feel
+Sharp grids, dense tabular data, a single brand accent, modular dashboard cards on a warm cream canvas. Hairline borders carry the structure; the accent does signal work without flooding the surface. Reads as the Tuesday-morning interface of a small-business CFO — productive, calm, never decorative.
+
+## Reference brands
+- **Mercury** → cream surface and bordered tabular tables. The page is warm off-white, not Stripe-white. Tables wear visible 1px hairlines.
+- **Brex** → terracotta accent against a dark left-sidebar. The accent is the only saturated color; the sidebar is a separate dark surface, not a tinted version of the page.
+- **Ramp** → modular dashboard cards and tabular nums. Every card holds one metric or one table, never a mixed-purpose collage.
+- **Stripe Dashboard** → deep purple accent and dense interface. Density is comfort here — the user is at this dashboard for hours.
+- **Pleo** → warm-pink accent and friendly card chrome. Where Brex is grown-up, Pleo is friendly; we borrow the warmth without the candy.
+
+## 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.
+
+Surface stack is **cream background** → `--card` (pure white, one degree above) → `--secondary` (deeper cream for inset panels and table headers). Depth comes from hairline borders, not shadows. The dark sidebar uses `--sidebar-dark` and `--sidebar-fg` — a separate surface family, never the inverse of the page.
+
+Brand tokens: `--terracotta`, `--terracotta-deep`, `--terracotta-soft`, `--ink`, `--sidebar-dark`, `--sidebar-fg`, `--stripe`, `--pleo`. `--stripe` and `--pleo` are semantic-only — Stripe purple appears on payment-processing badges; Pleo pink appears on success toasts. They are not free-for-use accents.
+
+## Typography
+- **Display:** Inter heavy (Mercury/Ramp marketing display). h1–h4. Tracking `-0.02em`.
+- **Body:** Inter regular/medium (Stripe Dashboard body). Body base **15px** with **line-height 1.5** — denser than the atmosphere directions on purpose.
+- **Mono:** IBM Plex Mono. Transaction tables, amounts, IDs. Plex Mono is wider than JetBrains Mono and scans better at table row height.
+
+H1 uses `clamp(2rem, 4vw, 3rem)` — restrained. Dashboards do not need 80px titles. Font features: `"tnum", "cv11", "ss01", "ss03"`. Tabular numerics are on at the root.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-6` — dashboard-wide, tighter horizontal padding than the atmosphere directions.
+- **Section padding tiers:**
+  - Hero: `pt-12 pb-8 lg:pt-16 lg:pb-12` (modest by direction standards)
+  - Default: `py-10 lg:py-14`
+  - Tight: `py-6 lg:py-8`
+- **Allowed scale values:** 2 4 6 8 10 12 14 16 20 24 32 40 48 64. The extra 2/14 steps exist for table-cell padding and chip insets. High-density direction by design.
+
+## Color
+No hex anywhere in component files. All color via tokens.
+
+Terracotta is the only saturated accent. Stripe purple and Pleo pink are semantic-only and may not be used decoratively. Status pills use brand-soft backgrounds with brand-deep text (`bg-terracotta-soft text-terracotta-deep`) — never solid fills. Pure black is forbidden; `--ink` replaces it.
+
+## Radius
+`--radius: 0.375rem` (6px). Sharper than fintech-trust — dashboard-language. Pills allowed (`pillsAllowed: true`) for status badges only (Paid, Pending, Approved, Failed). Pill is the only place 999px appears.
+
+## Shadows
+**Minimal.** Three utilities: `.shadow-card` (subtle 1px lift), `.shadow-popover` (4-12px for dropdowns and modals), `.shadow-table-row` (inset bottom border for table row separation). No glows. No colored shadows. The page is held together by borders, not by lift.
+
+## Motion
+Five keyframes: `fade-in` (200ms, opacity only, no translate), `scale-in` (160ms for popovers and dropdowns), `row-hover` (120ms background-color transition on table rows), `shimmer` (1400ms loading skeleton), `checkmark-draw` (240ms SVG stroke for transaction approval confirmation).
+
+There is no rise translate on entrance — the dashboard does not bounce. There is no scale on hover — the dashboard does not breathe. Reveal is 200ms; this is the fastest direction in the library by design. Confirmations are the only place motion gets to perform — the checkmark-draw on a successful transaction is the single dramatic gesture allowed.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored.
+
+## Density
+High. The user is here to read 200 rows of transactions, not to admire whitespace. Cards are tight (`p-4 lg:p-6`), tables compress to 13px sans for meta and 14px mono for values, button hit-targets stay at 36px minimum.
+
+## Component patterns
+- **Buttons:** solid terracotta primary (rounded-md, shadow-card) for the single committing action per surface — Send Money, Approve, Issue Card. Secondary is ghost (border + foreground text). Tertiary is text-link terracotta. Hover changes fill to `--terracotta-deep`; no scale, no shadow growth.
+- **Cards:** rounded-md, 1px `--border`, `bg-card` (pure white on cream), `shadow-card`. Padding `p-4 lg:p-6` — tight by direction standard. Modular: every card holds one metric, table, or chart, never mixed-purpose. Title in display sans, value in mono.
+- **Inputs:** full rounded-md box, 1px `--input` border, `bg-card`. Label above in sans-medium 13px. Focus = 2px terracotta ring at 40% opacity. Currency inputs right-aligned mono. Inline validation message in destructive, below the field.
+- **CTA:** primary terracotta button for commit actions. Text-link terracotta for navigation between dashboard views. Status pills use brand-soft backgrounds — never solid fills. The terracotta solid fill is reserved for the commit; everything else is hairline or soft tint.
+
+## Recommended rich media
+Fintech-Card leans on **tables, charts, and product screenshots** — the dashboard speaks for itself. Marketing pages show the actual product UI in browser-chrome mockups, not lifestyle photography. When illustration is needed, it is **flat geometric, single-line iconography at 1.5px stroke** — the Mercury/Stripe icon language. Three-quarter perspective 3D card renders for the physical-card hero shot are the one allowed photorealistic moment.
+
+**Iconography:** 24px grid, 1.5px stroke, rounded line caps, never filled. The icon family should feel like a single hand drew all of them — no mixed weights. Lucide-react with default settings, or Heroicons outline, or a custom set in the same language.
+
+**Product screenshots** are the headline media on marketing surfaces. Captured at 2x retina, cropped to dashboard cards, framed in a subtle browser-chrome SVG. Drop shadow under screenshots is `shadow-popover`, not a custom glow.
+
+**AI tool recommendations:** **Midjourney / Flux** with prompts like *"photorealistic 3D credit card render, terracotta and cream color palette, soft studio lighting, three-quarter angle, no logo, isolated on cream background"* for physical-card hero shots. **Recraft** for the flat icon set in Mercury's language. Avoid Midjourney defaults that produce business stock photos, suit-and-tie people, or generic 'finance vibes' imagery.
+
+**Aspect ratios:** 16:10 for dashboard screenshots (matches the browser viewport, not video). 1:1 for icon tiles. 4:3 for the card-render hero. Never 16:9 — that's video aspect ratio and reads consumer.
+
+**Video:** rare. If used, it is a screen recording of the product UI itself, 30fps, ≤8MB H.265, poster frame mandatory. No people. No music in autoplay. The card-render rotation is the one acceptable autoplay loop, ≤3s, ≤2MB.
+
+**Performance:** product screenshots ship as AVIF at 2x retina, ≤120KB each. The marketing page LCP target is 1.8s. Charts on the dashboard are SVG, never raster.
+
+**Avoid:** stock photo people pointing at laptops, generic 'team' photography, brick-and-mortar bank exteriors, vault imagery, gold-coin renders, Wall Street bull/bear illustrations, neon-glow chart effects, dark-mode-only screenshots (this is a cream direction; show it in cream), animated GIFs of cursors, glassmorphic panels.
+
+**Accessibility:** every status pill includes a text label (`Paid`, `Pending`), never color-only. Tables ship with proper `scope` attributes and a screen-reader caption summarizing column count and total rows. Terracotta meets 4.5:1 against cream at body size.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established.
+
+## Details
+- **Selection:** `hsl(var(--terracotta) / 0.22)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)`. Terracotta, soft.
+- **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.

package/themes/fintech-card/tokens.ts

@@ -0,0 +1,191 @@
+import type { Direction } from "../schema";
+
+export const fintechCard: Direction = {
+  name: "fintech-card",
+  ethos:
+    "Mercury cream + bordered tables · Brex terracotta + dark sidebar · Ramp modular cards · Stripe dashboard density · Pleo warm-pink chrome",
+  references: [
+    { brand: "Mercury", trait: "cream surface + bordered tabular tables" },
+    { brand: "Brex", trait: "terracotta accent + dark left-sidebar" },
+    { brand: "Ramp", trait: "modular dashboard cards + tabular nums" },
+    { brand: "Stripe Dashboard", trait: "deep purple accent + dense interface" },
+    { brand: "Pleo", trait: "warm-pink accent + friendly card chrome" },
+  ],
+  feel:
+    "Sharp grids, dense tabular data, single brand accent, modular dashboard cards on a cream canvas. " +
+    "Hairline borders carry the structure; the accent does signal work without flooding the surface. " +
+    "Reads as the Tuesday-morning interface of a small-business CFO — productive, calm, never decorative.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Mercury/Ramp marketing display — Inter at heavy weights for dashboard chrome",
+      googleFont: "Inter",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Stripe Dashboard body — neutral, readable at 14px in dense tables",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "IBM Plex Mono",
+      fallback: ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "Mercury transaction-table feel — Plex Mono is wider, easier to scan at row height",
+      googleFont: "IBM+Plex+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "cv11", "ss01", "ss03"',   // tabular nums + Inter stylistic sets
+    h1ScaleClamp: "clamp(2rem, 4vw, 3rem)",                   // restrained — dashboards don't need 80px titles
+    bodyBaseSize: "0.9375rem",                                // 15px — denser than fintech-trust
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "36 30% 96%", from: "Mercury cream — warm off-white canvas, not Stripe-white" },
+    foreground: { hsl: "228 24% 12%", from: "deep ink — almost-black with cool bias, sits clean on cream" },
+    card: { hsl: "0 0% 100%", from: "pure white card — lifts off cream by one degree, no shadow needed" },
+    popover: { hsl: "0 0% 100%", from: "same as card; depth from hairline border" },
+    primary: { hsl: "16 65% 48%", from: "Brex terracotta — the single brand accent, warm not red" },
+    primaryForeground: { hsl: "36 30% 96%", from: "cream on terracotta" },
+    secondary: { hsl: "36 20% 92%", from: "deeper cream — secondary surface for inset panels and table headers" },
+    secondaryForeground: { hsl: "228 24% 12%", from: "ink on deeper cream" },
+    muted: { hsl: "36 18% 90%", from: "muted cream — disabled inputs, divider blocks" },
+    mutedForeground: { hsl: "228 12% 42%", from: "warm gray — table meta, secondary labels, timestamps" },
+    accent: { hsl: "36 22% 88%", from: "hover surface — row-hover and button-hover background" },
+    accentForeground: { hsl: "228 24% 12%", from: "ink on accent" },
+    border: { hsl: "36 14% 82%", from: "warm-cream hairline — the structural line in every table and card" },
+    input: { hsl: "36 14% 82%", from: "same as border — single hairline language" },
+    ring: { hsl: "16 65% 48%", from: "primary terracotta — focus ring is the brand accent" },
+    destructive: { hsl: "0 68% 48%", from: "deep alert red — distinct from terracotta primary, used for delete/reject" },
+    destructiveForeground: { hsl: "36 30% 96%", from: "cream on alert red" },
+    brand: {
+      terracotta: { hsl: "16 65% 48%", from: "= primary; Brex marketing accent" },
+      "terracotta-deep": { hsl: "14 60% 38%", from: "darker terracotta — hover state, gradient anchor" },
+      "terracotta-soft": { hsl: "16 60% 94%", from: "pale terracotta tint — active-row highlight, badge bg" },
+      ink: { hsl: "228 24% 12%", from: "= foreground; the structural dark, also used for dark sidebar" },
+      "sidebar-dark": { hsl: "228 22% 14%", from: "Brex dark left-sidebar — one stop above ink for nav surface" },
+      "sidebar-fg": { hsl: "36 20% 88%", from: "cream foreground for dark sidebar — readable, not pure white" },
+      stripe: { hsl: "256 56% 48%", from: "Stripe deep purple — semantic for payment/processing badges only" },
+      pleo: { hsl: "342 78% 64%", from: "Pleo warm pink — semantic for friendly success toasts, never primary" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 64],   // high density — extra 2/14 steps for tables
+    containerMax: "max-w-7xl",          // dashboard-wide
+    containerPadding: "px-4 lg:px-6",   // tighter than atmosphere directions
+    sectionPadding: {
+      hero: "pt-12 pb-8 lg:pt-16 lg:pb-12",
+      default: "py-10 lg:py-14",
+      tight: "py-6 lg:py-8",
+    },
+  },
+
+  radius: {
+    base: "0.375rem",                   // 6px — sharper than fintech-trust, dashboard-language
+    pillsAllowed: true,                 // pills for status badges (Paid, Pending, Approved)
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "shadow-card":
+        "0 1px 2px hsl(228 24% 12% / 0.04), " +
+        "0 1px 1px hsl(228 24% 12% / 0.03)",
+      "shadow-popover":
+        "0 4px 12px hsl(228 24% 12% / 0.08), " +
+        "0 1px 2px hsl(228 24% 12% / 0.06)",
+      "shadow-table-row":
+        "inset 0 -1px 0 hsl(var(--border))",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 200,                       // instant — dashboards feel responsive, not theatrical
+      loop: 1400,
+      ambient: 1600,
+    },
+    keyframes: {
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "table-row and panel entrance — no translate, just opacity; dashboards don't bounce",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.98); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 160,
+        iteration: "once",
+        purpose: "popover, dropdown, modal entrance — confirms interaction crisply",
+      },
+      "row-hover": {
+        css:
+          "from { background-color: transparent; }\n" +
+          "to { background-color: hsl(var(--accent)); }",
+        defaultDuration: 120,
+        iteration: "once",
+        purpose: "table-row hover transition — almost imperceptible, signals interactivity",
+      },
+      "shimmer": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 1400,
+        iteration: "infinite",
+        purpose: "loading skeletons for table cells while data fetches",
+      },
+      "checkmark-draw": {
+        css:
+          "from { stroke-dashoffset: 24; }\n" +
+          "to { stroke-dashoffset: 0; }",
+        defaultDuration: 240,
+        iteration: "once",
+        purpose: "confirmation checkmark on transaction approval — single-gesture success feedback",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Solid terracotta primary (rounded-md, shadow-card) for the single committing action per surface. " +
+      "Secondary is ghost (border + foreground text). Tertiary is text-link terracotta. " +
+      "Hover changes fill to terracotta-deep; no scale, no shadow growth — dashboards stay still.",
+    card:
+      "Rounded-md, 1px --border, bg-card (pure white on cream), shadow-card. Padding p-4 lg:p-6 — tight by direction standard. " +
+      "Modular: every card holds one metric, table, or chart, never mixed-purpose. Title in display sans, value in mono.",
+    input:
+      "Full rounded-md box, 1px --input border, bg-card. Label above in sans-medium 13px. " +
+      "Focus = 2px terracotta ring at 40% opacity. Currency inputs right-aligned mono. " +
+      "Inline validation message in destructive, below.",
+    cta:
+      "Primary terracotta button for the commit action (Send Money, Approve, Issue Card). " +
+      "Text-link terracotta for navigation between dashboard views. " +
+      "Status pills (Paid, Pending, Failed) use brand-soft backgrounds with brand-deep text — never solid fills.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--terracotta) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/fintech-trust/THEME.md

@@ -0,0 +1,94 @@
+# Design Direction — Fintech-Trust
+
+## Ethos
+Robinhood signal-green · Wealthfront soft elevation · Wise warm sans · Brex deep navy canvas · Public charts as hero
+
+## Feel
+Modern fintech in dark mode. A deep navy canvas holds sage-green signal accents and chart surfaces that breathe. Soft elevated cards, generous tabular numerics, restrained typographic confidence. Reads as the brokerage that holds your retirement — quiet competence, not crypto loudness.
+
+## Reference brands
+- **Robinhood** → dark-mode signal-green confirmations. Sage is the gains color and the primary action color; they are the same color.
+- **Wealthfront** → Plus Jakarta Sans display and soft elevated cards. Soft lift off the canvas; no harsh shadows.
+- **Wise** → warm sans and currency-data tables. Numbers right-aligned, tabular, mono.
+- **Brex (marketing site)** → deep navy canvas with sage signal. The dark surface is engineered, not decorative.
+- **Public.com** → charts treated as hero element. The line chart is the page, not a sidebar widget.
+
+## 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 **navy background** → `--card` (one stop above) → `--popover` (two stops). Depth comes from soft elevated shadows and hairline borders together, never from heavy fill differentiation.
+
+Brand tokens: `--sage`, `--sage-deep`, `--sage-soft`, `--navy`, `--navy-mid`, `--chart-up`, `--chart-down`, `--gold`. `--chart-up` aliases sage and `--chart-down` aliases destructive — explicit semantic tokens so chart components never reach for primary directly.
+
+## Typography
+- **Display:** Plus Jakarta Sans (Wealthfront display feel). h1–h4. Tracking `-0.02em` — Plus Jakarta tightens cleanly at display sizes.
+- **Body:** Inter (Brex/Robinhood marketing body). Body base **16px** with **line-height 1.6**.
+- **Mono:** JetBrains Mono. Prices, balances, percentage moves, timestamps — instrument-cluster heritage. Always `font-variant-numeric: tabular-nums`.
+
+H1 uses `clamp(2.5rem, 6vw, 4.5rem)` — confident, not theatrical. Font features: `"tnum", "cv11", "ss01"`. Tabular numerics are on by default at the document root; money should never shift width.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-10` — wide. Hero charts span the full bleed.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 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 40 48 64 80 96. Medium density — charts need breathing room.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens.
+
+Sage is the only saturated color allowed at any scale. Everything else is navy at varying lightness. Gold is permitted as a Wise-style currency-conversion accent — used sparingly, never on a primary CTA, never on a chart line. Red is reserved for losses and destructive actions — never a button face, never decoration.
+
+## Radius
+`--radius: 0.625rem` (10px). Softer than fintech-card, never pillowy. Pills allowed (`pillsAllowed: true`) for ticker chips, percentage badges, and status indicators.
+
+## Shadows
+**Soft.** Three utilities: `.shadow-card` (subtle lift for resting cards), `.shadow-elevated` (deeper lift for hero panels and modals), `.glow-sage` (sage rim glow for the single hero metric). Shadows are dark — they read on navy, not on white. The top edge of every elevated surface gets a 1px inset highlight in cool-white at 3-4% alpha — the Wealthfront soft-lift trick.
+
+## Motion
+Five keyframes: `fade-rise` (200ms, opacity + 8px translate), `chart-draw` (1800ms, stroke-dashoffset reveal), `ticker-pulse` (1800ms infinite opacity heartbeat), `number-roll` (300ms, replace-and-rise on value change), `shimmer` (1600ms loading skeleton).
+
+`chart-draw` is the signature gesture — line charts draw on first paint via SVG `stroke-dashoffset`. `number-roll` runs whenever a tabular-num value updates from a websocket tick.
+
+Reveal is 500ms — crisp, confident. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored. Finance UI does not bounce, scale on hover, or auto-rotate. The page is still until data moves it.
+
+## Density
+Medium. Spacing scale includes 6 and 10 for fine adjustment around table cells and chart axes, but the canonical reading rhythm is 16/24/32.
+
+## Component patterns
+- **Buttons:** solid sage primary (sage bg, navy fg, rounded-lg, shadow-card) for the single positive action per surface. Secondary is ghost (border + foreground text + transparent fill). Tertiary is a text-link in sage. Hover deepens fill to `--sage-deep`; never grows in scale.
+- **Cards:** rounded-[0.625rem], hairline `--border`, `bg-card` lifted off navy with `shadow-elevated`. Internal padding `p-6 lg:p-8`. Numbers always tabular, mono for prices, sans for labels. Chart cards span full width with the chart treated as primary content.
+- **Inputs:** full rounded-lg box, 1px `--input` border, `bg-card`. Label above in sans-medium. Focus = 2px sage ring at 40% opacity. Currency inputs are mono and right-aligned.
+- **CTA:** primary sage button for the positive action (Deposit, Invest, Trade). Text-link sage for secondary navigation. **Never red on a CTA** — red is reserved for losses and destructive actions.
+
+## Recommended rich media
+Fintech-Trust leans on **live data as decoration**. The hero is rarely a stock photo — it is a chart of the user's portfolio, a ticker of held positions, or an animated sparkline of the day's market. When photography is used, it is **abstract macro of light through architectural glass, color-graded to navy and sage** — never people in suits, never handshakes, never the lifestyle cliches.
+
+**Charts are the headline media.** Line charts, area fills under the line at 18% alpha, sparklines inline in table cells, donut charts for portfolio allocation. All chart strokes are 2px. All chart fills are gradient-to-transparent on the y-axis. Grids in `--sage-soft` at 8% alpha. The chart-draw entrance keyframe runs once on view; subsequent updates use number-roll on the legend value, not redraw.
+
+**AI tool recommendations:** **Midjourney** with prompts like *"abstract macro architectural glass, navy and sage lighting, depth of field, finance editorial"* for hero backgrounds. **Recraft / SVG generators** for the chart and icon set — fintech iconography should be 1.5px stroke, 24px grid, rounded line caps, never filled. Avoid Midjourney defaults that produce 3D crypto-coin renders or stock-broker stock photos. **Rive** is the right tool for animated chart entrances if the project warrants it.
+
+**Aspect ratios:** 16:9 for chart hero blocks. 4:3 for portfolio donut layouts. 1:1 for compact metric tiles. Never 1.91:1 social-share crops — those read marketing-deck, not product.
+
+**Video:** rare. If used, it is a screen recording of the product itself with the cursor visible, exported at 30fps with poster frame. No autoplay. No background ambient loops. The product is the show.
+
+**Performance:** chart payload under 40KB gzipped. Hero chart LCP under 1.5s. Animations on the chart respect `prefers-reduced-motion` by setting `stroke-dashoffset: 0` immediately and skipping the draw animation entirely.
+
+**Avoid:** crypto-coin renders, handshake stock photos, brick-and-mortar bank imagery, suit-and-tie people, vault doors, gold-bar imagery, stock-ticker scrolling marquees as decoration, lens flare on numbers, glass-button gradients, Bloomberg-terminal orange.
+
+**Accessibility:** every chart ships with a data table fallback as the accessible name. Color is never the only encoder of up/down — every gain has a `+` and every loss has a `−` prefix in tabular nums. Sage and destructive both meet 4.5:1 against navy at the sizes they're used.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established.
+
+## Details
+- **Selection:** `hsl(var(--sage) / 0.3)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)`. Sage, soft.
+- **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.