@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/raw-concrete/BUILD_BRIEF.md

@@ -0,0 +1,157 @@
+# Raw-Concrete — Build Brief
+
+> The contract this theme ships with. Read at commit time by the
+> brief-enforcer subagent; handed to Claude Code via the Copy-for-Claude
+> button on the theme detail page.
+>
+> This theme is intentionally the LEAST polished theme in the library.
+> Its whole register is refusing polish. That means several rules in
+> the SLOP-BLOCKLIST are the OPPOSITE of what other themes forbid — do
+> NOT smooth this one into a modern SaaS composition.
+
+---
+
+## MANDATORY BUILD DIRECTIVE — you MUST
+
+1. **Radius 0 everywhere.** No `borderRadius: 4`, no `12`, no `999`,
+   no pill CTAs. Every button, every card, every input is a square.
+   The palette picker corners are `borderRadius: 0` too.
+2. **Box-shadow `none` everywhere.** Every card, every button, every
+   div. Depth is suggested by 1px `#C0C0C0` hairline borders, nothing
+   else.
+3. **Monospace family throughout the body.** `Berkeley Mono`,
+   `JetBrains Mono`, `Menlo` — one family. Body copy in mono at 14px
+   line-height 1.5. Headings in mono at slightly larger sizes but same
+   family. No display sans, no display serif.
+4. **Native `#0000EE` link color** on light canvas, `#8CB4FF` on dark.
+   Never override link color to match the palette accent. That IS the
+   theme's brand register.
+5. **Native `#551A8B` visited-link color** (dark canvas: `#D0ADF0`).
+   Users must be able to tell what they've already read.
+6. **Section numbers as `[01]`, `[02]`, `[03]`.** Every h2 opens with a
+   square-bracketed section number. This is the arxiv-preprint tell.
+7. **All images have visible captions** with `<figcaption>` in the
+   format `**fig. N.** <sentence>`. Never a photo without a caption.
+   This is the arxiv-figure register.
+
+---
+
+## SLOP-BLOCKLIST — you MUST NOT
+
+- **ANY border-radius > 0.** Pills, rounded cards, rounded buttons, all
+  banned. Fingerprint: `borderRadius: [1-9]` anywhere in the section.
+- **ANY box-shadow.** Fingerprint: `boxShadow:` with a non-`none`
+  value. No drop shadow, no glow, no elevation.
+- **ANY `transition:` on hover states.** Native links, native focus
+  rings, browser defaults only.
+- **Sans-serif or serif display fonts.** No Inter, no Fraunces, no
+  Bricolage. Monospace only.
+- **Override of the native link color.** The palette variant swaps
+  the LINK hue (that IS the theme's palette), but the CSS property
+  is always native link color, never a custom accent bg on a
+  span-as-link.
+- **Underline REMOVAL from links.** Every link stays underlined.
+- **Cycling headline words** or auto-advancing content.
+- **Purple/indigo/pink gradient backgrounds.** No gradients at all.
+- **CSS `filter:` treatments** on photos (no `brightness()`,
+  `contrast()`, `saturate()`). Photos rendered raw.
+- **Section-numbered content presented as marketing feature cards.**
+  Section `[01] Recent posts` is a numbered LIST, not a card grid.
+- **Roman-numeral copyright** (`MMXXVI`). Native `©` + Arabic year.
+- **Attribution of influence in visible copy** — vitalik.eth.limo,
+  arxiv.org, brutalistwebsites.com are studied but NEVER NAMED in
+  slug, copy, or UI.
+
+---
+
+## CHROME INVENTORY — the allow-list
+
+- **Sticky picker strip in native-link register** — canvas + link-color
+  pickers as underlined `[dark]` / `[light]` and `[default]` / `[kelp]`
+  bracket-prefixed links. NO button chrome. Body font (monospace).
+- **Table-based masthead nav** — `<table>` with 1px borderCollapse.
+  Left cell: `raw-concrete.txt` in bold. Right cell: 5-6 nav items as
+  underlined links separated by ` · `.
+- **Document masthead / [00] hero** — H1 in mono at 28px, weight 500;
+  1-3 paragraphs of body prose with inline underlined links; maintained
+  by / last-modified / content-type meta line (content-level `·` is
+  allowed here — it's arxiv-native).
+- **[N] Section headings** — h2 in mono at 18px, weight 500, prefixed
+  with `[01]`, `[02]`, etc. 1px underline via `borderBottom`.
+- **Numbered `<ol>` post lists** — indent 24px, mono body 14px.
+- **`<figure>` with photo + `<figcaption>`** — 1px black border on
+  image, caption below in mono 12px starting with `**fig. N.**`.
+- **`<table>` for spec + archive** — `borderCollapse: collapse`, 1px
+  border on every cell, mono 13px content, no zebra striping.
+- **`<blockquote>` for manifesto** — 3px left border, mono body 14px
+  in `normal` (not italic).
+- **Native `<input type="email">` + `<button>` for the subscribe
+  section.** No custom styling beyond 1px black border, radius 0.
+- **`©` copyright line in mono 12px.** No trademark ornaments.
+- **Palette picker labels use body font (monospace), sentence-case,
+  no textTransform.**
+
+---
+
+## SIGNATURE MOVES — verbs, not adjectives
+
+- **Number every section with `[NN]` in square brackets.** This is
+  the arxiv-preprint tell. The reader should feel they're reading a
+  document, not browsing an app.
+- **Set every link in `#0000EE` on cream** (or `#8CB4FF` on dark).
+  Visited links go `#551A8B`. Users must be able to tell what they've
+  already read. This is the ONE color that varies per palette.
+- **Wrap every image in `<figure>` with a `<figcaption>` starting
+  `fig. N.`** — never a bare `<img>`. If the image doesn't have a
+  caption, it doesn't belong on this theme.
+- **Use `<table>` for tabular data** — the spec table AND the archive
+  year list are real `<table>` elements with visible cell borders.
+  Refuse a `grid-cols-*` grid; this is the native-web tell.
+- **Render `<blockquote>` with a 3px left border** and mono body in
+  `fontStyle: "normal"` — NEVER italic. Italic blockquotes are the
+  Medium-blog register; the raw-concrete register is pre-CSS HTML.
+- **Sign off the colophon with an honest `view-source` link** — the
+  footer's last three links are `rss` + `atom` + `view-source` +
+  `colophon`. That IS the register.
+
+---
+
+## COLOR TOKENS
+
+**Light canvas** — `bg: #FFFFFF` / `ink: #000000` / `border: #C0C0C0`.
+Native link `#0000EE`, visited `#551A8B`.
+
+**Dark canvas** — `bg: #111111` / `ink: #E8E6E3` / `border: #404040`.
+Native link (per browser default in dark UA): `#8CB4FF` / visited
+`#D0ADF0`. This ISN'T pure black bg — the register is "dark browser
+default," not black-void.
+
+**Palette variant** — 10 link-color variants (default, kelp, vermilion,
+aubergine, ochre, cobalt, moss, ink, hazard, cyan). Only link + visited
+values change per palette. Everything else stays FIXED across variants.
+
+---
+
+## TYPOGRAPHY
+
+- **Display / body / mono:** ONE family. Berkeley Mono (fallback
+  JetBrains Mono, Menlo, Courier New). No secondary font.
+- **Sizes:** h1 = 28px weight 500; h2 = 18px weight 500 (with `[NN]`
+  prefix); body = 14px line-height 1.5; caption = 12px.
+
+---
+
+## SECTION SKELETON
+
+1. Sticky picker strip (native-link register).
+2. Table-based masthead nav.
+3. `[00]` Document masthead / hero.
+4. `[01]` Recent posts (numbered list).
+5. `[02]` Figures (3-up with captions).
+6. `[03]` Spec table.
+7. `[04]` Manifesto blockquote.
+8. `[05]` Fig. 4 full-bleed figure with caption.
+9. `[06]` Archive (year table).
+10. `[07]` Colophon (photo + text side-by-side).
+11. `[08]` Subscribe (native form).
+12. Footer with copyright + rss/atom/view-source/colophon links.

package/themes/raw-concrete/THEME.md

@@ -0,0 +1,76 @@
+# Raw Concrete
+
+> Web brutalism — system defaults weaponized, honest structure, monospace throughout.
+
+**Slug:** `raw-concrete` — **Surface:** web — **Density:** dense
+
+## Influence
+
+Web brutalism (brutalistwebsites.com era). Kate Moross print, Vitalik's blog, the original Craigslist, arxiv.org paper listings.
+
+## Signature move
+
+Every link is `#0000EE`. Every visited link is `#551A8B`. Every border is a
+`1px solid #C0C0C0` hairline. No border-radius anywhere — every corner is
+90°. No box-shadow ever. Tables render as tables (visible cell borders).
+Buttons look like `<button>` elements pre-CSS. Underlines on links stay.
+The composition is unmistakably "the browser did this, not a designer."
+
+## Palette
+
+- **bg:** `#FFFFFF`
+- **surface:** `#FFFFFF`
+- **ink:** `#000000`
+- **accent:** `#0000EE`
+- **secondary:** `#C0C0C0`
+
+## Typography
+
+- **Display:** Berkeley Mono (paid) or JetBrains Mono (free) — 500 weight for headings, no display face beyond this
+- **Body:** same as display — Berkeley Mono or JetBrains Mono, 400 weight, 15px
+- **Mono:** same as display and body — the whole theme is monospace, one family, three weights
+- **Scale:** 1.2 (minor third — deliberately shallow contrast; body and heading feel close)
+
+## Motion
+
+none — no transitions, no scroll reveals, no hover animations. The absence IS the register.
+
+## Imagery
+
+Photographs render at native aspect ratio with a 1px black border and no
+cropping. No filters, no gradients, no vignettes. Illustrations are ASCII
+or single-color line drawings. No 3D, no rendered shapes, no icons beyond
+what unicode provides.
+
+## Best for
+
+- Personal blogs (Vitalik-register)
+- Academic paper listings (arxiv-register)
+- Indie developer portfolios that want to feel earned
+- Manifestos and long-form essays
+- Art projects that trade on refusal-of-polish
+- Craigslist-shaped marketplaces
+
+## 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
+- Any box-shadow — hover, focus, or decorative
+- CSS transitions or animations of any kind
+- Prettified link colors — links must render as browser-default #0000EE
+- Sans-serif or serif faces — monospace only, one family throughout
+- Rounded buttons or pill-shaped controls
+- Gradient backgrounds or gradient text
+- Icon fonts or SVG icons — unicode symbols only (▲ ▼ · × → ←)
+- Padding standardization — deliberately inconsistent, exposed structure
+- Hover states other than the browser default underline / link-color-change
+
+## 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)
+- brutalism-as-decoration (visible borders + monospace applied as decoration to an otherwise polished SaaS layout — Raw Concrete must refuse polish structurally, not aesthetically)

package/themes/raw-concrete/audit.log.jsonl

@@ -0,0 +1,10 @@
+{"slug":"raw-concrete","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T07:49:34.733Z"}],"overall":"PASS","ran_at":"2026-07-03T07:49:34.733Z"}
+{"slug":"raw-concrete","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T07:54:56.618Z"},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — avoid-rubric gate skipped. Set the key to grade against theme.avoid array."},"ran_at":"2026-07-03T07:54:56.625Z"}],"overall":"PASS","ran_at":"2026-07-03T07:54:56.618Z"}
+{"slug":"raw-concrete","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T07:55:58.958Z"},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — avoid-rubric gate skipped. Set the key to grade against theme.avoid array."},"ran_at":"2026-07-03T07:55:58.965Z"}],"overall":"PASS","ran_at":"2026-07-03T07:55:58.958Z"}
+{"slug":"raw-concrete","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T07:59:21.722Z"},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T07:59:55.854Z"}],"overall":"PASS","ran_at":"2026-07-03T07:59:21.722Z"}
+{"slug":"raw-concrete","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T15:57:10.642Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T15:57:10.650Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — avoid-rubric gate skipped. Set the key to grade against theme.avoid array."},"ran_at":"2026-07-03T15:57:10.650Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-03T15:57:10.642Z"}
+{"slug":"raw-concrete","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T15:57:10.955Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":false,"failures":[{"rule":"REG-0001","severity":"block","evidence":"#0000EE in palette within 5 of #0000EE — regressed pattern: Synthetic test — matches raw-concrete's accent, expect BLOCK"}]},"ran_at":"2026-07-03T15:57:10.964Z","dismissed":[]}],"overall":"BLOCK","ran_at":"2026-07-03T15:57:10.955Z"}
+{"slug":"raw-concrete","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T15:57:11.255Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T15:57:11.266Z","dismissed":[{"rule":"REG-0001","severity":"block","evidence":"#0000EE in palette within 5 of #0000EE — regressed pattern: Synthetic test — matches raw-concrete's accent, expect BLOCK","dismissed":true,"dismissal":{"scope":"this_run","reason":"Synthetic test — removing after verification","dismissed_at":"2026-07-03T15:57:11.111Z"}}]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — avoid-rubric gate skipped. Set the key to grade against theme.avoid array."},"ran_at":"2026-07-03T15:57:11.266Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-03T15:57:11.255Z"}
+{"slug":"raw-concrete","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T15:57:11.398Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T15:57:11.410Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — avoid-rubric gate skipped. Set the key to grade against theme.avoid array."},"ran_at":"2026-07-03T15:57:11.410Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-03T15:57:11.398Z"}
+{"slug":"raw-concrete","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T16:48:54.397Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T16:48:54.405Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T16:49:24.697Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[],"skipped":"Family A has no golden-set anchor yet — anchor-compare skipped (per Mat's Path B decision, families A+G bootstrap from their own first-authored theme)."},"ran_at":"2026-07-03T16:49:24.698Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-03T16:48:54.397Z"}
+{"slug":"raw-concrete","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T22:52:07.650Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T22:52:07.658Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — avoid-rubric gate skipped. Set the key to grade against theme.avoid array."},"ran_at":"2026-07-03T22:52:07.658Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[],"skipped":"Family A has no golden-set anchor yet — anchor-compare skipped (per Mat's Path B decision, families A+G bootstrap from their own first-authored theme)."},"ran_at":"2026-07-03T22:52:07.659Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-03T22:52:07.650Z"}

package/themes/raw-concrete/tailwind.snippet.ts

@@ -0,0 +1,16 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: raw-concrete
+export const rawConcreteTailwindExtend = {
+  colors: {
+    bg: "#FFFFFF",
+    surface: "#FFFFFF",
+    ink: "#000000",
+    accent: "#0000EE",
+    secondary: "#C0C0C0",
+  },
+  fontFamily: {
+    display: ["Berkeley Mono (paid) or JetBrains Mono (free) — 500 weight for headings, no display face beyond this"],
+    body: ["same as display — Berkeley Mono or JetBrains Mono, 400 weight, 15px"],
+    mono: ["same as display and body — the whole theme is monospace, one family, three weights"],
+  },
+};

package/themes/raw-concrete/theme.yml

@@ -0,0 +1,88 @@
+# Base 06 Raw Concrete — the first flagship theme authored under the v2 arc.
+#
+# Per SURVIVOR_MAPPING.md, Family A (Art & Design Movements) has zero
+# survivor precedent. Raw Concrete is chosen as theme #1 specifically
+# because its signature move is "unstyled honesty" — default link colors,
+# visible borders, exposed structure. That's hard to slop up: the failure
+# mode is over-styling, not under-styling. Good forcing function for a
+# harness whose gates are looking for slop patterns.
+#
+# See site/design-system/BESPOKE_THEME_SYSTEM.md #06 for the source
+# entry. This file expands that one line into the full YAML schema.
+
+name: Raw Concrete
+concept: Web brutalism — system defaults weaponized, honest structure, monospace throughout.
+influence: Web brutalism (brutalistwebsites.com era). Kate Moross print, Vitalik's blog, the original Craigslist, arxiv.org paper listings.
+
+# v2 metadata — for anchor-compare + regression-scan scoping.
+family: A
+base_number: 6
+
+# Where the theme renders live. anchor-compare fetches this URL and
+# passes the rendered screenshot to Director for grading. Anchor-compare
+# is skipped for Family A + G in MVP (no survivor precedent) but the URL
+# is here so the site-integration path is stable across families.
+render_url: http://localhost:5173/themes/raw-concrete
+
+surface: web
+
+typography:
+  display: Berkeley Mono (paid) or JetBrains Mono (free) — 500 weight for headings, no display face beyond this
+  body: same as display — Berkeley Mono or JetBrains Mono, 400 weight, 15px
+  mono: same as display and body — the whole theme is monospace, one family, three weights
+  scale: 1.2 (minor third — deliberately shallow contrast; body and heading feel close)
+
+palette:
+  bg: "#FFFFFF"
+  surface: "#FFFFFF"
+  ink: "#000000"
+  accent: "#0000EE"      # default browser link blue — used as-is, not "our brand blue"
+  secondary: "#C0C0C0"   # default table border gray
+  visited: "#551A8B"     # default visited link purple — used as-is
+
+density: dense
+
+motion: none — no transitions, no scroll reveals, no hover animations. The absence IS the register.
+
+signature: |
+  Every link is `#0000EE`. Every visited link is `#551A8B`. Every border is a
+  `1px solid #C0C0C0` hairline. No border-radius anywhere — every corner is
+  90°. No box-shadow ever. Tables render as tables (visible cell borders).
+  Buttons look like `<button>` elements pre-CSS. Underlines on links stay.
+  The composition is unmistakably "the browser did this, not a designer."
+
+imagery: |
+  Photographs render at native aspect ratio with a 1px black border and no
+  cropping. No filters, no gradients, no vignettes. Illustrations are ASCII
+  or single-color line drawings. No 3D, no rendered shapes, no icons beyond
+  what unicode provides.
+
+best_for:
+  - Personal blogs (Vitalik-register)
+  - Academic paper listings (arxiv-register)
+  - Indie developer portfolios that want to feel earned
+  - Manifestos and long-form essays
+  - Art projects that trade on refusal-of-polish
+  - Craigslist-shaped marketplaces
+
+avoid:
+  - "Border-radius greater than 0px anywhere on the page"
+  - "Any box-shadow — hover, focus, or decorative"
+  - "CSS transitions or animations of any kind"
+  - "Prettified link colors — links must render as browser-default #0000EE"
+  - "Sans-serif or serif faces — monospace only, one family throughout"
+  - "Rounded buttons or pill-shaped controls"
+  - "Gradient backgrounds or gradient text"
+  - "Icon fonts or SVG icons — unicode symbols only (▲ ▼ · × → ←)"
+  - "Padding standardization — deliberately inconsistent, exposed structure"
+  - "Hover states other than the browser default underline / link-color-change"
+
+banned_defaults:
+  # Global blocklist (inherited from BESPOKE_THEME_SYSTEM.md's global slop-blocklist)
+  - "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: Raw Concrete has its OWN slop failure mode
+  - "brutalism-as-decoration (visible borders + monospace applied as decoration to an otherwise polished SaaS layout — Raw Concrete must refuse polish structurally, not aesthetically)"

package/themes/raw-concrete/tokens.ts

@@ -0,0 +1,27 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "raw-concrete",
+  family: "A",
+  base: "06",
+  palette: {
+    "bg": "#FFFFFF",
+    "surface": "#FFFFFF",
+    "ink": "#000000",
+    "accent": "#0000EE",
+    "secondary": "#C0C0C0",
+    "visited": "#551A8B"
+  },
+  typography: {
+    "display": "Berkeley Mono (paid) or JetBrains Mono (free) — 500 weight for headings, no display face beyond this",
+    "body": "same as display — Berkeley Mono or JetBrains Mono, 400 weight, 15px",
+    "mono": "same as display and body — the whole theme is monospace, one family, three weights",
+    "scale": "1.2 (minor third — deliberately shallow contrast; body and heading feel close)"
+  },
+  surface: "web",
+  density: "dense",
+  motion: "none — no transitions, no scroll reveals, no hover animations. The absence IS the register.",
+  signature: "Every link is `#0000EE`. Every visited link is `#551A8B`. Every border is a\n`1px solid #C0C0C0` hairline. No border-radius anywhere — every corner is\n90°. No box-shadow ever. Tables render as tables (visible cell borders).\nButtons look like `<button>` elements pre-CSS. Underlines on links stay.\nThe composition is unmistakably \"the browser did this, not a designer.\"\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/realestate-luxury/THEME.md

@@ -0,0 +1,94 @@
+# Design Direction — Realestate-Luxury
+
+## Ethos
+Sotheby's cream listing-book · Compass deep navy · Modern House serif · The Agency cinematic listings · 1stDibs editorial luxury
+
+## Feel
+An eight-figure listing book delivered through the browser. Deep cream backgrounds carry full-bleed property cinematography, high-contrast serif headlines name the address as if it were a chapter title, and a single deep navy accent does all the interaction work. Burgundy is the second luxury accent — focus rings, selection, the occasional vertical rule on a spec table. Reads as a bound real estate catalog, not as a marketplace search experience.
+
+## Reference brands
+- **Sotheby's Realty** → cream paper + Cormorant-feel serif + listing-as-portrait photography. The headline IS the address; the photograph IS the listing.
+- **Compass** → deep navy mark + clean sans + structured global search. Navy is the canonical action color; nothing else competes.
+- **Modern House (London)** → cream + serif + architectural full-bleed photography. The page is a quiet frame for the property.
+- **The Agency** → deep cream + restrained nav + cinematic listing reels. Motion is slow ken-burns over stills, never UI animation for its own sake.
+- **1stDibs Estate** → warm cream + editorial serif + provenance copy. Long-form descriptive prose is welcome — the listing has a story.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Do not introduce numbered or generic tokens — if a new color is needed, name a brand it traces to.
+
+Surface stack is **deep cream** (background) → **lifted cream** (card) → **deeper cream** (secondary/muted/accent). Depth comes from hairline borders on a warm hairline color, never from drop shadows or fill differentiation. Pure white is forbidden — `--paper`/`--cream` replace it; pure black is forbidden — `--navy-ink` replaces it.
+
+Brand tokens: `--cream`, `--cream-deep`, `--navy`, `--navy-ink`, `--burgundy`, `--brass`. Primary is deep navy. Burgundy is reserved for focus, selection, and the occasional editorial rule. Brass is reserved for hardware-feeling accents — spec-table rules, divider dots — never as a button face.
+
+## Typography
+- **Display:** Cormorant Garamond (Sotheby's listing-book serif feel). h1–h4. Tracking `-0.012em` — Garalde display wants near-zero, just shy of it.
+- **Body:** Inter (Compass clean sans). Body base **17px** with **line-height 1.65** — catalog-comfortable, never marketplace-dense.
+- **Mono:** JetBrains Mono. Price, lot size, sqft, MLS number, dateline. Always `font-variant-numeric: tabular-nums` so prices align column-wise.
+
+H1 uses `clamp(2.75rem, 7vw, 6rem)` — the address-as-title scale. Font features: `"liga"`, `"dlig"`, `"tnum"`, `"ss01"` — discretionary ligatures on the display serif, tabular numerics on body and mono.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-12` — wide enough for full-bleed photography and 21:9 hero stills, with generous outer gutters.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-20 lg:pt-32 lg:pb-28`
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-12 lg:py-20`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 96 128. No arbitrary spacing. Density tier is **low** — catalog breathing, never marketplace density.
+
+## Color
+No hex in component files. All color via tokens. Opacity via `/N` modifier. White and pure black are forbidden — `--cream` and `--navy-ink` replace them. The palette is intentionally small: cream, navy, burgundy, brass, and the cream-family neutrals. If a designer needs a new color, the answer is almost always a wider use of one of the six brand tokens, not a new one.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Pills are disallowed (`pillsAllowed: false`) — they read marketplace. Every listing card, every input, every button has catalog-page corners.
+
+## Shadows
+**Minimal.** Two utilities:
+- `.hairline-bottom` — `inset 0 -1px 0 hsl(var(--border))`, the divider rule between listing sections.
+- `.shadow-listing` — `0 1px 2px hsl(var(--navy-ink) / 0.04), 0 8px 24px hsl(var(--navy-ink) / 0.06)`, used only on listing-card hover.
+
+No glows. No colored shadows. The cream paper absorbs depth gracefully through hairlines and full-bleed photography.
+
+## Motion
+Three keyframes:
+- `fade-rise` — 1000ms opacity + 20px translate, the standard entrance. Slow on purpose: catalog pacing.
+- `ken-burns` — 32000ms infinite scale + translate on hero stills, the architectural camera push.
+- `underline-sweep` — 600ms scaleX 0→1 from left origin, the text-link hover.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — wrapped in a media query in every motion utility. **No marquee. No parallax. No UI bounce. No glow pulse.** This direction does not perform.
+
+## Component patterns
+- **Buttons:** Text-link CTAs by default, navy color, underline-sweep on hover. Solid-fill is reserved for the single hero action per page — navy bg, cream text, sharp corners. Secondary actions are hairline-outlined ghost buttons in navy. **No pill shapes. No burgundy buttons** — burgundy is focus-only.
+- **Cards:** Sharp 0 corners, hairline border on `--cream` card surface. Internal padding `p-8 lg:p-12`. Listing cards lead with full-width photography (4:5 portrait or 3:2 landscape), address in Cormorant display, spec line in mono. Hover lifts to `shadow-listing`.
+- **Inputs:** Border-bottom only (1px `--border`) on the cream surface. No full box. Label sits above in mono-uppercase, tracking `0.12em`. Focus shifts border to burgundy.
+- **CTA links:** Text-link with underline-sweep for the catalog body. Solid navy rectangle for the single hero CTA (Request Viewing). **Never a pill, never a gradient, never a glow.**
+
+## Recommended rich media
+Realestate-Luxury is a photography-driven language. The lead asset on any listing is **environmental architectural photography, color-graded toward Architectural Digest warmth** — golden-hour interior light, cool blue-grey exterior shadow, no HDR halos, no overly-corrected verticals. Real estate hero stills should feel like Helene Binet or Iwan Baan, not like MLS phone photography.
+
+Twilight exteriors are the canonical hero treatment — lights on inside, sky still holding cobalt, no people in frame. Interior shots are staged and styled (a single book on the bench, a vase of olive branches, never a family photo). Drone aerials are welcome for estates with land; never use drone footage of suburban subdivisions — it reads marketplace.
+
+**AI tool recommendations:** **Midjourney v6+** with prompts like *"architectural photography, twilight exterior, Iwan Baan style, warm interior light, cobalt sky, medium format, 50mm, no people"* for hero stills; *"interior architectural photography, AD magazine, golden hour, Hasselblad, natural light, styled interior"* for interiors. Avoid Midjourney's default "luxury real estate" prompt — it produces glossy, over-saturated McMansion renders. Explicitly prompt for medium format and architectural authorship.
+
+**Aspect ratios:** 21:9 cinematic for the hero (full-bleed, the cinematic real-estate frame); 4:5 portrait for vertical environmental shots; 3:2 for inline catalog photography. **Never 1:1 square** — that reads Instagram listing, not catalog.
+
+**Video:** A single autoplay-muted hero reel of the property is welcome — slow drone push, slow interior tracking, 18–24 second loop. No music in autoplay. Full property tour videos sit behind a play-button poster image. ≤6 MB per hero loop, H.265 or AV1.
+
+**Performance:** hero image ≤180 KB AVIF at 2400w; inline catalog photography ≤120 KB at 1600w. LCP under 2.2s with hero image — if it slips, optimize the image; do not strip the photography.
+
+**Avoid:** MLS-style 14-photo carousels (marketplace territory), red SOLD overlays (Redfin territory), price-drop badges (marketplace territory), virtual-tour glasses iconography (gimmicky), AI-generated "luxury homes" (the uncanny-valley grass tells), drone footage of cookie-cutter subdivisions.
+
+**Accessibility:** alt-text describes the property as a Sotheby's catalog would — *"Hudson Valley farmhouse with limestone exterior, cedar-shingle roof, and a maple grove descending to the river at golden hour"*. Address + property type alone is not enough.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established. First likely families: listing-card, spec-table, agent-attribution, neighborhood-frame.
+
+## Details
+- **Selection:** `hsl(var(--brand-burgundy) / 0.22)` background, foreground text. Burgundy doing its second-accent job.
+- **Focus ring:** `1px solid hsl(var(--ring))` — thin burgundy. Quiet, considered, never a 2px blue web-app ring.
+- **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.