@stylecrib/cli 0.3.1 → 0.3.2

package/themes/marker-mag/theme.yml

@@ -0,0 +1,159 @@
+# Marker Mag — Family C, Editorial & Print.
+#
+# NEW-BASE CANDIDATE for BESPOKE_THEME_SYSTEM.md, adjacent to Base 26
+# Cut & Paste Zine. Base 26 is pure punk-photocopy chaos (ransom-note
+# type, xerox grain, mismatched sizes, torn tape). Marker Mag holds
+# the same DIY / student-mag / youth-culture voice but structures it
+# — hand-drawn brush-lettered wordmark instead of ransom-note type, a
+# proper editorial grid instead of collage anarchy, and one SATURATED
+# BAND COLOR as the canvas identity instead of photocopy-white. Same
+# ethos (independent + youth + hand-made), different volume (organized
+# not anarchic).
+#
+# Authored from Matt's provided design brief (2026-07-04, nexusmag.co.nz
+# reference — the University of Waikato student magazine). Placeholder
+# publication is a fictional NZ-adjacent student quarterly called
+# STATIC — domain-agnostic mockup that could re-skin to any campus
+# magazine, community zine, DIY press, or independent youth publication.
+# The register expresses "independent + youth voice" through PALETTE
+# SATURATION + HAND-DRAWN WORDMARK + DIY COVER ART, not through decoration.
+#
+# Ninth theme via the v2 harness. Third Family C theme (after
+# ember-poster + case-panel). Fifth NEW BASE (after ember-poster,
+# overland-broadside, arc-stack, case-panel). FIRST theme with a
+# saturated non-neutral canvas — every previous theme has been white,
+# cream, near-black, or charcoal; Marker Mag holds hot pink as canvas.
+#
+# Alternative slugs considered — riot-zine (too loaded), pink-punk
+# (locks to one palette), pulp-press (adjacent but less specific),
+# staple-press (too archaic), student-quarterly (too formal). Marker
+# Mag picked because "marker" nails the hand-drawn brush-lettered
+# wordmark signature and "mag" carries the student-magazine register
+# without brand-attribution risk.
+
+name: Marker Mag
+concept: Student-magazine DIY register — saturated hot canvas (hot pink by default, other saturated hues per palette variant) broken by dark charcoal header + footer bands, hand-drawn brush-lettered wordmark repeated top and bottom, big DIY cover-art tile featuring the current issue, editorial article grid of dark cards on the saturated canvas.
+influence: |
+  Independent campus / student magazines (the register held by NZ / AU / UK campus quarterlies — Salient, Craccum, Palatinate, Isis at their most DIY). Also youth-culture editorial (Dazed at their most zine-adjacent, i-D at their most staple-bound, The Face relaunch when it leans DIY). Adjacent to punk photocopy zines but structured — brush lettering instead of ransom-note, editorial grid instead of collage anarchy.
+
+family: C
+base_number: 26
+base_note: |
+  New-base candidate adjacent to Base 26 Cut & Paste Zine. Base 26 is pure ransom-note anarchy — torn tape, xerox grain, mismatched fonts, deliberate misalignment. Marker Mag holds the DIY voice but structures it into a proper editorial magazine layout — brush-lettered SVG wordmark instead of ransom-note type, editorial article grid instead of collage anarchy, one saturated band color as canvas identity instead of photocopy-white. Same ethos (independent + youth + hand-made), different volume level (organized, not chaotic).
+
+render_url: http://localhost:5173/themes/marker-mag
+
+surface: web
+
+typography:
+  display: DM Sans (free, Google Fonts) at 800 weight — capitalize case, letter-spacing normal. At scale — 36-44px article-tile titles, 22-28px featured article titles, 20px section labels. DM Sans is the reference face itself (the source site literally uses it) and it's a Google-Fonts-shelf humanist sans that reads as youth-friendly without being loud. The BRUSH-LETTERED wordmark is NOT a font — it's a bespoke hand-drawn SVG (see signature).
+  body: DM Sans same family — 400 weight for body, 500 for card titles, 600 for filter chips. 14-16px body copy, line-height 1.5. Sentence case, not all caps. Small captions (author bylines) get 12-13px 500-weight.
+  mono: none. Marker Mag is a consumer editorial surface — mono has no legitimate role. Author bylines are in body-face italic 12px, NOT mono-caps (that's the universal-slop-blocklist fingerprint).
+  scale: 1.25 (major third — deliberately shallow contrast; the article-grid cards should feel evenly-weighted so no one card dominates. The magazine cover-art tile carries the hero volume through IMAGE, not through outsized type.)
+
+palette:
+  bg: "#E35BA0"           # HOT PINK — the saturated canvas color (Marker Mag's identity). Rotates per palette variant to other saturated hues but always dominates the composition.
+  surface: "#2C2C2C"      # dark charcoal — used for header nav bar, footer band, and every article-card in the editorial grid
+  ink: "#FFFFFF"          # white — primary text on charcoal cards + charcoal header/footer
+  accent: "#0000EE"       # browser-blue link accent — used ONLY for interactive states (hover on "Read More »", active-chip underline)
+  darkInk: "#0A0A0A"      # ink for text ON the hot-pink canvas (title copy, category tabs)
+  cardMute: "#B8B8B8"     # secondary text on dark cards (author bylines, "Read More »")
+
+density: dense
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Wordmark drop-in on first paint — the brush-lettered SVG wordmark strokes draw from opacity 0 → 1 with a 400ms cubic-bezier ease + 60ms stagger per letter, so it reads as "hand-drawn on the page in real time." Only fires once on load.
+  2. Cover-art tile hover — slight rotate(-1deg) + scale(1.02) on hover, 220ms cubic-bezier. Reads as "picking up a physical magazine off the desk."
+  3. Article card hover — the dark card lifts translateY(-4px) + the image inside scales(1.03) with 220ms cubic-bezier. Simultaneous "Read More »" arrow slides 4px right.
+  4. Category filter chips — click swaps active chip; grid re-renders filtered instantly (no cross-fade). Active chip has a solid white background with dark ink, inactive is transparent with hot-pink underline.
+  5. Pagination — click swaps active page number; grid scrolls to top of grid via smooth-scroll. Fast, no page-transition animation.
+  6. Featured-article-list rows in the editorial index — hover flips the row background from transparent to a subtle rgba(255,255,255,0.05) accent, 180ms transition.
+  7. prefers-reduced-motion: reduce — brush wordmark starts at final opacity; cover-tile hover disabled; card hover becomes instant. State changes still fire (they're content, not decoration).
+
+  Customer installs these as dependencies for the deeper motion tier:
+  - Lenis — smooth inertial scroll for the long article grid.
+  - GSAP DrawSVG — the brush wordmark stroke-draw could use DrawSVG for a more considered pen-on-paper reveal. The default CSS version is close enough for MVP.
+  - No preloader — student magazines land instantly, not with a splash screen.
+
+  Motion character: DIY, physical, tactile. Custom cubic-bezier(0.25,0.1,0.25,1) for reveals. Nothing electric, nothing corporate, nothing tech-bro-slick. The whole point of the DIY register is that it feels made by a human at a desk in a dorm, not by a design system.
+
+signature: |
+  A hand-drawn BRUSH-LETTERED wordmark, rendered as bespoke SVG paths
+  (not a font), sits centered at the top of the composition on a dark
+  charcoal band and is REPEATED at the bottom of the composition in
+  the footer. The brush strokes carry a marker-on-paper texture — some
+  strokes are thicker, some thinner, some have visible ink pooling at
+  corners — so the word reads as "hand-drawn today" not "a font
+  someone bought." The main page canvas is a SATURATED band color
+  (hot pink by default, other saturated hues per palette) that
+  dominates every surface not covered by dark cards. Below the top
+  charcoal band, a big DIY COVER-ART tile shows the current issue's
+  cover in xeroxed / DIY-print texture: dark backdrop with a strong
+  central image (a fictional issue mascot or graphic), the issue's
+  volume + issue label in small caps on the cover, and a hand-drawn
+  border. Beside the cover, a FEATURED-INDEX list of the top articles
+  from the current issue — each row a small thumbnail + title + author
+  byline + "Read More »" link, all on the hot canvas. Below, a row of
+  category filter chips (Columns / Editorial / Entertainment /
+  Features / News / Reviews). Below the chips, a 12-tile editorial
+  grid arranged 3 columns wide, each tile a dark charcoal card with
+  the article's image on top, category badge overlay, title in
+  DM-Sans-800-capitalize, small italic author byline, body preview,
+  and "Read More »" link at bottom. Grid pagination row (1 2 3 4 5)
+  below the grid. Dark charcoal footer band with the wordmark
+  repeated + Instagram + Facebook + YouTube social icons. Border-
+  radius 0 everywhere. Brand character sits in the brush wordmark,
+  the saturated canvas, the DIY cover-art tile, and the disciplined
+  student-mag article-grid — not in decoration, not in mono-caps
+  eyebrows, not in stat-card triads.
+
+imagery: |
+  DIY / xerox / punk photocopy aesthetic imagery. The cover-art tile
+  is the primary hero — a dark backdrop with a bold graphic (mascot,
+  illustration, photograph) that reads as a fictional student
+  magazine cover. Article-tile images use a mix of: (1) FPO
+  photograph rectangles with visible grain, (2) fake newspaper clip
+  scans, (3) colorful graphic panels with a fictional article-topic
+  hint. All FPO imagery has a slight rotation, an unfinished quality,
+  or a torn-edge treatment — because student magazines never ship
+  with polished stock photography. NO gradient blobs, NO glassmorphism,
+  NO clean brand-color panels (that's case-panel's move), NO
+  drop-shadow-md polish. The whole composition reads as printed +
+  photocopied + stapled.
+
+best_for:
+  - Student / campus magazine sites (university quarterlies, college publications)
+  - Independent zines going from print to web (small-run editorial with a distinctive voice)
+  - Community publications with a youth or subculture voice
+  - Music / arts / culture writing sites that want DIY register instead of corporate polish
+  - Substack-alternative editorial platforms leaning into indie youth aesthetic
+  - Anything trading on "made by humans in a room, not a content team"
+
+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 and filter chips are sharp-cornered with 0 radius"
+  - "Serif or condensed display type — display face MUST be DM Sans or similar humanist sans, never Fraunces / Times / Playfair / Anton"
+  - "The wordmark rendered as a font — the wordmark MUST be hand-drawn bespoke SVG paths so it reads as marker-on-paper, not as a downloadable font"
+  - "Mono type as a decorative label voice — mono has no role on this consumer editorial surface"
+  - "Neutral canvas (white / cream / black / charcoal) as the primary background — the CANVAS IS ALWAYS SATURATED. Hot pink by default, other saturated hues per palette variant. A neutral canvas turns this into a generic dark-mode blog and the register dies."
+  - "Corporate polish on the article cards — no drop-shadow-md, no soft-glow, no rounded 2xl. Cards are FLAT dark rectangles on the saturated canvas."
+  - "Uniform 3-pillar / feature-triad layout for the article grid — the grid is a 3×N grid of same-size dark cards which is fine because that IS what magazines do, but the tiles must SHIP with real content variation (different images, different lengths, different categories) so it doesn't collapse into template output"
+  - "Center-aligned everything — hero cover art is LEFT of the featured-index, article grid is left-weighted"
+  - "Adding a second saturated accent color competing with the canvas — the canvas hue IS the accent. Blue #0000EE is reserved for interactive hover states only."
+  - "Emoji or decorative unicode marks — the brush wordmark carries all the personality; nothing else decorative ships"
+  - "Auto-advancing hero sliders / cycling headline words — refused"
+  - "Grain overlay as a fake-DIY treatment on the whole canvas — DIY texture lives IN the cover-art tile and article-tile images, not smeared across the whole page"
+
+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
+  - "wordmark-as-font (the brush-lettered wordmark MUST be bespoke SVG paths. The moment you replace it with a Google Fonts brush face like Caveat or Permanent Marker, the register collapses into generic-blog-hand-drawn slop.)"
+  - "neutral-canvas-with-pink-accent (the whole point is the SATURATED CANVAS. A white canvas with hot pink accents is a completely different register and collapses this theme into generic-editorial-slop.)"
+  - "corporate-article-cards (dark cards must be FLAT rectangles on the canvas. The moment you add rounded-2xl + shadow-md + hover-scale-1.05, the register becomes stock Medium / Substack / Ghost editorial slop.)"
+  - "generic-cover-art (the DIY cover-art tile must feel PRINTED + PHOTOCOPIED + STAPLED. The moment you replace it with a clean brand-panel or a gradient hero, the register collapses.)"

package/themes/marker-mag/tokens.ts

@@ -0,0 +1,27 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "marker-mag",
+  family: "C",
+  base: "26",
+  palette: {
+    "bg": "#E35BA0",
+    "surface": "#2C2C2C",
+    "ink": "#FFFFFF",
+    "accent": "#0000EE",
+    "darkInk": "#0A0A0A",
+    "cardMute": "#B8B8B8"
+  },
+  typography: {
+    "display": "DM Sans (free, Google Fonts) at 800 weight — capitalize case, letter-spacing normal. At scale — 36-44px article-tile titles, 22-28px featured article titles, 20px section labels. DM Sans is the reference face itself (the source site literally uses it) and it's a Google-Fonts-shelf humanist sans that reads as youth-friendly without being loud. The BRUSH-LETTERED wordmark is NOT a font — it's a bespoke hand-drawn SVG (see signature).",
+    "body": "DM Sans same family — 400 weight for body, 500 for card titles, 600 for filter chips. 14-16px body copy, line-height 1.5. Sentence case, not all caps. Small captions (author bylines) get 12-13px 500-weight.",
+    "mono": "none. Marker Mag is a consumer editorial surface — mono has no legitimate role. Author bylines are in body-face italic 12px, NOT mono-caps (that's the universal-slop-blocklist fingerprint).",
+    "scale": "1.25 (major third — deliberately shallow contrast; the article-grid cards should feel evenly-weighted so no one card dominates. The magazine cover-art tile carries the hero volume through IMAGE, not through outsized type.)"
+  },
+  surface: "web",
+  density: "dense",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Wordmark drop-in on first paint — the brush-lettered SVG wordmark strokes draw from opacity 0 → 1 with a 400ms cubic-bezier ease + 60ms stagger per letter, so it reads as \"hand-drawn on the page in real time.\" Only fires once on load.\n2. Cover-art tile hover — slight rotate(-1deg) + scale(1.02) on hover, 220ms cubic-bezier. Reads as \"picking up a physical magazine off the desk.\"\n3. Article card hover — the dark card lifts translateY(-4px) + the image inside scales(1.03) with 220ms cubic-bezier. Simultaneous \"Read More »\" arrow slides 4px right.\n4. Category filter chips — click swaps active chip; grid re-renders filtered instantly (no cross-fade). Active chip has a solid white background with dark ink, inactive is transparent with hot-pink underline.\n5. Pagination — click swaps active page number; grid scrolls to top of grid via smooth-scroll. Fast, no page-transition animation.\n6. Featured-article-list rows in the editorial index — hover flips the row background from transparent to a subtle rgba(255,255,255,0.05) accent, 180ms transition.\n7. prefers-reduced-motion: reduce — brush wordmark starts at final opacity; cover-tile hover disabled; card hover becomes 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 for the long article grid.\n- GSAP DrawSVG — the brush wordmark stroke-draw could use DrawSVG for a more considered pen-on-paper reveal. The default CSS version is close enough for MVP.\n- No preloader — student magazines land instantly, not with a splash screen.\n\nMotion character: DIY, physical, tactile. Custom cubic-bezier(0.25,0.1,0.25,1) for reveals. Nothing electric, nothing corporate, nothing tech-bro-slick. The whole point of the DIY register is that it feels made by a human at a desk in a dorm, not by a design system.\n",
+  signature: "A hand-drawn BRUSH-LETTERED wordmark, rendered as bespoke SVG paths\n(not a font), sits centered at the top of the composition on a dark\ncharcoal band and is REPEATED at the bottom of the composition in\nthe footer. The brush strokes carry a marker-on-paper texture — some\nstrokes are thicker, some thinner, some have visible ink pooling at\ncorners — so the word reads as \"hand-drawn today\" not \"a font\nsomeone bought.\" The main page canvas is a SATURATED band color\n(hot pink by default, other saturated hues per palette) that\ndominates every surface not covered by dark cards. Below the top\ncharcoal band, a big DIY COVER-ART tile shows the current issue's\ncover in xeroxed / DIY-print texture: dark backdrop with a strong\ncentral image (a fictional issue mascot or graphic), the issue's\nvolume + issue label in small caps on the cover, and a hand-drawn\nborder. Beside the cover, a FEATURED-INDEX list of the top articles\nfrom the current issue — each row a small thumbnail + title + author\nbyline + \"Read More »\" link, all on the hot canvas. Below, a row of\ncategory filter chips (Columns / Editorial / Entertainment /\nFeatures / News / Reviews). Below the chips, a 12-tile editorial\ngrid arranged 3 columns wide, each tile a dark charcoal card with\nthe article's image on top, category badge overlay, title in\nDM-Sans-800-capitalize, small italic author byline, body preview,\nand \"Read More »\" link at bottom. Grid pagination row (1 2 3 4 5)\nbelow the grid. Dark charcoal footer band with the wordmark\nrepeated + Instagram + Facebook + YouTube social icons. Border-\nradius 0 everywhere. Brand character sits in the brush wordmark,\nthe saturated canvas, the DIY cover-art tile, and the disciplined\nstudent-mag article-grid — not in decoration, not in mono-caps\neyebrows, not in stat-card triads.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/marketplace-modern/THEME.md

@@ -0,0 +1,135 @@
+# Design Direction — Marketplace-Modern
+
+## Ethos
+Faire warm-white catalog · Olist friendly B2B teal · Joor dignified navy · Shogun commerce-builder warmth · Pietra creator-merchant cream
+
+## Feel
+Modern B2B wholesale marketplace. Clean white-paper canvas with a warm-sand secondary surface, structured product cards that read like a printed line-sheet, restrained navy text, and a single confident warm-orange action color. The page reads as the surface where a buyer commits a $40,000 purchase order — dashboard-grade trust, line-sheet pacing, never marketing-loud.
+
+Where soft-modern is Linear's softer cousin (productivity for makers), marketplace-modern is the wholesale buyer's catalog — denser line-items, formal navy headers, MOQ and lead-time always visible, and a brand accent that's warm enough to feel like commerce rather than enterprise SaaS.
+
+## Reference brands
+- **Faire** → warm-white canvas, warm-sand surface, Plus Jakarta wordmark, structured catalog cards. The dominant template — this direction owes Faire its surface stack.
+- **Olist** → deep teal product accent, friendly business UI, Brazilian SMB warmth. The secondary signal color for "verified supplier" and "ships on time."
+- **Joor** → formal navy text, serif-adjacent dignity, line-sheet luxury. The typographic posture — buyers reading this surface are placing real-money orders.
+- **Shogun** → warm orange action color, commerce-builder card grids. The primary CTA hue.
+- **Pietra** → cream paper backdrop, creator-merchant marketplace pacing. The hero-canvas tone — warmer than enterprise, calmer than consumer.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin.
+
+Surface stack is **warm-white canvas** (background, `30 25% 98%`) → **pure-white catalog card** (`0 0% 100%`) → **warm-sand secondary** (`32 28% 94%`) → **cream muted** (`32 22% 92%`). Depth comes from a hue shift (warm-sand sits under white cards) plus a soft `shadow-catalog` — never a saturated drop, never a fill-only differentiation.
+
+Primary is **Shogun warm-orange** (`22 88% 52%`) — the single confident action color, used on "Add to Order," "Submit PO," "Request Samples." Olist teal (`186 70% 32%`) is the secondary product accent reserved for trust signals (Verified Supplier, On-Time Shipping). Joor navy (`215 35% 14%`) is the foreground.
+
+Brand tokens — these are the working palette:
+- `--faire-sand` — = `--secondary`; the warm-sand surface under catalog filters and table rows.
+- `--joor-navy` and `--joor-navy-deep` — formal navy text and eyebrow.
+- `--olist-teal` — verified-supplier and ship-on-time signals; never the primary CTA color.
+- `--shogun-orange` and `--shogun-orange-deep` — primary action color and pressed state.
+- `--pietra-cream` — = `--background`; hero canvas tone.
+- `--success-leaf`, `--warning-mustard` — restrained semantic signals tuned for B2B (no consumer-bright greens).
+
+## Typography
+- **Display:** Plus Jakarta Sans (Faire wordmark family). h1–h4, weights 500/600/700. Friendly geometric humanist sans — retail-merchandising warmth without consumer cuteness.
+- **Body:** Inter (Joor/Olist body sans). Base **15px** with **line-height 1.6** — dashboard-dense, line-item readable.
+- **Mono:** JetBrains Mono. SKU codes, order numbers, MOQ counts, line-item totals. Instrument-cluster precision for numerics.
+
+Headings track `-0.015em` — Plus Jakarta benefits from a hair of tightening at large sizes. H1 uses `clamp(2.25rem, 5vw, 3.75rem)` — dashboard hero, not editorial poster. Numbers always carry `font-variant-numeric: tabular-nums`. Font features: `"cv11", "ss01", "tnum", "calt"`.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-8` — wide enough for 4-up catalog grids and the order-summary sticky column.
+- **Section padding tiers:**
+  - Hero: `pt-16 pb-12 lg:pt-24 lg:pb-16` — dashboard hero, not magazine cover
+  - Default: `py-14 lg:py-20`
+  - Tight: `py-10 lg:py-14`
+- **Allowed scale values:** 4 6 8 10 12 16 20 24 32 40 48 64 80. Medium density — catalog cards breathe, line-items pack tight.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, never via new tokens.
+
+The palette is **warm-white canvas + single warm-orange accent + restrained semantic signals** — never multiple competing brand colors, never a saturated rainbow. The Faire/Pietra warm-sand stack is the surface language; Joor navy is the text; Shogun orange is the action. Olist teal is reserved for trust signals (verified, on-time) — using it as a CTA color breaks the "one action color" discipline.
+
+Pure black is forbidden — `--foreground` is `215 35% 14%` (Joor navy-ink). Pure white is permitted only as `--card` — catalog cards lift off the warm-sand canvas via the hue shift. Consumer-bright greens are forbidden — `--success-leaf` at `152 48% 36%` is the B2B confirmation tone, restrained and trustworthy.
+
+## Radius
+`--radius: 0.5rem` (8px). **Catalog-card soft, dashboard-restrained.** Pills are allowed (`pillsAllowed: true`) and are the default for category tags, status chips (Backorder, Verified Supplier, Free Shipping), and filter toggles. Right angles read editorial; pillow corners read consumer-app — 8px is the line-sheet sweet spot.
+
+## Shadows
+Four soft utilities — no glows, no color-tinted drops:
+
+- `.shadow-catalog` — default catalog-card elevation. Two-layer near-neutral drop with a faint navy tint. Quiet at rest.
+- `.shadow-catalog-hover` — card lift on hover. Deeper drop with the same tint family.
+- `.shadow-sheet` — order-summary sticky and slide-over panels. Pronounced lift for the surface that holds money decisions.
+- `.ring-focus` — composite focus ring (white inset + 2px primary-orange at 45%). The single focus treatment across inputs and buttons.
+
+Shadows are **near-neutral with a navy bias** — color-saturated drops read consumer/creator-social and break the B2B trust language.
+
+## Motion
+Three keyframes, dashboard-restrained:
+
+- `fade-rise` (300ms) — standard content entrance. Short, dashboard-fast translateY(8px) → 0.
+- `scale-in` (180ms) — dropdowns, popovers, line-item editors. The confirm-interaction gesture.
+- `skeleton-pulse` (1800ms infinite) — catalog grid loading state. Opacity pulse rather than shimmer; shimmer reads consumer.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)` — the universal taste-library curve. `prefers-reduced-motion` is honored — `fade-rise` collapses to opacity-only, `scale-in` to opacity-only, `skeleton-pulse` to a static 0.75 opacity.
+
+No ambient motion. This direction is a dashboard for placing orders — nothing should drift in the background while a buyer is calculating margin.
+
+## Component patterns
+- **Buttons:** primary = solid Shogun-orange filled rect, `rounded-md` (8px), weight 600. Secondary = bordered ghost (border-border, bg-card, foreground text, hover:bg-accent). Tertiary = text-link in primary orange with `underline-offset-2 hover:underline`. Pills reserved for tags and status chips, never for primary CTAs. **One primary CTA per surface** — buyers commit on one button, not five.
+- **Cards:** catalog card = `rounded-lg`, 1px `border-border`, `bg-card`, `shadow-catalog`. Internal padding `p-4 lg:p-5`. Title in Plus Jakarta weight 600; supplier name in `mutedForeground` weight 500; price block in tabular Inter; MOQ and lead time in mono caption. Hover deepens to `shadow-catalog-hover`. **Line-sheet variant** uses `shadow-sheet` on the sticky order-summary column.
+- **Inputs:** compact (`h-9 text-sm`), 1px `border-input`, `bg-card`, `rounded-md`. Focus uses `.ring-focus` (warm-orange glow at 45% with white inset). Label above in foreground weight 500; helper below in `mutedForeground`. Inline validation in `destructive`, `warning-mustard`, `success-leaf`.
+- **CTAs:** the warm-orange filled button is the primary action — "Add to Order," "Submit PO," "Request Samples." Secondary CTAs are bordered ghost buttons. Tertiary are orange underlined text-links. **Never a gradient button** — this is line-sheet trust, not consumer marketing.
+
+## Component families
+None at install time. As `*CatalogCard`, `*LineItemRow`, `*SupplierBadge`, `*OrderSummary` families emerge, the Director lists them here with their shared pattern.
+
+## Recommended rich media
+
+### Cover and hero imagery
+**Product-photography first.** This is a wholesale catalog — every hero is anchored by real product imagery, not abstract gradient or 3D render.
+
+- **Flat-lay product grids** — 6-up or 9-up arrangements on warm-sand seamless paper, slight overhead angle. The Faire homepage template.
+- **Studio-lit single SKUs** — soft natural light, warm-white background matching `--background`, restrained shadow. Crate&Barrel-via-Faire.
+- **Maker-at-work documentary** — supplier shots of a ceramicist's studio, a small-batch food kitchen, a textile loom. Warm color grade, slightly muted saturation, never the saturated-creator-social look.
+- **Order-confirmation moments** — phone-in-hand shots of a buyer reviewing a PO, slight Joor navy gradient overlay for the hero text plate.
+
+### AI tool recommendations
+- **Midjourney** for product flat-lays. Prompt scaffold: *"flat-lay product photography, 6 ceramic vases on warm-sand seamless paper, soft natural overhead light, Faire catalog aesthetic, --ar 4:3"*. Always specify warm sand, never pure white seamless.
+- **Flux** for maker-documentary stills. Prompt scaffold: *"small-batch ceramic studio, maker at wheel, warm afternoon light through north-facing window, documentary 35mm"*.
+- **Recraft** for line-art SKU icons and category illustrations — flat single-color in `--joor-navy`, never gradient.
+- Avoid Midjourney's default consumer-product gloss — explicitly prompt for natural light and warm sand, never studio strobe.
+
+### Aspect ratios
+- **4:3 landscape** — flat-lay catalog grids, the dominant hero ratio.
+- **1:1 square** — individual SKU thumbnails in the catalog grid (mandatory — mixed ratios break the line-sheet rhythm).
+- **3:4 portrait** — single-maker documentary verticals, supplier-story pages.
+- Avoid 16:9 widescreen (cinematic, off-feel for catalog). Avoid 9:16 entirely (creator-social territory).
+
+### Color discipline for imagery
+Stay warm-neutral. Natural light, warm-sand backgrounds, restrained saturation. **If a product photo has a cool/blue cast or a black seamless background, regrade it or do not use it** — the warm-paper surface stack breaks the moment a cool-cast image lands. Saturated brand-colored product flats (a single hot-pink product on white) also break — soften through styling, not Photoshop.
+
+### What to AVOID
+- **Black seamless product photography** — cinematic-dark or couture-luxury territory; reads expensive in the wrong way for B2B wholesale.
+- **Lifestyle stock photography with watermarks** — kills the line-sheet trust instantly.
+- **Saturated gradient hero backgrounds** — creator-social/glassmorphic-modern territory.
+- **3D rendered products** — uncanny, breaks the "real supplier" trust signal.
+- **Decorative line-art ornament** — editorial territory, off-altitude.
+
+### Accessibility
+- Long-form alt-text for all product imagery — *"Six matte-glazed ceramic vases arranged on warm-sand paper, overhead angle, natural afternoon light."* Reads to a buyer evaluating a SKU.
+- Tabular-numeric pricing must use `font-variant-numeric: tabular-nums` so screen-readers and visual scanners read column-aligned totals.
+- Status chips (Verified Supplier, Backorder, On-Time) must carry an icon plus a text label — color alone fails for color-blind buyers.
+- `--olist-teal` on warm-white passes WCAG AA at 14pt+ — verify at small caption sizes; use `--joor-navy` for body copy never teal.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — warm-orange, paired with `.ring-focus` composite on inputs and buttons.
+- **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/marketplace-modern/tokens.ts

@@ -0,0 +1,186 @@
+import type { Direction } from "../schema";
+
+export const marketplaceModern: Direction = {
+  name: "marketplace-modern",
+  ethos:
+    "Faire warm-white catalog · Olist friendly B2B teal · Joor dignified navy · Shogun commerce-builder warmth · Pietra creator-merchant cream",
+  references: [
+    { brand: "Faire", trait: "clean white canvas, warm sand surface, Plus Jakarta type, structured catalog cards" },
+    { brand: "Olist", trait: "deep teal product accent, friendly business UI, Brazilian SMB warmth" },
+    { brand: "Joor", trait: "formal navy, serif accents, B2B dignified — line-sheet luxury" },
+    { brand: "Shogun", trait: "warm orange action color, commerce-builder card grids" },
+    { brand: "Pietra", trait: "cream paper backdrop, creator-merchant marketplace pacing" },
+  ],
+  feel:
+    "Modern B2B wholesale marketplace. Clean white canvas with warm-sand secondary surface, " +
+    "structured product cards that feel like a printed line-sheet, restrained navy text, " +
+    "a single confident warm-orange brand accent. Reads as the surface where a buyer commits " +
+    "a $40k purchase order — dashboard-grade trust, never marketing-loud.",
+
+  fonts: {
+    display: {
+      family: "Plus Jakarta Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "Segoe UI", "sans-serif"],
+      from: "Faire wordmark family — friendly geometric sans, slightly humanist, retail-merchandising warmth",
+      googleFont: "Plus+Jakarta+Sans",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Joor/Olist body sans — neutral, dashboard-ready, tabular numerics for SKUs and unit prices",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["SF Mono", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+      from: "SKU codes, order numbers, MOQ counts — instrument-cluster precision in line items",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.015em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "tnum", "calt"',
+    h1ScaleClamp: "clamp(2.25rem, 5vw, 3.75rem)",
+    bodyBaseSize: "0.9375rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "30 25% 98%", from: "Faire warm-white canvas — barely-tinted paper, not pure white" },
+    foreground: { hsl: "215 35% 14%", from: "Joor dignified navy-ink — deep desaturated navy, never pure black" },
+    card: { hsl: "0 0% 100%", from: "Pure white catalog card — lifts off the warm-sand canvas by hue, not shadow" },
+    popover: { hsl: "0 0% 100%", from: "Same as card — popovers and dropdowns sit on the same paper" },
+
+    primary: { hsl: "22 88% 52%", from: "Shogun commerce-warm orange — the single confident action color" },
+    primaryForeground: { hsl: "0 0% 100%", from: "White on warm orange — CTA contrast" },
+
+    secondary: { hsl: "32 28% 94%", from: "Faire warm-sand secondary — the second surface, where catalog filters sit" },
+    secondaryForeground: { hsl: "215 35% 18%", from: "Navy-ink on warm sand" },
+    muted: { hsl: "32 22% 92%", from: "Pietra cream-muted — quieter panels, table row stripes" },
+    mutedForeground: { hsl: "215 14% 42%", from: "Slate-navy secondary text — meta, supplier names, MOQ captions" },
+    accent: { hsl: "32 28% 90%", from: "Hover surface — one tier deeper than secondary, still warm" },
+    accentForeground: { hsl: "215 35% 14%", from: "Navy-ink on accent" },
+
+    border: { hsl: "30 15% 88%", from: "Warm-paper hairline — Faire catalog card border, visible but quiet" },
+    input: { hsl: "215 18% 82%", from: "Slightly stronger than card border — affordance for line-item fields" },
+    ring: { hsl: "22 88% 52%", from: "Primary orange — focus ring on inputs and active CTAs" },
+
+    destructive: { hsl: "354 70% 48%", from: "Order-error red — out-of-stock, declined payment; warm not enterprise-harsh" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "White on order-error red" },
+
+    brand: {
+      "faire-sand": { hsl: "32 28% 94%", from: "= secondary; Faire warm-sand surface, semantic for catalog backgrounds" },
+      "joor-navy": { hsl: "215 35% 14%", from: "= foreground; Joor dignified navy, semantic for line-sheet headers" },
+      "joor-navy-deep": { hsl: "215 45% 10%", from: "Deeper Joor navy — formal eyebrow text, signature block" },
+      "olist-teal": { hsl: "186 70% 32%", from: "Olist friendly B2B teal — secondary product accent, status-confirmed, ship-on-time" },
+      "shogun-orange": { hsl: "22 88% 52%", from: "= primary; Shogun warm action color" },
+      "shogun-orange-deep": { hsl: "18 82% 44%", from: "Hover/pressed orange — pressed-button state" },
+      "pietra-cream": { hsl: "30 25% 98%", from: "= background; Pietra cream paper, semantic for hero canvas" },
+      "success-leaf": { hsl: "152 48% 36%", from: "Order-confirmed green — restrained, business-trustworthy not consumer-bright" },
+      "warning-mustard": { hsl: "38 90% 50%", from: "Backorder/low-stock amber — caution without alarm" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80],
+    containerMax: "max-w-7xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-16 pb-12 lg:pt-24 lg:pb-16",
+      default: "py-14 lg:py-20",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-catalog":
+        "0 1px 2px hsl(215 30% 20% / 0.04), 0 2px 6px hsl(215 30% 20% / 0.05)",
+      "shadow-catalog-hover":
+        "0 2px 4px hsl(215 30% 20% / 0.05), 0 12px 24px hsl(215 30% 20% / 0.08)",
+      "shadow-sheet":
+        "0 4px 8px hsl(215 30% 20% / 0.06), 0 24px 48px hsl(215 30% 20% / 0.10)",
+      "ring-focus":
+        "0 0 0 2px hsl(0 0% 100%), 0 0 0 4px hsl(var(--ring) / 0.45)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 300,
+      loop: 1800,
+      ambient: 0,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 300,
+        iteration: "once",
+        purpose: "catalog card and section entrance — short, dashboard-fast",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.97); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 180,
+        iteration: "once",
+        purpose: "dropdowns, popovers, line-item editors — confirms interaction",
+      },
+      "skeleton-pulse": {
+        css:
+          "0%, 100% { opacity: 0.55; }\n" +
+          "50% { opacity: 1; }",
+        defaultDuration: 1800,
+        iteration: "infinite",
+        purpose: "catalog grid loading state — pulse rather than shimmer, B2B-restrained",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid warm-orange filled rect (bg-primary text-primary-foreground rounded-md font-medium), 8px radius, weight 600. " +
+      "Secondary = bordered ghost (border border-border bg-card text-foreground hover:bg-accent). " +
+      "Tertiary = link (text-primary underline-offset-2 hover:underline). " +
+      "Pills reserved for category tags and status chips (Backorder, Verified Supplier, Free Shipping). " +
+      "One primary CTA per surface — buyers commit on one button, not five.",
+    card:
+      "Catalog card = rounded-lg (8px), 1px border-border, bg-card, shadow-catalog. Padding p-4 lg:p-5. " +
+      "Title in Plus Jakarta weight 600; supplier name in muted-foreground weight 500. " +
+      "Price block in tabular Inter; MOQ + lead time in mono caption. " +
+      "Hover lifts to shadow-catalog-hover. Line-sheet variant uses shadow-sheet on the order-summary sticky.",
+    input:
+      "Compact (h-9 text-sm), 1px border-input, bg-card, rounded-md. " +
+      "Focus uses ring-focus (warm-orange glow at 45%). Label above in foreground weight 500; helper below in muted-foreground. " +
+      "Inline validation: destructive on invalid quantity, warning-mustard on low-stock, success-leaf on confirmed.",
+    cta:
+      "Primary action is the warm-orange filled button — 'Add to Order', 'Submit PO', 'Request Samples'. " +
+      "Secondary = bordered ghost. Tertiary = orange underlined link. " +
+      "Never a gradient button — this is line-sheet trust, not consumer marketing.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/marketplace-vintage/THEME.md

@@ -0,0 +1,110 @@
+# Design Direction — Marketplace-Vintage
+
+## Ethos
+Etsy warm paper · Depop saturated youth · Grailed sharp resale · Vestiaire dignified vintage · eBay redesigned restraint
+
+## Feel
+A warm paper canvas you'd flip through at a flea market. A friendly geometric sans does the heavy lifting; a hand-feeling humanist serif sits on top for titles and seller stories. Personality is forward — every card carries a maker, a price, and a story. Decorative but not corporate-marketplace; loud where the listing earns it, quiet where the seller wants restraint.
+
+## Reference brands
+- **Etsy** → warm orange + friendly geometric sans + hand-crafted feel. Orange is the canonical action color; warm paper is the canvas.
+- **Depop** → saturated youth palette + grid density + casual energy. Story tags, plum secondary, heart-pop interaction.
+- **Grailed** → sharp black + Helvetica + men's-resale density. The ink color and the tabular price treatment trace here.
+- **Vestiaire Collective** → cream + serif + luxury-resale dignified. The display serif and the dignified verified-seller tier trace here.
+- **eBay (recent redesign)** → warm white + restraint + tight grid. The grid discipline and the absence of clutter trace here.
+
+## 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 **warm paper** (background) → **lifted warm paper** (card) → **deeper warm paper** (secondary/muted/accent). Depth comes from soft drop shadows and the warm hairline border. Pure white is forbidden — `--paper-warm` replaces it; pure black is forbidden — `--ink-grailed` (warm-tilted near-black) replaces it.
+
+Brand tokens: `--paper-warm`, `--paper-deep`, `--orange-etsy`, `--plum-depop`, `--olive-vintage`, `--mustard-tag`, `--ink-grailed`, `--cream-vest`. Primary is `--orange-etsy`. Plum is a secondary story-accent (tags, sub-CTAs). Olive is the verified-seller / vintage-authenticated tier. Mustard is the price-tag color — On Sale chips and Make Offer affordances.
+
+## Typography
+- **Display:** Fraunces (the Google-Font swap for Recoleta — Vestiaire/Etsy hand-warm display serif). h1–h4 and listing-card titles. Tracking `-0.01em` — confident, near-zero.
+- **Body:** DM Sans (Etsy/Depop friendly geometric sans). Body base **16px** with **line-height 1.55** — marketplace-comfortable, slightly looser than `realestate-marketplace`.
+- **Mono:** DM Mono. Price, SKU, condition, vintage year. Tabular numerics always on for prices.
+
+H1 uses `clamp(2.25rem, 5.5vw, 4rem)`. Font features: `"liga"`, `"ss01"`, `"tnum"`. Display serif paired with a friendly sans is the load-bearing combination — Fraunces alone reads luxury-vintage; DM Sans alone reads tech-marketplace; together they read flea-market-with-taste.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-8` — wide enough for an Etsy-style grid of 4–5 columns at desktop, comfortable single column on mobile.
+- **Section padding tiers:**
+  - Hero: `pt-16 pb-12 lg:pt-24 lg:pb-16`
+  - Default: `py-12 lg:py-20`
+  - Tight: `py-8 lg:py-12`
+- **Allowed scale values:** 4 6 8 10 12 16 20 24 32 40 48 64 80. Medium density — denser than catalog, looser than utility.
+
+## Color
+No hex in component files. All color via tokens. Opacity via `/N` modifier. The palette is intentionally warm — orange, plum, olive, mustard, cream — and decorations are earned through tag color and seller-personality treatments, not through chrome saturation.
+
+Color role discipline:
+- **Orange** = primary action (Add to Cart, Buy It Now, Save).
+- **Plum** = secondary story tag (Vintage 1970s, One-of-a-Kind, Maker's Story).
+- **Olive** = verified/authenticated tier (Verified Seller, Vestiaire-style luxury-resale badge).
+- **Mustard** = price tag — On Sale, Make Offer, Last One Left.
+- **Red (destructive)** = removed listing, sold-out status only.
+
+White is forbidden; `--paper-warm` is the canvas. Pure black is forbidden; `--ink-grailed` is the warm-tilted ink.
+
+## Radius
+`--radius: 0.625rem` (10px). Softer than utility, never balloon, sits between soft-modern and editorial. Pills are allowed (`pillsAllowed: true`) — condition pills, category chips, story tags. Pill shape is reserved for data semantics (it IS a tag/badge); never used as a button shape on primary CTAs.
+
+## Shadows
+**Soft.** Three utilities:
+- `.shadow-card` — base listing-card lift, warm-tinted: `0 1px 2px hsl(var(--ink-grailed) / 0.05), 0 4px 12px hsl(var(--ink-grailed) / 0.07)`.
+- `.shadow-card-hover` — listing-card hover lift, slightly deeper.
+- `.shadow-pricetag` — `1px 1px 0 hsl(var(--ink-grailed) / 0.9)`, a single hard offset shadow that gives the mustard On Sale chip a stamped-price-tag feel.
+
+No glows. Shadows are warm-tinted (warm ink, not blue ink) — this matters; blue-tinted shadows on the warm canvas read off.
+
+## Motion
+Four keyframes:
+- `fade-rise` — 320ms, the standard listing entrance. Quick, casual, not ceremonial.
+- `tag-wiggle` — 400ms once, `rotate(-1.5deg) → rotate(1.5deg)` on On Sale / New / Maker tag hover. Hand-pinned-label energy.
+- `heart-pop` — 280ms once, scale `1 → 1.35 → 1` on favorite/save. Confirms a save with vintage-feeling overshoot.
+- `marquee-slow` — 28000ms infinite, the seller-strip and category-strip horizontal scroll. Flea-market frieze along the top of category pages.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — the marquee in particular respects the media query and pauses to a static strip.
+
+## Component patterns
+- **Buttons:** Solid-fill primary in `--orange-etsy` with white text, 0.625rem radius, `shadow-card`. Secondary is ghost (border, foreground text). Tertiary is text-link in primary. Pill shape is reserved for tags and chips — **never for primary CTAs**. Make Offer / On Sale buttons may use `--mustard-tag` with `--ink-grailed` text for an explicit price-tag feel + `shadow-pricetag`.
+- **Cards:** Listing card: rounded radius, bg-card (lifted warm paper), `shadow-card`, no border. Photo-first at **1:1 square** — the marketplace standard for goods (vs. 4:3 for real estate). Below the photo: title in Fraunces 600, price in DM Mono, seller handle in DM Sans 500 with avatar. Hover applies `shadow-card-hover`. Story tags (Vintage 1970s, Handmade) overlay the photo top-left as pills.
+- **Inputs:** Full rounded box with 1px `--input` border, bg-card. Search bar carries a leading magnifier icon and a trailing segmented control ("in shops / in listings"). Focus = 2px primary ring at 40% opacity.
+- **CTA links:** Filled primary orange button for Add to Cart / Buy It Now. Heart (favorite) is icon-only ghost on the card; Follow Seller is pill ghost. Mustard On Sale chip is **a status pill, never a CTA** — the CTA below it is the orange Buy button.
+
+## Recommended rich media
+Marketplace-Vintage is photography-driven but the photography is **deliberately seller-personal**, not catalog-styled. The canonical hero photo is taken by the seller — on a wood tabletop, a tile floor, a thrifted velvet couch — with **natural window light, slight color cast acceptable**. The point is that a human made this listing, not a studio.
+
+Five photo treatments are canon:
+1. **Tabletop product** — flat or three-quarter, natural surface, the staple Etsy / Depop shot.
+2. **Worn / modeled** — clothing on a person, mirror selfie acceptable on Depop-tier listings, full-length-mirror on Grailed-tier.
+3. **In-situ environment** — vintage furniture in the seller's apartment, ceramics on a kitchen shelf.
+4. **Detail / texture macro** — close-up of fabric weave, ceramic glaze, hardware patina.
+5. **Story / maker portrait** — the seller in their studio, used on seller pages and authenticated-listing pages.
+
+**AI tool recommendations:** Listing photography itself is human-shot — AI-generated product imagery on a marketplace is a fraud signal. For **category-page hero imagery and editorial seller-story photography**, **Midjourney v6+** with prompts like *"editorial product photography, natural window light, wood tabletop, vintage ceramics, slight film grain, Kodak Portra 400, Kinfolk magazine"* works for filler. For **decorative ornament** (category badges, seller-tier crests, hand-drawn category icons), **Recraft** with *"hand-drawn linocut illustration, single warm color, simple, vintage flea-market sign"* hits the tone.
+
+**Aspect ratios:** 1:1 square for product/listing photography (the marketplace standard; tessellates in grid; matches Instagram-native seller behavior); 4:5 portrait for modeled clothing; 16:9 for category hero photography and seller-story features.
+
+**Video:** Short looping product videos (turn-around, fabric-flow, detail-pan) are welcome inline at 6–12 seconds, autoplay-muted-loop on the listing detail page only — never in the grid. Tour-of-shop videos sit behind a poster image. ≤3 MB per loop, H.265 or AV1.
+
+**Performance:** thumbnail ≤25 KB AVIF at 600w; lightbox image ≤100 KB at 1600w. The grid must lazy-load aggressively — a vintage-marketplace category page often holds 200+ listings.
+
+**Avoid:** glossy studio-cyc product photography (reads corporate-marketplace), AI-generated product photos (trust failure), hyper-saturated Depop-2018 filters (dated), serif body type at small sizes (illegible on the dense grid), green CTAs (Etsy-confusion — orange is the only primary).
+
+**Accessibility:** alt-text describes the item as the seller would in a caption — *"Cream wool cardigan, hand-knit, size medium, photographed flat on oak tabletop"*. Story tag text must be readable independently of color — the tag color is reinforcement, the word is the meaning.
+
+## Component families
+None at install time. Likely first families: listing-card (square photo, seller block), story-tag (pill with category color), seller-card (avatar + handle + verified tier), price-tag-chip (mustard On Sale, hard offset shadow).
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` background, foreground text — orange selection, slightly stronger than the marketplace baseline to feel warm.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.55)` — visible orange ring, accessibility-first.
+- **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.