@stylecrib/cli 0.3.1 → 0.3.3

package/themes/enterprise-tech/theme.yml

@@ -0,0 +1,202 @@
+# Enterprise Tech — Family D, Contemporary Web (brutalist-institutional subregion).
+#
+# Palantir-anchored institutional-brutalist dark register. Deep charcoal
+# canvas at #0f0f11 (warmer than pure black) + near-white ink (#f2f2f0)
+# + ONE electric-cyan accent (#00c8ff) used sparingly for hover states,
+# active-node highlights, live-data readouts, and compliance-badge
+# borders. Sharp corners everywhere (0px radius). Söhne / Aktiv Grotesk
+# medium-weight sans (weight 500) — deliberately NOT thin, unlike the
+# hypercar theme. JetBrains Mono for query counters, dossier metadata,
+# and data-flow labels.
+#
+# Influence anchor: Palantir Technologies at its most institutional.
+# Placeholder brand: "BASTION" — a fictional defense/finance/institutional
+# data platform. Original name, original copy, no reproductions.
+#
+# Distinct from other dark themes:
+#   - Vault Reel is extreme black cinema-archive with burning-red accent
+#   - Performance Engineered is near-black hypercar with THIN monumental
+#     display and molten-amber accent
+#   - Signal Dark (the site itself) is dark canvas with green terminal
+#     accent and dashboard/tool register
+# Enterprise Tech fills the INSTITUTIONAL-BRUTALIST DATA-PLATFORM slot —
+# medium-weight display + electric cyan + numbered dossier structure +
+# network graph diagrams.
+#
+# Nineteenth theme via the v2 harness. First Family D institutional-
+# brutalist base. Upgrade of the existing v1 archetype-fallback slug.
+
+name: Enterprise Tech
+concept: Institutional-brutalist data-platform register — deep charcoal canvas at #0f0f11 with near-white ink and ONE electric-cyan accent used sparingly for hover states, active-node highlights, live-data readouts, and compliance-badge borders. Medium-weight Söhne-family sans (never thin) paired with JetBrains Mono for data readouts. Numbered dossier structure (I-01 through I-06 for capabilities), network graph SVG diagrams with animated node pulses, live queries counter, data-flow diagrams with animated dots along paths, and compliance-certification grids. Reads like a Palantir capabilities briefing — institutional, dossier-precise, defense/finance/government-adjacent.
+influence: |
+  Modern institutional data-platform brand identity systems (Palantir
+  Technologies at its most brutalist-serious, Databricks at its most
+  dressy, Recursion at its most technical). Distinct from consumer-
+  tech surfaces through the MEDIUM-WEIGHT DISPLAY (not thin, not bold)
+  + NUMBERED DOSSIER STRUCTURE + NETWORK GRAPH DIAGRAM + INSTITUTIONAL
+  LANGUAGE trio — which reads as defense-and-finance rather than
+  startup-and-SaaS.
+
+family: D
+base_number: 36
+base_note: |
+  Family D Contemporary Web, INSTITUTIONAL-BRUTALIST DATA-PLATFORM
+  slot. Distinct from other Family D bases through the MEDIUM-WEIGHT
+  DISPLAY + NUMBERED DOSSIER STRUCTURE + NETWORK GRAPH DIAGRAM
+  signature. Signal Dark is dashboard/tool with green terminal
+  accent; Arc Stack is protocol infrastructure with saturated
+  signal-glow hero; Kinetic Headline is kinetic-marketing display;
+  Bento Modular is grid-driven dashboard. Enterprise Tech fills the
+  serious-institutional-data-platform slot. Upgrade of the existing
+  v1 enterprise-tech slug from archetype-fallback.
+
+render_url: http://localhost:5173/themes/enterprise-tech
+
+surface: web
+
+typography:
+  display: A precision geometric sans at MEDIUM weight (500) — the reference uses Söhne / Aktiv Grotesk / Neue Haas Grotesk at medium. Free fallback stack — "Söhne", "Neue Haas Grotesk Display", "Inter Display", Inter, "Space Grotesk", system-ui, sans-serif. Weight 500 for hero and section headings (deliberately NOT thin — that's the hypercar register, not institutional-brutalist), weight 400 for body. Mixed case, letter-spacing -0.01em. Top of scale ~88px hero, 48px section headings, 24px h3. UPPERCASE ONLY for the wordmark and section markers (I-01 / I-02 style).
+  body: Söhne Text / Inter Tight. Free fallback stack — "Inter Tight", Inter, "Space Grotesk", system-ui, sans-serif. Weight 400 for body copy, 500 for small labels. 15-16px body copy, line-height 1.6.
+  mono: JetBrains Mono / Berkeley Mono for data readouts, dossier metadata, diagram labels, network graph annotations, compliance certification IDs. Weight 400-500, 12-14px. LEGITIMATE here because the register is technical dossier — mono reads as data readout / instrument-panel, not decorative slop.
+  scale: 1.333 (perfect fourth — comfortable for long-form dossier reading with clear hierarchy)
+  eyebrow_exception: |
+    Enterprise Tech LEGITIMATELY uses two small-caps use sites — DOSSIER SECTION MARKERS (I-01 / I-02 / I-03) and COMPLIANCE CERTIFICATIONS (SOC 2 / ISO 27001 / FEDRAMP HIGH / HIPAA). This is a THEME-SPECIFIC EXCEPTION — the reference institutional dossier register uses these EXACTLY, as dossier index markers and compliance-certification identifiers, not decorative eyebrow slop.
+
+palette:
+  bg: "#0f0f11"           # canvas — deep charcoal, warmer than pure black
+  surface: "#1a1a1c"      # slightly-lifted panel for section bands
+  ink: "#f2f2f0"          # near-white with slight warmth
+  accent: "#00c8ff"       # electric cyan — the ONE accent
+  cream: "#f2f2f0"        # alias for ink
+  darkInk: "#050506"      # deepest charcoal for masthead + footer
+  mute: "#6a6a70"         # dimmed near-white for captions, metadata
+
+density: dense
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Hero display reveal — headline fades in from opacity 0 + translateY(20px) over 800ms cubic-bezier(0.23,1,0.32,1) on first paint. Body copy follows with 200ms delay.
+  2. Network graph node pulses — 6 nodes in the hero-right network graph SVG scale from 1 → 1.15 → 1 in a staggered loop (each node offset by 400ms, 2000ms per pulse cycle). Simulates a live-monitored graph.
+  3. Live queries counter — displays a mock "queries processed today" number that increments every 2 seconds via a mock event stream (starts at 4,127,483 and increments by 1,000-5,000 per tick — reads as a live data-platform readout).
+  4. Numbered dossier capability reveal — the 6 numbered capabilities fade in with 120ms per-row stagger + 500ms cubic-bezier on IntersectionObserver at 25% threshold.
+  5. Data-flow diagram dots — three dots travel along SVG paths from source to sink at 3-second cycles (spaced 1s apart). Simulates data streaming through the platform.
+  6. Compliance badge reveal — grid of 8 certification badges fade in with 80ms stagger on scroll into view.
+  7. Case-study card reveal — 3 case study cards stagger reveal with 160ms per-card delay.
+  8. Section reveals — each below-fold section fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier at 25% threshold.
+  9. Nav shrink on scroll after 200px.
+  10. prefers-reduced-motion: reduce — all reveals disabled; queries counter shows final; network graph pulses paused; dots hidden; state changes still fire.
+
+  Motion character: institutional, dossier-precise, monitored. Custom cubic-bezier(0.23,1,0.32,1) for reveals. Never marketing-loud, never startup-hype — reads as a live security-operations-center readout, not a product-launch page.
+
+signature: |
+  Deep charcoal canvas at #0f0f11 — the register's non-negotiable base
+  (deliberately warmer than pure black, matching Palantir's actual
+  brand render). Near-white ink #f2f2f0 with ONE electric-cyan accent
+  #00c8ff used ONLY for hover states, active graph-node highlights,
+  live-data readouts, compliance-badge borders, and CTA fills. Sharp
+  corners everywhere.
+
+  MASTHEAD — a "BASTION" wordmark in Söhne 500 medium at 18px with
+  letter-spacing 0.14em (deliberately institutional-medium, not thin
+  hypercar-restraint) on the left, a horizontal nav (Platform /
+  Capabilities / Sectors / Compliance / Company / Contact) center,
+  a filled electric-cyan "Request a briefing" block button right-
+  aligned. Masthead shrinks after 200px scroll.
+
+  HERO — two-column split. LEFT column: small cyan caps
+  DOSSIER · 2026-Q1 label + big medium-weight display headline
+  ("Data operations for the institutional stakeholder.") + a two-
+  paragraph body-copy block about the platform's mission +
+  cyan "Read the capabilities dossier →" text link. RIGHT column: a
+  BESPOKE NETWORK GRAPH SVG (6 nodes connected by edges, one node
+  highlighted cyan as "active", subtle pulse animation on each node
+  offset by 400ms, mono metadata labels below identifying each node
+  type — Data / Model / Query / Egress).
+
+  LIVE-OPS READOUT BAR — a slim inverted band below the hero showing
+  three live-updating counters in mono: "QUERIES PROCESSED TODAY"
+  (increments every 2s from 4,127,483 + random 1-5k per tick),
+  "ACTIVE DEPLOYMENTS" (static 217), "REGIONS ONLINE" (static 14 /
+  14 with cyan dot). Reads as a live SOC (security operations
+  center) readout.
+
+  NUMBERED CAPABILITIES DOSSIER — 6 rows with cyan I-01 / I-02 /
+  I-03 / I-04 / I-05 / I-06 numbering, each row has a small icon SVG
+  (data-pipe / model-node / query-cursor / audit-trail / access-key
+  / regional-topology) + heading + body-copy block. Rows stagger
+  reveal on scroll (120ms per row). Hover state: cyan left border
+  slides in from top.
+
+  DATA-FLOW DIAGRAM — a full-width band showing "How it works" as an
+  SVG data-flow diagram with 5 stages (Ingest → Transform → Model
+  → Query → Egress) connected by paths, with 3 cyan dots animating
+  along the paths at 3s cycles (1s apart) to simulate streaming
+  data. Mono labels beneath each stage.
+
+  CASE STUDIES — 3 case study cards in a row: Defense / Finance /
+  Health. Each card has a sector caps label, monumental case-study
+  title, mono metric callout (e.g. "94% reduction in triage time"),
+  and a body-copy paragraph. Cards stagger reveal at 160ms per card.
+
+  COMPLIANCE + CERTIFICATIONS — a grid of 8 compliance badges (SOC 2
+  Type II / ISO 27001 / FedRAMP High / HIPAA / GDPR / PCI DSS /
+  CJIS / IL5) in a dark card grid with cyan borders on hover.
+
+  BRIEFING CTA — a full-width dark band with a terminal-style
+  contact form (single input field styled as a mono prompt with
+  ">> " prefix and cyan cursor). Filled cyan "Submit briefing
+  request" button.
+
+  FOOTER — deep-charcoal inverted band with medium-weight BASTION
+  wordmark at ~120px, a 4-column utility grid, address plate
+  ("Palo Alto · Washington DC · London · Zagreb"), and legal
+  compliance metadata (registered agent, entity address, SEC-
+  registered subsidiary info).
+
+  Six bespoke SVG marks (network graph, data-pipe icon, model-node
+  icon, audit-trail icon, compliance shield, data-flow arrow) drop
+  as PUNCTUATION at specific compositional moments, never as a
+  uniform icon row.
+
+imagery: |
+  BESPOKE SVG diagrams — the reference uses network graphs, data-flow
+  block diagrams, capability icons, and compliance shields. FPO
+  imagery here should read as institutional dossier diagrams (network
+  topology, data-flow blocks, capability iconography). NO stock
+  "team meeting" photography (that's the AI-tell for corporate
+  enterprise slop). NO 3D-rendered abstract "cloud" imagery. NO
+  radial-gradient placeholder fills. NO emoji shields (only bespoke
+  SVG compliance badges with real certification identifiers).
+
+best_for:
+  - Institutional data platforms (government contractors, defense, finance-tier data infrastructure)
+  - Serious enterprise SaaS (security operations, compliance-heavy verticals)
+  - Government-adjacent technology (public-sector deployments, regulated industries)
+  - Defense and intelligence-adjacent brands (background-check platforms, secure comms)
+  - Finance-tier data platforms (bank-facing analytics, regulatory reporting)
+  - Health-tier compliance data (HIPAA-regulated analytics, clinical data platforms)
+
+avoid:
+  - "Light canvas — Enterprise Tech's canvas is DEEP CHARCOAL #0f0f11. Light canvas inverts the institutional-brutalist register into a modern-SaaS register (which is a different theme)."
+  - "Thin display sans (weight 200-300) — the Söhne medium at 500 is the register's fingerprint. Thin display collapses into the hypercar restraint register (Performance Engineered), which is a different theme."
+  - "Bold display sans (weight 800-900) — bold display collapses into modern-marketing hero mode. The register requires MEDIUM (500) weight — precise, institutional, not attention-seeking."
+  - "Multi-color accent palette — the whole discipline is ONE electric-cyan accent doing everything (hover, active nodes, live data, compliance borders, CTA fills). Introducing red / green / any second accent collapses the discipline into candy-tech slop."
+  - "Rounded corners on cards, buttons, badges, or diagram nodes — 0px radius everywhere. The register requires sharp instrument-panel precision."
+  - "Stock team-meeting or diverse-workplace photography — imagery MUST feel like institutional dossier diagrams (bespoke SVG). Stock team photography is the AI-tell for corporate enterprise slop."
+  - "3D-rendered cloud abstractions — visuals must be flat SVG diagrams (network graphs, data-flow blocks, capability icons). 3D cloud abstractions read as consumer-cloud SaaS, not institutional-data-platform."
+  - "Emoji or unicode marks — bespoke SVG only for icons and shields."
+  - "Marketing-loud copy language ('game-changing', 'revolutionary', 'unlock your potential') — the register requires INSTITUTIONAL, DOSSIER-PRECISE language. Marketing-loud copy collapses into startup slop."
+  - "Cycling headline words or auto-advancing sliders — the register requires STATIC, MONITORED motion. Network node pulses and data-flow dots are legitimate (institutional-monitoring register); auto-advancing cycling is not."
+
+banned_defaults:
+  - "claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is dark."
+  - "void+acid (near-black bg + single bright acid-green or vermilion accent) — accent is ELECTRIC CYAN #00c8ff, not acid-green. Vermilion collapses into cyberpunk."
+  - "broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns)"
+  - "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)"
+  - "light-canvas-inversion (canvas is deep charcoal. Swapping to light collapses the institutional-brutalist register into a modern-SaaS register.)"
+  - "thin-hypercar-display (thin weight 200-300 is the hypercar restraint register — different theme. Enterprise Tech uses MEDIUM weight 500.)"
+  - "bold-marketing-display (bold weight 800-900 is marketing hero — different register. Enterprise Tech uses MEDIUM weight 500 — precise, institutional.)"
+  - "multi-accent-flood (ONE electric-cyan accent doing 100% of the punctuation. Introducing red / green / any second accent collapses the discipline.)"
+  - "stock-team-photography (imagery must be bespoke SVG dossier diagrams — network graphs, data-flow blocks. Stock team photography is the AI-tell.)"
+  - "3d-cloud-abstractions (visuals must be flat SVG diagrams. 3D cloud abstractions read as consumer-cloud SaaS, not institutional-data-platform.)"

package/themes/enterprise-tech/tokens.ts

@@ -0,0 +1,29 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "enterprise-tech",
+  family: "D",
+  base: "36",
+  palette: {
+    "bg": "#0f0f11",
+    "surface": "#1a1a1c",
+    "ink": "#f2f2f0",
+    "accent": "#00c8ff",
+    "cream": "#f2f2f0",
+    "darkInk": "#050506",
+    "mute": "#6a6a70"
+  },
+  typography: {
+    "display": "A precision geometric sans at MEDIUM weight (500) — the reference uses Söhne / Aktiv Grotesk / Neue Haas Grotesk at medium. Free fallback stack — \"Söhne\", \"Neue Haas Grotesk Display\", \"Inter Display\", Inter, \"Space Grotesk\", system-ui, sans-serif. Weight 500 for hero and section headings (deliberately NOT thin — that's the hypercar register, not institutional-brutalist), weight 400 for body. Mixed case, letter-spacing -0.01em. Top of scale ~88px hero, 48px section headings, 24px h3. UPPERCASE ONLY for the wordmark and section markers (I-01 / I-02 style).",
+    "body": "Söhne Text / Inter Tight. Free fallback stack — \"Inter Tight\", Inter, \"Space Grotesk\", system-ui, sans-serif. Weight 400 for body copy, 500 for small labels. 15-16px body copy, line-height 1.6.",
+    "mono": "JetBrains Mono / Berkeley Mono for data readouts, dossier metadata, diagram labels, network graph annotations, compliance certification IDs. Weight 400-500, 12-14px. LEGITIMATE here because the register is technical dossier — mono reads as data readout / instrument-panel, not decorative slop.",
+    "scale": "1.333 (perfect fourth — comfortable for long-form dossier reading with clear hierarchy)",
+    "eyebrow_exception": "Enterprise Tech LEGITIMATELY uses two small-caps use sites — DOSSIER SECTION MARKERS (I-01 / I-02 / I-03) and COMPLIANCE CERTIFICATIONS (SOC 2 / ISO 27001 / FEDRAMP HIGH / HIPAA). This is a THEME-SPECIFIC EXCEPTION — the reference institutional dossier register uses these EXACTLY, as dossier index markers and compliance-certification identifiers, not decorative eyebrow slop.\n"
+  },
+  surface: "web",
+  density: "dense",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Hero display reveal — headline fades in from opacity 0 + translateY(20px) over 800ms cubic-bezier(0.23,1,0.32,1) on first paint. Body copy follows with 200ms delay.\n2. Network graph node pulses — 6 nodes in the hero-right network graph SVG scale from 1 → 1.15 → 1 in a staggered loop (each node offset by 400ms, 2000ms per pulse cycle). Simulates a live-monitored graph.\n3. Live queries counter — displays a mock \"queries processed today\" number that increments every 2 seconds via a mock event stream (starts at 4,127,483 and increments by 1,000-5,000 per tick — reads as a live data-platform readout).\n4. Numbered dossier capability reveal — the 6 numbered capabilities fade in with 120ms per-row stagger + 500ms cubic-bezier on IntersectionObserver at 25% threshold.\n5. Data-flow diagram dots — three dots travel along SVG paths from source to sink at 3-second cycles (spaced 1s apart). Simulates data streaming through the platform.\n6. Compliance badge reveal — grid of 8 certification badges fade in with 80ms stagger on scroll into view.\n7. Case-study card reveal — 3 case study cards stagger reveal with 160ms per-card delay.\n8. Section reveals — each below-fold section fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier at 25% threshold.\n9. Nav shrink on scroll after 200px.\n10. prefers-reduced-motion: reduce — all reveals disabled; queries counter shows final; network graph pulses paused; dots hidden; state changes still fire.\n\nMotion character: institutional, dossier-precise, monitored. Custom cubic-bezier(0.23,1,0.32,1) for reveals. Never marketing-loud, never startup-hype — reads as a live security-operations-center readout, not a product-launch page.\n",
+  signature: "Deep charcoal canvas at #0f0f11 — the register's non-negotiable base\n(deliberately warmer than pure black, matching Palantir's actual\nbrand render). Near-white ink #f2f2f0 with ONE electric-cyan accent\n#00c8ff used ONLY for hover states, active graph-node highlights,\nlive-data readouts, compliance-badge borders, and CTA fills. Sharp\ncorners everywhere.\n\nMASTHEAD — a \"BASTION\" wordmark in Söhne 500 medium at 18px with\nletter-spacing 0.14em (deliberately institutional-medium, not thin\nhypercar-restraint) on the left, a horizontal nav (Platform /\nCapabilities / Sectors / Compliance / Company / Contact) center,\na filled electric-cyan \"Request a briefing\" block button right-\naligned. Masthead shrinks after 200px scroll.\n\nHERO — two-column split. LEFT column: small cyan caps\nDOSSIER · 2026-Q1 label + big medium-weight display headline\n(\"Data operations for the institutional stakeholder.\") + a two-\nparagraph body-copy block about the platform's mission +\ncyan \"Read the capabilities dossier →\" text link. RIGHT column: a\nBESPOKE NETWORK GRAPH SVG (6 nodes connected by edges, one node\nhighlighted cyan as \"active\", subtle pulse animation on each node\noffset by 400ms, mono metadata labels below identifying each node\ntype — Data / Model / Query / Egress).\n\nLIVE-OPS READOUT BAR — a slim inverted band below the hero showing\nthree live-updating counters in mono: \"QUERIES PROCESSED TODAY\"\n(increments every 2s from 4,127,483 + random 1-5k per tick),\n\"ACTIVE DEPLOYMENTS\" (static 217), \"REGIONS ONLINE\" (static 14 /\n14 with cyan dot). Reads as a live SOC (security operations\ncenter) readout.\n\nNUMBERED CAPABILITIES DOSSIER — 6 rows with cyan I-01 / I-02 /\nI-03 / I-04 / I-05 / I-06 numbering, each row has a small icon SVG\n(data-pipe / model-node / query-cursor / audit-trail / access-key\n/ regional-topology) + heading + body-copy block. Rows stagger\nreveal on scroll (120ms per row). Hover state: cyan left border\nslides in from top.\n\nDATA-FLOW DIAGRAM — a full-width band showing \"How it works\" as an\nSVG data-flow diagram with 5 stages (Ingest → Transform → Model\n→ Query → Egress) connected by paths, with 3 cyan dots animating\nalong the paths at 3s cycles (1s apart) to simulate streaming\ndata. Mono labels beneath each stage.\n\nCASE STUDIES — 3 case study cards in a row: Defense / Finance /\nHealth. Each card has a sector caps label, monumental case-study\ntitle, mono metric callout (e.g. \"94% reduction in triage time\"),\nand a body-copy paragraph. Cards stagger reveal at 160ms per card.\n\nCOMPLIANCE + CERTIFICATIONS — a grid of 8 compliance badges (SOC 2\nType II / ISO 27001 / FedRAMP High / HIPAA / GDPR / PCI DSS /\nCJIS / IL5) in a dark card grid with cyan borders on hover.\n\nBRIEFING CTA — a full-width dark band with a terminal-style\ncontact form (single input field styled as a mono prompt with\n\">> \" prefix and cyan cursor). Filled cyan \"Submit briefing\nrequest\" button.\n\nFOOTER — deep-charcoal inverted band with medium-weight BASTION\nwordmark at ~120px, a 4-column utility grid, address plate\n(\"Palo Alto · Washington DC · London · Zagreb\"), and legal\ncompliance metadata (registered agent, entity address, SEC-\nregistered subsidiary info).\n\nSix bespoke SVG marks (network graph, data-pipe icon, model-node\nicon, audit-trail icon, compliance shield, data-flow arrow) drop\nas PUNCTUATION at specific compositional moments, never as a\nuniform icon row.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/ev-charging/THEME.md

@@ -0,0 +1,94 @@
+# Design Direction — EV-Charging
+
+## Ethos
+ChargePoint cool-blue signal · EVgo magenta urgency-flash · Electrify America cobalt + neutral grid · Blink Charging bright-yellow availability · Wallbox restrained Spanish-design chrome
+
+## Feel
+A clean operator dashboard you'd use on the road. Cool brand-blue is the signal — it marks the station, the selected pin, the price column. A magenta urgency-flash appears only on DC-fast availability. Tabular numerics carry the kWh and price-per-kWh. Maps are first-class, never a marketing afterthought.
+
+## Reference brands
+- **ChargePoint** → cool-blue station-pin language. The network is one color and the pin is the network.
+- **EVgo** → magenta urgency flash. Only DC-fast availability gets to flash.
+- **Electrify America** → cobalt + neutral grid. 350kW deserves a louder accent than 150kW.
+- **Blink Charging** → bright-yellow semi-busy pin. Availability state is a color, always.
+- **Wallbox** → restrained Spanish-design chrome. Home-unit cards do not need to shout.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin.
+
+Surface stack is **cool near-white background** → `--card` (pure white, one degree above) → `--secondary` (cool gray for table headers and inset panels). The map basemap has its own pair — `--map-land` and `--map-water` — and those colors are off-limits to non-map UI.
+
+Brand tokens: `--signal-blue`, `--signal-blue-deep`, `--signal-blue-soft`, `--urgency-magenta`, `--availability-amber`, `--cobalt`, `--map-land`, `--map-water`. The urgency-magenta is semantic-only — it appears on DC-fast (150kW+) availability rows and station pins, nowhere else. Cobalt is reserved for 350kW ultra-fast badges. Availability-amber means "busy, queue forming."
+
+## Typography
+- **Display:** Manrope (ChargePoint / Wallbox display). h1–h4. Tracking `-0.022em`. Manrope's geometric clarity feels operator-grade.
+- **Body:** Inter regular/medium (Electrify America / Blink body). Body base **14.4px** with **line-height 1.5** — dashboard density.
+- **Mono:** JetBrains Mono. kWh, $/kWh, station-id codes, port numbers. Tabular numerics on by default.
+
+H1 uses `clamp(2rem, 4.5vw, 3.25rem)`. Restrained. The map is the hero, not the headline.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-6` — dashboard-wide, tight horizontal padding.
+- **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 16 20 24 32 40 48 64.
+
+## Color
+No hex anywhere in component files. All color via tokens.
+
+Cool blue is the single network accent. Urgency-magenta and cobalt are semantic-only. Availability pins are color-coded: green=open, amber=busy, magenta=DC-fast-open, gray=offline. The availability colors live on the map and on station-list rows — they are not free-for-use brand accents elsewhere.
+
+## Radius
+`--radius: 0.5rem` (8px). Sits between dashboard-sharp and home-unit-friendly. Pills allowed (`pillsAllowed: true`) for filter chips, DC-fast badges, and availability dots.
+
+## Shadows
+**Minimal.** Three utilities: `.shadow-card` (subtle 1px lift), `.shadow-popover` (6-18px for map-popups and dropdowns), `.shadow-pin-active` (4px signal-blue halo + drop shadow on the selected map pin). No glows on body cards.
+
+## Motion
+Four keyframes: `fade-in` (220ms, opacity only — table and card entrance), `pin-pulse` (1800ms infinite — active session pin halo), `dc-fast-flash` (1400ms infinite — magenta on DC-fast availability badges, never elsewhere), `charge-arc` (2400ms once — SVG arc fill when a session starts).
+
+`pin-pulse` and `dc-fast-flash` are continuous and must respect `prefers-reduced-motion` by going static at peak color, not by hiding entirely — availability state must still read.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`.
+
+## Density
+High. Station-list rows are 44px tall with 6 columns. The map pin is 12px. Filter chips are 28px. The kWh price column is 14px mono tabular. The user is comparison-shopping fast-charge stations while driving — every pixel earns its keep.
+
+## Component patterns
+- **Buttons:** solid signal-blue primary (rounded-md, shadow-card) for the single commit — `Start charging`, `Reserve`, `Pay`. 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`. Station card holds name, address, distance, port-count, $/kWh — modular, one purpose.
+- **Inputs:** full rounded-md box, 1px `--input` border, `bg-card`. Search has leading pin glyph in signal-blue. Focus = 2px signal-blue ring at 45% opacity. Filter chips are rounded pills, `--signal-blue-soft` when active.
+- **CTA:** primary signal-blue button. DC-fast badge uses urgency-magenta with `dc-fast-flash` keyframe — never on Level 2 / Level 1. Price columns right-aligned mono. Availability pin colors follow the legend above, strictly.
+
+## Recommended rich media
+EV-Charging leans on **map visualization** and **station-hardware photography** — the actual charger unit at the actual location, golden-hour-lit, never a stock EV concept render. Marketing surfaces show the operator app in browser-chrome mockups with real map tiles, not blurred placeholders.
+
+**Iconography:** 20px grid, 1.5px stroke, rounded line caps. Plug types (CCS, CHAdeMO, Tesla, J1772) drawn in a single hand — never mixed visual languages. Battery, lightning, pin, car, leaf — all consistent.
+
+**AI tool recommendations:** **Midjourney / Flux** for *"photorealistic DC-fast charging station at retail parking lot, golden hour, single Audi e-tron plugged in, wide-angle, soft natural light, no logos visible"*. Avoid Midjourney's "futuristic EV" defaults — neon underglow, holographic dashboards, etc. Stations sit in mundane parking lots; that's the truth and that's the visual.
+
+**Aspect ratios:** 16:10 for the operator-app dashboard hero. 4:5 for station-hardware portraits. 1:1 for plug-type icon tiles. The map preview takes whatever aspect the layout gives it — typically a wide 21:9 strip on marketing pages.
+
+**Video:** rare. If used, a 20-second silent timelapse of a full charging session (0% → 80% in DC-fast). H.265, ≤8MB, poster mandatory. Never autoplay with sound.
+
+**Performance:** map preview ships as a static SVG with pin overlays, never a raster screenshot of Google Maps. Station-hardware hero AVIF at 1800w ≤140KB. LCP target 1.8s.
+
+**Avoid:** generic "EV future" abstract gradients, glowing battery cells, charging-cable hero shots in mid-air, neon-blue underlit cars, futuristic dashboards from concept-car reveals. The page sells reliable charging at a real station — show that.
+
+**Accessibility:** every availability state has both a color and a text label (`Open · 4 of 6 ports free`). Map pins include `aria-label` with full station name and status. The urgency-magenta flash is paused under `prefers-reduced-motion` and the badge stays in its peak-color state.
+
+## 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.

package/themes/ev-charging/tokens.ts

@@ -0,0 +1,185 @@
+import type { Direction } from "../schema";
+
+// ev-charging — ChargePoint / EVgo / Electrify America station-network operator
+// language. Brand-blue signal, station-map gravity, fast-charge urgency.
+// Dashboard chrome with a public-network warmth — not enterprise-cold.
+
+export const evCharging: Direction = {
+  name: "ev-charging" as Direction["name"],
+  ethos:
+    "ChargePoint cool-blue signal · EVgo magenta urgency-flash · Electrify America cobalt + neutral grid · " +
+    "Blink Charging bright-yellow availability · Wallbox restrained Spanish-design chrome",
+  references: [
+    { brand: "ChargePoint", trait: "cool-blue station-pin language, network-first map" },
+    { brand: "EVgo", trait: "magenta urgency flash, DC-fast availability dot" },
+    { brand: "Electrify America", trait: "cobalt + neutral grid, ultra-fast 350kW gravity" },
+    { brand: "Blink Charging", trait: "bright-yellow availability pin, consumer-friendly chrome" },
+    { brand: "Wallbox", trait: "restrained Spanish design, home-unit clean cards" },
+  ],
+  feel:
+    "A clean operator dashboard you'd use on the road. Cool brand-blue is the signal — it marks the station, the " +
+    "selected pin, the price column. A magenta urgency-flash appears only on DC-fast availability. Tabular numerics " +
+    "carry the kWh and price-per-kWh. Maps are first-class, never a marketing afterthought.",
+
+  fonts: {
+    display: {
+      family: "Manrope",
+      fallback: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+      from: "ChargePoint / Wallbox display — Manrope's geometric clarity at heavy weights",
+      googleFont: "Manrope",
+      weights: [600, 700, 800],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Electrify America / Blink body — neutral 14.5px, dashboard-density",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "monospace"],
+      from: "kWh, $/kWh, station-id codes — tabular numerics",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.022em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "ss01", "cv11"',
+    h1ScaleClamp: "clamp(2rem, 4.5vw, 3.25rem)",
+    bodyBaseSize: "0.9rem",
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "215 28% 97%", from: "cool near-white — ChargePoint pale-blue canvas" },
+    foreground: { hsl: "222 38% 12%", from: "deep navy-ink — operator dashboard ink" },
+    card: { hsl: "0 0% 100%", from: "pure white card — lifts off pale-blue background" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "216 92% 48%", from: "ChargePoint cool-blue — the network signal color" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on cool blue" },
+    secondary: { hsl: "215 22% 94%", from: "cool gray surface — table headers, inset panels" },
+    secondaryForeground: { hsl: "222 38% 12%", from: "ink on cool gray" },
+    muted: { hsl: "215 20% 93%", from: "muted cool gray — disabled rows, off-network state" },
+    mutedForeground: { hsl: "215 14% 42%", from: "slate gray — meta, kWh-unit labels" },
+    accent: { hsl: "216 70% 95%", from: "pale blue hover — selected station row" },
+    accentForeground: { hsl: "216 92% 28%", from: "deep blue ink on pale-blue" },
+    border: { hsl: "215 18% 86%", from: "cool hairline — table and card borders" },
+    input: { hsl: "215 18% 86%", from: "same as border" },
+    ring: { hsl: "216 92% 48%", from: "primary cool-blue — focus ring on inputs" },
+    destructive: { hsl: "0 70% 50%", from: "fault red — distinct from urgency-magenta, used for charger-down/error" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on fault red" },
+    brand: {
+      "signal-blue": { hsl: "216 92% 48%", from: "= primary; ChargePoint network signal" },
+      "signal-blue-deep": { hsl: "216 88% 32%", from: "hover, gradient anchor, sidebar surface" },
+      "signal-blue-soft": { hsl: "216 70% 95%", from: "selected-station row bg, station-pin halo" },
+      "urgency-magenta": { hsl: "330 88% 52%", from: "EVgo magenta — DC-fast availability flash, never decorative" },
+      "availability-amber": { hsl: "42 100% 52%", from: "Blink bright yellow — semi-busy station pin" },
+      cobalt: { hsl: "224 80% 38%", from: "Electrify America cobalt — 350kW badge accent only" },
+      "map-land": { hsl: "215 24% 92%", from: "map basemap land tone — pale, recessive" },
+      "map-water": { hsl: "210 40% 84%", from: "map basemap water tone — slightly cooler" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64],
+    containerMax: "max-w-7xl",
+    containerPadding: "px-4 lg:px-6",
+    sectionPadding: {
+      hero: "pt-12 pb-8 lg:pt-16 lg:pb-12",
+      default: "py-10 lg:py-14",
+      tight: "py-6 lg:py-10",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "shadow-card":
+        "0 1px 2px hsl(222 38% 12% / 0.05), 0 1px 3px hsl(222 38% 12% / 0.04)",
+      "shadow-popover":
+        "0 6px 18px hsl(222 38% 12% / 0.10), 0 1px 2px hsl(222 38% 12% / 0.06)",
+      "shadow-pin-active":
+        "0 0 0 4px hsl(216 92% 48% / 0.25), 0 2px 6px hsl(222 38% 12% / 0.25)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 220,
+      loop: 1400,
+      ambient: 2400,
+    },
+    keyframes: {
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 220,
+        iteration: "once",
+        purpose: "table-row and station-card entrance — opacity only, no translate",
+      },
+      "pin-pulse": {
+        css:
+          "0%, 100% { box-shadow: 0 0 0 0 hsl(216 92% 48% / 0.5); }\n" +
+          "50% { box-shadow: 0 0 0 8px hsl(216 92% 48% / 0); }",
+        defaultDuration: 1800,
+        iteration: "infinite",
+        purpose: "active station-pin pulse on the map — indicates a live charging session",
+      },
+      "dc-fast-flash": {
+        css:
+          "0%, 100% { background-color: hsl(330 88% 52%); }\n" +
+          "50% { background-color: hsl(330 88% 68%); }",
+        defaultDuration: 1400,
+        iteration: "infinite",
+        purpose: "EVgo-style urgency flash on DC-fast availability badge — used only on 150kW+ rows",
+      },
+      "charge-arc": {
+        css:
+          "from { stroke-dashoffset: 282; }\n" +
+          "to { stroke-dashoffset: 56; }",
+        defaultDuration: 2400,
+        iteration: "once",
+        purpose: "charge-percentage SVG arc fill on session start",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Solid signal-blue primary (rounded-md, shadow-card) for the single commit — Start charging, Reserve, Pay. " +
+      "Secondary is ghost (border + foreground). Tertiary is text-link blue. " +
+      "Hover deepens fill to signal-blue-deep; no scale, no shadow growth.",
+    card:
+      "Rounded-md, 1px --border, bg-card, shadow-card. Padding p-4 lg:p-5 — tight. " +
+      "Station card holds name, address, distance, port-count, $/kWh. Map-popup card uses shadow-popover.",
+    input:
+      "Full rounded-md box, 1px --input border, bg-card. Search input has a leading pin glyph in signal-blue. " +
+      "Focus = 2px signal-blue ring at 45% opacity. Filter chips are rounded pills, signal-blue-soft when active.",
+    cta:
+      "Primary signal-blue button for Start charging / Reserve. " +
+      "DC-fast badge uses urgency-magenta with dc-fast-flash keyframe — never on Level 2 / Level 1. " +
+      "Price columns right-aligned mono. Availability pin colors: green=open, amber=busy, magenta=DC-fast-open, gray=offline.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.45)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/farm-direct/THEME.md

@@ -0,0 +1,92 @@
+# Design Direction — Farm-Direct
+
+## Ethos
+Misfits Market chalkboard-cream + carrot-orange · Imperfect Foods rescued-produce green · Hungryroot friendly box configurator · Thrive Market warm-trust serif · Daily Harvest pastel pantry
+
+## Feel
+Warm cream paper canvas with a friendly farm-green primary and a carrot-orange secondary. Headings carry a soft serif warmth; body sits in a rounded humanist sans. Box cards have pillow-rounded corners and produce illustrations sit inside them like a chalk drawing. Numbers report sourcing impact, not pricing. The page is a farmers-market stand, not a checkout aisle.
+
+## Reference brands
+- **Misfits Market** → chalkboard-cream surface and carrot-orange accent. The page is warm before it is anything else.
+- **Imperfect Foods** → rescued-produce green. The wonky carrot is beautiful and so is the badge color.
+- **Hungryroot** → friendly box configurator. Small/medium/large is a choice, not a tier.
+- **Thrive Market** → warm-trust serif. Members trust display serif; sans is for the receipt.
+- **Daily Harvest** → pastel pantry palette. Soft, never neon.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin.
+
+Surface stack is **warm cream background** → `--card` (a degree above, lifted cream) → `--secondary` (deeper cream for inset panels). Depth comes from soft basket-shadows and the rounded chrome — never from fill differentiation alone.
+
+Brand tokens: `--farm-green`, `--farm-green-deep`, `--farm-green-soft`, `--carrot-orange`, `--tomato-soft`, `--chalk-blue`, `--earth-clay`. Carrot-orange is the friendly secondary — used on box-size selectors and the in-season highlight. Chalk-blue and earth-clay are reserved for the sourcing-map basemap; they are off-limits to UI chrome.
+
+## Typography
+- **Display:** Fraunces (Misfits Market / Thrive Market display). h1–h4. Tracking `-0.015em`. Fraunces' soft-serif warmth — chalkboard sign-painter energy.
+- **Body:** Nunito (Hungryroot body). Body base **16px** with **line-height 1.6** — rounded humanist sans, the friendliest readable face.
+- **Mono:** DM Mono. Member-impact tickers (lbs rescued, farms supported). DM Mono is wider and warmer than JetBrains.
+
+H1 uses `clamp(2.5rem, 5.5vw, 4rem)` — generous, like a farm-stand chalkboard headline.
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-8`.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24` (generous; the produce hero breathes)
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 10 12 16 20 24 32 40 48 56 64 80 96.
+
+## Color
+No hex anywhere in component files. All color via tokens. Pure white and pure black are forbidden — `--background` and `--foreground` carry warmth.
+
+Farm-green is the primary commit color. Carrot-orange is the friendly secondary, used on box-size selectors and seasonality badges. Tomato-soft appears only on out-of-stock / low-quantity badges. The sourcing-map basemap is the only place chalk-blue and earth-clay appear.
+
+## Radius
+`--radius: 1rem` (16px). Pillow-rounded — the friendliest direction in this library after soft-modern. Pills allowed (`pillsAllowed: true`) for box-size selectors, seasonality chips, dietary badges, CTA buttons. Buttons are full pill (`rounded-full`).
+
+## Shadows
+**Soft, three utilities:** `.shadow-basket` (8-24px lift on the box-preview hero card — feels like the basket is sitting on the page), `.shadow-card` (general card lift), `.shadow-pop` (4-16px for the sourcing-map farm callouts). No glows.
+
+## Motion
+Three keyframes: `fade-rise` (500ms — produce-card and configurator entrance, friendly rise), `box-bump` (280ms — box-size selector bumps when changed, playful confirm), `drift` (22s slow ambient on illustration glyphs — decorative).
+
+`box-bump` is the playful moment. `drift` is decorative and disabled under `prefers-reduced-motion`. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`.
+
+## Density
+Medium. The box-preview card breathes. The produce-illustration cluster has whitespace around it. Impact metrics are big (40px mono) with generous gutters. The farms-supported map gives the callouts room — three farms across, not eight crammed in.
+
+## Component patterns
+- **Buttons:** solid farm-green primary, **full-pill** (`rounded-full`), `shadow-card`. The single commit per surface — `Pick this box`, `Subscribe`. Secondary is ghost (1.5px border in foreground). Tertiary is text-link `--farm-green-deep` with underline-on-hover. Hover deepens fill and 1px y-translate — playful, not theatrical.
+- **Cards:** rounded-2xl (1rem), 1px `--border`, `bg-card` (lifted cream), `shadow-card`. Padding `p-6`. Box-preview hero card uses `shadow-basket` and contains a produce-illustration cluster.
+- **Inputs:** full rounded-xl box, 1px `--input` border, `bg-card`. Label above in body-medium 14px. Zip-code and email inputs lead with a small farm-green glyph. Focus = 2px farm-green ring at 50% opacity.
+- **CTA:** primary farm-green pill button for the box commit. Box-size selector uses three pill chips — carrot-orange when selected, ghost when not. Sourcing-story farm callouts use pop-out cards with `shadow-pop`. Impact metrics (lbs rescued, farms supported) display large in mono with tabular-nums.
+
+## Recommended rich media
+Farm-Direct leans on **chalkboard-style produce illustration** and **honest farm photography** — real growers, real fields, real wonky carrots. Avoid stock "fresh vegetables on white background" — that's grocery aisle, not farm stand.
+
+**Iconography:** the produce glyphs are **hand-drawn chalkboard illustration** (single-line, slightly imperfect), not flat geometric icons. The UI icons (cart, account, search, close) are 1.5px stroke at 20px — but the produce family is its own illustrated world.
+
+**AI tool recommendations:** **Midjourney / Flux** for *"chalkboard-style hand-drawn produce illustration, carrot tomato kale, white chalk on warm cream background, slightly imperfect lines, farm-stand aesthetic"* and *"honest farm photography, mid-morning natural light, female farmer in rubber boots holding a basket of imperfect tomatoes, wide-angle, no over-saturation"*. Avoid the default Midjourney "fresh organic vegetable" gloss — it reads supermarket flyer.
+
+**Aspect ratios:** 4:5 portrait for farmer photography. 1:1 for produce-illustration tiles inside box cards. 21:9 strip for the sourcing-map. Never 16:9.
+
+**Video:** rare. If used, a 15-second silent timelapse of a box being packed — gloved hands placing produce in a brown box. ≤6MB H.265. Poster mandatory.
+
+**Performance:** farmer-portrait hero AVIF at 1400w ≤120KB. Produce-illustration glyphs as inline SVG (≤4KB each, no raster). LCP target 2s.
+
+**Avoid:** stock grocery-aisle imagery, glossy red apple on white, hands-holding-soil shots (cliché), generic "farm to table" gradient overlays, neon-green "organic certified" badges, before/after produce-rescue slider gimmicks.
+
+**Accessibility:** every produce illustration in a box card has a text label visible (`8 carrots`, not just an illustration). Impact-metric numbers ship with full aria-labels (`12.4 million pounds of produce rescued`). Box-size pills carry `aria-pressed` state.
+
+## 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.5)`. Farm-green, soft.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.