@stylecrib/cli 0.3.1 → 0.3.3

package/themes/logistics-modern/tokens.ts

@@ -0,0 +1,187 @@
+import type { Direction } from "../schema";
+
+// logistics-modern — Shippo / ShipBob / Flexport clean fulfillment dashboard.
+// Cool-white canvas, signal blue, dense rate-comparison tables, network-map
+// gravity. Reads like a logistics-ops console — productive, never decorative.
+
+export const logisticsModern: Direction = {
+  name: "logistics-modern" as Direction["name"],
+  ethos:
+    "Shippo cool-white + carrier-tile chrome · ShipBob warm-blue dashboard density · Flexport ocean-navy + cargo-grid · " +
+    "ShipStation rate-table density · Easyship friendly carrier-comparison cards",
+  references: [
+    { brand: "Shippo", trait: "cool-white canvas + carrier-tile rate cards" },
+    { brand: "ShipBob", trait: "warm-blue dashboard density + fulfillment-network map" },
+    { brand: "Flexport", trait: "ocean-navy + cargo-grid, freight-forwarding clarity" },
+    { brand: "ShipStation", trait: "dense rate-table comparison, tabular numerics" },
+    { brand: "Easyship", trait: "friendly carrier-comparison cards, integration-logo strip" },
+  ],
+  feel:
+    "A logistics-ops console. Cool-white canvas, a single signal-blue accent, hairline borders carrying the structure. " +
+    "Rate-comparison tables are the hero — carriers × service-levels at a glance, prices in mono tabular. " +
+    "The fulfillment-network map is a working chart, not a decorative globe. Integration-logo strips read as proof, not " +
+    "social validation. The page is what an ops manager opens on a Tuesday at 8am.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Shippo / Flexport marketing display — Inter at semi-heavy weights",
+      googleFont: "Inter",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "ShipBob / ShipStation body — Inter 14px, dashboard density",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "IBM Plex Mono",
+      fallback: ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "monospace"],
+      from: "rate tables, tracking numbers, weight/dim units — Plex Mono scans at row height",
+      googleFont: "IBM+Plex+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.022em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "cv11", "ss01", "ss03"',
+    h1ScaleClamp: "clamp(2rem, 4vw, 3rem)",
+    bodyBaseSize: "0.9rem",
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "210 25% 98%", from: "Shippo cool-white — barely-blue canvas, not Mercury cream" },
+    foreground: { hsl: "215 35% 12%", from: "deep navy-ink — Flexport ops-console ink" },
+    card: { hsl: "0 0% 100%", from: "pure white card — lifts off cool-white background" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "218 88% 46%", from: "ShipBob signal-blue — the one accent for CTA and selected state" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on signal-blue" },
+    secondary: { hsl: "210 22% 95%", from: "cool gray surface — table headers, inset panels" },
+    secondaryForeground: { hsl: "215 35% 12%", from: "ink on cool gray" },
+    muted: { hsl: "210 20% 94%", from: "muted cool gray — disabled rows" },
+    mutedForeground: { hsl: "215 12% 42%", from: "slate gray — table meta, weight units, timestamps" },
+    accent: { hsl: "218 70% 96%", from: "pale signal-blue hover — selected-row highlight" },
+    accentForeground: { hsl: "218 88% 28%", from: "deep signal-blue ink on pale" },
+    border: { hsl: "215 16% 86%", from: "cool hairline — the structural line in every table and card" },
+    input: { hsl: "215 16% 86%", from: "same as border" },
+    ring: { hsl: "218 88% 46%", from: "primary signal-blue — focus ring" },
+    destructive: { hsl: "356 72% 50%", from: "alert red — distinct from any blue accent, used for failed-delivery/error" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on alert red" },
+    brand: {
+      "signal-blue": { hsl: "218 88% 46%", from: "= primary; ShipBob signal" },
+      "signal-blue-deep": { hsl: "218 84% 32%", from: "hover, gradient anchor, sidebar surface" },
+      "signal-blue-soft": { hsl: "218 70% 96%", from: "selected-row bg, network-line halo" },
+      "ocean-navy": { hsl: "212 60% 22%", from: "Flexport ocean-navy — used on sidebar and map basemap" },
+      "freight-amber": { hsl: "32 92% 52%", from: "transit-in-progress amber — semantic only" },
+      "delivered-green": { hsl: "146 60% 38%", from: "delivered/active status — semantic only" },
+      "map-land": { hsl: "210 22% 93%", from: "map basemap land — recessive" },
+      "map-route": { hsl: "218 88% 46%", from: "shipment route line — same as primary signal" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 64],
+    containerMax: "max-w-7xl",
+    containerPadding: "px-4 lg:px-6",
+    sectionPadding: {
+      hero: "pt-12 pb-8 lg:pt-16 lg:pb-12",
+      default: "py-10 lg:py-14",
+      tight: "py-6 lg:py-10",
+    },
+  },
+
+  radius: {
+    base: "0.375rem",
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "shadow-card":
+        "0 1px 2px hsl(215 35% 12% / 0.04), 0 1px 2px hsl(215 35% 12% / 0.03)",
+      "shadow-popover":
+        "0 4px 14px hsl(215 35% 12% / 0.08), 0 1px 2px hsl(215 35% 12% / 0.06)",
+      "shadow-table-row":
+        "inset 0 -1px 0 hsl(var(--border))",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 200,
+      loop: 1400,
+      ambient: 2400,
+    },
+    keyframes: {
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "table-row and carrier-card entrance — opacity only",
+      },
+      "route-dash": {
+        css:
+          "from { stroke-dashoffset: 0; }\n" +
+          "to { stroke-dashoffset: -24; }",
+        defaultDuration: 1400,
+        iteration: "infinite",
+        purpose: "in-transit shipment routes on the network map flow with a dashed line",
+      },
+      "row-hover": {
+        css:
+          "from { background-color: transparent; }\n" +
+          "to { background-color: hsl(var(--accent)); }",
+        defaultDuration: 120,
+        iteration: "once",
+        purpose: "rate-table row hover transition — almost imperceptible",
+      },
+      "shimmer": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 1400,
+        iteration: "infinite",
+        purpose: "loading skeleton for rate-comparison cells while carriers respond",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Solid signal-blue primary (rounded-md, shadow-card) for the single commit — Buy label, Connect carrier. " +
+      "Secondary is ghost (border + foreground). Tertiary is text-link blue. " +
+      "Hover deepens fill to signal-blue-deep; no scale, no shadow growth.",
+    card:
+      "Rounded-md, 1px --border, bg-card, shadow-card. Padding p-4 lg:p-5. " +
+      "Carrier-rate card holds carrier logo, service level, price, ETA — modular, one purpose. " +
+      "Title in display sans, price in mono tabular.",
+    input:
+      "Full rounded-md box, 1px --input border, bg-card. Tracking-number input is mono. " +
+      "Focus = 2px signal-blue ring at 45% opacity. Weight/dim inputs right-aligned mono.",
+    cta:
+      "Primary signal-blue button for Buy label / Connect. " +
+      "Status pills: freight-amber for in-transit, delivered-green for delivered, destructive for failed. " +
+      "Rate-table selected row uses signal-blue-soft bg with a left-edge signal-blue accent bar.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.45)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/magazine-glossy/THEME.md

@@ -0,0 +1,74 @@
+# Design Direction — Magazine-Glossy
+
+## Ethos
+Vogue cover masthead · Vanity Fair Hollywood-issue display Didone · Harper's Bazaar Brodovitch composition · T Magazine cream stock · Document Journal photo-essay strip
+
+## Feel
+Cream paper stock with oversized Didone display headlines and a heavy reliance on full-bleed editorial photography. The page is a slow, considered glossy magazine spread — large image, single caption block, sparse type. Color is restrained to ink, cream, blush, and a single deep editorial accent (oxblood). Atmosphere over information density.
+
+## Reference brands
+- **Vogue** → oversized Didone masthead, cover-line typography.
+- **Vanity Fair** → Hollywood-issue feature openers, contributor portraits, oxblood accent.
+- **Harper's Bazaar** → Brodovitch asymmetric photo composition, type married to image.
+- **T Magazine** → cream stock + photographic full-bleed editorial.
+- **Document Journal** → photo-essay strip, generous caption blocks.
+
+## Tokens
+HSL triples in `src/index.css`. Brand tokens: `--ink`, `--cream`, `--oxblood`, `--blush`, `--ink-soft`, `--photo-frame`. The warm ink (`hsl(20 25% 10%)`) has a deliberate brown undertone — pure black reads dot-matrix; this reads Bodoni-printed.
+
+Primary accent is **Vanity Fair oxblood** (`hsl(350 35% 30%)`) — one deep editorial color. Blush (`hsl(16 35% 84%)`) is the Bazaar page-trim accent, used for hover and inset panels.
+
+## Typography
+- **Display:** Bodoni Moda (Vogue/Vanity Fair high-contrast Didone). Tracking `-0.025em` — very tight, masthead feel.
+- **Body:** Cormorant Garamond (T Magazine body serif). 17px / `line-height: 1.7` — magazine pacing.
+- **Mono:** JetBrains Mono. Photo credits, contributor titles, captions — always small-caps with positive tracking.
+
+H1 uses `clamp(3.5rem, 10vw, 8rem)` — oversized cover-line scale.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-12` — full-bleed photography needs the width.
+- **Section padding:** hero `pt-24 pb-16 lg:pt-36 lg:pb-24`; default `py-20 lg:py-32`; tight `py-12 lg:py-16`.
+- **Scale:** 4 6 8 12 16 20 24 32 48 64 96 128. Glossy breathes.
+
+## Color
+No hex in components. Color belongs to the photography, not the chrome. White is forbidden — `--cream` replaces it. The four colors of the page are ink, cream, blush, oxblood.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Photo frames are rectangles. Pills disallowed — every glossy magazine spread frames its image with a straight rule.
+
+## Shadows
+Soft. Two utilities: `.photo-frame` (single bottom hairline beneath captions) and `.page-lift` (a subtle 8px / 32px glossy-paper lift). Glows are forbidden — atmosphere is photographic, not luminous.
+
+## Motion
+Two keyframes. `fade-rise` (1100ms) — slow magazine-spread settle. `image-breathe` (24,000ms infinite) — very slow ken-burns on hero photography, honors reduced-motion by pausing.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`.
+
+## Component patterns
+- **Buttons:** text-link CTAs in `--ink`, underline on hover. The single Subscribe is the only solid: `--ink` bg + `--cream` fg, sharp rect, no radius. Never a colored fill — color is for photography.
+- **Cards:** top + bottom hairlines only. Background `--cream`. Title in Bodoni, kicker in mono caps. Padding `p-8 lg:p-12`. Captions live in mono italic.
+- **Inputs:** border-bottom only. Mono small-caps label above, Cormorant italic placeholder.
+- **CTA links:** text-link in `--ink`, underline on hover. **Never a colored chip.**
+
+## Bespoke section
+Featured-story photo-essay strip (one big full-bleed image with a generous caption block: image-credit, story-kicker, title, deck) + a contributor strip with four writers / photographers each with a circular portrait, name in Bodoni, role + contribution count in mono caps + a subscriber-prompt card with email-capture + tier-label. The composition is asymmetric — Bazaar/Brodovitch tradition — not a centered hero with three pillars.
+
+## Recommended rich media
+Photography is everything. Editorial portraiture (Annie Leibovitz lighting), fashion shoots (Steven Meisel composition), or Brodovitch-style high-contrast b&w. Always full-bleed within the photo frame; captions sit *under* the image with credits in mono italic.
+
+**AI tool recommendations:** Midjourney prompts like *"Vogue cover portrait, Steven Meisel lighting, 85mm, Kodak Portra 400, magazine-glossy print"*. For abstract atmospheric shots: *"Harper's Bazaar Brodovitch, high-contrast b&w, asymmetric composition"*. Avoid newsroom photojournalism (newspaper-classic territory) and tech-product renders.
+
+**Aspect ratios:** 4:5 portrait (the magazine page) or 3:2 landscape. Never 16:9. Captions are mandatory, in mono italic: *"Photographed by Helmut Newton, Paris, 1975."*
+
+**Avoid:** stock photography, animated GIFs, dark moody product shots, gradient backgrounds, glassmorphic anything, pill-shaped chips, drop shadows, lens flare, AI photos with uncanny features.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.18)` (oxblood at 18%).
+- **Focus ring:** `1px solid hsl(var(--ring))`.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction.

package/themes/magazine-glossy/tokens.ts

@@ -0,0 +1,158 @@
+import type { Direction } from "../schema";
+
+// Note: "magazine-glossy" is not yet in the Direction["name"] enum.
+// The schema is closed; until it is extended this file casts the name.
+
+export const magazineGlossy: Direction = {
+  name: "magazine-glossy" as Direction["name"],
+  ethos: "Vogue cover masthead · Vanity Fair Hollywood-issue display Didone · Harper's Bazaar Brodovitch composition · T Magazine cream stock · Document Journal photo-essay strip",
+  references: [
+    { brand: "Vogue", trait: "oversized Didone masthead, cover-line typography" },
+    { brand: "Vanity Fair", trait: "Hollywood-issue feature openers, contributor portraits" },
+    { brand: "Harper's Bazaar", trait: "Brodovitch asymmetric photo composition, type married to image" },
+    { brand: "T Magazine (NYT)", trait: "cream stock + photographic full-bleed editorial" },
+    { brand: "Document Journal", trait: "photo-essay strip, generous caption blocks" },
+  ],
+  feel:
+    "Cream paper stock with oversized Didone display headlines and a heavy reliance on full-bleed editorial photography. " +
+    "The page is a slow, considered glossy magazine spread — large image, single caption block, sparse type. " +
+    "Color is restrained to ink, cream, blush, and a single deep editorial accent. Atmosphere over information density.",
+
+  fonts: {
+    display: {
+      family: "Bodoni Moda",
+      fallback: ["Didot", "Bodoni 72", "Playfair Display", "Georgia", "serif"],
+      from: "Vogue/Vanity Fair high-contrast Didone — masthead cover-line feel",
+      googleFont: "Bodoni+Moda",
+      weights: [400, 500, 700, 900],
+    },
+    body: {
+      family: "Cormorant Garamond",
+      fallback: ["EB Garamond", "Iowan Old Style", "Georgia", "serif"],
+      from: "T Magazine body serif — humanist, breathes against Bodoni display",
+      googleFont: "Cormorant+Garamond",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "photo credits, captions, contributor titles — small-cap mono instrument feel",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.025em",         // Didone wants very tight — masthead feel
+    bodyTracking: "0.005em",
+    fontFeatureSettings: '"liga", "dlig", "onum"',
+    h1ScaleClamp: "clamp(3.5rem, 10vw, 8rem)",   // oversized — cover-line scale
+    bodyBaseSize: "1.0625rem",
+    bodyLineHeight: "1.7",
+  },
+
+  colors: {
+    background: { hsl: "32 32% 94%", from: "T Magazine cream paper stock — warm, glossy" },
+    foreground: { hsl: "20 25% 10%", from: "deep warm ink — never pure black, has a brown undertone" },
+    card: { hsl: "32 32% 97%", from: "lighter cream card — sits on the paper" },
+    popover: { hsl: "32 32% 97%", from: "same as card; depth from caption rules" },
+    primary: { hsl: "350 35% 30%", from: "Vanity Fair deep oxblood — single editorial accent" },
+    primaryForeground: { hsl: "32 32% 94%", from: "cream on oxblood" },
+    secondary: { hsl: "32 25% 89%", from: "deeper cream — caption blocks and photo gutters" },
+    secondaryForeground: { hsl: "20 25% 10%", from: "ink on cream" },
+    muted: { hsl: "32 25% 89%", from: "same as secondary; differentiation by usage" },
+    mutedForeground: { hsl: "20 12% 36%", from: "secondary type — credits, contributor titles" },
+    accent: { hsl: "16 35% 84%", from: "blush — Harper's Bazaar pink page-trim, hover states only" },
+    accentForeground: { hsl: "20 25% 10%", from: "ink on blush" },
+    border: { hsl: "20 14% 78%", from: "caption-block rule — visible, gallery-frame style" },
+    input: { hsl: "20 14% 78%", from: "same as border" },
+    ring: { hsl: "350 35% 30%", from: "primary oxblood, focus only" },
+    destructive: { hsl: "0 60% 42%", from: "editorial alert red — different family from primary oxblood" },
+    destructiveForeground: { hsl: "32 32% 94%", from: "cream on alert" },
+    brand: {
+      ink: { hsl: "20 25% 10%", from: "= foreground; deep warm ink" },
+      cream: { hsl: "32 32% 94%", from: "= background; the glossy paper stock" },
+      oxblood: { hsl: "350 35% 30%", from: "= primary; Vanity Fair deep editorial accent" },
+      blush: { hsl: "16 35% 84%", from: "= accent; Bazaar page trim, soft pink" },
+      "ink-soft": { hsl: "20 20% 22%", from: "deck text, secondary headlines" },
+      "photo-frame": { hsl: "20 14% 78%", from: "= border; gallery-frame rule around full-bleed photos" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128],   // glossy breathes
+    containerMax: "max-w-6xl",         // wide — full-bleed photography needs the room
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-36 lg:pb-24",
+      default: "py-20 lg:py-32",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0",                           // sharp — photo frames are rectangles
+    pillsAllowed: false,
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "photo-frame":
+        "0 1px 0 0 hsl(var(--border))",   // single gallery-rule under captions
+      "page-lift":
+        "0 8px 32px hsl(var(--ink) / 0.08)",   // subtle glossy-paper lift for feature cards
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1100,                     // slow, magazine pacing
+      loop: 4000,
+      ambient: 24000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(28px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1100,
+        iteration: "once",
+        purpose: "feature entrance — slow rise, magazine spread settling onto the page",
+      },
+      "image-breathe": {
+        css:
+          "0%, 100% { transform: scale(1.02); }\n" +
+          "50% { transform: scale(1.05); }",
+        defaultDuration: 24000,
+        iteration: "infinite",
+        purpose: "very slow ken-burns on full-bleed editorial photography",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Text-link CTAs in --ink with underline on hover. The single subscribe CTA may be a solid --ink fill with --cream text. " +
+      "Never a colored fill button — color belongs to the photography, not the controls.",
+    card:
+      "Top hairline + bottom hairline only. Background is --cream, no fill differentiation. " +
+      "Title in Bodoni Moda display, kicker in mono small caps. Padding p-8 lg:p-12. Captions live in mono.",
+    input:
+      "Border-bottom only (1px --ink-soft). Label in mono small caps above. Placeholder italic Cormorant.",
+    cta:
+      "Text-link with --ink, underline on hover. Subscribe is the only solid: --ink bg + --cream fg, sharp rect, no radius.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.18)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/marker-mag/THEME.md

@@ -0,0 +1,128 @@
+# Marker Mag
+
+> 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.
+
+**Slug:** `marker-mag` — **Surface:** web — **Density:** dense
+
+## 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.
+
+
+## Signature move
+
+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.
+
+## Palette
+
+- **bg:** `#E35BA0`
+- **surface:** `#2C2C2C`
+- **ink:** `#FFFFFF`
+- **accent:** `#0000EE`
+
+## 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.)
+
+## 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.
+
+
+## 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"
+
+## 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 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 (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)
+- 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/tailwind.snippet.ts

@@ -0,0 +1,15 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: marker-mag
+export const markerMagTailwindExtend = {
+  colors: {
+    bg: "#E35BA0",
+    surface: "#2C2C2C",
+    ink: "#FFFFFF",
+    accent: "#0000EE",
+  },
+  fontFamily: {
+    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)."],
+  },
+};