@stylecrib/cli 0.3.1 → 0.3.2

package/themes/couture-luxury/THEME.md

@@ -0,0 +1,85 @@
+# Design Direction — Couture-Luxury
+
+## Ethos
+Hermès saddle leather · Loro Piana cashmere · Aman cream paper · Gucci heritage type · Aesop apothecary restraint
+
+## Feel
+Warm cream surfaces with a single copper-oxblood accent, heritage serif at oversized magazine scale, generous whitespace that signals expense. Quiet luxury — never gold-chain ostentatious. Reads like the inside cover of a Hermès catalog.
+
+## Reference brands
+- **Hermès** → saddle leather, copper accents, restrained. The oxblood/saddle accent is the only saturated color on the page.
+- **Loro Piana** → cashmere warmth, neutral palette. Surfaces sit in a tight family of warm beiges; depth is felt, not seen.
+- **Aman Resorts** → cream paper surfaces, Aesop-like quiet. The page is hospitality, not interface.
+- **Gucci** → heritage Italian serif, ornate but composed. Display type carries the brand; ornament earns its place.
+- **Aesop** → apothecary minimalism. Hairline rules, mono captions, no decoration that isn't functional.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand·trait — untraceable tokens fail review. Brand tokens: `--saddle` (Hermès saddle leather tan), `--champagne` (Aman cream gold, quiet), `--cocoa` (Loro Piana deep heritage ink), `--paper` (Hermès cream, alias for background).
+
+Surface stack is **cream paper** (background) → **lighter cream** (card/popover) → **cashmere** (secondary/muted) → **deeper cashmere** (accent). Depth comes from hairline borders, never from fill contrast. Pure white is forbidden; `--card` is `36 32% 96%` (cream-tinted). Pure black is forbidden; `--foreground` is `25 20% 14%` (dark cocoa).
+
+Primary is **Hermès oxblood / saddle leather copper-brown** (`14 55% 32%`) — the single heritage accent. Never a saturated brand color, never gold-chain bright.
+
+## Typography
+- **Display:** Playfair Display (heritage Italian serif — Gucci/Vogue couture-catalog feel). Weights 400/700/900. Italic is canonical for CTAs and pull quotes.
+- **Body:** Inter (Aesop/Loro Piana clean sans). Weights 400/500. Body base **17px** with **line-height 1.75** — Aman-level breathing.
+- **Mono:** JetBrains Mono. Reserved for **small captions only** — issue numbers, atelier names, lot marks. Never body, never headings.
+
+Heading tracking is **`-0.01em`** — a touch of negative tracking; heritage serifs settle into themselves. Body tracking is `0`. Font features: `"liga", "dlig", "onum"` — discretionary ligatures and old-style numerals; couture catalogs use them. H1 uses `clamp(3rem, 8vw, 6.5rem)` — oversized couture-catalog scale.
+
+## Spacing
+- **Container:** `max-w-3xl px-6 lg:px-16` — couture catalogs read narrow. Whitespace is the luxury; wide columns break the feel.
+- **Section padding tiers:**
+  - Hero: `pt-32 pb-24 lg:pt-48 lg:pb-36` — deliberately oversized; the title page breathes
+  - Default: `py-24 lg:py-40`
+  - Tight: `py-16 lg:py-24`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 96 128 160. Low density — Aman-level generous space.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token. White and pure black are forbidden — `--paper` and `--cocoa` replace them. The oxblood (`--primary`) is the only saturated color on the page; using two saturated accents at once breaks the quiet-luxury feel. `--champagne` is for hairline dividers and small ornament only — never a fill that suggests metallic.
+
+## Radius
+`--radius: 0`. **Sharp corners only — print convention.** Pills are disallowed (`pillsAllowed: false`) — they read web-app, not heritage. Ornament has to earn its place: if a UI element needs softness, achieve it through whitespace and serif italics, not rounding.
+
+## Shadows
+**Minimal.** Single utility: `.hairline-bottom` — `0 1px 0 0 hsl(var(--foreground) / 0.12)`. A 1px line at 12% opacity, the heritage column rule. No drop shadows. No glows. The cream paper is the surface; the foreground hairline is the only line on it.
+
+## Motion
+Single keyframe: `fade-rise` (opacity + 20px translate, **1200ms** once). That is the only entrance. No marquee, no parallax, no ambient loops. **Reveal duration is 1200ms — deliberately slow.** Luxury doesn't perform; the page settles into place.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — the keyframe is wrapped in the media query.
+
+## Component patterns
+- **Buttons:** primary CTA is a **serif italic underlined text-link in oxblood** (`--primary`). The solid button is reserved for **ONE hero "Atelier" CTA per page** — cocoa background + paper text, sharp rectangle, no radius. No chips, no gradients, no button shadows.
+- **Cards:** hairline top + bottom border (`--foreground / 0.12`), **no fill differentiation from page**. Internal padding `p-10 lg:p-16`. No shadows. Title in display serif, often italic.
+- **Inputs:** border-bottom only (1px `--border`). No full box. Label sits above in mono small-caps. Placeholder italic serif.
+- **CTAs:** text-link in oxblood, serif italic, underline always visible (heritage convention — links are not shy). **Never a chip, never a rect, never a gradient.** The one hero "Atelier" CTA is the only exception.
+
+## Recommended rich media
+Cover: editorial photography in the heritage-Italian tradition — Hermès campaign feel. Color-graded warm with deep shadows; leather and wood textures; single-subject portraits in atelier interiors. Secondary imagery: illustrated atelier sketches in muted ink — Sergio Toppi pen-line, not vector flat illustration.
+
+**AI tool recommendations:**
+- **Midjourney / Flux** for stills. Include in every prompt: *"Hermès campaign photography, Sergio Toppi illustration, warm Kodak Portra grading, dark moody atelier interior, single subject, leather and wood textures"*.
+- **Recraft** for the illustrated atelier sketches in the muted-ink style — explicitly prompt for hand-line and ink-wash, never vector.
+
+**Aspect ratios:** **4:5 portrait dominant** (couture catalog standard) for subjects and product shots. **3:2 landscape** for landscape product shots and atelier environments. Never 16:9 (too cinematic for heritage print). Never 1:1 (Instagram aesthetic, breaks the catalog feel).
+
+**Performance:** hero image **≤200 KB AVIF** at 1600w. Couture catalogs do not autoplay anything — if video is used at all, it's a poster image with a manual play button, never a loop.
+
+**AVOID:** bright stock photography, glossy 3D renders, lens flare, gradient backgrounds, anything that reads as tech (this is heritage, not innovation). No metallic-effect gradients on `--champagne` — it is a paper-flat color, never a gilded surface.
+
+**Accessibility:** long-form alt-text in the editorial register — describe the photograph as a couture caption would. *"Portrait: an artisan stitches a saddle by hand in a Parisian atelier, late afternoon light from a north-facing window."*
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established. Likely first families: `AtelierCTA` (the single hero solid button), `IssueCaption` (mono lot/atelier marks), `HeritageRule` (the hairline divider with optional `--champagne` tint).
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.18)` background, foreground text. Oxblood, restrained.
+- **Focus ring:** `1px solid hsl(var(--ring))`. Thin and quiet — heritage, not loud.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/couture-luxury/tokens.ts

@@ -0,0 +1,146 @@
+import type { Direction } from "../schema";
+
+export const coutureLuxury: Direction = {
+  name: "couture-luxury",
+  ethos:
+    "Hermès saddle leather · Loro Piana cashmere · Aman cream paper · Gucci heritage type · Aesop apothecary restraint",
+  references: [
+    { brand: "Hermès", trait: "saddle leather, copper accents, restrained" },
+    { brand: "Loro Piana", trait: "cashmere warmth, neutral palette" },
+    { brand: "Aman Resorts", trait: "cream paper surfaces, Aesop-like quiet" },
+    { brand: "Gucci", trait: "heritage Italian serif, ornate but composed" },
+    { brand: "Aesop", trait: "apothecary minimalism" },
+  ],
+  feel:
+    "Warm cream surfaces with a single copper-oxblood accent, heritage serif at " +
+    "oversized magazine scale, generous whitespace that signals expense. " +
+    "Quiet luxury — never gold-chain ostentatious. Reads like the inside cover of a Hermès catalog.",
+
+  fonts: {
+    display: {
+      family: "Playfair Display",
+      fallback: ["Bodoni 72", "Didot", "Garamond", "Georgia", "serif"],
+      from: "heritage Italian serif — Gucci/Vogue couture-catalog feel",
+      googleFont: "Playfair+Display",
+      weights: [400, 700, 900],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Aesop/Loro Piana clean sans — neutral support that lets the serif lead",
+      googleFont: "Inter",
+      weights: [400, 500],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "small captions only — issue numbers, ateliers, lot marks",
+      googleFont: "JetBrains+Mono",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",        // heritage serifs settle with a touch of negative tracking
+    bodyTracking: "0",
+    fontFeatureSettings: '"liga", "dlig", "onum"',
+    h1ScaleClamp: "clamp(3rem, 8vw, 6.5rem)",   // oversized couture-catalog scale
+    bodyBaseSize: "1.0625rem",          // 17px — magazine prose, never crammed
+    bodyLineHeight: "1.75",             // Aman-level breathing
+  },
+
+  colors: {
+    background: { hsl: "36 28% 93%", from: "Hermès warm cream — premium paper stock" },
+    foreground: { hsl: "25 20% 14%", from: "Loro Piana dark cocoa ink, never pure black" },
+    card: { hsl: "36 32% 96%", from: "Aman cream paper — one tier lighter than the page" },
+    popover: { hsl: "36 32% 96%", from: "same as card; depth from hairline only" },
+    primary: { hsl: "14 55% 32%", from: "Hermès oxblood / saddle leather copper-brown — the heritage accent" },
+    primaryForeground: { hsl: "36 28% 93%", from: "Hermès cream on oxblood" },
+    secondary: { hsl: "36 22% 89%", from: "Loro Piana cashmere, one tier deeper than paper" },
+    secondaryForeground: { hsl: "25 20% 14%", from: "cocoa ink on cashmere" },
+    muted: { hsl: "36 22% 89%", from: "same as secondary; differentiation by usage, not color" },
+    mutedForeground: { hsl: "25 14% 38%", from: "Aesop apothecary mid-tone — secondary text" },
+    accent: { hsl: "36 24% 86%", from: "Loro Piana cashmere, deeper still — hover surface" },
+    accentForeground: { hsl: "25 20% 14%", from: "cocoa ink on cashmere accent" },
+    border: { hsl: "25 16% 78%", from: "Aesop apothecary hairline — barely visible, suggestive" },
+    input: { hsl: "25 16% 78%", from: "same as border — single hairline language" },
+    ring: { hsl: "14 55% 32%", from: "Hermès oxblood, used for focus only" },
+    destructive: { hsl: "8 62% 40%", from: "alert red, more saturated than the heritage oxblood" },
+    destructiveForeground: { hsl: "36 28% 93%", from: "Hermès cream on alert" },
+    brand: {
+      saddle: { hsl: "24 45% 38%", from: "Hermès saddle leather — the heritage tan" },
+      champagne: { hsl: "38 52% 65%", from: "Aman cream gold — quiet, never gilded" },
+      cocoa: { hsl: "25 30% 22%", from: "Loro Piana deep heritage ink — atelier shadow" },
+      paper: { hsl: "36 28% 93%", from: "Hermès cream — alias for bg, premium stock" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 128, 160],   // Aman-level breathing
+    containerMax: "max-w-3xl",        // couture catalog reads narrow; whitespace is the luxury
+    containerPadding: "px-6 lg:px-16",
+    sectionPadding: {
+      hero: "pt-32 pb-24 lg:pt-48 lg:pb-36",
+      default: "py-24 lg:py-40",
+      tight: "py-16 lg:py-24",
+    },
+  },
+
+  radius: {
+    base: "0",                        // sharp print convention — no soft corners; ornament earns its place
+    pillsAllowed: false,
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-bottom":
+        "0 1px 0 0 hsl(var(--foreground) / 0.12)",   // 1px in foreground at 12% opacity — heritage column rule
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1200,                    // deliberately slow — luxury doesn't perform
+      loop: 4000,
+      ambient: 30000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(20px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose: "the only entrance — slow rise, no bounce, no flash; couture settles into place",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Primary CTA is a serif italic underlined text-link in oxblood (--primary). " +
+      "The solid button is reserved for ONE hero 'Atelier' CTA per page — cocoa bg + paper text, sharp rectangle, no radius. " +
+      "No chips, no gradients, no shadows on buttons.",
+    card:
+      "Hairline top + bottom border in --foreground/12, no fill differentiation from page. " +
+      "Internal padding generous (p-10 lg:p-16). No shadows. Title in display serif, often italic.",
+    input:
+      "Border-bottom only (1px --border). No full box. Label sits above in mono small-caps. Placeholder italic serif.",
+    cta:
+      "Text-link in oxblood, serif italic, underline always visible (heritage convention). " +
+      "Never a chip, never a rect, never a gradient. The one hero 'Atelier' CTA is the only exception.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.18)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/creator-social/THEME.md

@@ -0,0 +1,131 @@
+# Design Direction — Creator-Social
+
+## Ethos
+TikTok pink-cyan gradient · Instagram glow · BeReal raw timestamp · Snap yellow ghost · Vine 6-second loop energy
+
+## Feel
+Vibrant, vertical-first, high-energy. Hot gradients (pink to cyan, orange to magenta), bold mobile-style cards. Reads as creator-economy native — younger, faster, more emotionally saturated than soft-modern. The Pixar of mobile UI.
+
+Where glassmorphic-modern stays cool and premium-Apple, creator-social cranks the saturation, loses the chrome, and goes vertical. The canvas is a phone, not a desktop window — every surface assumes a 9:16 viewport is the natural home.
+
+## Reference brands
+- **TikTok** → hot pink to electric cyan gradient, vertical-first, high-energy. The wordmark gradient is the entire palette in one stroke.
+- **Instagram** → warm Reels gradient (purple to orange-red), story rings, glow halo. The unposted-story indicator.
+- **BeReal** → raw camera-app timestamp aesthetic, unfiltered black. The "no filter, no edit" frame.
+- **Snapchat** → signature yellow, ghost iconography. The one warm pop allowed outside the IG gradient.
+- **Vine** → 6s loop nostalgia, looped energy. Motion that repeats and rewards re-watching.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin.
+
+Surface stack is **deep purple-black canvas** (background, `265 18% 7%`) → **lifted card** (`265 16% 11%`) → **secondary chip** (`265 14% 16%`) → **hairline** (`265 14% 20%`). The dark base is the night-mode phone screen the gradients pop off of. Depth comes from glow halos and gradient overlays, not from hue shift inside the gray stack.
+
+Primary is **TikTok hot pink-magenta** (`325 95% 55%`) — the dominant brand hue, the heart-tap color. Accent is **TikTok cyan** (`190 100% 55%`) — primary's gradient pair. Together they ARE the wordmark.
+
+Brand tokens — these are the language, not decoration:
+- `--tt-cyan` — TikTok cyan, the gradient pair to primary pink.
+- `--ig-gradient-start` (`290 85% 60%`) and `--ig-gradient-end` (`14 95% 55%`) — Instagram Reels/story-ring gradient stops. Use as a pair; never split them.
+- `--snap-yellow` (`52 100% 55%`) — Snapchat ghost yellow. The signature alert/notification hue. The single warm pop the palette allows outside the IG gradient — use sparingly.
+- `--bere-raw` (`0 0% 12%`) — BeReal raw black. The unfiltered camera-frame around posted moments; backs raw timestamp overlays.
+
+## Typography
+- **Display:** Inter — open-source SF Pro Display approximation, mobile-native default. h1–h4, weights 600/700/800/900. Heavy weights carry the TikTok caption/CTA energy; never use display under 600.
+- **Body:** Inter (same family — single-face mobile convention, like iOS). Base 16px, line-height 1.5 (tighter than glassmorphic — mobile copy is denser).
+- **Mono:** JetBrains Mono. Small only — BeReal-style raw timestamps, follower counts, view counters. Never paragraph copy.
+
+Headings track `-0.02em` — tight, mobile-display feel. H1 uses `clamp(2.5rem, 7vw, 5rem)` — pushed bigger than glassmorphic because mobile hero type goes loud. Inter stylistic sets `"cv11", "ss01"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-8`.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-12 lg:pt-28 lg:pb-20`
+  - Default: `py-14 lg:py-20`
+  - Tight: `py-10 lg:py-14`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 48 64. Medium density — mobile-card medium, not dense. Cards breathe but stack tighter than glassmorphic.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier.
+
+The palette is **dark canvas + hot gradient** — never flat saturated rectangles, never desaturated enterprise. The pink-to-cyan primary gradient and the IG purple-to-orange gradient are the two recurring gradient pairs; never invent a new one. Snapchat yellow is the third color and the only warm note outside the IG gradient — reserve it for notification dots, ghost icons, and small accents. Going beyond yellow into amber/coral fights the cool envelope.
+
+Pure black is forbidden — `--background` is `265 18% 7%` (deep cool purple-black, the TikTok night-mode tone) and `--bere-raw` is `0 0% 12%`. Pure white is permitted only via `--foreground` (captions over video need it).
+
+## Radius
+`--radius: 1.5rem` (24px). **Mobile-card soft, very rounded.** Pills are allowed (`pillsAllowed: true`) and are the default for buttons, follower chips, and hashtag tags. Right angles read "broken native UI" — every surface in this language is rounded.
+
+## Shadows
+Four glow-style utilities — color-saturated, never neutral gray drops:
+
+- `.glow-magenta` — the signature. Hot pink halo on primary (1px ring + 32px + 80px concentric glow). Used on primary CTAs and the focus state.
+- `.glow-gradient` — multi-color gradient glow (pink + cyan + IG purple). For vibrant moments only — hero cards, story rings, the Instagram unposted-story halo. Do not litter.
+- `.glow-cyan` — TikTok cyan accent glow. Secondary CTAs, link halos, follow-button outlines.
+- `.card-lift` — mobile-card drop shadow with a pink tint. The default feed-card elevation.
+
+Shadows lean **hot** — drop shadows are tinted with primary pink or accent cyan, never neutral. Black drops read flat against the dark canvas; the pink tint is what makes a card lift off the feed.
+
+## Motion
+Three keyframes, high-energy:
+
+- `spring-tap` (200ms, bouncy) — overshoot scale on tap. The TikTok heart-tap, Instagram like, the haptic-feeling press response. Goes 1 → 0.94 → 1.04 → 1.
+- `story-ring` (4000ms loop) — continuous rotation for story-ring loaders. The Instagram unposted-story indicator at rest. Pair with a conic gradient border.
+- `swipe-up` (300ms ease-out) — vertical reveal, TikTok swipe-up feel. Standard entrance for new feed cards, modals, comment sheets. translateY(24px) → 0.
+
+Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)` — bouncy overshoot, the mobile-tap spring. `prefers-reduced-motion` is honored — `spring-tap` collapses to a static scale, `story-ring` to a static gradient ring, `swipe-up` to a fade.
+
+## Component patterns
+- **Buttons:** primary = full-width pill with gradient bg (`from-primary to-[hsl(var(--tt-cyan))]`), white text, bold (weight 700+), `rounded-full`. Hover = scale 1.02 + `.glow-magenta` strengthens. Tap = `spring-tap` keyframe. Secondary = pill with `border` + foreground text, cyan glow on hover. **No flat gray buttons** — every CTA carries gradient or glow.
+- **Cards:** mobile-feed card. `rounded-3xl` (1.5rem+), `bg-card`, `border`, `.card-lift` shadow. Padding `p-5 lg:p-6`. Title in Inter 700+. Vertical-first composition — 9:16 media slot at top is the default. Hover deepens `.card-lift`; optional `.glow-gradient` on hero/featured cards only.
+- **Inputs:** full `rounded-full` pill or `rounded-2xl` box, `bg-secondary`, `border`. Focus uses `.glow-magenta` ring at 35% opacity, border brightens to primary. Label above; helper below in `mutedForeground`. DM-style placeholder text ("Send a message...").
+- **CTAs:** gradient pill button is the default — never a flat rectangle. Secondary CTAs use a ghost pill (border + foreground) or a text-link in `tt-cyan` with `.glow-cyan` halo on hover. The **story-ring wrapper** (a `story-ring` keyframe spinning a conic-gradient border around an avatar) is the avatar/feature pattern — use it for hero avatars, featured creator chips, and "new" indicators.
+
+## Component families
+None at install time. As `*StoryRing`, `*FeedCard`, `*GradientPill`, `*Timestamp` families emerge, the Director lists them here with their shared pattern.
+
+## Recommended rich media
+
+### Cover and hero imagery
+**Vertical-first.** The hero is rarely a 16:9 widescreen — that's broadcast. Native to this direction is the 9:16 phone frame.
+
+- **Vertical 9:16 video** — the TikTok native aspect. Loop short (Vine-style 4–6 seconds), saturate hot, never letterbox into a 16:9 container.
+- **Vertical photo crops** — portraits, hands-holding-phone shots, creator-at-desk verticals.
+- **Animated mesh gradients** — pink/cyan/violet meshes drifting underneath glass cards. The hero background often doesn't need a photo at all.
+- **BeReal-style raw timestamps overlaid on photos** — small mono caption (`YYYY-MM-DD HH:MM`), top-left, in `--bere-raw` plate with white text. Use to mark "real" moments without breaking the gradient palette.
+
+### AI tool recommendations
+- **Sora / Runway / Pika** for vertical 9:16 video loops. Prompt scaffold: *"vertical 9:16, creator-economy aesthetic, hot pink and cyan gradient lighting, mobile-first composition, 4-second loop"*. Keep loops short — Vine energy.
+- **Midjourney** for stills. Prompt scaffold: *"vertical iPhone screenshot, vibrant gradient overlay, mobile-first composition, hot pink to cyan gradient, deep purple-black background"*. Always append `--ar 9:16`.
+- **mesh-gradient.com** or hand-rolled CSS mesh gradients for backgrounds. Animated drift via the project easing.
+- **Lottie** for sticker-style accents (hearts, stars, ghost icons) — pair with `spring-tap` on interaction.
+
+### Aspect ratios
+- **9:16 vertical** — the native ratio. Hero video, feed-card media, story-ring previews.
+- **1:1 square** — feed thumbnails, profile grids.
+- **4:5 portrait** — Instagram-feed native, secondary option when 9:16 is too tall.
+- Avoid 16:9 entirely except in legacy-embed contexts.
+
+### Color discipline for imagery
+Stay vibrant. Hot gradients, saturated subjects, deep cool shadows. **If a source image has a muted or desaturated cast, regrade it or do not use it** — the direction breaks the moment a flat-saturation photo lands. Warm tones outside the IG gradient (random amber/coral) also break the palette.
+
+### What to AVOID
+- **16:9 widescreen** — that is broadcast, not social. This direction is vertical.
+- **Serif type** — editorial territory; serif kills the mobile-native read.
+- **Muted palettes** — vibrancy is the direction. Desaturated photography reads "wrong tab."
+- **Chrome / glass / heavy translucency** — that is glassmorphic-modern or y2k-chrome.
+- **Dense data dashboards** — wrong altitude.
+
+### Accessibility
+- White text over hot gradients can fail WCAG AA at the bright stop of the gradient — verify contrast at the worst point of the gradient (the lightest pixel), not the average. If contrast fails, add a subtle dark scrim layer between gradient and text rather than dimming the gradient.
+- Story-ring rotation and gradient glows are decorative — mark with `aria-hidden="true"`.
+- `spring-tap` and `story-ring` collapse under `prefers-reduced-motion` — verify in DevTools, not just by reading the CSS.
+- Snapchat yellow on white fails contrast easily — never use `--snap-yellow` as foreground text on a light surface. It's a notification/icon color, not a text color.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.35)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.7)` — hot pink, visible, paired with `.glow-magenta` on primary CTAs.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/creator-social/tokens.ts

@@ -0,0 +1,249 @@
+import type { Direction } from "../schema";
+
+export const creatorSocial: Direction = {
+  name: "creator-social",
+  ethos:
+    "TikTok pink-cyan gradient · Instagram glow · BeReal raw timestamp · Snap yellow ghost · Vine 6-second loop energy",
+  references: [
+    { brand: "TikTok", trait: "hot pink to electric cyan gradient, vertical-first, high-energy" },
+    { brand: "Instagram", trait: "warm Reels gradient, story rings, glow halo" },
+    { brand: "BeReal", trait: "raw camera-app timestamp aesthetic, unfiltered black" },
+    { brand: "Snapchat", trait: "signature yellow, ghost iconography" },
+    { brand: "Vine", trait: "6s loop nostalgia, looped energy" },
+  ],
+  feel:
+    "Vibrant, vertical-first, high-energy. Hot gradients (pink to cyan, orange to magenta), " +
+    "bold mobile-style cards. Reads as creator-economy native — younger, faster, more " +
+    "emotionally saturated than soft-modern. The Pixar of mobile UI.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["-apple-system", "BlinkMacSystemFont", "SF Pro Display", "system-ui", "sans-serif"],
+      from: "SF Pro Display approximation — mobile-native default; heavy weights carry the TikTok caption/CTA energy",
+      googleFont: "Inter",
+      weights: [600, 700, 800, 900],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["-apple-system", "BlinkMacSystemFont", "SF Pro Text", "system-ui", "sans-serif"],
+      from: "single-family mobile convention — same face across display and body, like iOS",
+      googleFont: "Inter",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SF Mono", "SFMono-Regular", "Consolas", "monospace"],
+      from: "small mono — BeReal-style raw timestamps, follower counts, view counters",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",       // tight, mobile-display feel
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01"',
+    h1ScaleClamp: "clamp(2.5rem, 7vw, 5rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: {
+      hsl: "265 18% 7%",
+      from: "deep cool purple-black — TikTok night mode, the dark canvas the gradients pop off of",
+    },
+    foreground: {
+      hsl: "0 0% 100%",
+      from: "pure white — phone screen, captions over video",
+    },
+    card: {
+      hsl: "265 16% 11%",
+      from: "lifted mobile-card surface — one tier above background, the post-card behind the gradient halo",
+    },
+    popover: {
+      hsl: "265 16% 11%",
+      from: "same as card — sheet/modal language matches feed cards on mobile",
+    },
+    primary: {
+      hsl: "325 95% 55%",
+      from: "TikTok hot pink-magenta — the dominant brand hue, the heart-tap color",
+    },
+    primaryForeground: {
+      hsl: "0 0% 100%",
+      from: "white on hot pink — the CTA label",
+    },
+    secondary: {
+      hsl: "265 14% 16%",
+      from: "secondary mobile surface — chip and tag background, one tier above card",
+    },
+    secondaryForeground: {
+      hsl: "0 0% 100%",
+      from: "white on secondary purple-black",
+    },
+    muted: {
+      hsl: "265 14% 16%",
+      from: "shares secondary tone — differentiation by usage, not hue",
+    },
+    mutedForeground: {
+      hsl: "265 10% 65%",
+      from: "Instagram secondary label gray — caption meta, follower count, timestamp",
+    },
+    accent: {
+      hsl: "190 100% 55%",
+      from: "TikTok cyan — the gradient pair to primary pink; secondary CTA glow",
+    },
+    accentForeground: {
+      hsl: "265 18% 7%",
+      from: "deep purple-black on cyan — high contrast on the bright accent",
+    },
+    border: {
+      hsl: "265 14% 20%",
+      from: "soft mobile-card hairline — visible against the dark canvas without becoming a frame",
+    },
+    input: {
+      hsl: "265 14% 20%",
+      from: "same as border — DM-input field on a dark feed",
+    },
+    ring: {
+      hsl: "325 95% 55%",
+      from: "TikTok hot pink — focus state, follow-button outline",
+    },
+    destructive: {
+      hsl: "0 90% 60%",
+      from: "report/unfollow red — saturated, mobile-alert language",
+    },
+    destructiveForeground: {
+      hsl: "0 0% 100%",
+      from: "white on alert red",
+    },
+    brand: {
+      "tt-cyan": {
+        hsl: "190 100% 55%",
+        from: "TikTok cyan — the gradient pair to primary pink, the wordmark's other half",
+      },
+      "ig-gradient-start": {
+        hsl: "290 85% 60%",
+        from: "Instagram purple — the cool stop of the Reels/story-ring gradient",
+      },
+      "ig-gradient-end": {
+        hsl: "14 95% 55%",
+        from: "Instagram orange-red — the warm stop of the Reels/story-ring gradient",
+      },
+      "snap-yellow": {
+        hsl: "52 100% 55%",
+        from: "Snapchat ghost yellow — signature alert/notification hue, the one warm pop the palette allows outside the IG gradient",
+      },
+      "bere-raw": {
+        hsl: "0 0% 12%",
+        from: "BeReal raw black — the unfiltered camera-app frame around a posted moment, used for raw timestamp overlays and authenticity cues",
+      },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 48, 64],
+    containerMax: "max-w-6xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-12 lg:pt-28 lg:pb-20",
+      default: "py-14 lg:py-20",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "1.5rem",                   // 24px — mobile-card soft, very rounded
+    pillsAllowed: true,               // pills for buttons, follower chips, hashtag tags
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-magenta":
+        "0 0 0 1px hsl(325 95% 55% / 0.35), " +
+        "0 0 32px hsl(325 95% 55% / 0.45), " +
+        "0 0 80px hsl(325 95% 55% / 0.25)",                    // hot pink halo on primary — TikTok heart-tap glow
+      "glow-gradient":
+        "0 0 0 1px hsl(325 95% 55% / 0.3), " +
+        "0 0 24px hsl(325 95% 55% / 0.4), " +
+        "0 0 48px hsl(190 100% 55% / 0.35), " +
+        "0 0 96px hsl(290 85% 60% / 0.25)",                    // multi-color gradient glow — Instagram story-ring halo, vibrant moments only
+      "glow-cyan":
+        "0 0 0 1px hsl(190 100% 55% / 0.4), " +
+        "0 0 24px hsl(190 100% 55% / 0.45)",                   // TikTok cyan accent glow — secondary CTAs, link halos
+      "card-lift":
+        "0 1px 2px hsl(0 0% 0% / 0.4), " +
+        "0 12px 32px hsl(325 95% 55% / 0.18)",                 // mobile-card lift with pink-tinted drop — feeds and tiles
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",   // bouncy overshoot — mobile-tap spring
+    durations: {
+      reveal: 300,                    // swipe-up reveal — TikTok feed feel
+      loop: 4000,                     // story-ring continuous rotation
+      ambient: 8000,                  // mesh-gradient drift
+    },
+    keyframes: {
+      "spring-tap": {
+        css:
+          "0% { transform: scale(1); }\n" +
+          "40% { transform: scale(0.94); }\n" +
+          "70% { transform: scale(1.04); }\n" +
+          "100% { transform: scale(1); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "bouncy overshoot scale on tap — TikTok heart-tap, Instagram like, the haptic-feeling press response",
+      },
+      "story-ring": {
+        css:
+          "from { transform: rotate(0deg); }\n" +
+          "to { transform: rotate(360deg); }",
+        defaultDuration: 4000,
+        iteration: "infinite",
+        purpose: "continuous rotation for story-ring loaders — the Instagram unposted-story indicator at rest",
+      },
+      "swipe-up": {
+        css:
+          "from { opacity: 0; transform: translateY(24px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 300,
+        iteration: "once",
+        purpose: "vertical reveal — TikTok swipe-up feel for new feed cards, modals, comment sheets",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = full-width pill with gradient bg (pink to cyan, `bg-gradient-to-r from-primary to-[hsl(var(--tt-cyan))]`), " +
+      "white text, bold (font-weight 700+), `rounded-full`. Hover = scale 1.02 + `.glow-magenta` strengthens. " +
+      "Tap = `spring-tap` keyframe. Secondary = pill with `border` + foreground text, cyan glow on hover. " +
+      "No flat gray buttons — every CTA carries gradient or glow.",
+    card:
+      "Mobile-feed card: `rounded-3xl` (1.5rem+), `bg-card`, `border`, `card-lift` shadow. " +
+      "Padding `p-5 lg:p-6`. Title in Inter 700+. Vertical-first composition — 9:16 media slot at top is the default. " +
+      "Hover = `card-lift` deepens, optional `.glow-gradient` on hero/featured cards only.",
+    input:
+      "Full `rounded-full` pill or `rounded-2xl` box, `bg-secondary`, `border`. " +
+      "Focus = `glow-magenta` ring at 35% opacity, border brightens to primary. " +
+      "Label above; helper below in `mutedForeground`. DM-style placeholder text.",
+    cta:
+      "Gradient pill button is the default — never a flat rectangle. " +
+      "Secondary CTAs use a ghost pill (border + foreground) or a text-link in `tt-cyan` with `.glow-cyan` halo on hover. " +
+      "Story-ring wrapper (`story-ring` keyframe on a gradient-border ring) is the avatar/feature pattern.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.35)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.7)",
+    scrollbarStyle: "thin",
+  },
+};