@stylecrib/cli 0.3.1 → 0.3.2

package/themes/ember-poster/theme.yml

@@ -0,0 +1,109 @@
+# Ember Poster — Family C, Editorial & Print.
+#
+# NEW-BASE CANDIDATE for BESPOKE_THEME_SYSTEM.md. Warm-dark editorial
+# register — espresso-brown canvas, cream type, three hot editorial accents
+# (flame, chili, caramel-gold). Marker-drawn uppercase display + Inter Tight
+# body. Sharp corners throughout. Loud, confident, small-batch voice.
+#
+# Authored from Matt's provided design brief (2026-07-03). Placeholder
+# demonstration domain is a fictional print quarterly ("PLATE") — a
+# domain-agnostic mockup that could be re-skinned to any small-batch
+# consumer or editorial brand. The register expresses "hand-made premium"
+# through TYPE and MOTION rather than decoration.
+#
+# Fifth theme via the v2 harness. First non-Family-D theme, first Family C
+# theme, first NEW BASE (not one of the current 60 in the spec).
+
+name: Ember Poster
+concept: Warm-dark editorial register — cream type on espresso canvas, hot editorial accents, oversized marker-uppercase display, sharp corners, loud tongue-in-cheek voice.
+influence: Small-batch print editorial. Awwwards-tier independent-magazine and craft-brand sites — the register that reads "hand-made premium" through type and motion instead of ornament. Also 1970s poster editorial (bold caps, negative tracking, condensed hot palettes) and hot-shop print like The Small Object.
+
+family: C
+render_url: http://localhost:5173/themes/ember-poster
+
+surface: web
+
+typography:
+  display: Anton (or Bricolage Grotesque as broader-market fallback) — 400 weight, UPPERCASE always, letter-spacing -0.02em. At scale — 104px hero, 52px section title, 37px h3. The marker-hand alternative (Peperoncino Sans by Resistenza) is the reference face but requires commercial license; Anton is the safest free approximation.
+  body: Inter Tight (variable 100-900) — 400/500/700, mixed-case, line-height 1.5, 16px body, up to 40px for manifesto "voice" lines that contrast with the display "shout."
+  mono: JetBrains Mono — narrowly scoped to code specimens only. NOT used for section eyebrows, corner tags, metadata rows, or bylines (those defaults are universal-slop-blocklist hits).
+  scale: 1.333 (perfect fourth — hero/display/lead/body span a wide contrast so the display shouts and the body speaks)
+
+palette:
+  bg: "#100B06"
+  surface: "#322C23"
+  ink: "#F5E4C7"
+  accent: "#F15726"
+  secondary: "#BE8D3F"
+  signal: "#DA1F27"
+
+density: balanced
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Hero item slider — auto-advances every 4s, click 1/2/3 to jump; FPO cover + accent-gradient backdrop transition on change.
+  2. Scroll-triggered reveal on hero headline — IntersectionObserver + CSS transition (translate-up + fade, 500ms cubic-bezier).
+  3. Vertical letter marquee ("SMALL BATCH SMALL BATCH...") — CSS keyframe, 22s linear infinite loop, seamless via content duplication.
+  4. Testimonial rails — TWO rows, opposite directions, CSS keyframe 40s linear infinite, pause on hover via animation-play-state.
+  5. Stateful add-to-cart: ADD → ADDING (600ms) → ✓ ADDED (1800ms) → back. Button background flips to cream on ADDED. Per-product + separate for the pack.
+  6. Subscription tier 4-issue / 12-issue: click updates price ($60 / $160) and rebuilds the visual stack reactively.
+  7. Microinteractions — CSS transitions on hover states, active-state scale(0.97) on cart buttons.
+  8. prefers-reduced-motion: reduce — all keyframe animations pause, transitions become instant, state changes still fire (they're content).
+
+  Customer installs these as dependencies for the deeper motion tier:
+  - Lenis — smooth inertial scroll across the whole page (Awwwards-tier inertial feel).
+  - GSAP ScrollTrigger — orchestrated multi-element timelines (image stop-motion / spin, staggered per-section reveals).
+  - Custom branded preloader.
+
+  Motion character: weighty but crisp, custom cubic-bezier(0.16,1,0.3,1) easings, nothing bouncy-cute. All motion serves the "confident + hand-made" tone. See sections/ember-poster.tsx for the shipping implementation.
+
+signature: |
+  Cream Shrikhand-family display at 104px scale broken across multiple lines,
+  set on espresso-brown canvas, letter-spacing tightened to -0.02em. Feature
+  names rendered as stacked single-word lines filling one side of the
+  viewport, hero imagery beside. Three editorial accents map one-per-item
+  (flame orange, chili red, caramel gold) and carry through card, hover, and
+  cart state consistently. Border-radius is 0 everywhere. Hand-drawn splat +
+  antler + chef-hat ornaments and a red pen-slash strike-through for
+  negation. Inverted cream-bg bands break up the dark rhythm as callout
+  sections. NO mono-caps eyebrows, NO dot-metadata rows, NO corner tags —
+  brand character sits in the display type, not in ornamented labels.
+
+imagery: |
+  Warm-lit editorial photography on the dark canvas with amber-tungsten
+  spotlight, deep shadow, high contrast, saturated. Hero and feature imagery
+  reads as small-batch print / small-studio quality — NO flat white product
+  shots, NO gradient overlays behind imagery, NO stock photography. Illustration
+  if used is marker-hand line-art in cream or accent color. Placeholder
+  compositions use clearly-labeled FPO blocks so the layout is legible
+  without shipping stock images.
+
+best_for:
+  - Small independent magazines and quarterlies with a loud editorial voice
+  - Craft goods and small-batch consumer brands (books, records, ceramics, apothecary)
+  - Editorial launch pages for premium consumer brands that refuse corporate gloss
+  - Independent zines and print-adjacent brand sites
+  - Any Awwwards-tier editorial or brand site that trades on personality
+
+avoid:
+  - "Border-radius greater than 0px anywhere on the page — sharp corners are core to the identity"
+  - "Rounded button chrome or pill CTAs — buttons are sharp-cornered display type"
+  - "Cool color palette — this register is WARM (espresso, cream, flame, chili, caramel), never blue/teal/violet"
+  - "Sans-serif humanist display like Inter Display or Söhne — the display face has to carry marker-hand character (Anton, Peperoncino Sans, Bricolage Grotesque)"
+  - "Title case or sentence case on display type — display is ALWAYS uppercase in this register"
+  - "Loose or default letter-spacing on display — display tracks -0.02em minimum, tighter at hero scale"
+  - "Corporate polish — no shadow-md cards, no soft glow, no muted color-block hero"
+  - "Three-tier pricing cards or feature-pillar grids — the composition refuses SaaS defaults structurally"
+  - "Center-aligned everything — composition is left-weighted and asymmetric, display type BREAKS the grid"
+  - "Cool grays for body text — body ink is cream (#F5E4C7), never #64748b slate"
+
+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
+  - "warm-dark-plus-rainbow (espresso canvas paired with more than three accent colors — the register only holds with three heat hues used sparingly)"
+  - "generic-food-brand (safe rounded product cards + generic sans + soft photography — that's the corporate DTC default this register explicitly refuses)"

package/themes/ember-poster/tokens.ts

@@ -0,0 +1,27 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "ember-poster",
+  family: "C",
+  base: "unknown",
+  palette: {
+    "bg": "#100B06",
+    "surface": "#322C23",
+    "ink": "#F5E4C7",
+    "accent": "#F15726",
+    "secondary": "#BE8D3F",
+    "signal": "#DA1F27"
+  },
+  typography: {
+    "display": "Anton (or Bricolage Grotesque as broader-market fallback) — 400 weight, UPPERCASE always, letter-spacing -0.02em. At scale — 104px hero, 52px section title, 37px h3. The marker-hand alternative (Peperoncino Sans by Resistenza) is the reference face but requires commercial license; Anton is the safest free approximation.",
+    "body": "Inter Tight (variable 100-900) — 400/500/700, mixed-case, line-height 1.5, 16px body, up to 40px for manifesto \"voice\" lines that contrast with the display \"shout.\"",
+    "mono": "JetBrains Mono — narrowly scoped to code specimens only. NOT used for section eyebrows, corner tags, metadata rows, or bylines (those defaults are universal-slop-blocklist hits).",
+    "scale": "1.333 (perfect fourth — hero/display/lead/body span a wide contrast so the display shouts and the body speaks)"
+  },
+  surface: "web",
+  density: "balanced",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Hero item slider — auto-advances every 4s, click 1/2/3 to jump; FPO cover + accent-gradient backdrop transition on change.\n2. Scroll-triggered reveal on hero headline — IntersectionObserver + CSS transition (translate-up + fade, 500ms cubic-bezier).\n3. Vertical letter marquee (\"SMALL BATCH SMALL BATCH...\") — CSS keyframe, 22s linear infinite loop, seamless via content duplication.\n4. Testimonial rails — TWO rows, opposite directions, CSS keyframe 40s linear infinite, pause on hover via animation-play-state.\n5. Stateful add-to-cart: ADD → ADDING (600ms) → ✓ ADDED (1800ms) → back. Button background flips to cream on ADDED. Per-product + separate for the pack.\n6. Subscription tier 4-issue / 12-issue: click updates price ($60 / $160) and rebuilds the visual stack reactively.\n7. Microinteractions — CSS transitions on hover states, active-state scale(0.97) on cart buttons.\n8. prefers-reduced-motion: reduce — all keyframe animations pause, transitions become instant, state changes still fire (they're content).\n\nCustomer installs these as dependencies for the deeper motion tier:\n- Lenis — smooth inertial scroll across the whole page (Awwwards-tier inertial feel).\n- GSAP ScrollTrigger — orchestrated multi-element timelines (image stop-motion / spin, staggered per-section reveals).\n- Custom branded preloader.\n\nMotion character: weighty but crisp, custom cubic-bezier(0.16,1,0.3,1) easings, nothing bouncy-cute. All motion serves the \"confident + hand-made\" tone. See sections/ember-poster.tsx for the shipping implementation.\n",
+  signature: "Cream Shrikhand-family display at 104px scale broken across multiple lines,\nset on espresso-brown canvas, letter-spacing tightened to -0.02em. Feature\nnames rendered as stacked single-word lines filling one side of the\nviewport, hero imagery beside. Three editorial accents map one-per-item\n(flame orange, chili red, caramel gold) and carry through card, hover, and\ncart state consistently. Border-radius is 0 everywhere. Hand-drawn splat +\nantler + chef-hat ornaments and a red pen-slash strike-through for\nnegation. Inverted cream-bg bands break up the dark rhythm as callout\nsections. NO mono-caps eyebrows, NO dot-metadata rows, NO corner tags —\nbrand character sits in the display type, not in ornamented labels.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/enterprise-cloud/THEME.md

@@ -0,0 +1,139 @@
+# Design Direction — Enterprise-Cloud
+
+## Ethos
+Oracle Redwood depth · NetSuite gravitas · cloud-database trust · Redwood-red brand mark · structured panel hierarchy
+
+## Feel
+Database-company gravitas. Layered panels with soft shadows (Redwood's "depth" mechanic), Oracle's iconic brand red as the signal accent. Reads enterprise-formal — not flashy, not playful. Trusted-since-1977 energy.
+
+## Reference brands
+- **Oracle Redwood Design System** → Oracle's design system. Depth-layered surfaces. The canonical Fusion Cloud / NetSuite / JD Edwards visual vocabulary.
+- **Oracle Cloud Infrastructure** → marketing surfaces. Cloud-database trust register.
+- **Oracle Database** → documentation gravitas. Structured panel hierarchy as information architecture.
+- **NetSuite ERP** → dense ERP grids, formal business surfaces.
+- **JD Edwards** → formal data-grid surfaces. Legacy ERP rigor — the screens an AS/400 operator would recognize.
+
+## Tokens
+HSL triples in `src/index.css`. Surface stack steps off-white canvas (`--background` = `0 0% 99%`) up through `--surface-2` (recessed, `0 0% 96%`) and `--surface-1` / `--card` (top panel, `0 0% 100%`). Depth comes from **the elevation tier system**, not hue shift.
+
+Brand tokens are named for their Redwood provenance: `--redwood-red` (alias for primary, the corporate brand mark), `--surface-1` (top panel), `--surface-2` (recessed), `--border-soft` (structural hairline), `--accent-teal` (Redwood secondary), `--gold-heritage` (premium-tier emphasis), `--ink-navy` (text-primary).
+
+## Brand-book customization
+This direction targets the Oracle product family but every Oracle brand has its own override. Use the brand tokens as override hooks.
+
+**Oracle product overrides — which product owns which accent:**
+- **Oracle Cloud / Fusion Cloud / Redwood baseline** → `--primary` stays Oracle Redwood red (`8 65% 47%`). The default.
+- **NetSuite** → primary actions (especially "new transaction" / "add record") historically use NetSuite orange. Override `--primary` to `24 85% 50%` for NetSuite-skinned surfaces; keep `--redwood-red` available as the secondary brand mark.
+- **Hyperion / EPM** → planning surfaces use Hyperion purple. Override `--primary` to `265 50% 45%`; the elevation system and panel structure stay identical.
+- **JD Edwards** → keeps Oracle red but increases density one notch (use the `2` and `4` steps more aggressively for grid padding).
+- **Oracle Database docs** → keeps Oracle red but suppresses `--gold-heritage` (database docs are not a tiered-pricing surface).
+
+**Standard enterprise brand-book overrides (when this direction is adopted by a non-Oracle ERP/database vendor):**
+- **Corporate red/blue/green → `--primary`** — drop the brand-book HSL triple into `--primary` and `--ring`. The panel system is provider-agnostic.
+- **Corporate display font → `--font-display`** — Inter is a stand-in for Source Sans Pro / Helvetica. Replace with the corporate font (e.g. SAP's "72", IBM's "Plex", a customer's licensed face) without changing the type scale.
+- **Logo lockup space** — reserve `--space-12` (48px) clear-space around any wordmark; the masthead pattern assumes the logo sits at the surface-1 elevation tier.
+- **Favicon recipe** — square brand mark on `--surface-1` (white) at 32×32; never on the off-white canvas (the 1% delta disappears at favicon scale).
+
+**The elevation system is structural and must be preserved.** `--shadow-redwood-1` / `-2` / `-3` are the load-bearing depth language of this direction. A brand can swap colors, fonts, and even the radius (within reason — keep it ≤8px), but if a re-skin flattens the panel hierarchy or replaces the shadow tiers with borders-only, it stops being Redwood and starts being something else. The three tiers map to:
+- **Tier 1 (1px drop)** — inline cards, table containers, sticky toolbars.
+- **Tier 2 (4px drop)** — popovers, dropdowns, side panels, persistent overlays.
+- **Tier 3 (12px drop)** — modals, dialogs, the topmost layer.
+
+## Component families
+**ERP panels** (`*Panel`, `*RecordCard`, `*FormPanel`): rounded-md, border-soft, bg-card, `shadow-redwood-1`. Header strip with bottom border. Padding `p-5 lg:p-6`. Embedded grids inherit row borders from the panel — no double-bordering.
+
+**Data grids** (`*Grid`, `*Table`, `*Ledger`): tabular figures, mono numeric columns, 1px row borders in `border-soft`, optional `bg-surface-2` for zebra striping (4% delta). Header row sticky with `shadow-redwood-1` when scrolled. The grid is the surface, not a decoration on top of one.
+
+**Status pills** (`*StatusPill`, `*TierBadge`): rounded-full, text-xs, weight 500. Semantic palette — Redwood red for "critical", teal for "info", gold-heritage for "premium tier", muted for "draft". Never decorative.
+
+**Modals & dialogs** (`*Dialog`, `*Sheet`): bg-card on `shadow-redwood-3`, max-w-2xl default. Header strip + footer strip both use border-soft. Modals enter with `panel-rise` (320ms), exit with `panel-exit` (200ms).
+
+## Typography
+- **Display:** Inter, weights 400/500/600/700. Inter is the closest open-source approximation to Oracle's historical Source Sans Pro / Helvetica voice. Headings are body-weight escalated — this is a documentation language. H1 uses `clamp(1.875rem, 3.75vw, 2.875rem)` — restrained, because the panels are the work.
+- **Body:** Inter, 15px (`0.9375rem`), line-height 1.55, tracking `0`.
+- **Mono:** JetBrains Mono, weights 400/500. SQL snippets, transaction IDs, schema names, version pins.
+
+Font features: `"tnum", "zero"` — tabular figures and slashed zero for ledgers, ERP grids, and financial reporting surfaces.
+
+## Spacing
+- **Container:** `max-w-screen-2xl px-4 lg:px-8` — wide; ERP surfaces and dashboards claim the screen.
+- **Section padding tiers:**
+  - Hero (rare): `pt-16 pb-12 lg:pt-24 lg:pb-16`
+  - Default: `py-12 lg:py-16`
+  - Tight: `py-8 lg:py-10`
+- **Allowed scale:** **2** 4 6 8 10 12 16 20 24 32 40 48 64. The `2` step exists for icon-to-label gaps in dense ERP chrome.
+
+Medium-high density — between enterprise-tech (Nvidia docs) and SAP Fiori. The reference is NetSuite's record screens and Oracle Fusion Cloud's data-entry surfaces.
+
+## Color
+No hex anywhere. Pure black is forbidden (`--foreground` is `220 30% 12%`, the Oracle navy ink). The off-white canvas (`0 0% 99%`) is intentional — pure white feels printer-paper, off-white feels application-chrome.
+
+Semantic discipline:
+- **Oracle Redwood red** (`8 65% 47%`) — primary, brand mark, focus ring. The corporate signal.
+- **Destructive crimson** (`354 70% 45%`) — destructive actions only. Distinct hue from brand red so "delete" and "save" never visually rhyme.
+- **Accent teal** (`190 50% 35%`) — info chips, secondary CTAs, secondary brand moments.
+- **Gold heritage** (`38 60% 50%`) — premium-tier emphasis, enterprise-license badges, "Diamond support" pills.
+- **Ink navy** (`220 30% 12%`) — body text and headings.
+- **Text secondary** (`220 12% 42%`) — captions, meta, ERP eyebrows.
+
+## Radius
+`--radius: 0.375rem` (6px). **Modest, not pillowy.** Redwood panels are square-leaning but not knife-edge. Pills are allowed (`pillsAllowed: true`) for status chips, tier badges, and severity indicators.
+
+## Shadows
+Style is **"soft"**. The Redwood elevation tier system — three utilities, three structural roles:
+- `.shadow-redwood-1` — 1px drop. Cards, table containers, sticky toolbars. The default lift off the canvas.
+- `.shadow-redwood-2` — 4px drop. Popovers, dropdowns, side panels, persistent overlays.
+- `.shadow-redwood-3` — 12px drop. Modals, dialogs. The topmost layer.
+
+Shadow color is `220 30% 12%` (the ink-navy hue) at 4–12% opacity — never pure black, never high opacity. The Redwood shadow is *present but quiet*. This is the load-bearing depth language; preserve it across re-skins.
+
+## Motion
+- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
+- **Duration tiers:** reveal (320ms entry / 200ms exit asymmetric), loop (1.6s), ambient (0 — no ambient motion in ERP).
+- **Keyframes:**
+  - `panel-rise` (320ms) — entry for panels and cards. Deliberate, business-paced layer reveal.
+  - `panel-exit` (200ms) — exit for panels. Faster than entry, never lingers.
+  - `fade-in` (240ms) — popovers, menus, ERP grid rows on load.
+
+**Deliberate, business-paced.** No bounce, no spring, no parallax, no ambient drift. Entry 320ms is the signature tempo — slow enough to feel intentional, fast enough not to delay an ERP operator entering 200 line items. `prefers-reduced-motion` honored throughout.
+
+## Component patterns
+- **Buttons:** primary = solid Oracle red filled rectangle (`bg-primary text-primary-foreground rounded-md font-semibold`), 6px radius, weight 600. Secondary = ghost with border-soft. Tertiary = Redwood-red inline text-link. Sizes: small (`h-8 px-3 text-xs`) and default (`h-9 px-4 text-sm`).
+- **Cards:** modest 6px corners (`rounded-md`), 1px `border-soft`, `bg-card` (surface-1), `shadow-redwood-1`. Padding `p-5 lg:p-6`. Header row uses bottom `border-soft`. Modal-layer panels promote to `shadow-redwood-3`.
+- **Inputs:** compact (`h-9 text-sm`), 1px `border-soft`, `bg-background`, `rounded-md`. Focus uses 2px Oracle-red ring at 30% opacity. Inline validation in destructive crimson — distinct from brand red.
+- **CTAs:** primary = solid Oracle red button. Secondary = ghost with border-soft. Tertiary = Redwood-red text-link. One primary CTA per surface — this is enterprise formal, not conversion theater.
+
+## Recommended rich media
+Oracle-Redwood is **product-screenshot-heavy and diagram-heavy**. The aesthetic is the application itself — Fusion Cloud panels, NetSuite record screens, OCI consoles. The screen is the proof; the architecture diagram is the argument. No models, no atmospheric stock photography, no startup-feel lifestyle staging.
+
+**Hero media:**
+- **Product screenshots** — real Fusion Cloud / NetSuite / OCI surfaces. Cropped to show panel hierarchy and the data grid; never decoratively faded out at the edges. Present them frankly: 1px border-soft frame, optional `shadow-redwood-1`.
+- **Dashboard captures** — KPI tiles, ledger views, ERP cockpit screens. Real data (synthetic but plausible — no Lorem Ipsum in numeric columns; use realistic GL account numbers).
+- **Conservative photography** — only when needed (data-center exteriors, server racks, hardware product shots on neutral seamless). No models, no atmospheric shots, no warm sunset light. The Oracle Park photography aesthetic, not the WeWork one.
+- **Illustrated cloud-architecture diagrams** — labeled flat-line schematics. Two-to-three-color palette (Oracle red + teal + ink-navy). Mono labels. Show the system topology; don't decorate it.
+
+**AI tool recommendations:**
+- **Excalidraw** — hand-drawn-but-precise feel for explainer diagrams and architecture sketches. The default for technical diagrams in this direction.
+- **Recraft** — labeled architecture diagrams ("Oracle Cloud Infrastructure topology diagram, flat lines, three-color, mono labels, light background, formal enterprise style").
+- **Mermaid / DBML** — declarative diagrams for ER schemas, sequence diagrams, deployment topologies. Often the better answer than AI for canonical Oracle Database content.
+- **Carbon (carbon.now.sh)** — SQL and PL/SQL snippet images in JetBrains Mono on a light theme matching `--surface-1`.
+- **Avoid Midjourney photography for enterprise** — even with careful prompting it reads slightly off (over-saturated, "AI sheen", subtly uncanny faces). For Oracle's register, AI photography feels like a startup imposter; commission real photography or use Oracle's existing product imagery.
+
+**Aspect ratios:** 16:9 for hero architecture diagrams and dashboard captures; 4:3 for product-screen detail; natural aspect for inline charts and ledger captures; square (1:1) reserved for hardware product macros if used at all.
+
+**Performance:** SVG diagrams inline (≤10 KB each); product screenshots ≤140 KB AVIF at 1.5x DPR; no autoplay video on ERP surfaces (it breaks the formal register). LCP target <1.8s — Oracle's customers often run these on locked-down corporate networks behind layered proxies.
+
+**Avoid:** playful illustrations, gradient meshes, glassmorphic surfaces, Midjourney photography (reads "AI startup" — wrong register), lifestyle photography with models, atmospheric photography, purple/pink gradients, decorative SVG ornament, lens flare, 3D product renders that look like a Behance reel, anything that signals consumer-startup-AI-fad rather than database-company-since-1977.
+
+**Accessibility:** WCAG AA on `0 0% 99%` background with `220 30% 12%` foreground passes at all sizes (contrast ratio ~16:1). Oracle red on white passes AA at ≥14px. Color-coding (red = critical, teal = info, gold = premium, muted = draft) requires a non-color signal (icon, text label) — colorblind operators exist in every Fortune-500 finance team and they read the entire ledger.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.18)` background, foreground text — a faint Oracle red wash.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.3)` — visible against the off-white canvas without competing with the brand-red CTAs.
+- **Scrollbar:** thin, navy-toned.
+
+## Exceptions
+None yet. When an intentional violation lands (e.g. a marketing surface that promotes `--gold-heritage` to a primary CTA for an enterprise-license renewal campaign, or a NetSuite-skinned surface that swaps `--primary` to NetSuite orange), add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time. Authored to provide the Oracle / NetSuite / Fusion Cloud / JD Edwards aesthetic — depth-layered panels, Redwood-red brand mark, ERP-grade density — that the Nvidia/IBM-leaning `enterprise-tech` direction doesn't cover.

package/themes/enterprise-cloud/tokens.ts

@@ -0,0 +1,179 @@
+import type { Direction } from "../schema";
+
+export const enterpriseCloud: Direction = {
+  name: "enterprise-cloud",
+  ethos:
+    "Oracle Redwood depth · NetSuite gravitas · cloud-database trust · Redwood-red brand mark · structured panel hierarchy",
+  references: [
+    { brand: "Oracle Redwood Design System", trait: "depth-layered surfaces, canonical Fusion Cloud panels" },
+    { brand: "Oracle Cloud Infrastructure", trait: "marketing surfaces, cloud-database trust" },
+    { brand: "Oracle Database", trait: "documentation gravitas, structured panel hierarchy" },
+    { brand: "NetSuite ERP", trait: "dense ERP grids, formal business surfaces" },
+    { brand: "JD Edwards", trait: "formal data-grid surfaces, legacy ERP rigor" },
+  ],
+  feel:
+    "Database-company gravitas. Layered panels with soft shadows (Redwood's 'depth' mechanic), " +
+    "Oracle's iconic brand red as the signal accent. Reads enterprise-formal — not flashy, not " +
+    "playful. Trusted-since-1977 energy.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["Source Sans Pro", "Helvetica", "system-ui", "-apple-system", "sans-serif"],
+      from: "Inter — closest open-source approximation to Oracle's historical Source Sans Pro / Helvetica voice",
+      googleFont: "Inter:wght@400;500;600;700",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["Source Sans Pro", "Helvetica", "system-ui", "-apple-system", "sans-serif"],
+      from: "Inter — same face as display, ERP-grade body rhythm",
+      googleFont: "Inter:wght@400;500;600",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "JetBrains Mono — SQL snippets, transaction ids, schema names",
+      googleFont: "JetBrains+Mono:wght@400;500",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "zero"',
+    h1ScaleClamp: "clamp(1.875rem, 3.75vw, 2.875rem)",
+    bodyBaseSize: "0.9375rem",
+    bodyLineHeight: "1.55",
+    },
+
+  colors: {
+    background: { hsl: "0 0% 99%", from: "off-white — Redwood canvas" },
+    foreground: { hsl: "220 30% 12%", from: "deep navy ink — Oracle text-primary" },
+    card: { hsl: "0 0% 100%", from: "Redwood surface-1 — top panel, pure white lift" },
+    popover: { hsl: "0 0% 100%", from: "Redwood surface-1 — popovers ride the top layer" },
+
+    primary: { hsl: "8 65% 47%", from: "Oracle Redwood red — Pantone 200-adjacent corporate brand mark" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on Oracle red" },
+
+    secondary: { hsl: "0 0% 96%", from: "Redwood surface-2 — recessed panel under surface-1" },
+    secondaryForeground: { hsl: "220 30% 12%", from: "deep navy ink on recessed surface" },
+    muted: { hsl: "0 0% 96%", from: "Redwood surface-2 — same as secondary" },
+    mutedForeground: { hsl: "220 12% 42%", from: "Oracle text-secondary — captions, meta, ERP eyebrows" },
+    accent: { hsl: "220 14% 94%", from: "hover surface — one tier deeper than surface-2" },
+    accentForeground: { hsl: "220 30% 12%", from: "deep navy ink on hover" },
+
+    border: { hsl: "220 14% 88%", from: "Redwood border-soft — structural hairline at panel edges" },
+    input: { hsl: "220 14% 88%", from: "same as border-soft — input chrome" },
+    ring: { hsl: "8 65% 47%", from: "Oracle Redwood red — focus ring on active states" },
+
+    destructive: { hsl: "354 70% 45%", from: "deeper crimson — ERP-destructive, distinct from brand red" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on destructive crimson" },
+
+    brand: {
+      "redwood-red": { hsl: "8 65% 47%", from: "Oracle Redwood red — alias for primary, corporate brand mark" },
+      "surface-1": { hsl: "0 0% 100%", from: "Redwood top panel — the highest elevation layer" },
+      "surface-2": { hsl: "0 0% 96%", from: "Redwood recessed panel — the layer under surface-1" },
+      "border-soft": { hsl: "220 14% 88%", from: "Redwood structural hairline — panel edges, table rows" },
+      "accent-teal": { hsl: "190 50% 35%", from: "Redwood secondary accent — info chips, secondary CTAs" },
+      "gold-heritage": { hsl: "38 60% 50%", from: "premium-tier emphasis — Oracle heritage gold, ERP tier badges" },
+      "ink-navy": { hsl: "220 30% 12%", from: "Oracle text-primary — alias for foreground" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64],
+    containerMax: "max-w-screen-2xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-16 pb-12 lg:pt-24 lg:pb-16",
+      default: "py-12 lg:py-16",
+      tight: "py-8 lg:py-10",
+    },
+  },
+
+  radius: {
+    base: "0.375rem",
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-redwood-1":
+        "0 1px 2px hsl(220 30% 12% / 0.06), 0 1px 1px hsl(220 30% 12% / 0.04)",
+      "shadow-redwood-2":
+        "0 2px 4px hsl(220 30% 12% / 0.06), 0 4px 8px hsl(220 30% 12% / 0.08)",
+      "shadow-redwood-3":
+        "0 6px 12px hsl(220 30% 12% / 0.08), 0 12px 24px hsl(220 30% 12% / 0.12)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 320,
+      loop: 1600,
+      ambient: 0,
+    },
+    keyframes: {
+      "panel-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(4px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 320,
+        iteration: "once",
+        purpose: "320ms entry for panels and cards — deliberate, business-paced layer reveal",
+      },
+      "panel-exit": {
+        css:
+          "from { opacity: 1; transform: translateY(0); }\n" +
+          "to { opacity: 0; transform: translateY(2px); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "200ms exit for panels — faster than entry, never lingers",
+      },
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 240,
+        iteration: "once",
+        purpose: "240ms fade reveal for menus, popovers, ERP grid rows on load",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Primary = solid Oracle Redwood red fill, white text, 6px radius, weight 600 (bg-primary text-primary-foreground rounded-md font-semibold). " +
+      "Secondary = ghost with subtle border-soft (border bg-transparent text-foreground). " +
+      "Tertiary = Redwood-red text-link (text-primary underline-offset-2 hover:underline). " +
+      "Sizes: small (h-8 px-3 text-xs) and default (h-9 px-4 text-sm).",
+    card:
+      "Modest 6px corners (rounded-md), 1px border-soft, bg-card (surface-1), shadow-redwood-1 by default. " +
+      "Padding p-5 lg:p-6. Header row uses bottom border-soft. " +
+      "Modal-layer panels promote to shadow-redwood-3. ERP-grade density inside; grids embed inline.",
+    input:
+      "Compact (h-9 text-sm), 1px border-soft, bg-background, rounded-md. " +
+      "Focus uses 2px Oracle-red ring at 30% opacity. Label above; helper below in mutedForeground. " +
+      "Inline validation in destructive crimson — distinct hue from brand red.",
+    cta:
+      "Primary = solid Oracle red button. Secondary = ghost with border-soft. " +
+      "Tertiary = Redwood-red inline text-link. One primary CTA per surface; " +
+      "this is enterprise formal, not conversion theater.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.18)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.3)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/enterprise-tech/THEME.md

@@ -0,0 +1,167 @@
+# Enterprise Tech
+
+> Institutional-brutalist data-platform register — deep charcoal canvas at
+
+**Slug:** `enterprise-tech` — **Surface:** web — **Density:** dense
+
+## 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.
+
+
+## Signature move
+
+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.
+
+## Palette
+
+- **bg:** `#0f0f11`
+- **surface:** `#1a1a1c`
+- **ink:** `#f2f2f0`
+- **accent:** `#00c8ff`
+
+## 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)
+
+## 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.
+
+
+## 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)
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- 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 (inherited + theme-specific)
+
+- 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/audit.log.jsonl

@@ -0,0 +1 @@
+{"slug":"enterprise-tech","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-05T04:49:21.319Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-05T04:49:21.336Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-05T04:49:52.593Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-05T04:50:06.038Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-05T04:49:21.319Z"}