@stylecrib/cli 0.3.1 → 0.3.3

package/themes/lawtech-modern/tokens.ts

@@ -0,0 +1,192 @@
+import type { Direction } from "../schema";
+
+// lawtech-modern — Clio / MyCase / Smokeball / Filevine / PracticePanther.
+// Brex-for-law modern legal tech. Cream + sage accent, friendly dashboard,
+// software-not-stuffy. The opposite of white-shoe; this is the tool the firm uses.
+
+export const lawtechModern: Direction = {
+  name: "lawtech-modern" as Direction["name"],
+  ethos:
+    "Clio matter-management warmth · MyCase friendly dashboard · Smokeball pragmatic UI · Filevine fielded-data clarity · PracticePanther solo-practitioner approachability",
+  references: [
+    { brand: "Clio", trait: "cream + sage, friendly Inter, matter-list density without coldness" },
+    { brand: "MyCase", trait: "dashboard warmth, sage CTAs, plain-English voice" },
+    { brand: "Smokeball", trait: "pragmatic UI, sage activity-feed, friendly badges" },
+    { brand: "Filevine", trait: "fielded-data clarity, dense forms with breathing room" },
+    { brand: "PracticePanther", trait: "solo + small-firm approachability, gentle sage primary" },
+  ],
+  feel:
+    "Modern legal-tech dashboard energy. Cream-tinted surfaces with sage primary, " +
+    "friendly Inter, dense-but-soft information layout. Software-not-stuffy: the tool " +
+    "a paperless solo practitioner or a 40-person firm runs without the white-shoe " +
+    "self-image. Brex-for-law — competence with warmth, not gravitas with starch.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Clio/MyCase — Inter as display reads competent + approachable without serif theater",
+      googleFont: "Inter",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "same family as display — lawtech dashboards use one face; hierarchy via weight + size",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "IBM Plex Mono",
+      fallback: ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "matter IDs, billable codes, court-deadline counters — warm mono for client-facing chrome",
+      googleFont: "IBM+Plex+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.015em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "tnum", "calt"',  // tabular for hours, billable amounts
+    h1ScaleClamp: "clamp(2rem, 4.5vw, 3.25rem)",  // tool-first, not magazine-large
+    bodyBaseSize: "0.9375rem",                     // 15px — denser than marketing, dashboard standard
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "40 32% 97%", from: "Clio warm cream — softer than dashboard white, less yellow than spa cream" },
+    foreground: { hsl: "220 28% 16%", from: "deep slate ink — readable on cream, friendly not stark" },
+    card: { hsl: "0 0% 100%", from: "true white card — lifts cleanly off cream for dashboard panels" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "150 38% 38%", from: "Clio/MyCase sage — friendly primary, never enterprise navy" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on sage" },
+    secondary: { hsl: "40 24% 93%", from: "deeper cream — secondary panel, side-rail surface" },
+    secondaryForeground: { hsl: "220 28% 18%", from: "slate ink on cream panel" },
+    muted: { hsl: "40 22% 95%", from: "table-row stripe — softer than secondary, near-bg" },
+    mutedForeground: { hsl: "220 12% 44%", from: "slate-gray — captions, timestamps, helper text" },
+    accent: { hsl: "150 40% 94%", from: "sage tint — hover surface, status-active chip" },
+    accentForeground: { hsl: "150 50% 22%", from: "deep sage on tint" },
+    border: { hsl: "40 18% 87%", from: "warm hairline — Clio panel rule, never cool gray" },
+    input: { hsl: "40 18% 87%", from: "same as border" },
+    ring: { hsl: "150 38% 38%", from: "primary sage, used for focus" },
+    destructive: { hsl: "0 65% 50%", from: "friendly clinical red — overdue-invoice, missed-deadline" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on red" },
+    brand: {
+      sage: { hsl: "150 38% 38%", from: "= primary; Clio/MyCase sage" },
+      "sage-soft": { hsl: "150 40% 94%", from: "sage tint — status-pill, hover surface" },
+      "sage-deep": { hsl: "150 45% 28%", from: "sage hover-darken, active state" },
+      cream: { hsl: "40 32% 97%", from: "= background; warm cream paper" },
+      "cream-deep": { hsl: "40 24% 93%", from: "= secondary; deeper cream for side panel" },
+      amber: { hsl: "36 90% 56%", from: "deadline-approaching, pending-review attention amber" },
+      "amber-soft": { hsl: "36 90% 94%", from: "amber tint — pending pill" },
+      navy: { hsl: "220 50% 32%", from: "secondary info accent — client-portal links, court-filing badges" },
+      "navy-soft": { hsl: "220 50% 94%", from: "navy tint — info chip" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 64, 80],
+    containerMax: "max-w-7xl",          // wide — dashboards run edge-to-edge
+    containerPadding: "px-4 lg:px-6",
+    sectionPadding: {
+      hero: "pt-16 pb-12 lg:pt-24 lg:pb-16",
+      default: "py-12 lg:py-20",
+      tight: "py-8 lg:py-12",
+    },
+  },
+
+  radius: {
+    base: "0.625rem",                  // 10px — softer than enterprise, less pillowy than DTC
+    pillsAllowed: true,                // pills core — matter-status, billable-tag, deadline-state
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-panel":
+        "0 1px 2px hsl(150 20% 20% / 0.04), 0 4px 12px hsl(150 20% 20% / 0.06)",
+      "shadow-panel-lg":
+        "0 2px 4px hsl(150 20% 20% / 0.05), 0 12px 28px hsl(150 20% 20% / 0.08)",
+      "shadow-popover":
+        "0 4px 8px hsl(150 20% 20% / 0.06), 0 24px 48px hsl(150 20% 20% / 0.12)",
+      "shadow-inset-soft":
+        "inset 0 1px 0 hsl(0 0% 100% / 0.6)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 350,
+      loop: 1800,
+      ambient: 0,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 350,
+        iteration: "once",
+        purpose: "panel and row entrance — short, dashboard-responsive",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.97); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 180,
+        iteration: "once",
+        purpose: "modal, popover, dropdown — confirms click without delay",
+      },
+      "soft-pulse": {
+        css:
+          "0%, 100% { opacity: 1; }\n" +
+          "50% { opacity: 0.6; }",
+        defaultDuration: 1800,
+        iteration: "infinite",
+        purpose: "deadline-approaching dot, live-timer running indicator",
+      },
+      "shimmer": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 1400,
+        iteration: "infinite",
+        purpose: "matter-list and invoice-row loading skeleton",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Primary = solid sage fill, white text, rounded-lg, shadow-panel. " +
+      "Secondary = white fill, 1px warm border, foreground text. Tertiary = text-link in sage. " +
+      "Destructive = red ghost (border + text), upgrades to solid only on confirm. " +
+      "Hover: shadow-panel-lg + 4% darken, never scale.",
+    card:
+      "Rounded-lg, white fill on cream, 1px warm border, shadow-panel. " +
+      "Internal padding p-5 lg:p-6. " +
+      "Dashboard tile may use a 4px top-border in the brand color matching the data " +
+      "(sage = active matter, navy = court filing, amber = pending, red = overdue).",
+    input:
+      "Rounded-md, 1px warm border, white background. Compact height (h-9). " +
+      "Label above in Inter 500. Focus = 2px sage ring at 40% opacity. " +
+      "Error = red border + red helper text below.",
+    cta:
+      "Primary sage solid is the dashboard default. " +
+      "Marketing pages may pair primary + navy ghost side-by-side. " +
+      "Voice is friendly-professional: 'Start your free trial', 'Talk to a specialist', 'Import your matters'.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/linkedin-pro/THEME.md

@@ -0,0 +1,102 @@
+# Design Direction — Linkedin-Pro
+
+## Ethos
+LinkedIn brand-blue + profile-card density · Polywork tag-strip identity · Read.cv editorial calm · Lunchclub warm-pro pairing · Tomo gentle accent
+
+## Feel
+Professional, populated, slightly dense. The feed is the page — profile cards stack, engagement counts read in tabular numerics, headlines and titles outrank everything else. Corporate-friendly blue carries the entire identity; surfaces stay near-white with hairline borders so cards can sit a dozen-deep without competing.
+
+Where `dense-utility` is Bloomberg-terminal cold and `creator-social` is mobile-vertical hot, linkedin-pro lives in the corporate middle — desktop-first, headshot-led, conservative palette, but generous enough to look human.
+
+## Reference brands
+- **LinkedIn** → corporate brand-blue, profile-card density, the headshot-led feed. The card chrome is the language.
+- **Polywork** → tag-strip identity. The colorful chip taxonomy that sits over a calm gray surface.
+- **Read.cv** → editorial calm on a pro profile. Restraint within the corporate envelope.
+- **Lunchclub** → warm-pro pairing. Where LinkedIn is cold-corporate, Lunchclub adds the social warmth.
+- **Tomo** → gentle accent against a navy-blue identity. The credit-builder feel — pro but approachable.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin.
+
+Surface stack: **page wash** (`210 30% 97%`, the feed background) → **white card** (`0 0% 100%`) → **chip/hover surface** (`210 24% 94%`). Hairline borders (`210 18% 88%`) define every card edge — depth never comes from fill darkening.
+
+Primary is **LinkedIn brand-blue** (`210 90% 38%`) — the identity color. It carries CTAs, link text, name mentions, focus rings, and the connection-ring on hovered avatars.
+
+Brand tokens — language, not decoration:
+- `--blue-deep` — pressed/visited link, primary-hover.
+- `--blue-soft` — tinted background for mention pills, selected chips.
+- `--navy` — secondary identity for premium/featured badges (Polywork dark).
+- `--teal` — Lunchclub status accent ("Open to work", "Available"). Used sparingly.
+- `--amber` — endorsement / award / featured-skill tag (Polywork tag color).
+- `--success-green` — quiet success (connection accepted, profile complete). Never Robinhood-bright.
+
+## Typography
+- **Display:** Source Sans 3 — LinkedIn's display-sans feel, humanist and corporate-readable. h1–h4, weights 600/700.
+- **Body:** Inter — Read.cv / Polywork body sans, dense-friendly. Base **15px** with **line-height 1.55** — tighter than soft-modern because the feed is information-dense.
+- **Mono:** IBM Plex Mono — engagement counts, timestamps, follower numbers. Tabular numerics (`"tnum"`) are on globally.
+
+H1 uses `clamp(2rem, 4.5vw, 3.25rem)` — restrained; this isn't a marketing hero direction. Heading tracking `-0.015em`. Font features `"tnum", "ss01"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-6` — desktop-first three-column feed (left rail + feed + right rail).
+- **Section padding tiers:**
+  - Hero: `pt-16 pb-10 lg:pt-24 lg:pb-14` — tight; profile-page heroes are short.
+  - Default: `py-12 lg:py-16`
+  - Tight: `py-8 lg:py-12`
+- **Allowed scale values:** 4 6 8 10 12 14 16 20 24 32 40 48 64. High density — feeds breathe in steps of 4–6px, not 8–12.
+
+## Color
+No hex in components. All color via tokens. Opacity via `/N`.
+
+The palette is **one brand-blue carrying the entire identity** over a near-white surface. Resist adding a second saturated accent — `--teal` and `--amber` are for status/tagging and stay below 10% of any surface. Pure black is forbidden; foreground is `210 30% 12%` (corporate-ink with a blue bias).
+
+## Radius
+`--radius: 0.5rem` (8px). LinkedIn card corners — gentle but not playful. Pills are allowed (`pillsAllowed: true`) and are the default for `Connect`, `Follow`, tag chips, and the header search bar.
+
+## Shadows
+Three soft, low-elevation utilities:
+- `.shadow-card` — feed-card resting elevation (1px border-bottom + 3px soft drop).
+- `.shadow-card-hover` — hovered feed-card lift (16px tinted drop).
+- `.shadow-popover` — connection-suggest / hover-card / dropdown menu.
+
+Shadows lean cool (`210 30% 20%` tinted drops). No glow utilities — this is not creator-social.
+
+## Motion
+Three keyframes, professional energy:
+- `fade-rise` (400ms) — feed-card entrance. Short rise, no overshoot.
+- `skeleton-shimmer` (1800ms loop) — post-loading skeleton. The feed never renders blank between pages.
+- `ring-pulse` (1400ms loop) — live-now indicator on a headshot. Quiet attention pull on "Posting now" / "In a meeting" status.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — `ring-pulse` collapses to a static ring; `fade-rise` collapses to fade-only.
+
+## Component patterns
+- **Buttons:** primary = filled brand-blue rounded-full pill, weight 600 (Connect / Follow / Apply). Secondary = bordered pill with primary-color text and border. Tertiary = ghost text in foreground. Never use a sharp-corner button — every button in this language is a pill.
+- **Cards:** white `bg-card`, hairline border, `.shadow-card`. Padding `p-4 lg:p-5`. Composition is **headshot top-left, name + headline + meta right of headshot, body below, action row at bottom**. Hover lifts to `.shadow-card-hover`. Feed-cards stack 4-deep without spacing fatigue.
+- **Inputs:** full rounded-md box, border, `bg-card`. Focus = 2px brand-blue ring at 60% opacity. Header search bar is the one pill input — everywhere else is rounded-md.
+- **CTAs:** primary pill button is default. `Connect` / `Follow` inline buttons are bordered pills in brand-blue. Mentions (`@name`) and hashtags render as inline primary text-links — never chips. Endorsements render as `--amber` chips.
+
+## Component families
+- `*ProfileCard` — headshot + headline + connection-degree + action row.
+- `*FeedPost` — headshot + name/title/time-meta + body + engagement-row.
+- `*JobRow` — company-logo + role + location + time-posted + Apply pill.
+- `*ConnectionChip` — small avatar + name + mutual-count + Connect pill.
+
+## Recommended rich media
+Headshots, headshots, headshots. Square 1:1 portrait crops, professional-warm lighting (not corporate-cold). Company logos as flat marks (SVG / square crops at 1:1). Cover photos sit at 4:1 — wide, subtle, never a decorative gradient.
+
+**AI tools:** Midjourney *"professional LinkedIn headshot, soft natural lighting, neutral office background, 50mm, color-graded warm-neutral"*. Avoid: corporate-stock laughing-at-laptop, glass-skyscraper hero shots, anything with the "AI uncanny smile."
+
+**Aspect ratios:** 1:1 for headshots, 4:1 for cover photos, 16:9 for in-feed link previews. Never 9:16 (mobile-creator territory).
+
+**AVOID:** vibrant gradients, vertical TikTok video, hand-drawn illustration, mood photography. This direction is sober and headshot-led.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.18)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.6)`. Brand-blue, visible but quiet.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/linkedin-pro/tokens.ts

@@ -0,0 +1,174 @@
+import type { Direction } from "../schema";
+
+// linkedin-pro — corporate-professional networking. Brand blue dominates, dense
+// feed-card surface, hairline borders, system-sans body, profile-card-first.
+// Tool-first language: ship density and information, not decoration.
+export const linkedinPro: Direction = {
+  name: "linkedin-pro",
+  ethos:
+    "LinkedIn brand-blue + profile-card density · Polywork tag-strip identity · Read.cv editorial calm · Lunchclub warm-pro pairing · Tomo gentle accent",
+  references: [
+    { brand: "LinkedIn", trait: "corporate blue + feed-card density + headshot-led identity" },
+    { brand: "Polywork", trait: "tag-strip identity, colorful chip taxonomy on a calm surface" },
+    { brand: "Read.cv", trait: "editorial-calm pro profile, restrained type" },
+    { brand: "Lunchclub", trait: "warm-pro pairing, friendly chrome over corporate spine" },
+    { brand: "Tomo", trait: "gentle accent against a navy-blue identity" },
+  ],
+  feel:
+    "Professional, populated, slightly dense. The feed is the page — profile cards stack, " +
+    "engagement counts read in tabular numerics, headlines and titles outrank everything. " +
+    "Corporate-friendly blue carries the entire identity; surfaces stay near-white with hairline " +
+    "borders so cards can sit a dozen-deep without competing.",
+
+  fonts: {
+    display: {
+      family: "Source Sans 3",
+      fallback: ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "LinkedIn's display-sans feel — humanist, corporate-readable",
+      googleFont: "Source+Sans+3",
+      weights: [400, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Read.cv / Polywork body sans — neutral, dense-friendly",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "IBM Plex Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "monospace"],
+      from: "engagement counts, timestamps, post-meta — corporate tabular feel",
+      googleFont: "IBM+Plex+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.015em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "ss01"',
+    h1ScaleClamp: "clamp(2rem, 4.5vw, 3.25rem)",
+    bodyBaseSize: "0.9375rem",
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "210 30% 97%", from: "LinkedIn page wash — barely-tinted blue-gray, the feed canvas" },
+    foreground: { hsl: "210 30% 12%", from: "near-black with a corporate-blue bias — profile headline ink" },
+    card: { hsl: "0 0% 100%", from: "pure white profile/post card — lifts off the feed wash" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "210 90% 38%", from: "LinkedIn brand blue — the identity. CTAs, links, name-mentions" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on brand blue" },
+    secondary: { hsl: "210 24% 94%", from: "hover/press surface — chip backgrounds, suggested-card fill" },
+    secondaryForeground: { hsl: "210 30% 18%", from: "deep blue-ink on secondary" },
+    muted: { hsl: "210 24% 94%", from: "same as secondary — quiet panels inside dense feed" },
+    mutedForeground: { hsl: "210 14% 42%", from: "Lunchclub gray — captions, post-meta, follower counts" },
+    accent: { hsl: "210 88% 94%", from: "primary tinted bg — selected chip, hovered link, mention pill" },
+    accentForeground: { hsl: "210 90% 28%", from: "deeper brand blue on tinted accent" },
+    border: { hsl: "210 18% 88%", from: "LinkedIn hairline — visible without dominating the card" },
+    input: { hsl: "210 18% 88%", from: "same as border" },
+    ring: { hsl: "210 90% 38%", from: "primary, focus only" },
+    destructive: { hsl: "0 70% 48%", from: "corporate red — Connection-decline, report" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on red" },
+    brand: {
+      "blue-deep": { hsl: "210 90% 28%", from: "pressed/visited link, hover state on primary" },
+      "blue-soft": { hsl: "210 88% 94%", from: "= accent; tinted bg for connection chip, mention pill" },
+      navy: { hsl: "215 50% 18%", from: "secondary identity — Polywork dark accent, used for premium/badge" },
+      teal: { hsl: "175 60% 38%", from: "Lunchclub gentle accent — 'open to work' / status, used sparingly" },
+      amber: { hsl: "38 92% 50%", from: "Polywork tag color — endorsement / award / featured" },
+      "success-green": { hsl: "142 50% 38%", from: "connection-accepted, profile-100% — quiet, not Robinhood-green" },
+      "headshot-ring": { hsl: "210 90% 38%", from: "= primary; the brand-ring around avatars on hover" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 64],
+    containerMax: "max-w-6xl",
+    containerPadding: "px-4 lg:px-6",
+    sectionPadding: {
+      hero: "pt-16 pb-10 lg:pt-24 lg:pb-14",
+      default: "py-12 lg:py-16",
+      tight: "py-8 lg:py-12",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",                  // 8px — LinkedIn card corners, gentle but corporate
+    pillsAllowed: true,              // connection chips, follower pills, tag taxonomy
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-card":
+        "0 1px 0 hsl(210 18% 86%), 0 1px 3px hsl(210 30% 20% / 0.04)",
+      "shadow-card-hover":
+        "0 1px 0 hsl(210 18% 86%), 0 6px 16px hsl(210 30% 20% / 0.08)",
+      "shadow-popover":
+        "0 8px 24px hsl(210 30% 20% / 0.12), 0 0 0 1px hsl(210 18% 86%)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 400,
+      loop: 1800,
+      ambient: 12000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 400,
+        iteration: "once",
+        purpose: "feed-card entrance — short, professional, no overshoot",
+      },
+      "skeleton-shimmer": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 1800,
+        iteration: "infinite",
+        purpose: "post-loading skeleton — pages of feed never render blank",
+      },
+      "ring-pulse": {
+        css:
+          "0% { box-shadow: 0 0 0 0 hsl(210 90% 38% / 0.4); }\n" +
+          "100% { box-shadow: 0 0 0 8px hsl(210 90% 38% / 0); }",
+        defaultDuration: 1400,
+        iteration: "infinite",
+        purpose: "live-now indicator on a profile headshot — quiet attention pull",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Primary = filled brand-blue, rounded-full pill, weight 600. " +
+      "Secondary = pill with primary-color border + primary text (Connect / Follow). " +
+      "Tertiary = ghost text in foreground. Hover deepens fill to blue-deep.",
+    card:
+      "White bg-card, hairline border, shadow-card. Internal padding p-4 lg:p-5. " +
+      "Headshot top-left, name + headline right, action-row bottom. Hover lifts to shadow-card-hover.",
+    input:
+      "Full rounded-md box, border, bg-card. Focus = 2px brand-blue ring. " +
+      "Search bar in the header has a pill shape; everywhere else is rounded-md.",
+    cta:
+      "Primary pill button is default. Inline 'Connect' / 'Follow' buttons are bordered pills. " +
+      "Mentions and hashtags render as inline primary-colored text-links, never chips.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.18)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.6)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/logistics-modern/THEME.md

@@ -0,0 +1,94 @@
+# Design Direction — Logistics-Modern
+
+## Ethos
+Shippo cool-white + carrier-tile chrome · ShipBob warm-blue dashboard density · Flexport ocean-navy + cargo-grid · ShipStation rate-table density · Easyship friendly carrier-comparison cards
+
+## Feel
+A logistics-ops console. Cool-white canvas, a single signal-blue accent, hairline borders carrying the structure. Rate-comparison tables are the hero — carriers × service-levels at a glance, prices in mono tabular. The fulfillment-network map is a working chart, not a decorative globe. Integration-logo strips read as proof, not social validation. The page is what an ops manager opens on a Tuesday at 8am.
+
+## Reference brands
+- **Shippo** → cool-white canvas with carrier-tile rate cards. The page is barely-blue, not warm.
+- **ShipBob** → warm-blue dashboard density and fulfillment-network map. The map is a tool, not a decoration.
+- **Flexport** → ocean-navy and cargo-grid clarity. The sidebar surface is deeper than the body, with a navy lean.
+- **ShipStation** → dense rate-table comparison. Tabular numerics carry the page.
+- **Easyship** → friendly carrier-comparison cards and integration-logo strips. The proof is the integrations.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin.
+
+Surface stack is **cool-white background** → `--card` (pure white, one degree above) → `--secondary` (cool gray for table headers and inset panels). Depth comes from hairline borders, not shadows. The sidebar (if used) sits on `--ocean-navy`, a separate surface family.
+
+Brand tokens: `--signal-blue`, `--signal-blue-deep`, `--signal-blue-soft`, `--ocean-navy`, `--freight-amber`, `--delivered-green`, `--map-land`, `--map-route`. Freight-amber means "in transit" and delivered-green means "delivered" — semantic-only, never decorative. Ocean-navy is reserved for sidebar surfaces and the map basemap.
+
+## Typography
+- **Display:** Inter semi-heavy (Shippo / Flexport marketing). h1–h4. Tracking `-0.022em`.
+- **Body:** Inter regular/medium (ShipBob / ShipStation body). Body base **14.4px** with **line-height 1.5** — dashboard density.
+- **Mono:** IBM Plex Mono. Rate tables, tracking numbers, weight/dim units. Plex Mono is wider than JetBrains and scans better at table row height.
+
+H1 uses `clamp(2rem, 4vw, 3rem)`. Restrained — the rate table is the headline, not the prose.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-6` — dashboard-wide.
+- **Section padding tiers:**
+  - Hero: `pt-12 pb-8 lg:pt-16 lg:pb-12`
+  - Default: `py-10 lg:py-14`
+  - Tight: `py-6 lg:py-10`
+- **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.
+
+## Color
+No hex anywhere in component files. All color via tokens.
+
+Signal-blue is the only saturated UI accent. Freight-amber, delivered-green, ocean-navy are semantic-only. Status pills follow strict semantics: `In transit` (amber), `Delivered` (green), `Failed` (destructive). Pills use brand-soft backgrounds with brand-deep text — never solid fills.
+
+## Radius
+`--radius: 0.375rem` (6px). Sharper than ev-charging — full dashboard language. Pills allowed (`pillsAllowed: true`) for status badges, carrier-name chips, integration tiles.
+
+## Shadows
+**Minimal.** Three utilities: `.shadow-card` (subtle 1px lift), `.shadow-popover` (4-14px for dropdowns and modals), `.shadow-table-row` (inset bottom border). No glows. No colored shadows. The page is held together by borders.
+
+## Motion
+Four keyframes: `fade-in` (200ms — table-row and carrier-card entrance, opacity only), `route-dash` (1400ms infinite — in-transit routes on the network map flow with a dashed line), `row-hover` (120ms — rate-table row hover background), `shimmer` (1400ms infinite — loading skeleton for rate cells while carriers respond).
+
+`route-dash` is the one decorative motion — it tells the eye which shipments are moving. Under `prefers-reduced-motion`, the dashes go static at full-extension. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`.
+
+## Density
+High. The user is comparing 15 rates across 5 carriers — they are here to read a table, not to admire a hero. Rate-table rows are 36px tall. Carrier cards are 5 across at desktop. Integration-logo strip fits 8–10 logos per row.
+
+## Component patterns
+- **Buttons:** solid signal-blue primary (rounded-md, shadow-card) for the single commit — `Buy label`, `Connect carrier`, `Ship now`. Secondary is ghost. Tertiary is text-link blue. Hover deepens fill to `--signal-blue-deep`; no scale, no shadow growth.
+- **Cards:** rounded-md, 1px `--border`, `bg-card`, `shadow-card`. Padding `p-4 lg:p-5`. Carrier-rate card holds carrier logo, service level, price, ETA — modular, one purpose.
+- **Inputs:** full rounded-md box, 1px `--input` border, `bg-card`. Tracking-number input is mono. Focus = 2px signal-blue ring at 45% opacity. Weight/dim inputs right-aligned mono.
+- **CTA:** primary signal-blue button for commit. Status pills follow semantic colors (amber/green/destructive) with soft backgrounds. Rate-table selected row uses `--signal-blue-soft` with a left-edge signal-blue accent bar.
+
+## Recommended rich media
+Logistics-Modern leans on **product UI screenshots**, **integration logos**, and **fulfillment-network maps** — the actual dashboard, the actual carrier logos, the actual map. Avoid stock cargo-ship-at-sunset imagery or generic "global commerce" abstractions.
+
+**Iconography:** 20px grid, 1.5px stroke, rounded line caps. Box, truck, plane, container, scan, label — drawn in a single hand. Carrier logos use the real marks; never redrawn.
+
+**Product screenshots** are the headline media. Captured at 2x retina, cropped to dashboard cards, framed in a subtle browser-chrome SVG. Drop shadow under screenshots is `shadow-popover`, never a custom glow.
+
+**AI tool recommendations:** **Midjourney / Flux** with prompts like *"photorealistic warehouse fulfillment interior, neutral lighting, conveyor belts, isometric angle, no people, no logos, soft cool tones"* for the rare warehouse hero shot. **Recraft** for the flat icon set. Avoid the default "global supply chain" world-map gradients — they read consultant deck.
+
+**Aspect ratios:** 16:10 for dashboard screenshots. 1:1 for carrier-logo tiles. 21:9 strip for the network-map preview. Never 16:9 — that's video, not UI.
+
+**Video:** rare. If used, it is a screen recording of the product UI itself — 30fps, ≤8MB H.265, poster mandatory. No people. No music in autoplay.
+
+**Performance:** product screenshots ship as AVIF at 2x retina, ≤120KB each. Network-map is SVG with route overlays, never a raster screenshot of Google Maps. LCP target 1.8s.
+
+**Avoid:** cargo-ship-at-sunset stock photography, generic "global commerce" world-globe imagery, neon-blue cyberpunk supply-chain visuals, shipping-container-on-truck-at-night moody shots, animated GIFs of cursors, glassmorphic panels.
+
+**Accessibility:** every status pill includes a text label (`In transit`, `Delivered`), never color-only. Rate-table includes `scope` attributes and a screen-reader caption summarizing carrier count and service-level count. Signal-blue meets 4.5:1 against white at body size.
+
+## Component families
+None at install time. Family conventions emerge as the project grows.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.45)`. Signal-blue, soft.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.