@stylecrib/cli 0.3.1 → 0.3.2

package/themes/dating-friendly/THEME.md

@@ -0,0 +1,102 @@
+# Design Direction — Dating-Friendly
+
+## Ethos
+Hinge prompt-card warmth · Bumble honey-yellow + bold serif · Tinder coral-pink swipe stage · Feeld off-white intimate · OkCupid playful question-driven
+
+## Feel
+Warm and intimate, never corporate. Saturated coral-pink and peach over a soft cream surface; everything is rounded heavily so the page feels like the home of a person, not a product. Prompt-card driven — text-on-tinted-card is the basic unit of identity. Serif display headlines (Fraunces) add a bookish, considered warmth so the saturation never reads cheap.
+
+Where `creator-social` cranks vibrance to the wall for video, dating-friendly stays editorial-warm — saturated but readable, playful but grown-up. The page should feel like a coffee-shop conversation, not a nightclub.
+
+## Reference brands
+- **Hinge** → prompt cards + photo-pairs + warm cream surface. The "designed to be deleted" tone — earnest, prompt-driven.
+- **Bumble** → honey yellow + bold serif headlines (Bumble's brand serif). Woman-first warmth.
+- **Tinder** → saturated coral-pink swipe stage. The heart-tap, the right-swipe.
+- **Feeld** → off-white surface + serif + considered intimacy. Adult sophistication without darkness.
+- **OkCupid** → playful question-driven UI + bright magenta. The "match score" charm.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin.
+
+Surface stack: **cream-peach paper** (`24 60% 96%`, the home surface) → **white prompt/profile card** (`0 0% 100%`) → **peach-tinted card** (`24 70% 92%`, the prompt-card fill). Warmth is encoded into every neutral — pure gray is forbidden because gray reads "corporate dating app from 2008."
+
+Primary is **Tinder coral-pink** (`350 88% 60%`) — the heart-tap, the right-swipe, the love-action. Saturated and warm enough to glow against the cream paper without going screen-burn neon.
+
+Brand tokens — language, not decoration:
+- `--coral` (= primary) — the heart-tap.
+- `--peach` — prompt-card tint, the soft fill.
+- `--bumble-honey` — alt CTA in woman-led contexts, premium-chip accent.
+- `--magenta` — OkCupid bright; reserved for badges, milestone moments (first match, anniversaries).
+- `--rose-gold` — subtle highlight for featured prompts, premium chips.
+- `--aubergine` (= foreground) — warm-bias deep ink; pure black is forbidden.
+
+## Typography
+- **Display:** Fraunces — Bumble's bold serif spirit, optical-size aware, weights 600/700/900. Used for headlines, prompt quotes, profile names. The serif is what keeps saturation from reading cheap.
+- **Body:** DM Sans — friendly geometric, mobile-readable. Base 16px, line-height 1.55.
+- **Mono:** DM Mono — age, distance, "last active" meta. Tiny tabular only.
+
+H1 uses `clamp(2.5rem, 6vw, 4.5rem)`. Tracking `-0.02em` for the serif display.
+
+## Spacing
+- **Container:** `max-w-5xl px-5 lg:px-8` — narrower than corporate; prompt-cards read better in a tighter column.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-14 lg:pt-28 lg:pb-20`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-10 lg:py-14`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 80. Medium density — cards breathe.
+
+## Color
+No hex in components. All color via tokens. Opacity via `/N`.
+
+The palette is **warm-saturated-on-cream**. Resist adding any cool accent — blue, teal, mint, and slate all break the warmth envelope. The only allowed cool note is `--aubergine` (which is a warm-bias near-black). Pure white is permitted only on `--card` (the prompt-card fill); the page never sits on pure white.
+
+## Radius
+`--radius: 1.25rem` (20px). **Heavily rounded** — Hinge/Bumble prompt-card softness. Pills allowed (`pillsAllowed: true`) and default for tag chips, age/distance chips, the like-back button. **Sharp corners are forbidden** in this language; they read corporate dating app, not the considered-warm modern feel.
+
+## Shadows
+Three warm-tinted utilities — drops carry coral-pink tint, never neutral gray:
+- `.shadow-card-warm` — resting prompt/profile-card elevation (12px coral-tinted drop).
+- `.shadow-card-lift` — hover state (20px deeper coral drop).
+- `.shadow-heart` — the match-state glow (2px coral ring + 20px coral halo). Used on first-match cards and the heart-tap-confirmation state.
+
+## Motion
+Three keyframes with playful overshoot easing (`cubic-bezier(0.34, 1.56, 0.64, 1)`):
+- `heart-pop` (320ms) — like-button tap. The dating-app dopamine confirmation. Scale 1 → 0.88 → 1.18 → 1.
+- `prompt-rise` (500ms) — prompt-card entrance. Warm rise with slight scale-in.
+- `honey-shimmer` (2200ms loop) — Bumble-honey sweep across featured/premium prompts. Subtle, not a marquee.
+
+`prefers-reduced-motion` is honored — `heart-pop` collapses to a static color change; `honey-shimmer` to a static honey fill.
+
+## Component patterns
+- **Buttons:** primary = filled coral pill (weight 600, rounded-full). Secondary = peach-tinted pill with aubergine text. Alt CTA in Bumble-honey for woman-led contexts. Tap = `heart-pop` keyframe. **No sharp-corner buttons in this language.**
+- **Cards:** two shapes —
+  - **PROMPT-CARD**: peach-tinted (`--peach`), rounded-3xl, large serif quote with small handwritten-feel attribution. The basic unit of identity.
+  - **PROFILE-CARD**: white, rounded-2xl, photo (4:5 portrait) + name + age-chip stack.
+  - Both wear `.shadow-card-warm`. Hover lifts to `.shadow-card-lift`.
+- **Inputs:** full rounded-full pill or rounded-2xl box. Focus = 2px coral ring at 40% opacity. Placeholders are conversational ("What's your favorite Sunday?", "Where did you grow up?") — never "Enter text here."
+- **CTAs:** coral pill is the default love-action. The heart icon is the universal positive primitive. Matches carry `.shadow-heart`. Never a flat rectangle.
+
+## Component families
+- `*PromptCard` — peach tint + serif quote + handwritten attribution.
+- `*ProfileCard` — photo + name + age-chip + prompt-pair below.
+- `*HeartButton` — coral pill + heart-pop motion + shadow-heart on confirmed state.
+
+## Recommended rich media
+Warm photographic portraits — golden-hour, natural light, real environments (cafés, parks, kitchens). Avoid studio lighting, corporate headshots, beach-vacation tropes, and any "model-with-prop" stock.
+
+**AI tools:** Midjourney *"natural portrait, warm afternoon light, environmental, 50mm, slight grain, Kodak Portra, real face"*. Avoid: studio backdrops, AI-uncanny smiles, model poses, anything with the "perfect couple at sunset" stock energy. Real, slightly imperfect, lived-in.
+
+**Aspect ratios:** 4:5 portrait (Hinge native) is the default. 1:1 square as an alternate. 9:16 only for video moments (a 3s "wave" loop).
+
+**AVOID:** night-club photography, cinematic darkness, glassy 3D renders, anything that reads "dating app from 2010," gradient backgrounds outside the peach-cream envelope, swipe-card stacks (that's Tinder, which is one ref but not the dominant shape — Hinge prompt-cards are).
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.25)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)`. Coral, warm-visible.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/dating-friendly/tokens.ts

@@ -0,0 +1,178 @@
+import type { Direction } from "../schema";
+
+// dating-friendly — Hinge / Bumble warmth. Saturated coral-pink and peach,
+// friendly serif display, soft cards with generous rounding. Decoration-first
+// language built around prompt-cards and profile-photo stages.
+export const datingFriendly: Direction = {
+  name: "dating-friendly",
+  ethos:
+    "Hinge prompt-card warmth · Bumble honey-yellow + bold serif · Tinder pink swipe stage · Feeld off-white intimate · OkCupid playful question-driven",
+  references: [
+    { brand: "Hinge", trait: "prompt cards + photo-pairs + warm cream surface" },
+    { brand: "Bumble", trait: "honey yellow + bold serif headlines + woman-first warmth" },
+    { brand: "Tinder", trait: "saturated coral-pink + swipe stage" },
+    { brand: "Feeld", trait: "off-white surface + serif + considered intimacy" },
+    { brand: "OkCupid", trait: "playful question-driven UI + bright magenta" },
+  ],
+  feel:
+    "Warm and intimate, never corporate. Saturated coral-pink and peach over a soft cream surface; " +
+    "everything is rounded heavily so the page feels like the home of a person, not a product. " +
+    "Prompt-card driven — text-on-tinted-card is the basic unit of identity. " +
+    "Serif display headlines add a bookish, considered warmth so the saturation never reads cheap.",
+
+  fonts: {
+    display: {
+      family: "Fraunces",
+      fallback: ["Recoleta", "Georgia", "serif"],
+      from: "Bumble's bold serif headline + Hinge's editorial display — warm, optical-size aware",
+      googleFont: "Fraunces",
+      weights: [400, 600, 700, 900],
+    },
+    body: {
+      family: "DM Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+      from: "Hinge / Feeld body sans — friendly geometric, readable on a phone",
+      googleFont: "DM+Sans",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "DM Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "monospace"],
+      from: "age + distance meta — small playful tabular",
+      googleFont: "DM+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "ss02"',           // Fraunces soft variants
+    h1ScaleClamp: "clamp(2.5rem, 6vw, 4.5rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "24 60% 96%", from: "Hinge cream-peach paper — warm off-white, never gray" },
+    foreground: { hsl: "350 30% 16%", from: "deep aubergine-ink — soft black with a pink bias" },
+    card: { hsl: "0 0% 100%", from: "white prompt-card — lifts off the cream paper" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "350 88% 60%", from: "Tinder coral-pink — the heart-tap color, saturated and warm" },
+    primaryForeground: { hsl: "24 60% 98%", from: "near-cream on coral — keeps the warmth" },
+    secondary: { hsl: "24 70% 92%", from: "soft peach tinted bg — secondary prompt card" },
+    secondaryForeground: { hsl: "350 30% 18%", from: "aubergine on peach" },
+    muted: { hsl: "24 30% 90%", from: "quiet peach-cream — meta panels" },
+    mutedForeground: { hsl: "350 14% 42%", from: "warm gray-ink with pink bias — captions" },
+    accent: { hsl: "350 85% 95%", from: "primary tinted bg — selected prompt, like-back state" },
+    accentForeground: { hsl: "350 88% 38%", from: "deeper coral on tinted accent" },
+    border: { hsl: "24 35% 86%", from: "Hinge soft border — visible but warm" },
+    input: { hsl: "24 35% 86%", from: "same as border" },
+    ring: { hsl: "350 88% 60%", from: "primary, focus only" },
+    destructive: { hsl: "0 70% 50%", from: "warm red — different from coral primary; for X/unmatch" },
+    destructiveForeground: { hsl: "24 60% 98%", from: "cream on alert" },
+    brand: {
+      coral: { hsl: "350 88% 60%", from: "= primary; Tinder swipe-right, heart-tap" },
+      peach: { hsl: "20 92% 78%", from: "Hinge prompt-card tint — the soft warm fill" },
+      "bumble-honey": { hsl: "44 96% 58%", from: "Bumble honey yellow — woman-first warmth, alt CTA" },
+      magenta: { hsl: "320 78% 55%", from: "OkCupid bright magenta — for badges, milestone moments" },
+      cream: { hsl: "24 60% 96%", from: "= background; Feeld off-white paper" },
+      aubergine: { hsl: "350 30% 16%", from: "= foreground; warm-bias deep ink" },
+      "rose-gold": { hsl: "12 60% 70%", from: "subtle highlight — featured prompt, premium chip" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80],
+    containerMax: "max-w-5xl",
+    containerPadding: "px-5 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-14 lg:pt-28 lg:pb-20",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "1.25rem",                 // 20px — Hinge/Bumble prompt-card softness
+    pillsAllowed: true,              // tag chips, age/distance chips, like-back pill
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-card-warm":
+        "0 2px 4px hsl(350 30% 30% / 0.04), 0 12px 28px hsl(350 60% 50% / 0.08)",
+      "shadow-card-lift":
+        "0 4px 8px hsl(350 30% 30% / 0.06), 0 20px 48px hsl(350 70% 55% / 0.14)",
+      "shadow-heart":
+        "0 0 0 2px hsl(350 88% 60% / 0.25), 0 8px 20px hsl(350 88% 60% / 0.32)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",   // playful overshoot — like-tap feel
+    durations: {
+      reveal: 500,
+      loop: 2200,
+      ambient: 14000,
+    },
+    keyframes: {
+      "heart-pop": {
+        css:
+          "0% { transform: scale(1); }\n" +
+          "30% { transform: scale(0.88); }\n" +
+          "60% { transform: scale(1.18); }\n" +
+          "100% { transform: scale(1); }",
+        defaultDuration: 320,
+        iteration: "once",
+        purpose: "like-button tap — the heart-pulse, the dating-app dopamine confirmation",
+      },
+      "prompt-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(20px) scale(0.97); }\n" +
+          "to { opacity: 1; transform: translateY(0) scale(1); }",
+        defaultDuration: 500,
+        iteration: "once",
+        purpose: "prompt-card entrance — warm rise with slight scale",
+      },
+      "honey-shimmer": {
+        css:
+          "0% { background-position: 200% 0; }\n" +
+          "100% { background-position: -200% 0; }",
+        defaultDuration: 2200,
+        iteration: "infinite",
+        purpose: "Bumble-honey featured-prompt sweep — subtle premium hint",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = filled coral pill, weight 600, rounded-full. " +
+      "Secondary = peach-tinted pill with aubergine text. " +
+      "Alt CTA on female-led contexts = Bumble-honey pill. " +
+      "Tap = heart-pop keyframe. Never a sharp-corner button.",
+    card:
+      "Two card shapes: PROMPT-CARD (peach-tinted, rounded-3xl, large serif quote with small handwritten-feel attribution) and " +
+      "PROFILE-CARD (white, rounded-2xl, photo + name + age-chip stack). " +
+      "Both wear shadow-card-warm. Hover lifts to shadow-card-lift.",
+    input:
+      "Full rounded-full pill or rounded-2xl box, border, bg-card. " +
+      "Focus = 2px coral ring at 40% opacity. Placeholders are conversational ('What's your favorite Sunday?').",
+    cta:
+      "Coral pill is the default love-tap. Heart icon is the universal positive action. " +
+      "Never a flat rectangle. Likes carry the heart-pop motion; matches carry shadow-heart.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.25)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/dense-utility/THEME.md

@@ -0,0 +1,85 @@
+# Design Direction — Dense-Utility
+
+## Ethos
+Vercel dashboard density · Stripe internal tools · Linear keyboard-first · Bloomberg terminal heritage · PlanetScale dark technical surfaces
+
+## Feel
+Information-rich, compact, technical. Tight spacing, monospace accents, high information density, minimal decoration. The UI is an instrument panel — every pixel earns its row.
+
+## Reference brands
+- **Vercel dashboard** → high information density. Tables, deploys, logs.
+- **Stripe internal tools** → monospace numerics, status pills, audit trails.
+- **Linear** → keyboard-first, command-palette mindset. UI exists to be commanded.
+- **Bloomberg terminal** → instrument-cluster heritage. The screen *is* the work.
+- **PlanetScale** → dark technical surfaces, sharp corners, monospace-prominent.
+
+## Tokens
+HSL triples in `src/index.css`. Brand/semantic tokens: `--success` (= primary, Vercel green), `--warning` (Stripe amber), `--info` (blue), `--fg-dim` (tertiary text), `--bg-row-alt` (alternating table rows). The surface stack steps in 3-5% lightness increments — `bg → card → popover → secondary → accent` — and depth comes from **borders**, never shadows.
+
+Numbered status tokens (`success`, `warning`, `info`) are intentional here — utility UIs render real semantic states, and the agent and operator both benefit from a flat, predictable token name.
+
+## Typography
+- **Display:** Inter (no separate display face — headings are just larger body weight). Weights 500/600/700.
+- **Body:** Inter, **14px**, line-height 1.5. Tracking `0`.
+- **Mono:** JetBrains Mono. **Prominent** — every metric, id, timestamp, hash uses mono. Fallback to Berkeley Mono if available.
+
+Font features: `"cv11", "ss01", "tnum", "zero"` — tabular nums + slashed zero, table-friendly. H1 uses `clamp(1.5rem, 3vw, 2.25rem)` — small, because this language is body-first.
+
+## Spacing
+- **Container:** `max-w-screen-2xl px-4 lg:px-6` — wide. Utility UIs claim the screen.
+- **Section padding tiers:**
+  - Hero (rarely used): `pt-12 pb-8 lg:pt-16 lg:pb-12`
+  - Default: `py-8 lg:py-12`
+  - Tight: `py-4 lg:py-6`
+- **Allowed scale values:** **2** 4 6 8 10 12 16 20 24 32 40 48. The `2` step exists for icon-to-label gaps; nothing else uses it.
+
+## Color
+No hex anywhere. Pure black is forbidden; `--background` is `0 0% 4%` (near-black with no hue bias). Pure white is forbidden; `--foreground` is `0 0% 96%`. Tables use `--bg-row-alt` for zebra striping (2% delta — barely visible).
+
+## Radius
+`--radius: 0.25rem` (4px). **Sharp but not knife-edge.** Pills are allowed (`pillsAllowed: true`) — status badges everywhere in this language. Tags, severity chips, run-status indicators all use pill shape.
+
+## Shadows
+**None.** Single utility: `.border-elevated` (`inset 0 0 0 1px var(--border)`) — a border-as-shadow trick for layered surfaces. Drop shadows are a soft-modern affordance; dense-utility uses borders only.
+
+## Motion
+Two keyframes:
+- `fade-in` (150ms) — **fade only, no transform**. Dropdowns, popovers, table rows on load.
+- `spin` (800ms infinite) — inline loading spinner only.
+
+**No ambient motion** (no marquee, no parallax). **No transform-based reveals.** Reveal duration `150ms` — UI is responsive, not theatrical. `prefers-reduced-motion` honored.
+
+## Component patterns
+- **Buttons:** small (`h-7 px-2.5 text-xs`) and default (`h-8 px-3 text-sm`). Primary = solid green. Secondary = border + foreground. Ghost = no border, hover `bg-accent`. Icon-only buttons are square, 7-8 grid cells.
+- **Cards:** sharp corners (`rounded-sm`), border, `bg-card`. Tight padding `p-4`. Header row inside card has bottom border. Tables embed inline.
+- **Inputs:** compact (`h-8 text-sm`), border, `bg-background`, `rounded-sm`. Focus ring **1px** (not 2px — dense UIs can't afford it). Inline validation messages, no helper text by default.
+- **CTAs:** primary action is a button. Secondary actions are icon buttons. **Marketing-style CTAs do not exist in this language.**
+
+## Recommended rich media
+Dense-utility is **the most media-restrained direction** in the library. The screen is the work; rich media gets in the way. Hero imagery generally doesn't exist on these surfaces — there is no marketing hero. Permitted media is functional only: **product screenshots presented frankly** (no shadow, no border, no decorative crop), **inline charts and graphs** (high contrast, mono numerics, semantic color from `--success/--warning/--info/--destructive`), **small monochrome icons** (Lucide / Phosphor / Heroicons at 16/20/24px), occasional **diagrams and flow charts** with clear labels.
+
+**AI tool recommendations:** generally **not needed**. When used: **Recraft** for technical diagrams ("system architecture diagram, flat lines, two-color, minimal labels"); **Excalidraw + AI assist** for hand-drawn-feel sketches that work in dense layouts; **Mermaid** or **DBML** for declarative diagrams that update with the code (no AI involved, often the better answer). For screenshots, use real ones — never AI-fabricated UI.
+
+**Aspect ratios:** screenshots respect their natural aspect (whatever the dashboard is); charts fit their data; icons are square (16/20/24/32). No 16:9 hero crops; no cinematic widescreen.
+
+**Video:** rare and short. Permitted: 15-30s screen-recording demos (Loom / CleanShot / Cap), no music, no narration overlay, real cursor motion. Embedded inline at small size (≤640px wide), pause-on-load with a clear play affordance. Autoplay forbidden — dense surfaces have too much going on for ambient motion to compete.
+
+**Performance:** SVG icons inline (≤2 KB each); chart libraries lazy-loaded; screenshots ≤80 KB PNG/AVIF at 1.5x device pixel ratio. LCP under 1s — dense-utility users are running thousands of these surfaces and every ms compounds.
+
+**Avoid:** marketing hero photography, gradient backgrounds, glassmorphic anything, photorealistic AI renders, decorative SVG ornament, animated GIFs, autoplay video, drop shadows on UI screenshots, lens flare, ANY 3D rendering. Honest constraint: a dense-utility surface that uses zero rich media is more on-direction than one that uses any decorative imagery.
+
+**Accessibility:** charts must have data tables as alternatives; icons that convey meaning need `aria-label`; screenshots showing UI need alt-text describing what the user would see. Color-coding (red = bad, green = good) needs a non-color signal (icon, text label) — colorblind users matter especially in dense surfaces.
+
+## Component families
+Status badges (`StatusPill`, `RunStatusBadge`, etc.) share: `rounded-full`, `text-xs`, `px-2 py-0.5`, semantic bg+fg from `--success/--warning/--info/--destructive`. Tables (`Table`, `DataGrid`) share: `text-sm`, `border-collapse`, `border-b border-border` on rows, mono font on numeric columns.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.25)` background, foreground text.
+- **Focus ring:** `1px solid hsl(var(--ring))` — thin, the only kind that fits.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/dense-utility/tokens.ts

@@ -0,0 +1,155 @@
+import type { Direction } from "../schema";
+
+export const denseUtility: Direction = {
+  name: "dense-utility",
+  ethos: "Vercel dashboard density · Stripe internal tools · Linear keyboard-first · Bloomberg terminal heritage",
+  references: [
+    { brand: "Vercel dashboard", trait: "high information density" },
+    { brand: "Stripe internal", trait: "monospace numerics, status pills" },
+    { brand: "Linear", trait: "keyboard-first, command-palette mindset" },
+    { brand: "Bloomberg terminal", trait: "instrument-cluster heritage" },
+    { brand: "PlanetScale", trait: "dark technical surfaces, sharp corners" },
+  ],
+  feel:
+    "Information-rich, compact, technical. Tight spacing, monospace accents, " +
+    "high information density, minimal decoration. The UI is an instrument " +
+    "panel — every pixel earns its row.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "sans-serif"],
+      from: "no separate display face — headings are just larger body weight",
+      googleFont: "Inter",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "sans-serif"],
+      from: "Linear/Vercel base sans — readable at 13-14px",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "monospace"],
+      from: "prominent — every metric, id, timestamp, hash",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "tnum", "zero"',  // tabular nums + slashed zero, table-friendly
+    h1ScaleClamp: "clamp(1.5rem, 3vw, 2.25rem)",            // small headings — this language is body-first
+    bodyBaseSize: "0.875rem",                                // 14px — dense
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "0 0% 4%", from: "near-black, neutral — Vercel/PlanetScale chrome" },
+    foreground: { hsl: "0 0% 96%", from: "near-white, neutral — high contrast for table reading" },
+    card: { hsl: "0 0% 7%", from: "elevated surface, 3% lighter than bg" },
+    popover: { hsl: "0 0% 9%", from: "popovers and menus, 5% lighter than bg" },
+    primary: { hsl: "142 70% 50%", from: "Vercel green — status + primary action" },
+    primaryForeground: { hsl: "0 0% 4%", from: "near-black on green" },
+    secondary: { hsl: "0 0% 11%", from: "tertiary surface" },
+    secondaryForeground: { hsl: "0 0% 96%", from: "white on dark gray" },
+    muted: { hsl: "0 0% 11%", from: "muted surface, same as secondary" },
+    mutedForeground: { hsl: "0 0% 58%", from: "secondary text — labels, captions" },
+    accent: { hsl: "0 0% 14%", from: "hover surface" },
+    accentForeground: { hsl: "0 0% 96%", from: "white on hover" },
+    border: { hsl: "0 0% 16%", from: "table grids, card edges — visible, structural" },
+    input: { hsl: "0 0% 16%", from: "same as border" },
+    ring: { hsl: "142 70% 50%", from: "primary, focus only" },
+    destructive: { hsl: "0 70% 55%", from: "alert red — used as text and badge bg" },
+    destructiveForeground: { hsl: "0 0% 96%", from: "white on red" },
+    brand: {
+      success: { hsl: "142 70% 50%", from: "Vercel green = primary, also semantic success" },
+      warning: { hsl: "38 95% 56%", from: "Stripe amber — pending, attention" },
+      info: { hsl: "210 100% 60%", from: "blue — info status, links in tables" },
+      "fg-dim": { hsl: "0 0% 42%", from: "tertiary text — log timestamps, row IDs" },
+      "bg-row-alt": { hsl: "0 0% 6%", from: "alternating table row, almost imperceptible" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48],     // tight — note the 2px step for icon gaps
+    containerMax: "max-w-screen-2xl",                         // wide — utility UIs claim the screen
+    containerPadding: "px-4 lg:px-6",
+    sectionPadding: {
+      hero: "pt-12 pb-8 lg:pt-16 lg:pb-12",                  // small — utility UIs don't have heroes
+      default: "py-8 lg:py-12",
+      tight: "py-4 lg:py-6",
+    },
+  },
+
+  radius: {
+    base: "0.25rem",                  // 4px — sharp but not knife-edge
+    pillsAllowed: true,               // pills are essential — status badges everywhere
+  },
+
+  shadows: {
+    style: "none",
+    utilities: {
+      "border-elevated":
+        "inset 0 0 0 1px hsl(var(--border))",  // border-as-shadow utility for layered surfaces
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 150,                    // very fast — UI is responsive, not theatrical
+      loop: 1200,
+      ambient: 0,                     // no ambient motion in this language
+    },
+    keyframes: {
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 150,
+        iteration: "once",
+        purpose: "fade only — no transform. Dropdowns, popovers, table rows on load.",
+      },
+      "spin": {
+        css:
+          "from { transform: rotate(0deg); }\n" +
+          "to { transform: rotate(360deg); }",
+        defaultDuration: 800,
+        iteration: "infinite",
+        purpose: "spinner for inline loading states only",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Small (h-7 px-2.5 text-xs) and default (h-8 px-3 text-sm). " +
+      "Primary = solid green. Secondary = border + foreground. Ghost = no border, hover bg-accent. " +
+      "Icon-only buttons are square, 7-8 grid cells.",
+    card:
+      "Sharp corners (rounded-sm), border, bg-card. Tight padding (p-4). " +
+      "Header row inside card has bottom border. Tables embed inline.",
+    input:
+      "Compact (h-8 text-sm), border, bg-background, rounded-sm. " +
+      "Focus ring 1px (not 2px). Inline validation messages, no helper text by default.",
+    cta:
+      "Primary action is a button. Secondary actions are icon buttons. " +
+      "Marketing-style CTAs do not exist in this language.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.25)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",   // thin — dense UIs can't afford a 2px ring
+    scrollbarStyle: "thin",
+  },
+};

package/themes/devtool-cli/THEME.md

@@ -0,0 +1,100 @@
+# Design Direction — Devtool-CLI
+
+## Ethos
+Cloudflare signal-orange · Fly.io Plex-Mono voice · Railway dark canvas · Vercel Geist restraint · Resend warm-yellow accent
+
+## Feel
+Near-black canvas with one signal accent — orange-amber, used like a status LED. Monospace is promoted to display: terminal prompts, version strings, and code excerpts do the heavy lifting that headlines normally would. The page reads like a status dashboard that happens to be marketing — we run the internet, but the surface is effortless.
+
+## Reference brands
+- **Cloudflare** → dark canvas + signal orange + JetBrains-Mono accents. The status-LED energy applied to a marketing site.
+- **Fly.io** → deep paper-cream OR dark + IBM Plex Mono brand voice. Mono as identity, not as decoration.
+- **Railway** → deep dark + Inter body + node-graph illustrations. The infrastructure-graph as hero visual.
+- **Vercel** → black canvas + Geist sans + restrained chrome. Less is the brand.
+- **Resend** → black canvas + warm yellow + minimal flourish. One accent, deployed with discipline.
+
+## 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 and a purpose.
+
+Surface stack is **canvas** (background, deepest near-black) → **card** (one stop up, the terminal pane) → **popover** (two stops up, command palette / menu) → **secondary** → **muted** (code-block fill) → **accent** (hover). All on the same blue-biased near-black family — depth comes from one HSL lightness step, never a hue shift.
+
+Brand tokens: `--signal` (Cloudflare orange — the LED), `--signal-warm` (Resend yellow — gradient partner), `--success` (terminal stdout green), `--info` (Railway link blue), `--canvas`, `--ink`. **The signal-orange is the one allowed accent.** Use it for primary CTAs, focus rings, and the hero gradient — never for body decoration, never as a card border.
+
+## Typography
+- **Display:** JetBrains Mono. h1–h3 use mono — the terminal prompt IS the headline. Tracking `-0.02em` (mono at scale needs tightening; counters Inter's looser metric).
+- **Body:** Inter (Railway/Vercel body sans). Base **15px** with line-height **1.6** — technical body density, never magazine-loose.
+- **Mono:** JetBrains Mono (same as display). Code blocks, shell commands, metric counters, version strings.
+
+H1 uses `clamp(2.25rem, 5.5vw, 4.5rem)` — deliberately restrained. Mono at oversize loses readability fast; the discipline is to let the prompt speak, not shout. Numbers always use tabular figures (`"tnum"`). Slashed zero (`"zero"`) and stylistic alt 1 (`"ss01"`) are on by default — devtool convention so `0/O` and `1/l/I` never collide.
+
+## Spacing
+- **Container:** `max-w-6xl px-5 lg:px-8` — 1152px max. Wide enough for two-column code+prose ("write this / get this") without breaking the eye.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-16 lg:pt-28 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-10 lg:py-14`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128. Medium density — terminal-pane breathing, never magazine-airy.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on the token, not via new tokens. Pure white and pure black are forbidden — `--canvas` (near-black, blue-biased) and `--ink` (cool off-white) replace them. The single signal accent is non-negotiable — adding a second accent breaks the metaphor.
+
+## Radius
+`--radius: 0.375rem` (6px). Soft enough to feel modern-web, sharp enough to feel engineered. Pills ARE allowed for **status indicators only** (`v2.4.1`, `stable`, `edge`, `beta`) — pills here read as terminal convention, not as web-app chrome. Never a pill button.
+
+## Shadows
+**Glow style, restrained.** Three utilities ship:
+- `.glow-signal` — 1px signal-orange ring + soft halo. Reserved for the **hero card or hero CTA** only.
+- `.panel-lift` — hairline bottom + soft drop. For floating panels (command palette, dropdown).
+- `.terminal-inset` — inset hairline frame. For terminal/code-pane chrome.
+
+No generic drop-shadows. No multi-stop elevation system.
+
+## Motion
+The motion vocabulary is **terminal-aesthetic**: blinking carets, typewriter reveals, log-stream stagger.
+
+- `caret-blink` — 1100ms infinite, opacity 1↔0 on the half-step. The canonical devtool tell. One per page (the hero prompt).
+- `type-in` — 1800ms once, `width 0→100%`. Pair with `steps(12)` or similar discrete timing in usage to read as typing. Used on the hero command line.
+- `log-stream` — 400ms once, fade + 8px rise. Apply to log lines / status rows with a **60ms stagger** between siblings.
+- `status-pulse` — 2000ms infinite, expanding ring on the success-green dot. The "all systems operational" heartbeat. One per surface.
+- `fade-rise` — 600ms once, fade + 16px rise. The general section entrance.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — blinks and pulses freeze at midpoint; typewriter resolves instantly to final state.
+
+## Component patterns
+- **Buttons:** ghost-default (1px `--border`, foreground text, hover `bg-accent`). **Primary = solid `--signal` fill with `--canvas` text**, used on the single hero action per page. Tertiary = text-link with dotted underline-offset. Command-shaped buttons (`npm install`, `gh repo clone`) may use mono. **Never gradient on button faces.**
+- **Cards:** sharp-ish `0.375rem` corners, hairline `--border`, `bg-card`. **Terminal-pane variant** for hero or code-demo cards — header strip with three dots (close/min/max) in `--muted`, body in mono. Padding `p-5 lg:p-8`.
+- **Inputs:** full box, 1px `--border`, `bg-card`, mono family by default — in a devtool surface, an input is command-shaped. Focus = 1px `--ring` (signal). Placeholder in `--muted-foreground`, mono.
+- **CTAs:** hero is solid signal-fill with inline arrow glyph. Secondary CTAs ship in pairs (Docs / GitHub). Status pills accompany CTAs to convey runtime state (`stable`, `beta`, `edge`) — never as decoration.
+- **Code blocks:** `bg-muted`, 1px `--border`, `0.375rem` radius, `p-4`. Filename strip on top (mono, `--muted-foreground`). Inline `<code>` uses `bg-muted` with no border, `0.25rem` radius, `px-1.5 py-0.5`.
+
+## Recommended rich media
+Devtool-CLI leans on three media archetypes — all native to the form, none lifted from generic SaaS:
+1. **Terminal screenshots** — actual `iTerm2`/`Warp` captures, dark theme, JetBrains Mono, with the project's signal-orange used as the prompt accent. Cropped to 21:9 or 16:9, captioned with the command in mono below.
+2. **Node-graph illustrations** — Railway's signature. Nodes (services, edges, requests) connected with hairline strokes in `--border` color, with one or two nodes glowing in `--signal`. Built in Figma or as inline SVG; never raster.
+3. **Architecture diagrams** — Cloudflare's edge-network style. Geometric, monochrome (foreground + muted), one signal-orange highlight per diagram. Mono labels.
+
+**AI tool recommendations:** **Excalidraw** with the system-default style for hand-drawn architecture diagrams (then re-color tokens to match). **Figma + Auto-layout** for node graphs. **CleanShot X** or **Ray.so** for terminal/code screenshots with the project's exact token palette. Avoid Midjourney/Flux — they produce generic "tech" imagery (glowing servers, neon highways) that screams 2010s SaaS, not 2025 devtool.
+
+**Aspect ratios:** 21:9 for terminal hero captures. 16:9 for architecture diagrams. 1:1 for inline node graphs in feature cards. **Never 4:5 portrait** — devtool sites are landscape-monitor-shaped.
+
+**Video:** allowed and encouraged for one purpose only — a **15–30s screencast loop** of the CLI doing something real (deploy, log stream, edge invalidation). Muted, autoplay, looped, posterframe on signal-orange prompt. WebM/AV1, ≤2 MB. Never a talking-head explainer.
+
+**Performance:** hero terminal capture ≤80 KB AVIF at 1600w. Node-graph SVGs inlined and ≤8 KB each. LCP under 1.5s — devtool audiences run Lighthouse on your site for fun; a slow devtool site is self-disqualifying.
+
+**Avoid:** stock photos of "developers" with hoodies and giant monitors, glowing-server-room imagery, gradient meshes (soft-modern territory), 3D isometric illustrations (mid-2010s Stripe-clone aesthetic), AI imagery with hand-warped keyboards, lens flare, particle backgrounds.
+
+**Accessibility:** terminal/code captures are images of text and **must ship a real `<pre><code>` block alongside** for copy-paste and screen-reader access. The image is decoration; the code is the content. Alt text on diagrams describes the dataflow in one sentence — *"Diagram: requests enter the edge router, fan out to three regions, return to the user."*
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established. Expected first families: `terminal-pane`, `log-row`, `status-pill`, `command-button`.
+
+## Details
+- **Selection:** `hsl(var(--signal) / 0.35)` background, foreground text — orange highlight on the terminal.
+- **Focus ring:** `1px solid hsl(var(--ring))` — signal-orange, no offset, no glow. The accent IS the focus indicator.
+- **Scrollbar:** thin. Track is `--card`; thumb is `--border`. Hover thumb `--muted-foreground`.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.