@stylecrib/cli 0.3.1 → 0.3.3

package/themes/arc-stack/theme.yml

@@ -0,0 +1,153 @@
+# Arc Stack — Family D, Contemporary Web & Award Trends.
+#
+# NEW-BASE CANDIDATE for BESPOKE_THEME_SYSTEM.md, adjacent to Base 33
+# Dark Premium. Base 33 is quiet dark-mode SaaS (layered dark surfaces
+# + one confident accent + hairline borders). Arc Stack is LOUD dark-
+# mode infrastructure marketing — the accent flips from "restrained
+# hairline" to "electric radial glow behind the hero display type" —
+# plus alternating dark/white full-bleed inverted bands, monumental
+# TWK Everett display sans, and a bento feature grid at the bottom.
+# Same DNA (dark canvas + one accent + crisp sans) but different
+# volume level.
+#
+# Authored from Matt's provided design brief (2026-07-04, sui.io
+# reference). Placeholder demonstration brand is a fictional Web3 /
+# infrastructure protocol called "STRATA" — domain-agnostic mockup
+# that could be re-skinned to any blockchain protocol, foundation
+# model, dev-tools infra launch, or premium SaaS relaunch. The
+# register expresses "electric infrastructure" through TYPE + GLOW
+# + inverted BANDS rather than decoration.
+#
+# Seventh theme via the v2 harness. Second Family D theme (after
+# nature-distilled, bento-modular, kinetic-headline in that family;
+# raw-concrete Family A; ember-poster Family C; overland-broadside
+# Family E). Third NEW BASE (after ember-poster, overland-broadside).
+#
+# Alternative slugs considered: voltage-signal, plasma-dark, arc-signal,
+# spectrum-signal, stack-signal. Arc-stack picked because "arc"
+# captures the electric-glow-behind-display signature and "stack"
+# reads as the full-stack infrastructure register that these sites
+# always sell.
+
+name: Arc Stack
+concept: Electric infrastructure register — dark charcoal canvas with a radial electric-blue glow behind the hero display type, monumental TWK Everett sans at broadside scale, alternating dark/white full-bleed inverted bands, small inline glyph marks embedded inside key phrases in the headline copy, and a bento feature grid on the closing sections.
+influence: Web3 protocol relaunches (the Sui / Aptos / Solana marketing register when they refuse the tech-bro purple gradient and instead reach for a monumental dark sans + one saturated signal accent). Foundation-model marketing (the Anthropic / Modal / Baseten register at their most confident dark-mode). Vercel/Linear at their most electric. Bloomberg terminal turned into a launch page.
+
+family: D
+base_number: 33
+base_note: New-base candidate adjacent to Base 33 Dark Premium. Base 33 is Söhne/Hanken-grade quiet dark SaaS with a single restrained accent (Radix violet). Arc Stack keeps the dark ground but flips the accent from "confident hairline" to "radial glow behind the display type" and adds full-bleed white inverted bands as structural interruptions. Same DNA (dark canvas, layered surfaces, one accent, crisp sans), louder volume, more marketing-forward.
+
+render_url: http://localhost:5173/themes/arc-stack
+
+surface: web
+
+typography:
+  display: TWK Everett (paid, from TypeMates) or Inter Display / General Sans as broader-market fallback — 400/500/700 weight, mixed case, letter-spacing -0.033em at hero scale (-5.85px at 176px). At scale — 176px monumental hero, 96px section-headline, 78px inverted-band-headline, 60px h3, 21px lead body. TWK Everett is the reference face (its condensed-caps proportions + tight tracking is the exact register); Inter Display is the safest free approximation with similar humanist proportions.
+  body: TWK Everett same family — 400 weight, mixed-case, line-height 1.4, 16-18px body copy. Small captions get 13-14px 500-weight. This theme's discipline is ONE type family across display + body (matches the reference), not display + body split.
+  mono: TWK Everett Mono — narrowly scoped to numbered index labels (01 02 03…), spec-callouts, and the money counter. NEVER used for section eyebrows, corner tags, metadata rows, or bylines (those are universal-slop-blocklist hits regardless of face).
+  scale: 1.333 (perfect fourth — deliberately wide contrast so the monumental display shouts on the dark canvas and the body settles into calm captioning)
+
+palette:
+  bg: "#222529"
+  surface: "#131518"
+  ink: "#F4F5F7"
+  accent: "#298DFF"       # electric signal blue — the radial glow behind hero + primary button fills, small icons inside key phrases
+  secondary: "#4DA2FF"    # lighter signal blue — for hover states and secondary accents
+  signal: "#FF3D3D"       # alert red — used for negation indicators, critical highlights ONLY, never decoratively
+  success: "#219653"      # trust green — checkmarks on feature-list rows, verified indicators
+  mute: "#6C7584"         # secondary text, muted labels
+
+density: balanced
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Radial hero-glow entry — the electric-blue radial gradient behind the H1 fades in from opacity 0 → 0.85 over 900ms cubic-bezier(0.16,1,0.3,1) on first paint, then a slow 8s pulse loop keeps it breathing (opacity 0.75 ↔ 0.95).
+  2. Hero H1 stagger reveal — each word of the monumental headline slides in from translateY(24px) + opacity 0, 100ms stagger per word, 700ms cubic-bezier per word.
+  3. Highlighted-phrase glyph pop — the inline glyph marks (e.g., a small blue diamond next to "electric blocks") pop in 400ms after their surrounding word settles, scale(0.6 → 1) + fade.
+  4. Inverted-band cross-fade transition — as the user scrolls from dark canvas into a white inverted band, the background transitions via a scroll-linked gradient (background-color transition over 400ms) so the shift reads as intentional, not jarring.
+  5. Bento tile hover-lift — each dark bento tile scales to 1.02 + adds a subtle accent-blue inset border on hover, 220ms cubic-bezier(0.65,0,0.35,1).
+  6. Money-counter roll-up — the big TVL/aggregate figure ("$442,826,452" register) rolls up from 0 → target on first-view via requestAnimationFrame, 2200ms ease-out, only fires once per session.
+  7. Start-button color-shift — the four colored pill labels (Start building / Start coding / Start earning / Start connecting) each have their own accent color; hover flips the background from transparent to the accent with a 200ms transition.
+  8. prefers-reduced-motion: reduce — all keyframe animations disabled, glow starts at final opacity (no pulse), stagger removes, money counter jumps to final value, hover transitions become instant. State changes still fire (they're content, not decoration).
+
+  Customer installs these as dependencies for the deeper motion tier:
+  - Lenis — smooth inertial scroll (the alternating dark/white bands need inertial scroll to feel considered).
+  - GSAP ScrollTrigger — the money-counter roll-up + inverted-band cross-fade + hero stagger benefit from orchestrated timelines.
+  - Custom branded preloader with the arc-blue radial glow expanding to fill the viewport, then the H1 revealing from underneath.
+
+  Motion character: technical, precise, never bouncy. Custom cubic-bezier(0.51,0,0.08,1) for reveal easings (the reference's own cubic-default), 375ms fast / 525ms default durations (matches the reference's --duration-fast / --duration-default). All motion serves the "electric infrastructure" tone — nothing quick, nothing cute, nothing decorative.
+
+signature: |
+  Monumental TWK Everett sans at 176px hero, letter-spacing crushed
+  to -0.033em, on a dark charcoal canvas (#222529). BEHIND the hero
+  H1 sits a huge radial electric-blue glow (#298DFF at ~35% opacity
+  over a 1400px radius), softly pulsing — the "arc" that gives the
+  theme its name. Inline glyph marks embed INSIDE key phrases in the
+  headline body copy at highlighted spans — each mark is a bespoke
+  inline SVG shape (a small filled square, a small filled circle, a
+  small plus-sign cross) in the accent color, sized 0.7em, offset
+  0.15em above the baseline. Full-bleed white inverted bands break
+  the dark rhythm every 2-3 sections, carrying feature-list rows
+  (small SVG icon + label + body copy + trust-green checkmark) or
+  side-by-side comparison tables. Bento-style feature grid on the
+  closing sections uses dark cards with subtle #131518 surface fill
+  and an accent-blue hover state. Four colored pill labels ("Start
+  building" / "Start coding" / "Start earning" / "Start connecting")
+  each carry their own signal hue so the CTAs read as segmented
+  paths, not a hero-button repeat. Money counter using TWK Everett
+  Mono 700 at 96px shows a fictional aggregate value ("$442,826,452"
+  register) rolling up on scroll into view. Border-radius is 0
+  everywhere — no rounded cards, buttons, inputs, media. Brand
+  character sits in the display type, the glow, the inline SVG glyph
+  marks, and the disciplined dark/white banded rhythm — no
+  mono-caps eyebrows, no dot-metadata rows, no small corner tags, no
+  three-column feature grids as a fallback.
+
+imagery: |
+  Full-bleed abstract product/infrastructure imagery on the dark
+  canvas: vertical light-blue stripe backdrops for one section (like
+  a spectrum readout), abstract dashboard captures on the inverted
+  white bands, small colored circular avatar-monogram ornaments on
+  testimonial rows, tiny SVG icons inline inside headline text. NO
+  purple/indigo gradient blobs (that's the tech-bro slop this
+  register explicitly refuses), NO glassmorphism, NO grainy
+  photography — this is an INFRASTRUCTURE marketing site, not a
+  DTC editorial. Photography where it appears is abstract product
+  screenshots or blueprints, always full-bleed, never inside framed
+  cards with drop-shadow.
+
+best_for:
+  - Web3 protocol relaunches / mainnet marketing pages
+  - Foundation-model / AI-platform launch pages (the Anthropic / Modal / Baseten register at their most electric)
+  - Dev-tools infrastructure (Vercel-tier launch pages that trade on monumental confidence)
+  - Cryptocurrency exchanges + wallet marketing
+  - B2B fintech / SaaS wanting an electric-signal register instead of muted-navy
+  - Investor / TVL / metrics-showcase marketing pages where a big animated number IS the argument
+
+avoid:
+  - "Border-radius greater than 0px anywhere on the page — sharp corners are core to the identity"
+  - "Rounded pill buttons or fully-rounded CTAs — buttons are sharp-cornered with 0 radius, that's it"
+  - "Tech-bro purple gradient (#8B5CF6 → #6366F1 blob backgrounds) — this register EXPLICITLY refuses that. The glow is single-hue electric blue, not multi-stop violet."
+  - "Serif or condensed display type — display face must be humanist sans (TWK Everett or Inter Display), never Anton, never Fraunces"
+  - "Multiple accent colors flooding the composition — glow is ONE signal color, red is ONLY for alerts/negations, green is ONLY for trust/checkmarks. No accent lives outside its role."
+  - "Warm color palettes — this register is COOL and ELECTRIC (charcoal, ink, signal-blue), never espresso/cream/amber flooding the canvas"
+  - "Corporate polish — no shadow-md cards, no soft glow beyond the hero, no gradient hero backdrop except the single radial arc-glow"
+  - "Three-tier pricing cards or feature-pillar grids — the composition refuses SaaS defaults structurally, information laid out as bento tiles and full-bleed bands, not card grids"
+  - "Center-aligned everything — hero is left-weighted and asymmetric, the glow sits behind the display type not the whole page"
+  - "Grain overlay on the dark canvas as a decorative treatment — the composition is CRISP, not textured. Grain is banned."
+  - "Purple-blue duotone gradient anywhere — the arc-glow is single-hue, never a two-stop mesh"
+  - "Emoji or decorative unicode marks — inline glyphs are bespoke SVG shapes only (small diamonds, circles, plus-signs in accent color)"
+  - "Auto-advancing hero sliders / cycling headline words / horizontal ticker bars — none of these ship on this theme"
+
+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
+  - "arc-glow-as-decoration (the radial electric-blue glow is a signature ONCE — hero only. Applied to every section it becomes ambient-glow slop and the register dies.)"
+  - "inverted-band-plus-warm-palette (the white inverted bands only work against COOL charcoal — swapping the canvas to espresso/cream breaks the register into generic-Vercel dark-mode)"
+  - "bento-plus-shadow (dark bento tiles must sit flat on the canvas with a subtle surface fill difference — the moment you add shadow-lg or a rounded border it collapses into stock-bento SaaS default)"
+  - "signal-flood (electric-blue is a signal color — used sparingly for the glow, CTA fills, hover states, and small inline glyph marks only. Flooding it across large surfaces collapses the register into tech-bro-gradient slop.)"

package/themes/arc-stack/tokens.ts

@@ -0,0 +1,29 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "arc-stack",
+  family: "D",
+  base: "33",
+  palette: {
+    "bg": "#222529",
+    "surface": "#131518",
+    "ink": "#F4F5F7",
+    "accent": "#298DFF",
+    "secondary": "#4DA2FF",
+    "signal": "#FF3D3D",
+    "success": "#219653",
+    "mute": "#6C7584"
+  },
+  typography: {
+    "display": "TWK Everett (paid, from TypeMates) or Inter Display / General Sans as broader-market fallback — 400/500/700 weight, mixed case, letter-spacing -0.033em at hero scale (-5.85px at 176px). At scale — 176px monumental hero, 96px section-headline, 78px inverted-band-headline, 60px h3, 21px lead body. TWK Everett is the reference face (its condensed-caps proportions + tight tracking is the exact register); Inter Display is the safest free approximation with similar humanist proportions.",
+    "body": "TWK Everett same family — 400 weight, mixed-case, line-height 1.4, 16-18px body copy. Small captions get 13-14px 500-weight. This theme's discipline is ONE type family across display + body (matches the reference), not display + body split.",
+    "mono": "TWK Everett Mono — narrowly scoped to numbered index labels (01 02 03…), spec-callouts, and the money counter. NEVER used for section eyebrows, corner tags, metadata rows, or bylines (those are universal-slop-blocklist hits regardless of face).",
+    "scale": "1.333 (perfect fourth — deliberately wide contrast so the monumental display shouts on the dark canvas and the body settles into calm captioning)"
+  },
+  surface: "web",
+  density: "balanced",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Radial hero-glow entry — the electric-blue radial gradient behind the H1 fades in from opacity 0 → 0.85 over 900ms cubic-bezier(0.16,1,0.3,1) on first paint, then a slow 8s pulse loop keeps it breathing (opacity 0.75 ↔ 0.95).\n2. Hero H1 stagger reveal — each word of the monumental headline slides in from translateY(24px) + opacity 0, 100ms stagger per word, 700ms cubic-bezier per word.\n3. Highlighted-phrase glyph pop — the inline glyph marks (e.g., a small blue diamond next to \"electric blocks\") pop in 400ms after their surrounding word settles, scale(0.6 → 1) + fade.\n4. Inverted-band cross-fade transition — as the user scrolls from dark canvas into a white inverted band, the background transitions via a scroll-linked gradient (background-color transition over 400ms) so the shift reads as intentional, not jarring.\n5. Bento tile hover-lift — each dark bento tile scales to 1.02 + adds a subtle accent-blue inset border on hover, 220ms cubic-bezier(0.65,0,0.35,1).\n6. Money-counter roll-up — the big TVL/aggregate figure (\"$442,826,452\" register) rolls up from 0 → target on first-view via requestAnimationFrame, 2200ms ease-out, only fires once per session.\n7. Start-button color-shift — the four colored pill labels (Start building / Start coding / Start earning / Start connecting) each have their own accent color; hover flips the background from transparent to the accent with a 200ms transition.\n8. prefers-reduced-motion: reduce — all keyframe animations disabled, glow starts at final opacity (no pulse), stagger removes, money counter jumps to final value, hover transitions become instant. State changes still fire (they're content, not decoration).\n\nCustomer installs these as dependencies for the deeper motion tier:\n- Lenis — smooth inertial scroll (the alternating dark/white bands need inertial scroll to feel considered).\n- GSAP ScrollTrigger — the money-counter roll-up + inverted-band cross-fade + hero stagger benefit from orchestrated timelines.\n- Custom branded preloader with the arc-blue radial glow expanding to fill the viewport, then the H1 revealing from underneath.\n\nMotion character: technical, precise, never bouncy. Custom cubic-bezier(0.51,0,0.08,1) for reveal easings (the reference's own cubic-default), 375ms fast / 525ms default durations (matches the reference's --duration-fast / --duration-default). All motion serves the \"electric infrastructure\" tone — nothing quick, nothing cute, nothing decorative.\n",
+  signature: "Monumental TWK Everett sans at 176px hero, letter-spacing crushed\nto -0.033em, on a dark charcoal canvas (#222529). BEHIND the hero\nH1 sits a huge radial electric-blue glow (#298DFF at ~35% opacity\nover a 1400px radius), softly pulsing — the \"arc\" that gives the\ntheme its name. Inline glyph marks embed INSIDE key phrases in the\nheadline body copy at highlighted spans — each mark is a bespoke\ninline SVG shape (a small filled square, a small filled circle, a\nsmall plus-sign cross) in the accent color, sized 0.7em, offset\n0.15em above the baseline. Full-bleed white inverted bands break\nthe dark rhythm every 2-3 sections, carrying feature-list rows\n(small SVG icon + label + body copy + trust-green checkmark) or\nside-by-side comparison tables. Bento-style feature grid on the\nclosing sections uses dark cards with subtle #131518 surface fill\nand an accent-blue hover state. Four colored pill labels (\"Start\nbuilding\" / \"Start coding\" / \"Start earning\" / \"Start connecting\")\neach carry their own signal hue so the CTAs read as segmented\npaths, not a hero-button repeat. Money counter using TWK Everett\nMono 700 at 96px shows a fictional aggregate value (\"$442,826,452\"\nregister) rolling up on scroll into view. Border-radius is 0\neverywhere — no rounded cards, buttons, inputs, media. Brand\ncharacter sits in the display type, the glow, the inline SVG glyph\nmarks, and the disciplined dark/white banded rhythm — no\nmono-caps eyebrows, no dot-metadata rows, no small corner tags, no\nthree-column feature grids as a fallback.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/architectural/THEME.md

@@ -0,0 +1,102 @@
+# Design Direction — Architectural
+
+## Ethos
+Dezeen monumental photography · Architectural Digest sans+serif pairing · Vitra furniture catalog · Tadao Ando concrete restraint · Kengo Kuma natural materials
+
+## Feel
+Monumental architectural photography is the lead. Generous whitespace that signals scale. Thin sans-serif display paired with serif body — the AD paired-type rhythm. A single deep restrained accent (concrete blue or warm wood brown). Reads like an AD photo essay — quiet but expensive.
+
+## Reference brands
+- **Dezeen** → architecture-magazine layout; monumental photography. One building, full bleed, dramatic perspective.
+- **Architectural Digest** → sans + serif pairing; luxe but restrained. Thin display sans over serif body is the canonical AD register.
+- **Vitra** → furniture catalog precision. Tracked-uppercase metadata, mono issue numbers, hairline rules.
+- **Tadao Ando** → concrete brutalism — elegant, not raw. The shadow side of the page.
+- **Kengo Kuma** → natural wood and stone materiality. The warm side — cedar, paper, light.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand origin.
+
+Surface stack is **warm architectural paper** (background) → white (card) → warm paper tiered deeper (secondary/muted/accent). Depth comes from hairline rules at `foreground / 0.18`, never from fill differentiation, never from shadows.
+
+Brand tokens: `--concrete` (Tadao Ando exposed-formwork gray), `--wood-warm` (Kengo Kuma cedar), `--sky-aalto` (Alvar Aalto luminous sky-blue), `--paper-warm` (alias of the background). Primary is `195 30% 28%` — a deep restrained Aalto-glass teal-blue, never a saturated brand color.
+
+## Typography
+- **Display:** Inter at **thin weights (300, 400)** at large sizes — Söhne-feel architectural sans. The AD/Dezeen display register. Tracking `-0.02em`; Inter at thin weights and monumental sizes wants tight tracking.
+- **Body:** EB Garamond serif, **17px**, line-height **1.75**. The AD convention: thin sans display over serif body. Generous, photo-essay pacing.
+- **Mono:** JetBrains Mono. Used **only small** — issue numbers, project credits, Vitra-catalog metadata, captions. Never for body, never for headings.
+
+Hierarchy is pair-driven: thin Inter for display + EB Garamond for body, with tracked-uppercase Inter small caps for eyebrows and labels. H1 uses `clamp(3rem, 7vw, 6rem)` — monumental, Dezeen hero scale. Font features: `"kern", "tnum", "ss01"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-16` — 1152px, monumental photography needs room.
+- **Section padding tiers (doubled vs editorial):**
+  - Hero: `pt-40 pb-32 lg:pt-64 lg:pb-48`
+  - Default: `py-32 lg:py-64`
+  - Tight: `py-24 lg:py-40`
+- **Allowed scale values:** 4 8 12 16 24 32 48 64 96 128 160 192 256. The high end (160/192/256) is intentional — architectural whitespace signals scale.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. White and pure black are forbidden — `--paper-warm` (`35 12% 96%`) and the deep concrete-shadow ink (`220 14% 14%`) replace them.
+
+The palette is restraint and material:
+- **Concrete** — Tadao Ando exposed-formwork gray, the structural neutral.
+- **Wood-warm** — Kengo Kuma cedar, the warm material counterpoint.
+- **Sky-aalto** — Alvar Aalto luminous sky-blue, used sparingly as an accent moment.
+- **Primary teal-blue** — Aalto window-glass; reserved for primary action and focus, never decorative.
+
+Saturation never exceeds what would read in a printed Vitra catalog under warm gallery light.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Pills are disallowed (`pillsAllowed: false`) — pills read web-app, not architectural-magazine. Architecture is right angles; the page reflects the buildings.
+
+## Shadows
+**Minimal.** Single utility: `.hairline-deep` — `0 1px 0 0 hsl(var(--foreground) / 0.18)`. A 1px architectural divider line at 18% opacity. No drop shadows. No glows. Depth comes from the hairline and from whitespace.
+
+## Motion
+Two keyframes, both very slow:
+- **`slow-fade`** — opacity + 16px translate, **1500ms**. The standard entrance. Architectural pacing; the page settles, it does not perform.
+- **`ken-burns-monumental`** — slow scale from `1.0` to `1.08` over **40 seconds**, infinite. Reserved for the hero architectural photograph — Dezeen-style monumental presence, barely perceptible motion.
+
+No marquee, no parallax, no chip-bounce. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — `ken-burns-monumental` is disabled entirely under reduced motion.
+
+## Component patterns
+- **Buttons:** the default primary CTA is an **uppercase tracked text-link with a hairline underline** (foreground color, letter-spacing 0.1em). Solid-filled rectangular buttons are reserved for **one 'Visit Project' CTA per page** — thin foreground bg + paper-warm text. No rounded corners, no shadows, no hover lift. Tracked-uppercase reads AD/Vitra; rounded reads consumer.
+- **Cards:** no card chrome on photography — the image sits directly on the warm paper page, caption in mono below. When a card is needed, hairline top + hairline bottom rule at `foreground / 0.18`, no fill differentiation. Internal padding `p-12 lg:p-16`. Title in EB Garamond, eyebrow in tracked-uppercase Inter.
+- **Inputs:** border-bottom only (1px `--border`). No full box. Label above in tracked-uppercase Inter small caps. Placeholder italic in muted-foreground.
+- **CTAs:** default CTA is uppercase tracked text-link with hairline underline appearing on hover. The single 'Visit Project' solid-fill button per page is the **one** marketing moment — never repeated. There is no second.
+
+## Recommended rich media
+
+The page is led by **monumental architectural photography**: a single building, dramatic perspective, natural light. Supporting imagery includes interior tableaus, material close-ups (concrete texture, wood grain, glass reflection, brushed metal), and drawing-style line illustrations of floor plans or axonometric projections.
+
+**AI tool recommendations.**
+- **Midjourney / Flux** — prompts like *"Dezeen architectural photography, Tadao Ando concrete building, single subject, dramatic perspective, natural light, 35mm Hasselblad"*; for interiors, *"Architectural Digest interior tableau, Kengo Kuma natural materials, warm daylight, large-format film"*; for material studies, *"close-up concrete formwork texture, soft shadow, Vitra catalog still life"*.
+- **Recraft** — for line-drawing floor plans, axonometric projections, and Vitra-style technical illustration. Single-weight black line on warm paper.
+
+**Aspect ratios.** **4:5 portrait** (architectural-magazine standard, Dezeen feature) and **16:9** for the monumental hero photograph. Never 1:1 (social-media aesthetic). Never 3:2 casual.
+
+**Color in imagery.** Natural light, warm-cool balance, restrained saturation. Concrete grays, cedar browns, sky teals — never neon, never high-key consumer color. Black-and-white architectural photography is welcome.
+
+**Video.** Used sparingly and only for hero architecture — a single 40s slow pan or `ken-burns-monumental` loop over a still. Never autoplay with sound. ≤8 MB AV1 or H.265.
+
+**Captions are mandatory.** Project name, architect, year, location — in JetBrains Mono small. *"Church of the Light · Tadao Ando · 1989 · Ibaraki, Osaka"* style attribution always.
+
+**Performance.** Hero image ≤200 KB AVIF at 2000w; inline figures ≤100 KB. LCP under 2.5s — if it slips, the photograph is too large, not the framework.
+
+**Avoid.** Action photography. Decorative ornament. Gradient meshes. Social-media energy. Stock photography. AI-photorealistic renders with uncanny perspective. Glassmorphism. Lens flare. Anything that reads more SaaS than Vitra showroom. **Restraint is the direction** — when in doubt, remove.
+
+**Accessibility.** Long-form alt-text — describe the building, materials, light, perspective as if for a blind reader. *"A concrete church interior with a cross-shaped opening in the rear wall admitting a beam of natural sunlight, photographed in late afternoon."* The bar is editorial.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they are established.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.20)` background, foreground text — Aalto-teal highlight on concrete ink.
+- **Focus ring:** `1px solid hsl(var(--ring))`. Thin and quiet — architectural precision, never decorative.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason. The Director's consistency pass lists all exceptions for human review.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/architectural/tokens.ts

@@ -0,0 +1,159 @@
+import type { Direction } from "../schema";
+
+export const architectural: Direction = {
+  name: "architectural",
+  ethos:
+    "Dezeen monumental photography · Architectural Digest sans+serif pairing · Vitra furniture catalog · Tadao Ando concrete restraint · Kengo Kuma natural materials",
+  references: [
+    { brand: "Dezeen", trait: "architecture-magazine layout, monumental photography" },
+    { brand: "Architectural Digest", trait: "sans + serif pairing, luxe but restrained" },
+    { brand: "Vitra", trait: "furniture catalog precision" },
+    { brand: "Tadao Ando", trait: "concrete brutalism — elegant, not raw" },
+    { brand: "Kengo Kuma", trait: "natural wood and stone materiality" },
+  ],
+  feel:
+    "Monumental architectural photography is the lead. Generous whitespace that " +
+    "signals scale. Thin sans-serif display paired with serif body — the AD " +
+    "paired-type rhythm. A single deep restrained accent (concrete blue or warm " +
+    "wood brown). Reads like an AD photo essay — quiet but expensive.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["Söhne", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Inter at thin weights — Söhne-feel architectural sans, AD/Dezeen display register",
+      googleFont: "Inter",
+      weights: [300, 400, 600, 700],
+    },
+    body: {
+      family: "EB Garamond",
+      fallback: ["Iowan Old Style", "Apple Garamond", "Garamond", "Georgia", "serif"],
+      from: "EB Garamond — serif body paired with thin sans display, the Architectural Digest convention",
+      googleFont: "EB+Garamond:wght@400;500;600",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "JetBrains Mono — small only; issue numbers, project credits, Vitra catalog metadata",
+      googleFont: "JetBrains+Mono",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",        // Inter at thin weights and large sizes wants tight tracking
+    bodyTracking: "0",                 // EB Garamond body — neutral, never decorative
+    fontFeatureSettings: '"kern", "tnum", "ss01"',
+    h1ScaleClamp: "clamp(3rem, 7vw, 6rem)",  // monumental — Dezeen hero scale
+    bodyBaseSize: "1.0625rem",         // 17px serif body — readable AD-style prose
+    bodyLineHeight: "1.75",            // generous, photo-essay pacing
+  },
+
+  colors: {
+    background: { hsl: "35 12% 96%", from: "warm white architectural paper — Vitra catalog stock" },
+    foreground: { hsl: "220 14% 14%", from: "deep ink — Tadao Ando concrete shadow" },
+    card: { hsl: "0 0% 100%", from: "card surface — sits cleanly on the warm paper bg" },
+    popover: { hsl: "0 0% 100%", from: "same as card; depth from hairline only" },
+    primary: { hsl: "195 30% 28%", from: "deep restrained teal-blue — Aalto window glass" },
+    primaryForeground: { hsl: "35 12% 96%", from: "warm paper on Aalto teal" },
+    secondary: { hsl: "35 10% 92%", from: "warm paper, one tier deeper — Kengo Kuma natural-stone tone" },
+    secondaryForeground: { hsl: "220 14% 14%", from: "concrete ink on warm paper" },
+    muted: { hsl: "35 10% 92%", from: "same as secondary — differentiation by usage, not color" },
+    mutedForeground: { hsl: "220 10% 38%", from: "Dezeen secondary text — slate ink for credits and captions" },
+    accent: { hsl: "35 14% 89%", from: "warm paper, deepest tier — hover surface only" },
+    accentForeground: { hsl: "220 14% 14%", from: "concrete ink on hover" },
+    border: { hsl: "220 12% 82%", from: "Vitra hairline rule — barely visible architectural division line" },
+    input: { hsl: "220 12% 82%", from: "same as border — inputs are hairlines in the plan" },
+    ring: { hsl: "195 30% 28%", from: "primary Aalto-glass teal — used for focus only" },
+    destructive: { hsl: "8 55% 42%", from: "restrained terracotta alert — Vitra catalog warning, not screaming red" },
+    destructiveForeground: { hsl: "35 12% 96%", from: "warm paper on terracotta" },
+    brand: {
+      concrete: { hsl: "210 8% 65%", from: "Tadao Ando concrete gray — exposed formwork, the canonical material" },
+      "wood-warm": { hsl: "28 32% 42%", from: "Kengo Kuma cedar — the warm natural-wood counterpoint" },
+      "sky-aalto": { hsl: "200 50% 80%", from: "Alvar Aalto sky-blue accent — luminous, restrained, used sparingly" },
+      "paper-warm": { hsl: "35 12% 96%", from: "warm architectural paper — alias of the background" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160, 192, 256],   // architectural whitespace — doubled vs editorial
+    containerMax: "max-w-6xl",         // 1152px — monumental photography needs room
+    containerPadding: "px-6 lg:px-16",
+    sectionPadding: {
+      hero: "pt-40 pb-32 lg:pt-64 lg:pb-48",        // doubled architectural scale
+      default: "py-32 lg:py-64",                    // generous AD photo-essay pacing
+      tight: "py-24 lg:py-40",
+    },
+  },
+
+  radius: {
+    base: "0",                         // architectural precision — never rounded
+    pillsAllowed: false,               // pills read web-app, not architectural-magazine
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-deep":
+        "0 1px 0 0 hsl(var(--foreground) / 0.18)",   // architectural divider line — 1px in foreground at 18% opacity
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1500,                     // very slow — architectural pacing
+      loop: 8000,
+      ambient: 40000,                   // 40s ken-burns on hero photography
+    },
+    keyframes: {
+      "slow-fade": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1500,
+        iteration: "once",
+        purpose:
+          "the standard entrance — 1.5s reveal at architectural pace. No bounce, no flash; the page settles.",
+      },
+      "ken-burns-monumental": {
+        css:
+          "from { transform: scale(1.0); }\n" +
+          "to { transform: scale(1.08); }",
+        defaultDuration: 40000,
+        iteration: "infinite",
+        purpose:
+          "40s slow zoom on hero architectural photographs — Dezeen-style monumental presence, barely perceptible motion.",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Primary CTA is an uppercase tracked text-link with a hairline underline (foreground color, letter-spacing 0.1em). " +
+      "Solid-filled rectangular buttons are reserved for one 'Visit Project' CTA per page — thin foreground bg + paper text. " +
+      "No rounded corners, no shadows, no hover lift. Tracked-uppercase reads AD/Vitra; rounded reads consumer.",
+    card:
+      "No card chrome on photography — image sits directly on the warm paper page, caption in mono below. " +
+      "When a card is needed, hairline top rule + hairline bottom rule in foreground/18, no fill differentiation. " +
+      "Internal padding generous (p-12 lg:p-16). Title in EB Garamond, eyebrow in tracked-uppercase Inter.",
+    input:
+      "Border-bottom only (1px border token). No full box. Label sits above in tracked-uppercase Inter small caps. " +
+      "Placeholder in muted-foreground italic.",
+    cta:
+      "Default CTA is uppercase tracked text-link with hairline underline appearing on hover. " +
+      "The single 'Visit Project' solid-fill button per page uses foreground bg + paper-warm text — never repeated.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.20)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/atelier-radiance/THEME.md

@@ -0,0 +1,93 @@
+# Atelier Radiance
+
+> Boutique creative agency register — dark canvas hero broken by warm-cream and sage-green inverted bands, high-contrast Didone-style serif display at monumental scale, a recurring sunburst SVG ornament (small, bespoke, 8-pointed radial star) that appears 6+ times across the composition as the studio's identity mark, and a single burgundy accent reserved for CTAs only.
+
+**Slug:** `atelier-radiance` — **Surface:** web — **Density:** balanced
+
+## Influence
+
+Rodeo-Drive-adjacent boutique creative agencies — high-end small studios that trade on refinement + editorial polish (the register held by boutique branding shops like Motto, Base Design at their most luxurious, and independent NY / LA studios that photograph their work in editorial contexts). Also luxury print advertising (the discipline of Bulgari / Cartier campaign layouts translated to a working studio page). Distinct from case-panel's showcase-agency register — Atelier Radiance is smaller, warmer, more editorial.
+
+
+## Signature move
+
+A recurring SUNBURST SVG ornament — 8-pointed radial star with alternating long and short rays, drawn as a bespoke inline SVG path (not a font, not an emoji, not stock iconography) — repeats 6+ times across the composition as the studio's identity mark. It appears at monumental scale (120px+ burgundy) in the hero next to the wordmark, at medium scale (48px cream) at the top of the "What we do" band, at small scale (28px cream) on each of the six service tiles, and at tiny scale (16px sage) on the testimonial band. Big serif Didone-style DISPLAY WORDMARK ("SOLSTICE") at 100-140px on the dark hero canvas, letter-spacing normal, high stroke-contrast — thin verticals meeting thick horizontals so the wordmark reads as a luxury print advertising headline. A STAT QUAD immediately below the wordmark ("12+ YEARS / 20+ BRANDS / 100% TAILORED / ∞ CREATIVITY & GROWTH") — each number in the big serif at 48-60px, each label in Montserrat 12px 600-weight caps beneath. The composition ALTERNATES DARK / CREAM / SAGE BANDS through the page — dark hero → white "Our Approach" numbered list → dark full-bleed photograph slider → cream "What we do" band with 6 service tiles → sage-green testimonial carousel → white FAQ accordion → dark contact-form band → dark footer. Approach list uses BIG SERIF NUMERALS (01 / 02 / 03) at 48px beside each item title, with HAIRLINE DIVIDERS between rows (a rare legitimate exception to the no-hairline-between-sections rule because this IS a numbered list layout that the register calls for). Burgundy #8F161F is RESERVED for the sunburst ornaments + the "Book a discovery call" + "Send message" CTAs — it never floods a large area. Border-radius 0 everywhere. Brand character sits in the recurring sunburst ornament, the Didone display type, the disciplined dark/cream/sage rhythm, and the burgundy CTA restraint — not in decoration, not in glow, not in stock-agency animation.
+
+## Palette
+
+- **bg:** `#000000`
+- **surface:** `#111111`
+- **ink:** `#FFFFFF`
+- **accent:** `#8F161F`
+
+## Typography
+
+- **Display:** Instrument Serif (free, Google Fonts) at 400 weight, or Bodoni Moda / Playfair Display as broader-market fallback — letter-spacing normal, mixed case. At scale — 100-140px hero wordmark, 72-90px section headlines, 50-60px big serif numerals for stat quad and approach list, 22-28px h3. Instrument Serif is the reference face's closest free approximation (Atcarquette is a paid Didone with high stroke-contrast; Instrument Serif hits the same register from Google Fonts). The wordmark leans on the display's letterform contrast — thin verticals meeting thick horizontals — so serif substitutions must preserve that contrast, not smooth it out.
+- **Body:** Montserrat (free, Google Fonts) — 400 weight for body, 500 for labels, 600 for CTA + nav. 14-16px body copy, line-height 1.5. Sentence case, not all caps. Small caption labels ("WHY RODEO?" "WHAT WE DO") use a MODEST 12px Montserrat 600 with LETTER-SPACING 0.14em (below the mono-caps-eyebrow slop-blocklist fingerprint threshold — this is a legitimate boutique-agency caps label, not an eyebrow ornament).
+- **Mono:** none. Atelier Radiance is a consumer luxury surface — mono has no role.
+- **Scale:** 1.5 (perfect fifth — deliberately wide contrast so the serif display shouts at editorial scale and body settles into refined captioning)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Hero wordmark reveal — the serif wordmark fades in from opacity 0 + slight blur(2px) → 1 + blur(0) over 900ms cubic-bezier(0.19,1,0.22,1) on first paint. Letters do NOT stagger (this is an editorial register, not a marketing register).
+2. Sunburst ornament rotation — the burgundy sunburst next to the hero rotates 90deg over 1200ms cubic-bezier on first paint, settling into its final position. Reads as "the identity mark clicking into place."
+3. Numbered approach items — each row fades in from opacity 0 + translateY(12px) with 120ms stagger + 600ms cubic-bezier when scrolled into view. IntersectionObserver-driven.
+4. Photo-hero slider — click left/right arrows or drag to advance. Transitions between photos are 800ms cubic-bezier ease-in-out crossfade, NOT auto-advance (auto-advancing is the slop-blocklist hit; this waits for user input).
+5. Service tile hover — the burgundy sunburst on each tile spins 15deg + scales(1.05) on card hover, 220ms cubic-bezier. Card background stays flat (no lift, no shadow — this is boutique restraint, not corporate polish).
+6. Testimonial carousel — click left/right chevrons to advance. Auto-advances every 8s IF the user hasn't clicked; pauses on hover. Duration 8s is a testimonial-appropriate pace (long enough to read).
+7. FAQ accordion — chevron rotates 45deg (+ becomes ×) on open, 400ms cubic-bezier. Only one open at a time. Body expands smoothly.
+8. Contact form focus — field label lifts + gets underlined on focus, 200ms transition. Send button hover flips from burgundy-fill to burgundy-outline with cream text, 200ms.
+9. prefers-reduced-motion: reduce — wordmark and sunburst at final state; stagger disabled; auto-advance carousel paused; hover transitions instant; slider still functional but crossfade becomes instant.
+
+Customer installs these as dependencies for the deeper motion tier:
+- Lenis — smooth inertial scroll (the alternating dark/cream/sage band transitions really benefit from inertial scroll for the editorial cadence).
+- GSAP ScrollTrigger — the approach-list stagger + service-tile reveal + testimonial-carousel logic all sit comfortably in a GSAP timeline.
+- Custom branded preloader — the sunburst ornament expanding from center at 120px → 40px final position, then the wordmark fading in from behind it.
+
+Motion character: refined, editorial, considered. Custom cubic-bezier(0.19,1,0.22,1) for reveals. Nothing quick, nothing bouncy, nothing tech-forward. The whole point is that this register reads as "designed by a small studio with editorial sensibility" — motion is intentional but never showy.
+
+
+## Imagery
+
+Full-bleed editorial PHOTOGRAPHY on the dark canvas — luxury travel / hospitality / lifestyle imagery under directional light (a hotel garden with a figure in white, a boutique interior with warm-tungsten lighting, a fashion look-book portrait). Photo-hero section carries a real hero image with small caption bottom-left ("Solstice Studio × Baitong Hotel — Phnom Penh 2025" register). Service tiles are FLAT COLORED PANELS (cream or sage) with the burgundy sunburst centered as the only mark — no photography inside service tiles, because that's the ornament's role. Testimonial cards use a small circular avatar FPO block for the author photo. NO gradient blobs, NO glassmorphism, NO stock illustrations. The register reads as PRINTED + PHOTOGRAPHED + SET-DESIGNED, not as a generated dashboard.
+
+## Best for
+
+- Boutique creative agencies (small studios trading on editorial polish + named clients)
+- Luxury brand consultancies (boutique branding + strategy shops)
+- High-end freelance creative directors + brand designers
+- Independent creative studios doing hospitality / fashion / lifestyle work
+- Rebrand marketing pages for premium consumer brands wanting agency-editorial register
+- Portfolio + case-study surfaces for creative directors, photographers, and stylists
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Border-radius greater than 0px anywhere on the page — sharp corners are core to the identity
+- Rounded pill buttons or fully-rounded CTAs — buttons are sharp-cornered with 0 radius, that's it
+- Sans-serif display type at hero scale — the display face MUST be a high-contrast Didone-style serif (Instrument Serif / Bodoni Moda / Playfair Display), never Inter Display / Anton / DM Sans
+- Mono type as a decorative label voice — mono has no role on this consumer luxury surface
+- Multiple accent colors flooding the composition — burgundy is the ONE studio CTA color. The cream + sage + white are BAND surfaces, not accents. Introducing gold / orange / teal as additional accents collapses the register.
+- Warm-tan canvas as the primary background — the canvas IS DARK (near-black). Swapping to warm-tan collapses this into generic-boutique-editorial slop.
+- Corporate polish — no drop-shadow-md, no soft-glow, no gradient hero backdrop. The composition is FLAT and EDITORIAL, not corporate.
+- Three-tier pricing cards or feature-pillar grids — the service grid is deliberately 6 tiles with an ornament on each, not 3 stat cards with icons
+- Center-aligned hero — hero is LEFT-WEIGHTED with the wordmark and stat quad flush left, and the sunburst ornament flush right
+- Grain overlay everywhere — grain lives ONLY on the darker bands as a subtle overlay per the reference, never smeared across cream or sage surfaces
+- Auto-advancing hero sliders that cycle without user input — the photo hero waits for click or drag; only the testimonial carousel auto-advances (at 8s intervals with pause-on-hover)
+- Emoji or decorative unicode marks — the sunburst SVG carries all the ornamentation
+- Instagram-face stock photography — imagery MUST feel editorial + directed. Avoid smiling-woman-with-latte stock; reach for architectural interiors, garden scenes, luxury hospitality
+- Mono-caps eyebrows (SECTION · X style dot-metadata) — the register uses Montserrat 12px 600 caps with 0.14em tracking for labels, which is below the mono-caps-eyebrow CSS fingerprint threshold and reads as a legitimate boutique-agency label, not an ornament
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757)
+- void+acid (near-black bg + single bright acid-green or vermilion accent)
+- broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)
+- tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)
+- uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)
+- sunburst-as-decoration (the sunburst is the STUDIO'S IDENTITY MARK. It has 6+ specific placements — hero, What-we-do headline, each of the 6 service tiles, testimonial band, footer. Adding a random sunburst anywhere ELSE collapses it from identity mark to decorative ornament and the register dies.)
+- burgundy-flood (burgundy is CTA + sunburst color ONLY. The moment you use it as a section background or a large surface color, the register collapses into wine-region-DTC slop.)
+- serif-plus-modern-sans-body (the body face is Montserrat which pairs with the serif — using Inter / SF Pro / a modern-tech sans in the body flips this register into stock consumer-tech and the boutique-agency read dies.)
+- sun-washed-hospitality-palette (Base 42 Boutique Hotel is limestone canvas + caramel + eucalyptus. Adopting THAT palette here collapses Atelier Radiance INTO Base 42 — the register only holds if the canvas is DARK not limestone.)

package/themes/atelier-radiance/tailwind.snippet.ts

@@ -0,0 +1,15 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: atelier-radiance
+export const atelierRadianceTailwindExtend = {
+  colors: {
+    bg: "#000000",
+    surface: "#111111",
+    ink: "#FFFFFF",
+    accent: "#8F161F",
+  },
+  fontFamily: {
+    display: ["Instrument Serif (free, Google Fonts) at 400 weight, or Bodoni Moda / Playfair Display as broader-market fallback — letter-spacing normal, mixed case. At scale — 100-140px hero wordmark, 72-90px section headlines, 50-60px big serif numerals for stat quad and approach list, 22-28px h3. Instrument Serif is the reference face's closest free approximation (Atcarquette is a paid Didone with high stroke-contrast; Instrument Serif hits the same register from Google Fonts). The wordmark leans on the display's letterform contrast — thin verticals meeting thick horizontals — so serif substitutions must preserve that contrast, not smooth it out."],
+    body: ["Montserrat (free, Google Fonts) — 400 weight for body, 500 for labels, 600 for CTA + nav. 14-16px body copy, line-height 1.5. Sentence case, not all caps. Small caption labels (\"WHY RODEO?\" \"WHAT WE DO\") use a MODEST 12px Montserrat 600 with LETTER-SPACING 0.14em (below the mono-caps-eyebrow slop-blocklist fingerprint threshold — this is a legitimate boutique-agency caps label, not an eyebrow ornament)."],
+    mono: ["none. Atelier Radiance is a consumer luxury surface — mono has no role."],
+  },
+};