@easysociable/cli 0.1.0

package/skills/easysociable-template/references/PLATFORM_SPECS.md

@@ -0,0 +1,134 @@
+# Platform image specs (single-page template canvases)
+
+Use agent-reach / industry guides (2026). Platforms change crop behavior; prefer the **Recommended** row for new templates. Always store exact `canvas.width/height` plus `canvasPreset`.
+
+`platforms` is a **multi-select** array. Include every platform this page is intended for; add `generic` only when the board is intentionally cross-postable without a primary home.
+
+## Platform enum (catalog)
+
+```text
+xiaohongshu | tiktok | instagram | threads | x | linkedin | wechat_cover | generic
+```
+
+Legacy alias: treat former Twitter as **`x`**.
+
+---
+
+## Per-platform boards (for PageTemplate authoring)
+
+### Xiaohongshu（小红书）— `xiaohongshu`
+
+| Use | Preset | Pixels | Notes |
+|---|---|---|---|
+| **图文笔记（推荐）** | `3:4` | **1080×1440** | Largest feed footprint; keep cover + inner pages same ratio |
+| Square note | `1:1` | 1080×1080 | OK, less feed height than 3:4 |
+| Landscape | `custom` / avoid for cover | 1440×1080 (4:3) etc. | Weak in feed; not a default template target |
+| Max images / note | — | up to ~18 | Product convention; not a canvas rule |
+
+**Default for new XHS templates:** `3:4` @ 1080×1440.
+
+### TikTok — `tiktok`
+
+| Use | Preset | Pixels | Notes |
+|---|---|---|---|
+| **Photo Mode / slideshow（推荐）** | `9:16` | **1080×1920** | Full-screen; matches native video |
+| Portrait alt | `4:5` | 1080×1350 | Supported; letterboxing vs 9:16 |
+| Square | `1:1` | 1080×1080 | Supported; bars in vertical feed |
+| Typical carousel count | — | ~4–35 photos | Design for 9:16; keep all slides same size |
+
+**Default for TikTok page templates:** `9:16` @ 1080×1920. Keep UI/text out of bottom/side safe zones used by TikTok chrome.
+
+### Instagram — `instagram`
+
+Meta help: feed width up to **1080px**; aspect between ~**1.91:1** and **4:5** (taller may crop). Practical authoring:
+
+| Use | Preset | Pixels | Notes |
+|---|---|---|---|
+| **Feed single / carousel（推荐竖版）** | `4:5` | **1080×1350** | Max common feed height |
+| Square feed / safe carousel | `1:1` | 1080×1080 | Safest cross-placement |
+| Tall grid-oriented | `3:4` | 1080×1440 | Within Meta’s upper portrait band; confirm crop |
+| Stories / Reels still | `9:16` | 1080×1920 | Full-bleed stories; not default “feed card” |
+| Landscape | ~`21:9` family | 1080×566 (1.91:1) | Link-style / wide; poor mobile height |
+
+**Carousel rule:** all slides **same aspect** as slide 1 or later slides get center-cropped.  
+**Default for IG feed templates:** `4:5` @ 1080×1350 (or `1:1` if user wants max compatibility).
+
+### Threads — `threads`
+
+Aligned with Meta/IG feed conventions:
+
+| Use | Preset | Pixels | Notes |
+|---|---|---|---|
+| **Feed（推荐）** | `4:5` | **1080×1350** | Best vertical presence |
+| Square | `1:1` | 1080×1080 | Safe |
+| Full-bleed vertical | `9:16` | 1080×1920 | OK for immersive; may crop in some feed contexts |
+| Landscape | custom | ~1080×566 | Least feed height |
+
+**Carousel:** keep one aspect for all slides (first slide wins). Cap commonly cited ~10–20 images — not a canvas constraint.  
+**Default:** `4:5` @ 1080×1350 (often shared with Instagram assets).
+
+### X (Twitter) — `x`
+
+| Use | Preset | Pixels | Notes |
+|---|---|---|---|
+| **Single in-stream（推荐）** | ~`16:9` → use `custom` or map to wide | **1200×675** | Timeline-friendly; less aggressive crop |
+| Square | `1:1` | 1200×1200 or 1080×1080 | Good for multi-image / quotes |
+| Tall | `4:5` | 1080×1350 | Often cropped toward landscape in timeline |
+| Link / card style | custom | 1200×628 (~1.91:1) | Summary large image cards |
+| Multi-image | often `1:1` or `16:9` | keep set consistent | Up to 4 images per post |
+
+**Default for X single-card templates:** **1200×675** (`canvasPreset: custom` with note `x_instream_16x9`, or document as wide). Prefer landscape text layouts; center critical content.
+
+### LinkedIn — `linkedin`
+
+| Use | Preset | Pixels | Notes |
+|---|---|---|---|
+| **单图帖（推荐方）** | `1:1` | **1080×1080** | Broad desktop + mobile |
+| 单图竖版 | `4:5` | 1080×1350 | Stronger mobile height |
+| 单图横版 / link-ish | custom | 1200×627 (~1.91:1) | Link preview family |
+| **Document carousel PDF 页** | `1:1` or `4:5` | **1080×1080** or **1080×1350** | Organic “carousel” is usually multi-page **PDF**; all pages same size |
+| Landscape deck page | ~`16:9` | 1920×1080 | Data-heavy slides; weaker mobile |
+
+**Default for LinkedIn page templates:** `1:1` @ 1080×1080, or `4:5` @ 1080×1350 when user wants mobile-first document carousels.  
+Note in `shortDescription` if the page is meant for **PDF document posts** vs single image posts.
+
+### WeChat Official Account covers — `wechat_cover`
+
+| Use | Preset | Pixels | Notes |
+|---|---|---|---|
+| **主封面 21:9** | `21:9` | **2100×900** (or 1125×481-class) | Wide hero |
+| **分享 1:1** | `1:1` | **1080×1080** | Square share card |
+
+Often authored as a **pair** of single-page templates (wide + square), not one carousel pack. Defaults match existing Guizang-style boards when users ask for 公众号封面对.
+
+### Generic — `generic`
+
+No platform chrome assumptions. Still pick a concrete preset (`1:1`, `4:5`, `3:4`, `9:16`, …). Use when the page is a reusable brick across networks **and** the chosen ratio is listed as Recommended or Supported for each target in `platforms`.
+
+---
+
+## Preset → default pixel map (authoring shortcut)
+
+| `canvasPreset` | Default pixels | Primary platforms |
+|---|---|---|
+| `3:4` | 1080×1440 | xiaohongshu, (instagram tall) |
+| `4:5` | 1080×1350 | instagram, threads, linkedin portrait |
+| `1:1` | 1080×1080 | linkedin, instagram/threads safe, x multi |
+| `9:16` | 1080×1920 | tiktok, IG/Threads stories-style |
+| `21:9` | 2100×900 | wechat_cover wide |
+| `custom` | explicit only | **x** 1200×675, link cards 1200×628, etc. |
+
+---
+
+## Selection rules for Agents
+
+1. If user names one platform → set `platforms: [that]` and use that platform’s **Recommended** row.  
+2. If user names several → intersection of workable presets; if empty, ask them to pick a primary platform or accept letterboxing.  
+3. Never mix presets across slides of one deck without an explicit user choice (IG/Threads/TikTok crop to first slide).  
+4. Put platform + preset into P0 `selectionMetadata` before Publish.  
+5. Specs above are **practical authoring targets** (2026 guides + Meta help for IG). Re-verify if a platform announces breaking crop changes.
+
+## Sources (research snapshot)
+
+- Meta Instagram help: feed width ≤1080px; aspect ~1.91:1–4:5  
+- Industry 2026 guides: X 1200×675; LinkedIn 1080×1080 / 1080×1350 (+ PDF carousels); Threads ≈ IG 4:5; TikTok Photo Mode 1080×1920; 小红书 1080×1440 3:4  

package/skills/easysociable-template/references/SLOTS.md

@@ -0,0 +1,104 @@
+# Slot model (single-page template)
+
+A **slot** is a fillable content contract on one page. A **node** is a positioned box on the canvas.
+
+## Node vs slot vs decoration
+
+| | Meaning |
+|---|---|
+| **Slot** | Declares what can change at render time: `key`, `type`, constraints |
+| **Node with `bindingKey`** | Canvas element bound to `slot.key` — filled from bindings |
+| **Node without `bindingKey`** | Decoration / fixed chrome — not in the slot table, never filled from content |
+
+Agent must decide which regions are variable (slots) vs fixed (decoration) before create.
+
+## MVP slot types
+
+| `type` | Value | Constraints |
+|---|---|---|
+| `text` | string | `maxCharacters`, **`maxLines`**, `overflow` |
+| `number` | number | optional format hints in `aiHint` |
+| `image` | image ref / URL handled by Gateway | optional `aspectRatio` |
+
+**No `list` type in MVP.** The current renderer binds one value per `bindingKey` and uses absolute frames — there is no array repeater. Checklist-like pages use multiple text slots (`text_1`, `text_2`, …).
+
+Also unused for typical authoring: put colors in **Theme**, not `color` slots.
+
+## Naming
+
+Stable opaque keys are allowed and preferred for MVP, e.g.:
+
+- `text_0`, `text_1`, `text_2`
+- `number_0`
+- `image_0`
+
+Keys must be unique within the page. After Publish, treat keys as immutable (rename = new template or migration).
+
+There is **no global cap** on how many slots a page may have. Count is whatever the layout needs, as long as filled content respects per-slot limits and does not fail layout audit.
+
+## Slot record (authoring-time contract)
+
+Agent should maintain an explicit slot table (even if Gateway compiles bindings server-side):
+
+```ts
+type Slot = {
+  key: string
+  type: 'text' | 'number' | 'image'
+  required: boolean
+  overflow: 'error' | 'shrink' | 'truncate'
+  maxCharacters?: number  // text
+  maxLines?: number       // text — required in contract when type is text
+  aspectRatio?: string    // image, optional
+  label?: string          // human label for Studio / brief
+  aiHint?: string
+  placeholder?: unknown   // preview-only sample, not the live contract value
+}
+```
+
+Align with server `TemplateBindingDefinition` where possible (`key`, `type`, `required`, `overflow`, `maxCharacters`, `aiHint`). Persist `maxLines` on the bound text node props and/or authoring metadata until contracts officially add the field.
+
+## Required vs optional
+
+- Default: slots that define the page’s main message are **`required: true`**.
+- **`required: false`** is for whole optional blocks (e.g. optional `image_0`), not for “collapse a variable-length bullet list.”
+- Variable bullet counts: prefer a template with the right number of text slots, or accept empty optional text slots under the omit rule below (layout will **not** reflow).
+
+## Empty slot → omit node (not hide)
+
+At render time:
+
+1. If a slot value is `null` / `undefined` / `''` → **do not include** the bound node in the render tree.
+2. This is **omit**, not CSS `display: none` / visibility hide.
+3. Layout is **absolute positioning**. Omitting a node does **not** move other nodes; gaps may remain.
+4. **Required** slots that are missing must **fail validation** before render — omit must not paper over missing required content.
+
+## Absolute layout implications
+
+- Do not promise “empty bullets automatically pack upward.”
+- Prefer fixed slot counts for dense checklists under absolute layout.
+- Optional omit works best for independent regions (corner image, optional CTA block), not mid-stack lists.
+- Bound nodes should be **independent absolute frames** on the canvas. Do not put an image/text slot inside another absolute wrapper; omit would leave an empty parent box. See flat-tree rule in `AUTHORING_SOURCE.md`.
+
+## Examples
+
+### KPI / follower milestone (fixed)
+
+```text
+text_0     text    required  maxLines=2  maxCharacters=24
+number_0   number  required
+text_1     text    required  maxLines=1  maxCharacters=16   # label under metric
+image_0    image   optional  aspectRatio≈1:1
+```
+
+Decoration: background shapes, hairlines, fixed wordmarks — no `bindingKey`.
+
+### Checklist page (fixed three lines — no list type)
+
+```text
+text_0  text  required  maxLines=2  maxCharacters=20   # title
+text_1  text  required  maxLines=1  maxCharacters=28
+text_2  text  required  maxLines=1  maxCharacters=28
+text_3  text  required  maxLines=1  maxCharacters=28
+```
+
+If content only has two bullets, either use a 2-line template or mark `text_3` optional knowing omit leaves a visual gap under absolute layout.

package/skills/easysociable-template/references/THEME_PRESETS.md

@@ -0,0 +1,48 @@
+# Theme presets (EasySociable)
+
+Curated menu adapted from Anthropic `theme-factory`, rewritten to EasySociable Theme contracts (`brandHex` + `mode` + Studio fonts + `bestFor`).
+
+**Not** a replacement for `generate-theme-from-hex.mjs` — presets supply inputs; the generator still builds the 11-shade scale, six semantic colors, and WCAG report.
+
+## How to use
+
+1. When the user has no brand hex, offer **2–3 presets** (or show a short swatch table) from this list — see `workflows/PALETTE_REVIEW.md`.
+2. Wait for **explicit confirmation** of preset (or custom hex) before locking `theme-tokens.json` or calling `theme.create`.
+3. Generate:
+
+```bash
+node scripts/generate-theme-from-hex.mjs --preset ocean-depths --mode light -o theme-tokens.json
+# or with explicit hex override:
+node scripts/generate-theme-from-hex.mjs --preset tech-innovation #2563EB --mode dark -o theme-tokens.json
+```
+
+Machine-readable source: [`theme-presets.json`](theme-presets.json).
+
+## Preset catalog
+
+| id | Name | Mode bias | brandHex | heading / body | bestFor |
+|----|------|-----------|----------|----------------|---------|
+| `ocean-depths` | Ocean Depths | light | `#1A6B6B` | Inter / Inter | Finance, consulting, trust-building metric cards |
+| `sunset-boulevard` | Sunset Boulevard | light | `#E85D04` | Inter / Inter | Launch, lifestyle, warm creator promos |
+| `forest-canopy` | Forest Canopy | light | `#2D6A4F` | Georgia / Inter | Sustainability, outdoor, grounded reports |
+| `modern-minimalist` | Modern Minimalist | light | `#475569` | Inter / Inter | Architecture, product UI shots, clean SaaS |
+| `golden-hour` | Golden Hour | light | `#B45309` | Playfair Display / Source Sans 3 | Premium, autumnal, milestone celebrate |
+| `arctic-frost` | Arctic Frost | light | `#0284C7` | Inter / Inter | Winter campaigns, crisp tech, health |
+| `desert-rose` | Desert Rose | light | `#C45C6A` | Inter / Inter | Soft beauty, hospitality, gentle social proof |
+| `tech-innovation` | Tech Innovation | dark | `#2563EB` | Inter / Inter | Startups, AI updates, product launches |
+| `botanical-garden` | Botanical Garden | light | `#16A34A` | Inter / Inter | Growth metrics, wellness, organic brands |
+| `midnight-galaxy` | Midnight Galaxy | dark | `#7C3AED` | Inter / Inter | Entertainment, gaming, bold night creatives |
+
+## Field mapping to Gateway
+
+After generation, `themeTokens` carries:
+
+- `colors`: `canvas`, `text`, `accent`, `muted`, `primary`, `border`
+- `fonts.heading` / `fonts.body` from the preset (override with `--heading` / `--body`)
+- `palette` with full scale + contrast
+
+Suggested Theme **name** for `theme.create`: the preset display `name` (e.g. `Ocean Depths`), not `Theme draft_xxx`.
+
+## Custom themes
+
+If no preset fits, invent a name + `brandHex` + fonts the same way, show the swatch/contrast summary, get confirmation, then generate and apply (`THEME_FROM_BRAND.md`).

package/skills/easysociable-template/references/THEME_TOKENS.md

@@ -0,0 +1,89 @@
+# Theme tokens (page authoring)
+
+Theme is the **skin** (color / font / surface). The page template is the **structure + slots**.
+
+**External gradients and photo washes are not Theme assets.** They are Surface decorations (`workflows/SURFACE_REVIEW.md`): confirm a Gateway `gradients` recipe or imported `imageId`, then inline CSS / CDN background nodes. Theme remains solid semantic colors for contrast and Studio editing. Authoring derives six explainable two-stop Brand Hex recommendations and brand-tinted previews of Gateway Catalog recipes for the left Theme panel (`palette.gradient`, exposed as `--es-gradient-from/to`). Editing Brand Hex refreshes those cards and any selected catalog variant linked to the brand; the original Catalog recipe remains immutable and traceable through `catalogRecipeId`. Clicking a card or applying a custom pair explicitly changes the active global gradient and records `palette.gradientSelection`. The right-side Gradient controller remains local to the selected element, and manual choices are marked fixed. These recommendations do not replace a confirmed Surface decoration.
+
+## When creating a single-page template
+
+1. Prefer **reuse** `themeId` if the user already has a Look.
+2. Otherwise **co-create** full `ThemeTokens` with the draft (`theme.create`):
+   - If user provides brand hex → `workflows/THEME_FROM_BRAND.md` → `theme-tokens.json`
+   - If multiple palette directions → `workflows/PALETTE_REVIEW.md` first
+   - If no brand hex → seed from `references/DESIGN_INTELLIGENCE.md`, then generate
+3. Page chrome should reference semantic CSS variables (`--es-color-*`, `--es-font-*`, `--es-surface-*`), not hard-coded brand colors on every node.
+
+## Gateway payload (`theme_schema_v1`)
+
+Gateway persists `themeTokens` in `TemplateTheme.tokens`. When `palette` is present, `theme_schema_version` is `theme_schema_v2`. The `colors` object includes six semantic roles: `canvas`, `text`, `accent`, `muted`, `primary`, `border`.
+
+```ts
+{
+  colors: {
+    canvas: '#FFFFFF',
+    text: '#042F2B',
+    accent: '#0D9B8F',
+    muted: '#0B7F75',
+    primary: '#0B7F75',
+    border: '#C6F5F1',
+  },
+  fonts: {
+    heading: 'Inter',
+    body: 'Inter',
+  },
+  surfaces: {
+    radius: '12px',
+    shadow: '0 8px 24px rgba(0,0,0,.12)',
+  },
+  logoAssetId?: string,
+  lockedKeys?: string[],
+}
+```
+
+## Local artifact (`theme_tokens_v2`)
+
+`theme-tokens.json` is a workflow artifact (not a Gateway DTO). Generate with:
+
+```bash
+node scripts/generate-theme-from-hex.mjs <#hex> --mode light|dark -o theme-tokens.json
+node scripts/validate-design-v2.mjs theme-tokens.json
+```
+
+Contains:
+
+| Field | Purpose |
+|-------|---------|
+| `scale` | 11-shade brand scale (`50`–`950`) |
+| `semantic.light` / `semantic.dark` | Resolved semantic roles per mode |
+| `themeTokens` | Active mode — use for `theme.create` |
+| `themeTokensLight` / `themeTokensDark` | Both modes for comparison |
+| `contrast` | WCAG ratio report per pair and mode |
+| `contrastPass` | `true` when all pairs meet AA |
+
+Semantic roles in scale (internal): `canvas`, `text`, `accent`, `muted`, `primary`, `border`. All six are stored in `themeTokens.colors` for v2; Authoring Studio displays them plus the 11-shade scale.
+
+Runtime CSS variables (authoring + renderer):
+
+| Variable | Source |
+|----------|--------|
+| `--es-color-canvas` / `text` / `accent` / `muted` | Active semantic colors |
+| `--es-color-primary` / `border` | v2 palette semantic extras |
+| `--es-scale-50` … `--es-scale-950` | Brand scale when `palette` present |
+| `--es-font-*` / `--es-surface-*` | Fonts and surfaces |
+
+Templates may use `var(--es-scale-600)` directly in inline styles or classNames.
+
+## Light vs dark mode
+
+- **Light canvas** (editorial, paper, playful): `--mode light` → white canvas, dark text, accent from scale 600
+- **Dark canvas** (terminal, neon, cinematic): `--mode dark` → scale 950 canvas, light text, accent from scale 500
+
+Match `activeMode` to the selected concept `colorStrategy`. Do not mix light tokens on a dark-canvas concept.
+
+## Rules
+
+- Do not model accent/canvas as content slots (`color` binding) for normal templates.
+- Do not hand-pick four hex values when `brandHex` is known — run the generator.
+- Co-created Theme may be published with the page when the Agent runs `PUBLISH_FROM_DRAFT.md` after user Save + approval.
+- Legacy hardcoded templates may open in Studio without full Theme restyle; new authoring must be Theme-aware.
+- If `contrastPass` is false, fix before `theme.create` (switch mode, adjust hex, or document trade-off).

package/skills/easysociable-template/references/fixtures/surface-gradient.design-plan.json

@@ -0,0 +1,74 @@
+{
+  "schemaVersion": "design_plan_v2_1",
+  "sourceKind": "text_brief",
+  "intent": {
+    "jobToBeDone": "Fixture for SURFACE_REVIEW validation",
+    "primaryPlatform": "x",
+    "canvas": { "width": 1200, "height": 675 }
+  },
+  "philosophy": {
+    "movementName": "Quiet Proof",
+    "space": "Wide margins",
+    "color": "Soft wash under dark ink",
+    "rhythm": "Sparse rules",
+    "composition": "One metric focal",
+    "typographyAccent": "Large metric",
+    "craftBar": "One focal; refine before decoration"
+  },
+  "concepts": [
+    {
+      "id": "a",
+      "name": "A",
+      "rationale": "Primary",
+      "philosophyExpression": "Metric left; wash behind",
+      "visualMotif": "wash",
+      "layout": "metric left",
+      "hierarchy": "metric > title",
+      "typography": "display metric",
+      "colorStrategy": "soft gradient under ink",
+      "assetStrategy": "gradient wash",
+      "risks": []
+    },
+    {
+      "id": "b",
+      "name": "B",
+      "rationale": "Alt",
+      "philosophyExpression": "Centered metric on flat",
+      "visualMotif": "flat",
+      "layout": "centered",
+      "hierarchy": "metric > title",
+      "typography": "display metric",
+      "colorStrategy": "flat canvas",
+      "assetStrategy": "none",
+      "risks": []
+    }
+  ],
+  "selectedConceptId": "a",
+  "selectionReason": "Needs atmosphere",
+  "themePreview": {
+    "name": "Ocean Depths",
+    "brandHex": "#1A6B6B",
+    "activeMode": "light",
+    "contrastPass": true,
+    "themeTokensPath": "theme-tokens.json",
+    "userConfirmed": true
+  },
+  "surfacePreview": {
+    "kind": "gradient",
+    "userConfirmed": true,
+    "recipeId": "grad_001_warm-flame",
+    "name": "Warm Flame",
+    "provider": "webgradients",
+    "textSafeZone": "light_end",
+    "contrastAnchor": "#FAD0C4",
+    "placement": "full_bleed"
+  },
+  "assetPlan": [
+    {
+      "role": "background",
+      "source": "gradient_catalog",
+      "required": false,
+      "description": "Warm Flame wash"
+    }
+  ]
+}

package/skills/easysociable-template/references/theme-presets.json

@@ -0,0 +1,95 @@
+{
+  "schemaVersion": "theme_presets_v1",
+  "presets": [
+    {
+      "id": "ocean-depths",
+      "name": "Ocean Depths",
+      "brandHex": "#1A6B6B",
+      "mode": "light",
+      "fonts": { "heading": "Inter", "body": "Inter" },
+      "bestFor": "Finance, consulting, trust-building metric cards",
+      "notFor": "High-energy nightlife or neon gaming creatives"
+    },
+    {
+      "id": "sunset-boulevard",
+      "name": "Sunset Boulevard",
+      "brandHex": "#E85D04",
+      "mode": "light",
+      "fonts": { "heading": "Inter", "body": "Inter" },
+      "bestFor": "Launch, lifestyle, warm creator promos",
+      "notFor": "Conservative financial disclosures"
+    },
+    {
+      "id": "forest-canopy",
+      "name": "Forest Canopy",
+      "brandHex": "#2D6A4F",
+      "mode": "light",
+      "fonts": { "heading": "Georgia", "body": "Inter" },
+      "bestFor": "Sustainability, outdoor, grounded reports",
+      "notFor": "Ultra-minimal grayscale product UI"
+    },
+    {
+      "id": "modern-minimalist",
+      "name": "Modern Minimalist",
+      "brandHex": "#475569",
+      "mode": "light",
+      "fonts": { "heading": "Inter", "body": "Inter" },
+      "bestFor": "Architecture, product UI shots, clean SaaS",
+      "notFor": "Maximalist sticker-led creator posts"
+    },
+    {
+      "id": "golden-hour",
+      "name": "Golden Hour",
+      "brandHex": "#B45309",
+      "mode": "light",
+      "fonts": { "heading": "Playfair Display", "body": "Source Sans 3" },
+      "bestFor": "Premium, autumnal, milestone celebrate",
+      "notFor": "Cold clinical healthcare dashboards"
+    },
+    {
+      "id": "arctic-frost",
+      "name": "Arctic Frost",
+      "brandHex": "#0284C7",
+      "mode": "light",
+      "fonts": { "heading": "Inter", "body": "Inter" },
+      "bestFor": "Winter campaigns, crisp tech, health",
+      "notFor": "Warm rustic food storytelling"
+    },
+    {
+      "id": "desert-rose",
+      "name": "Desert Rose",
+      "brandHex": "#C45C6A",
+      "mode": "light",
+      "fonts": { "heading": "Inter", "body": "Inter" },
+      "bestFor": "Soft beauty, hospitality, gentle social proof",
+      "notFor": "Hard-edge industrial or terminal aesthetics"
+    },
+    {
+      "id": "tech-innovation",
+      "name": "Tech Innovation",
+      "brandHex": "#2563EB",
+      "mode": "dark",
+      "fonts": { "heading": "Inter", "body": "Inter" },
+      "bestFor": "Startups, AI updates, product launches",
+      "notFor": "Warm editorial paper / folio looks"
+    },
+    {
+      "id": "botanical-garden",
+      "name": "Botanical Garden",
+      "brandHex": "#16A34A",
+      "mode": "light",
+      "fonts": { "heading": "Inter", "body": "Inter" },
+      "bestFor": "Growth metrics, wellness, organic brands",
+      "notFor": "Luxury black-tie or neon nightlife"
+    },
+    {
+      "id": "midnight-galaxy",
+      "name": "Midnight Galaxy",
+      "brandHex": "#7C3AED",
+      "mode": "dark",
+      "fonts": { "heading": "Inter", "body": "Inter" },
+      "bestFor": "Entertainment, gaming, bold night creatives",
+      "notFor": "Corporate earnings or government reports"
+    }
+  ]
+}