@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/kinetic-headline/THEME.md

@@ -0,0 +1,78 @@
+# Kinetic Headline
+
+> Type as the whole page — one oversized variable-font headline, everything else calms down around it.
+
+**Slug:** `kinetic-headline` — **Surface:** web — **Density:** airy
+
+## Influence
+
+Studio Feixen wordmark work, Instrument's kinetic case studies, Rauno's variable-font demos, Vercel's typographic launches, Field's identity systems.
+
+## Signature move
+
+The display headline fills 60-80% of viewport width at rest, weight 400.
+On hover / scroll, weight morphs to 700+ via variable-font axis interpolation.
+Body content sits BELOW the fold — the headline IS the page above the crease.
+Everything else uses a single quiet body face at one weight.
+
+## Palette
+
+- **bg:** `#FAFAFA`
+- **surface:** `#F2F2F2`
+- **ink:** `#0A0A0A`
+- **accent:** `#3D5AFE`
+- **secondary:** `#7A7A7A`
+
+## Typography
+
+- **Display:** Bricolage Grotesque Variable — 400 baseline, morphs to 700+ on hover; 120-260px display sizes, letter-spacing -0.04em at scale
+- **Body:** Uncut Sans — 400, 16px, line-height 1.5. Body type stays QUIET so the display carries the moment.
+- **Mono:** JetBrains Mono — 12-13px, only for metadata (case numbers, timestamps, footnotes). Never for body.
+- **Scale:** 1.5 (perfect fifth — deliberately WIDE contrast; body and display should feel like different pages).
+
+## Motion
+
+ONE kinetic moment: the display headline morphs weight on scroll or hover
+(400→700 axis animation over 400ms). Nothing else moves — no scroll reveals,
+no hover shifts on cards, no button animations beyond native focus rings.
+The absence of secondary motion is what makes the primary moment land.
+
+
+## Imagery
+
+Zero decorative imagery. If a photograph is used, it's ONE full-bleed shot
+behind the headline, cropped so the type sits on negative space. No 3D
+renders, no illustrations, no icon systems. Optional: one variable-font
+specimen card showing the axis range being used.
+
+## Best for
+
+- Design agency portfolios
+- Individual designer / studio splash pages
+- Product launch marketing (single-headline campaigns)
+- Manifesto pages
+- Type foundries and font-focused editorial
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Animating body text or any non-headline type (unreadable, defeats the whole register)
+- More than one kinetic moment per page (dilutes the signature — headline moves, that's it)
+- Secondary accent color — accent is one hue, used sparingly, no supporting palette
+- Decorative imagery competing with the headline for attention
+- Card grids, feature tiles, or Bento layouts — they're visual noise beside the headline
+- Hover animations on non-headline elements — the page should feel STILL except for the headline
+- Serif display faces (this is a grotesque-variable register, not editorial)
+- Multi-column body flow (this is the opposite of Broadsheet, it's single-focus)
+- Rounded button chrome greater than 4px (subtle if any, no pill-shapes)
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757)
+- void+acid (near-black bg + single bright acid-green or vermilion accent)
+- broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)
+- tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)
+- uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)
+- kinetic-body (animating body text along with the headline — collapses the register)
+- kinetic-everything (every element gets a hover animation — the signature moment stops being singular)

package/themes/kinetic-headline/audit.log.jsonl

@@ -0,0 +1,4 @@
+{"slug":"kinetic-headline","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T17:04:59.221Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T17:04:59.228Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T17:05:27.140Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":false,"failures":[{"rule":"ANCHOR-02","severity":"block","evidence":"Accent restraint — Two accents visible simultaneously — blue 'system fonts' link and purple 'visited purple' link — both used as interactive signals in the same sentence."}]},"ran_at":"2026-07-03T17:05:39.411Z","dismissed":[]}],"overall":"BLOCK","ran_at":"2026-07-03T17:04:59.221Z"}
+{"slug":"kinetic-headline","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T17:11:49.351Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T17:11:49.359Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — avoid-rubric gate skipped. Set the key to grade against theme.avoid array."},"ran_at":"2026-07-03T17:11:49.359Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — anchor-compare skipped. Set the key to enable rubric grading."},"ran_at":"2026-07-03T17:11:53.333Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-03T17:11:49.351Z"}
+{"slug":"kinetic-headline","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T17:12:20.390Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T17:12:20.399Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T17:12:57.891Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T17:13:11.669Z","dismissed":[{"rule":"ANCHOR-02","severity":"block","evidence":"Accent restraint — Two accents visible simultaneously: the blue 'system fonts' link and the purple 'visited purple' link inside the same sentence — violates one-accent rule.","dismissed":true,"dismissal":{"scope":"this_theme","reason":"Real defect but out of theme scope. The shared archetype mockup wrapper in site/src/components/SiteMockup.tsx (RestraintMockup fallback for kinetic-headline's archetype key) renders default browser link colors (#0000EE, #551A8B) that contradict Family D accent-restraint. Kinetic-Headline's OWN section renderer + card use only #3D5AFE. Site chrome fix is a follow-up — retire this dismissal when the archetype wrapper is refactored to inherit from the theme's palette.","dismissed_at":"2026-07-03T17:11:49.228Z"}}]}],"overall":"PASS","ran_at":"2026-07-03T17:12:20.390Z"}
+{"slug":"kinetic-headline","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T22:52:07.767Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T22:52:07.776Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — avoid-rubric gate skipped. Set the key to grade against theme.avoid array."},"ran_at":"2026-07-03T22:52:07.777Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — anchor-compare skipped. Set the key to enable rubric grading."},"ran_at":"2026-07-03T22:52:11.106Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-03T22:52:07.767Z"}

package/themes/kinetic-headline/dismissals.jsonl

@@ -0,0 +1 @@
+{"finding_id":"ANCHOR-02","scope":"this_theme","reason":"Real defect but out of theme scope. The shared archetype mockup wrapper in site/src/components/SiteMockup.tsx (RestraintMockup fallback for kinetic-headline's archetype key) renders default browser link colors (#0000EE, #551A8B) that contradict Family D accent-restraint. Kinetic-Headline's OWN section renderer + card use only #3D5AFE. Site chrome fix is a follow-up — retire this dismissal when the archetype wrapper is refactored to inherit from the theme's palette.","dismissed_at":"2026-07-03T17:11:49.228Z","applied":false}

package/themes/kinetic-headline/tailwind.snippet.ts

@@ -0,0 +1,16 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: kinetic-headline
+export const kineticHeadlineTailwindExtend = {
+  colors: {
+    bg: "#FAFAFA",
+    surface: "#F2F2F2",
+    ink: "#0A0A0A",
+    accent: "#3D5AFE",
+    secondary: "#7A7A7A",
+  },
+  fontFamily: {
+    display: ["Bricolage Grotesque Variable — 400 baseline, morphs to 700+ on hover; 120-260px display sizes, letter-spacing -0.04em at scale"],
+    body: ["Uncut Sans — 400, 16px, line-height 1.5. Body type stays QUIET so the display carries the moment."],
+    mono: ["JetBrains Mono — 12-13px, only for metadata (case numbers, timestamps, footnotes). Never for body."],
+  },
+};

package/themes/kinetic-headline/theme.yml

@@ -0,0 +1,81 @@
+# Base 32 Kinetic Headline — Family D, Contemporary Web.
+#
+# Per BESPOKE_THEME_SYSTEM.md #32: type as the hero, oversized variable-font
+# headline that fills the viewport, everything else quiet. The one signature
+# is the kinetic type moment; nothing else moves.
+#
+# This is theme #2 authored through the v2 harness. Second theme in Family D
+# (signal-dark was survivor precedent, Base 33 Dark Premium). Uses the
+# existing Family D golden anchor + rubric infrastructure.
+
+name: Kinetic Headline
+concept: Type as the whole page — one oversized variable-font headline, everything else calms down around it.
+influence: Studio Feixen wordmark work, Instrument's kinetic case studies, Rauno's variable-font demos, Vercel's typographic launches, Field's identity systems.
+
+family: D
+base_number: 32
+render_url: http://localhost:5173/themes/kinetic-headline
+
+surface: web
+
+typography:
+  display: Bricolage Grotesque Variable — 400 baseline, morphs to 700+ on hover; 120-260px display sizes, letter-spacing -0.04em at scale
+  body: Uncut Sans — 400, 16px, line-height 1.5. Body type stays QUIET so the display carries the moment.
+  mono: JetBrains Mono — 12-13px, only for metadata (case numbers, timestamps, footnotes). Never for body.
+  scale: 1.5 (perfect fifth — deliberately WIDE contrast; body and display should feel like different pages).
+
+palette:
+  bg: "#FAFAFA"
+  surface: "#F2F2F2"
+  ink: "#0A0A0A"
+  accent: "#3D5AFE"
+  secondary: "#7A7A7A"
+
+density: airy
+
+motion: |
+  ONE kinetic moment: the display headline morphs weight on scroll or hover
+  (400→700 axis animation over 400ms). Nothing else moves — no scroll reveals,
+  no hover shifts on cards, no button animations beyond native focus rings.
+  The absence of secondary motion is what makes the primary moment land.
+
+signature: |
+  The display headline fills 60-80% of viewport width at rest, weight 400.
+  On hover / scroll, weight morphs to 700+ via variable-font axis interpolation.
+  Body content sits BELOW the fold — the headline IS the page above the crease.
+  Everything else uses a single quiet body face at one weight.
+
+imagery: |
+  Zero decorative imagery. If a photograph is used, it's ONE full-bleed shot
+  behind the headline, cropped so the type sits on negative space. No 3D
+  renders, no illustrations, no icon systems. Optional: one variable-font
+  specimen card showing the axis range being used.
+
+best_for:
+  - Design agency portfolios
+  - Individual designer / studio splash pages
+  - Product launch marketing (single-headline campaigns)
+  - Manifesto pages
+  - Type foundries and font-focused editorial
+
+avoid:
+  - "Animating body text or any non-headline type (unreadable, defeats the whole register)"
+  - "More than one kinetic moment per page (dilutes the signature — headline moves, that's it)"
+  - "Secondary accent color — accent is one hue, used sparingly, no supporting palette"
+  - "Decorative imagery competing with the headline for attention"
+  - "Card grids, feature tiles, or Bento layouts — they're visual noise beside the headline"
+  - "Hover animations on non-headline elements — the page should feel STILL except for the headline"
+  - "Serif display faces (this is a grotesque-variable register, not editorial)"
+  - "Multi-column body flow (this is the opposite of Broadsheet, it's single-focus)"
+  - "Rounded button chrome greater than 4px (subtle if any, no pill-shapes)"
+
+banned_defaults:
+  # Global blocklist from BESPOKE_THEME_SYSTEM.md
+  - "claude-cream (#F4F1EA + serif + #D97757)"
+  - "void+acid (near-black bg + single bright acid-green or vermilion accent)"
+  - "broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)"
+  - "tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)"
+  - "uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)"
+  # Base-specific
+  - "kinetic-body (animating body text along with the headline — collapses the register)"
+  - "kinetic-everything (every element gets a hover animation — the signature moment stops being singular)"

package/themes/kinetic-headline/tokens.ts

@@ -0,0 +1,26 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "kinetic-headline",
+  family: "D",
+  base: "32",
+  palette: {
+    "bg": "#FAFAFA",
+    "surface": "#F2F2F2",
+    "ink": "#0A0A0A",
+    "accent": "#3D5AFE",
+    "secondary": "#7A7A7A"
+  },
+  typography: {
+    "display": "Bricolage Grotesque Variable — 400 baseline, morphs to 700+ on hover; 120-260px display sizes, letter-spacing -0.04em at scale",
+    "body": "Uncut Sans — 400, 16px, line-height 1.5. Body type stays QUIET so the display carries the moment.",
+    "mono": "JetBrains Mono — 12-13px, only for metadata (case numbers, timestamps, footnotes). Never for body.",
+    "scale": "1.5 (perfect fifth — deliberately WIDE contrast; body and display should feel like different pages)."
+  },
+  surface: "web",
+  density: "airy",
+  motion: "ONE kinetic moment: the display headline morphs weight on scroll or hover\n(400→700 axis animation over 400ms). Nothing else moves — no scroll reveals,\nno hover shifts on cards, no button animations beyond native focus rings.\nThe absence of secondary motion is what makes the primary moment land.\n",
+  signature: "The display headline fills 60-80% of viewport width at rest, weight 400.\nOn hover / scroll, weight morphs to 700+ via variable-font axis interpolation.\nBody content sits BELOW the fold — the headline IS the page above the crease.\nEverything else uses a single quiet body face at one weight.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/law-firm/THEME.md

@@ -0,0 +1,108 @@
+# Design Direction — Law-Firm
+
+## Ethos
+Skadden white-shoe formality · Latham partner-track gravity · Cravath one-tier promotion restraint · Wachtell deal-list density · Davis Polk Wall Street typesetting
+
+## Feel
+Annual-report formality at screen scale. Cream paper, deep ink, formal serif display (Cheltenham-feel) over clean sans body. A conservative navy is the single accent — used for the bar admission, the practice tag, the rule. The page reads "we have argued before the Court since 1898." Never trendy, never marketing-loud, never lifestyle. Print-document discipline is the design.
+
+A law-firm surface that feels playful, soft, or startup-loud is off-direction. The voice is partner-level, restrained, informed.
+
+## Reference brands
+- **Skadden Arps** (skadden.com) → cream paper, navy serif, attorney-roster gravity. The benchmark for white-shoe digital presence.
+- **Latham & Watkins** (lw.com) → global-practice grid, formal Cheltenham-feel headings. Office-network density without losing typographic discipline.
+- **Cravath Swaine & Moore** (cravath.com) → 150-year typographic restraint, deal-record density. The firm that invented the partner track in 1875 and still designs like it.
+- **Wachtell Lipton** (wlrk.com) → partner-only headcount, single-page annual-report formality. Restraint as a brand position.
+- **Davis Polk** (davispolk.com) → Wall Street typesetting, slate-on-cream column rule. The closest thing law has to The Economist's reading rhythm.
+
+## Tokens
+HSL triples in `src/index.css`. The cream background (`38 28% 95%`) is structural — pure white reads tech-startup; cream paper carries the annual-report feel. Deep ink (`220 30% 14%`) replaces pure black.
+
+Brand tokens, all semantic:
+- `ink` — alias of `--foreground`. The deep ink for body and headings.
+- `paper` — alias of `--background`. The cream paper.
+- `navy-deep` — alias of `--primary`. Conservative bar-association navy; the single emphasis tone.
+- `navy-soft` — subheadings and deck text — one tier above body ink.
+- `bar-gold` — rare bar-admission/honors accent. Reserved for credential moments (Order of the Coif, Chambers ranking) — never routine.
+- `cream-deep` — alias of `--secondary`. Deeper cream for aside panels and roster stripes.
+
+Color rules:
+- **Pure white is forbidden.** `--foreground` is deep ink on cream paper; `--card` is the one place pure white appears, as a lift.
+- **Navy is the emphasis tone, not the volume tone.** A surface may have one navy CTA. Two is loud. Three is a marketing site.
+- **Bar-gold is credentialing only.** Use it for "Best Lawyers", "Chambers Band 1", "Order of the Coif" — never for buttons.
+
+## Typography
+- **Display:** EB Garamond (Cheltenham/Garamond stand-in). Weights 400/500/600/700. Used for firm name, practice headings, attorney names. Tracking `-0.012em` — serifs at display want tight, not crushed.
+- **Body:** Inter, **17px**, line-height 1.7. Weights 400/500/600. Bar-journal leading for long-form practice descriptions.
+- **Mono:** JetBrains Mono. Matter numbers, bar admissions (NY · 2008, DC · 2011), citation refs, dateline. Tabular figures non-negotiable for the roster.
+
+Font features: `"liga", "onum", "tnum", "ss01"`. Old-style figures inline (bar-admission years), tabular figures in rosters and deal records.
+
+H1 uses `clamp(2.25rem, 5vw, 3.75rem)` — restrained. White-shoe firms do not shout. The practice name labels the surface; the deal record and the bios do the work.
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-10` — wider than editorial. Holds a 6-column practice grid + a 4-column attorney roster in one composition without breaking rhythm.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24` — formal but not oversized.
+  - Default: `py-20 lg:py-28`
+  - Tight: `py-14 lg:py-20`
+- **Allowed scale:** 4 6 8 12 16 20 24 32 40 48 64 80 96. Medium density — firm sites pack practices and rosters but breathe between sections.
+
+## Color
+No hex anywhere. Pure white is forbidden. Pure black is forbidden. Navy is the single emphasis tone. Bar-gold is credentialing only.
+
+## Radius
+`--radius: 0.125rem` (2px). **Formal print-document feel.** Pills are **disallowed** — they read marketing-startup. Status indicators (Partner, Counsel, Of Counsel) use sharp rect badges with mono small-caps text.
+
+## Shadows
+**Minimal.** Two utilities:
+- `.hairline-bottom` — single-pixel column-divider rule. The default depth language.
+- `.card-formal` — very subtle card lift (two soft drops at 4% opacity). For the biographical tile and the news+insights item only.
+
+No glows, no decorative drops. Depth is borders and cream tiers — not blur.
+
+## Motion
+Very limited. White-shoe firms do not perform.
+
+- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
+- **Duration:** reveal 600ms. No loop, no ambient.
+- **Keyframes:** single `fade-rise` (opacity + 12px translate). The only entrance — measured, formal, never bouncy.
+
+`prefers-reduced-motion` is honored.
+
+## Component patterns
+- **Buttons:** sparing. **Primary** = solid navy fill, cream text, 2px radius — single emphatic CTA per page (*Contact*, *Request Counsel*). **Secondary** = ghost (1px navy border, navy text). **Tertiary** = navy text-link, underline on hover. Sentence-case or formal title-case only.
+- **Cards:** white fill on cream bg, 2px radius, 1px hairline border, optional `.card-formal` shadow. Internal padding `p-6 lg:p-8`. Title in EB Garamond 600. Eyebrow in mono small-caps. Attorney roster cards omit shadow — flush on cream with hairline rule only.
+- **Inputs:** border-bottom only (1px `navy-soft`). No full box. Label above in Inter 500. Focus thickens border to 2px `navy-deep`.
+- **CTAs:** navy solid button for the single primary action per page. Voice is formal: *"Contact our M&A practice"*, *"Request the 2025 deal record"*. **Never** *"Get started"*, *"Try it free"*, or *"Sign up today"*.
+
+## Recommended rich media
+Law-firm sites use **editorial business portraiture** the way a bar journal does — sparingly, formally, always in service of the partner-track voice. Attorney biographies carry a formal headshot; practice pages carry one architectural environmental shot of the office tower or the courthouse.
+
+**Permitted:** formal attorney portraits (3:4 portrait crop, studio lighting, charcoal/navy suiting against soft cream backdrop, neutral expression — Annie Leibovitz at one stop down). Architectural shots of the firm's offices (16:9 landscape — One Manhattan West, Two World Financial Center, the Cravath building). Courthouse/Supreme Court establishing shots for litigation practices. Restrained line diagrams for transaction structures.
+
+**Forbidden:** lifestyle photography, conference-room handshakes (cliché stock), team-jumping shots, AI-rendered abstracts, isometric illustrations, 3D renders, animated GIFs, autoplay video.
+
+**AI tools:** Midjourney/Flux with prompts like *"formal attorney portrait, studio lighting, cream backdrop, charcoal suit, restrained expression, 85mm, Annie Leibovitz business-portrait at one stop down"*. Explicitly prompt away from the consultant-headshot grin.
+
+**Aspect ratios:** 3:4 for portraits, 16:9 for architecture. Never 1:1 (consumer-social), never 9:16 (social-video).
+
+**Performance:** hero ≤180 KB AVIF at 1600w; portraits ≤90 KB at 800w. LCP under 2s.
+
+## Component families
+None at install time. Anticipated families:
+- **PartnerRosterCard** — formal portrait + name in EB Garamond + practice + mono bar-admission line.
+- **PracticeTile** — EB Garamond practice name, mono small-caps eyebrow, body description, navy chevron link.
+- **InsightItem** — dated row with mono dateline, EB Garamond title, mono attorney byline.
+- **DealRecordRow** — matter, role, value, date — mono tabular, hairline-divided.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.20)` background, foreground text — pale navy highlight.
+- **Focus ring:** `2px solid hsl(var(--ring))` — formal and unmissable.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. The "Best Lawyers" honors badge is the one place `bar-gold` lands as a fill — record here when introduced.
+
+## Revisions
+- Initial direction, authored at install time. Pairs with `editorial` (shared serif gravitas vocabulary) and `banking-gravity` (shared partner-track formality, alternate accent). The distinct slot: white-shoe partner-track law where editorial is magazine-prose-first and banking-gravity is capital-markets-dark.

package/themes/law-firm/tokens.ts

@@ -0,0 +1,158 @@
+import type { Direction } from "../schema";
+
+// law-firm — Skadden / Latham / Cravath / Wachtell / Davis Polk.
+// White-shoe partner-track gravity. Cream paper, formal serif headings,
+// conservative navy accent. Annual-report-of-a-150-year-firm energy.
+
+export const lawFirm: Direction = {
+  name: "law-firm" as Direction["name"],
+  ethos:
+    "Skadden white-shoe formality · Latham partner-track gravity · Cravath one-tier promotion restraint · Wachtell deal-list density · Davis Polk Wall Street typesetting",
+  references: [
+    { brand: "Skadden Arps", trait: "cream paper, navy serif, attorney-roster gravity" },
+    { brand: "Latham & Watkins", trait: "global-practice grid, formal Cheltenham-feel headings" },
+    { brand: "Cravath Swaine & Moore", trait: "150-year typographic restraint, deal-record density" },
+    { brand: "Wachtell Lipton", trait: "partner-only headcount, single-page annual-report formality" },
+    { brand: "Davis Polk", trait: "Wall Street typesetting, slate-on-cream column rule" },
+  ],
+  feel:
+    "Annual-report formality at screen scale. Cream paper, deep ink, formal serif " +
+    "display (Cheltenham-feel) over clean sans body. A conservative navy is the " +
+    "single accent — used for the bar admission, the practice tag, the rule. The " +
+    "page reads 'we have argued before the Court since 1898.' Never trendy, never " +
+    "marketing-loud, never lifestyle. Print-document discipline is the design.",
+
+  fonts: {
+    display: {
+      family: "EB Garamond",
+      fallback: ["Cheltenham", "Garamond", "Iowan Old Style", "Georgia", "serif"],
+      from: "Cheltenham/Garamond stand-in — white-shoe serif tradition, attorney-roster gravity",
+      googleFont: "EB+Garamond",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["Söhne", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "clean sans body for biography paragraphs, practice descriptions, news rows",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "matter numbers, bar admissions, citation refs, dateline — instrument-feel for small text",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.012em",        // serifs at display want tight, not crushed
+    bodyTracking: "0",
+    fontFeatureSettings: '"liga", "onum", "tnum", "ss01"',  // old-style figures inline, tabular in rosters
+    h1ScaleClamp: "clamp(2.25rem, 5vw, 3.75rem)",  // restrained — white-shoe firms don't shout
+    bodyBaseSize: "1.0625rem",          // 17px — long-form practice descriptions are the load
+    bodyLineHeight: "1.7",              // generous column — bar-journal leading
+  },
+
+  colors: {
+    background: { hsl: "38 28% 95%", from: "Skadden cream paper — annual-report stock, never pure white" },
+    foreground: { hsl: "220 30% 14%", from: "deep ink — Davis Polk text on cream, never pure black" },
+    card: { hsl: "0 0% 100%", from: "pure white card — biographical tile, lifts off cream" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "218 60% 22%", from: "Cravath conservative navy — bar-association accent, the single emphasis tone" },
+    primaryForeground: { hsl: "38 28% 95%", from: "cream paper on navy" },
+    secondary: { hsl: "38 20% 90%", from: "deeper cream — sidebar panels, attorney-row stripe" },
+    secondaryForeground: { hsl: "220 30% 14%", from: "ink on cream panel" },
+    muted: { hsl: "38 20% 90%", from: "same as secondary — differentiation by usage, not color" },
+    mutedForeground: { hsl: "220 14% 40%", from: "slate ink — dateline, jurisdiction, citation footer" },
+    accent: { hsl: "38 18% 88%", from: "hover surface — one cream tier deeper" },
+    accentForeground: { hsl: "220 30% 14%", from: "ink on hover" },
+    border: { hsl: "38 14% 82%", from: "warm hairline rule — Wachtell column divider, barely visible on cream" },
+    input: { hsl: "38 14% 82%", from: "same as border" },
+    ring: { hsl: "218 60% 22%", from: "navy focus ring — formal and unmissable for accessibility" },
+    destructive: { hsl: "0 60% 36%", from: "formal alert red — deep, restrained, never the consumer brake-light red" },
+    destructiveForeground: { hsl: "38 28% 95%", from: "cream on alert" },
+    brand: {
+      ink: { hsl: "220 30% 14%", from: "= foreground; deep ink for body and headings" },
+      paper: { hsl: "38 28% 95%", from: "= background; cream paper" },
+      "navy-deep": { hsl: "218 60% 22%", from: "= primary; conservative bar-association navy" },
+      "navy-soft": { hsl: "218 40% 32%", from: "subheadings, deck text — one tier above body ink" },
+      "bar-gold": { hsl: "42 60% 42%", from: "rare bar-admission/honors accent — reserved for credential moments only" },
+      "cream-deep": { hsl: "38 20% 90%", from: "= secondary; deeper cream for aside panels" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],   // generous — annual-report rhythm
+    containerMax: "max-w-5xl",         // wider than editorial — practice grid + roster fit together
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-32 lg:pb-24",
+      default: "py-20 lg:py-28",
+      tight: "py-14 lg:py-20",
+    },
+  },
+
+  radius: {
+    base: "0.125rem",                  // 2px — formal print-document feel, never soft
+    pillsAllowed: false,               // pills read marketing-startup, not white-shoe; use rect badges
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-bottom":
+        "0 1px 0 0 hsl(var(--border))",                              // column-divider rule
+      "card-formal":
+        "0 1px 2px 0 hsl(220 30% 14% / 0.04), 0 2px 6px 0 hsl(220 30% 14% / 0.04)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 600,                     // measured — partner-track sites do not perform
+      loop: 0,                         // no loops on a firm site
+      ambient: 0,                      // no ambient
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "the only entrance — measured, formal, never bouncy",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid navy fill, cream text, 2px radius — single emphatic CTA per page (Contact, Request Counsel). " +
+      "Secondary = ghost (1px navy border, navy text). Tertiary = navy text-link, underline on hover. " +
+      "No shadow on buttons, no gradient, no pill. Sentence-case or formal title-case only.",
+    card:
+      "White fill on cream bg, 2px radius, 1px hairline border, optional .card-formal shadow. " +
+      "Internal padding p-6 lg:p-8. Title in EB Garamond 600. Eyebrow in mono small-caps mutedForeground. " +
+      "Attorney roster cards omit shadow — they sit flush on cream with hairline rule only.",
+    input:
+      "Border-bottom only (1px navy-soft). No full box. Label above in Inter 500. Focus thickens border to 2px navy-deep. " +
+      "Placeholder italic in mutedForeground. Form chrome is rare on firm sites; this language matches the rare contact form.",
+    cta:
+      "Navy solid button for the single primary action per page. Inline contact-the-firm links are navy text with permanent underline. " +
+      "Voice is formal: 'Contact our M&A practice', 'Request the 2025 deal record'. Never 'Get started', never 'Try it free'.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.20)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/lawtech-modern/THEME.md

@@ -0,0 +1,107 @@
+# Design Direction — Lawtech-Modern
+
+## Ethos
+Clio matter-management warmth · MyCase friendly dashboard · Smokeball pragmatic UI · Filevine fielded-data clarity · PracticePanther solo-practitioner approachability
+
+## 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.
+
+A lawtech-modern surface that feels formal-serif, white-shoe, or capital-markets-cold is off-direction. This is the SaaS the firm uses; not the firm itself.
+
+## Reference brands
+- **Clio** (clio.com) → cream + sage, friendly Inter, matter-list density without coldness. The category leader's visual benchmark.
+- **MyCase** (mycase.com) → dashboard warmth, sage CTAs, plain-English voice. Solo and small-firm focus.
+- **Smokeball** (smokeball.com) → pragmatic UI, sage activity-feed, friendly badges. Practice-management without the enterprise crust.
+- **Filevine** (filevine.com) → fielded-data clarity, dense forms with breathing room. The litigation-management flank.
+- **PracticePanther** (practicepanther.com) → solo + small-firm approachability, gentle sage primary.
+
+## Tokens
+HSL triples in `src/index.css`. The cream background (`40 32% 97%`) is the brand-warmth signal — pure dashboard white reads enterprise-cold; spa cream reads wellness. Lawtech cream is the middle position.
+
+Brand tokens, all semantic:
+- `sage` — alias of `--primary`. The Clio/MyCase friendly primary; never enterprise navy.
+- `sage-soft` — sage tint for status pills, hover surfaces.
+- `sage-deep` — sage hover-darken, active state.
+- `cream` / `cream-deep` — aliases of `--background` / `--secondary`. The Clio surface stack.
+- `amber` — deadline-approaching, pending-review. The attention tone, never alarm.
+- `navy` — secondary info accent for client-portal links, court-filing badges. Never primary.
+
+Color rules:
+- **Sage is the brand voice.** Two sage accents per surface is fine; this is a tool, not a magazine.
+- **Navy is secondary information only.** Court-filing badges, client-portal labels. Never the primary CTA — that's sage's job.
+- **Amber is attention, red is overdue.** Pending review = amber chip. Past-due invoice or missed deadline = red. The distinction is non-negotiable.
+
+## Typography
+- **Display:** Inter at weights 500/600/700. No serif. Lawtech sites read as software; serifs would break the dashboard register.
+- **Body:** Inter, **15px**, line-height 1.55. Dashboard density.
+- **Mono:** IBM Plex Mono. Matter IDs (24-0182-CV), billable codes, court-deadline counters, invoice amounts. Tabular figures non-negotiable for the billable-hours tracker.
+
+Font features: `"cv11", "ss01", "tnum", "calt"`.
+
+H1 uses `clamp(2rem, 4.5vw, 3.25rem)` — tool-first, never marketing-shouty.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-6` — wide, dashboard runs edge-to-edge.
+- **Section padding tiers:**
+  - Hero: `pt-16 pb-12 lg:pt-24 lg:pb-16`
+  - Default: `py-12 lg:py-20`
+  - Tight: `py-8 lg:py-12`
+- **Allowed scale:** 2 4 6 8 10 12 14 16 20 24 32 40 48 64 80. Dense — dashboards use micro-steps.
+
+## Color
+No hex anywhere. Sage is brand; navy is info; amber is attention; red is overdue. Pure dashboard-white shows up only as the card fill — backgrounds are always cream.
+
+## Radius
+`--radius: 0.625rem` (10px). Softer than enterprise-tech, less pillowy than DTC consumer. **Pills allowed** — matter-status, billable-tag, deadline-state pills are core to the language.
+
+## Shadows
+**Soft.** Four utilities:
+- `.shadow-panel` — standard dashboard card.
+- `.shadow-panel-lg` — hover lift.
+- `.shadow-popover` — dropdowns, modals.
+- `.shadow-inset-soft` — top-edge highlight on the white card sitting on cream.
+
+## Motion
+Dashboard-responsive, not marketing-slow.
+- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
+- **Durations:** reveal 350ms, loop 1800ms.
+- **Keyframes:** `fade-rise` (panel entrance), `scale-in` (modals), `soft-pulse` (live timer / deadline-approaching dot), `shimmer` (loading skeleton).
+
+`prefers-reduced-motion` honored.
+
+## Component patterns
+- **Buttons:** primary = solid sage fill, white text, `rounded-lg`, `shadow-panel`. Secondary = white fill with 1px warm border. Tertiary = sage text-link. Destructive = red ghost, upgrades to solid only on confirm.
+- **Cards:** `rounded-lg`, white fill on cream, 1px warm border, `shadow-panel`. Internal padding `p-5 lg:p-6`. Dashboard tile may use 4px top-border in the brand color matching the data tier.
+- **Inputs:** `rounded-md`, 1px warm border, white bg, compact (`h-9`). Label above in Inter 500. Focus = 2px sage ring at 40% opacity.
+- **CTAs:** sage solid is the dashboard default. Marketing pairs primary + navy ghost. Voice: *"Start your free trial"*, *"Import your matters"*, *"Talk to a specialist"*. Friendly-professional — never marketing-loud, never white-shoe formal.
+
+## Recommended rich media
+Lawtech-modern uses **product screenshots and friendly attorney portraits** the way SaaS marketing does — the screen is the hero, the human is the supporting cast.
+
+**Permitted:** product screenshots (matter dashboard, billable-hours tracker, document automation flow) — the hero of every marketing page. Attorney portraits, but friendly-warm (not white-shoe formal) — casual blazer, natural light, smiling-but-not-grinning. Spot illustrations in sage line-work for empty-states and onboarding. Customer-logo strips for the "trusted by 150,000 firms" social-proof row.
+
+**Forbidden:** white-shoe formal portraits (that's the firm's brand, not the tool's); courthouse architecture (that's law-firm direction); AI-rendered abstract gradients; isometric office scenes (overused SaaS cliché in 2023, dated in 2026).
+
+**AI tools:** Midjourney/Flux for the friendly attorney portraits. Spot illustrations: Recraft or hand-drawn in Figma. Product screenshots: real Loom-grade UI captures, not Figma mockups masquerading as screenshots.
+
+**Aspect ratios:** 16:9 for product screenshots, 4:5 for portraits, 1:1 for spot illustrations.
+
+**Performance:** product screenshot ≤200 KB AVIF at 1600w; portraits ≤80 KB at 600w. LCP under 2s.
+
+## Component families
+None at install time. Anticipated families:
+- **MatterRow** — matter number (mono), name (Inter 500), status pill (sage/amber/red), assigned attorney, last activity.
+- **BillableTrackerBar** — weekday letter, mono hours, sage bar fill against muted track.
+- **DeadlineCard** — sage top-border, court name (Inter 600), filing-due-in counter (mono amber when ≤72h).
+- **DocumentAutomationStrip** — three-step horizontal flow with arrows, sage active step.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` — pale sage highlight.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — soft sage.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, authored at install time. Pairs distinctly with `law-firm` — same industry, opposite voice. Law-firm is the white-shoe partnership; lawtech-modern is the SaaS the partnership runs.