@stylecrib/cli 0.3.1 → 0.3.3

package/themes/team-kanban/THEME.md

@@ -0,0 +1,167 @@
+# Team Kanban
+
+> Trello / Notion-anchored kanban-first project-management register — off-white canvas at
+
+**Slug:** `team-kanban` — **Surface:** web — **Density:** dense
+
+## Influence
+
+Modern project-management tools (Trello at its most kanban-first,
+Notion at its most workspace-forward, Height / Asana for density,
+Linear for keyboard-first opinionated design). Distinct from
+developer-tool surfaces through the KANBAN BOARD ANCHOR + MULTI-
+COLOR CARD LABELS + AVATAR STACKS + DUE-DATE BADGES trio — which
+reads as team-collaboration rather than issue-tracker.
+
+
+## Signature move
+
+Off-white canvas at #f8f7f4 — the register's non-negotiable base
+(warmer than pure white, cooler than warm cream, Notion-adjacent).
+Warm coral brand accent #ff5a5f used ONLY for the wordmark, primary
+CTAs, hover states, and a signature 'HIGH PRIORITY' badge color.
+MULTI-COLOR card labels (blue / green / yellow / red / purple) are
+LEGITIMATELY used as Kanban card category tags — this is a chrome-
+inventory exception scoped ONLY to the Kanban board. Sharp-ish
+corners (4px on cards, 0px on buttons and structural elements).
+
+MASTHEAD — a coral 'CADENCE' wordmark in Inter Display 700 medium
+at 20px on the left, a horizontal nav (Board / Timeline / Roster /
+Retrospectives / Settings) center, a filled coral 'New task'
+button right-aligned. Shrinks after 200px scroll.
+
+HERO SPLIT — two-column layout. LEFT: small caps 'CDN-SPRINT-24 ·
+ACTIVE' + big Inter Display headline ('Where the work happens.
+Live.') + body copy + coral 'Create your first board' CTA + link
+'Watch the two-minute tour'. RIGHT: a preview mini kanban board at
+reduced scale showing 3 columns + 2-3 cards each.
+
+THE KANBAN BOARD — the SIGNATURE MOVE. A full horizontal Kanban
+board with 4 columns (BACKLOG · 8 · gray column header / IN PROGRESS
+· 3 / 5 WIP · coral column header / REVIEW · 2 · yellow column
+header / DONE · 12 · green column header). Each column contains
+multiple cards with:
+  • Multi-color label chips (blue / green / yellow / red / purple)
+  • Issue ID in mono (CDN-01 through CDN-25)
+  • Card title in Inter Display 500 at 15px
+  • Optional checklist progress bar with green fill percentage
+  • Optional due-date badge (red for overdue, yellow for imminent)
+  • Priority indicator (red HIGH pulses on a 2s loop)
+  • Avatar stack (bespoke SVG circular portraits)
+  • Story points in mono
+ONE CARD animates every 6 seconds — slides from Backlog to In
+Progress to Review to Done via CSS transform, then returns to
+Backlog and restarts. The In Progress column's WIP counter updates
+live as the card moves.
+
+SPRINT METRICS — 3-panel dashboard with:
+  • BURNDOWN CHART (goal line drawn first in mute gray, then actual
+    line drawn in coral over 1400ms via stroke-dashoffset)
+  • VELOCITY panel with counting number (Sprint 24: 47 points) and
+    trend indicator (▲ 12% vs Sprint 23)
+  • WIP LIMIT panel showing current 3/5 with progress bar
+
+TEAM ROSTER — 6 team-member cards with bespoke SVG circular
+avatars, name, role, current-task summary, and status pill
+('Working on CDN-03', 'In review · CDN-08', 'Off · back Monday').
+Cards stagger reveal at 100ms per card.
+
+TIMELINE / GANTT VIEW — a mini alternative view showing the same 8
+tasks on a horizontal timeline with day markers, task bars sliding
+in from left with 80ms per-bar stagger. Task bars use the same
+multi-color labels as the Kanban cards.
+
+RETROSPECTIVE CALLOUT — quote-style summary card 'Sprint 24: 47
+points shipped. 3 blockers. 1 hot-fix. Team velocity up 12% Q/Q.'
+in a large Inter Display italic pull quote with team-lead attribution.
+
+PRICING TIERS — 3-tier grid (Free / Team / Enterprise) with feature
+lists and coral highlight on the recommended Team tier.
+
+FOOTER — dark inverted band with 'CADENCE' wordmark at ~120px,
+4-column utility grid, and a small SOC 2 badge in the corner.
+
+Six bespoke SVG marks (kanban-board icon, priority-flag, checklist-
+bar, avatar-stack, timeline-marker, sprint-burndown-chart) drop as
+PUNCTUATION at specific compositional moments, never as a uniform
+icon row.
+
+## Palette
+
+- **bg:** `#f8f7f4`
+- **surface:** `#ffffff`
+- **ink:** `#2a2a2a`
+- **accent:** `#ff5a5f`
+
+## Typography
+
+- **Display:** A modern geometric sans at medium-bold weight — Inter Display / Söhne. Free fallback stack — "Inter Display", "Inter", "Söhne", "Space Grotesk", system-ui, sans-serif. Weight 500-700, mixed case, letter-spacing -0.02em. Top of scale ~72px hero, 40px section headings, 20px card titles.
+- **Body:** A clean sans for body copy and card content — Inter / system-ui. Free fallback stack — "Inter", "Söhne", system-ui, sans-serif. Weight 400 for body copy, 500 for card labels, 600 for column headers. 14-15px body copy, line-height 1.55.
+- **Mono:** JetBrains Mono / IBM Plex Mono for issue IDs (CDN-01, CDN-02), story points, and sprint metrics. Weight 400-500, 11-13px. LEGITIMATE here because Kanban cards genuinely display issue IDs.
+- **Scale:** 1.25 (perfect fourth — comfortable for dense card UI)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Hero + kanban board reveal on paint — headline fades in with 800ms cubic-bezier(0.23,1,0.32,1), then the kanban board fades in 200ms later.
+2. Card cycling animation — one card in the Kanban board cycles between columns every 6 seconds: it slides from Backlog → In Progress → Review → Done via CSS transform + transition, then returns to Backlog and restarts. The WIP counter in the In Progress column header updates to reflect the moving card.
+3. Sprint burndown chart — line draws via stroke-dashoffset over 1400ms cubic-bezier on IntersectionObserver visibility at 40% threshold. Goal line and actual line draw sequentially (goal first at 800ms, actual at 1400ms).
+4. Team roster stagger reveal — 6 team-member cards fade in with 100ms per-card stagger on scroll into view.
+5. Timeline bars slide-in — 8 timeline task bars slide in from left with 80ms per-bar stagger on scroll.
+6. Priority badges pulse — HIGH PRIORITY badges scale from 1 → 1.05 → 1 on a 2s loop (subtle attention pull for urgent tasks).
+7. Sprint velocity counter — count up 0 → target on scroll into view via requestAnimationFrame, 1600ms ease-out.
+8. Section reveals — each below-fold section fades in over 700ms cubic-bezier on IntersectionObserver at 25% threshold.
+9. Nav shrink on scroll after 200px.
+10. prefers-reduced-motion: reduce — card cycling paused; chart shows at full stroke; badges paused; state changes still fire.
+
+Motion character: kinetic, team-collaboration, live-workspace. Custom cubic-bezier(0.23,1,0.32,1) for reveals + cubic-bezier(0.65, 0, 0.35, 1) for card movements. Reads as a working PM tool, not a marketing page.
+
+
+## Imagery
+
+BESPOKE SVG diagrams and icons — the reference uses flat card UI,
+SVG avatars (circle-portraits with team-color backgrounds), and
+minimalist column indicators. FPO imagery here should read as
+considered PM UI (flat cards, circular SVG avatars with warm skin
+tones, subtle status pills). NO stock 'diverse team collaborating
+around a whiteboard' photography (that's the AI-tell for corporate
+PM slop). NO 3D-rendered UI mockups. NO radial-gradient placeholder
+fills.
+
+## Best for
+
+- Project management tools (kanban / issue tracker / roadmap)
+- Team collaboration platforms and productivity SaaS
+- Software engineering team dashboards
+- Design ops platforms and creative-team workflow tools
+- Boutique PM tools targeting design teams / creative agencies
+- Remote-team collaboration hubs
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Dark canvas — Team Kanban's canvas is OFF-WHITE at #f8f7f4. Dark canvas inverts the kanban-first PM register into a developer-issue-tracker register (Linear-adjacent, different theme).
+- Pure white canvas — #f8f7f4 is deliberately WARMER than pure white, matching Notion's page-background register. Pure white kills the specific warmth this base carries.
+- Serif display — the register requires modern GEOMETRIC SANS. Serif display collapses into editorial territory.
+- Multi-color palette beyond the SCOPED CARD-LABEL exception — the 5-color card label palette is LEGITIMATELY scoped to the Kanban board only. Introducing multi-color as brand accent, hero decoration, or section-background flood collapses the discipline into candy slop.
+- Fully-rounded pill corners on cards — cards use SMALL rounded corners (4px) NOT 999px pill. Buttons and column headers stay at 0px radius. 999px pills anywhere on this register kill the kanban-board reading.
+- Stock team-collaboration photography — imagery MUST feel like considered SVG PM UI (flat cards, circular SVG avatars, subtle status pills). Stock team-around-whiteboard photography is the AI-tell for corporate PM slop.
+- 3D-rendered UI mockups — visuals must be flat SVG UI elements. 3D renders read as consumer-tech launch.
+- Emoji task icons ✅ 🎯 📌 — bespoke SVG only for icons. Emoji is the biggest AI-tell for corporate-PM slop.
+- Marketing-loud copy language ('supercharge your team', 'unlock productivity', 'game-changing collaboration') — the register requires PM-tool voice. Marketing-loud copy collapses into startup slop.
+- Cycling headline words or ticker bars — the LIVE motion is the CARD CYCLING animation only. Auto-advancing headline sliders collapse into marketing slop.
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is #f8f7f4, cooler than claude-cream.
+- void+acid
+- broadsheet-on-noneditorial
+- tech-bro purple gradient
+- uniform-everything
+- dark-canvas-inversion (canvas is off-white. Swapping to dark inverts into Linear-adjacent developer register.)
+- serif-display-anywhere (register requires modern geometric sans. Serif display collapses into editorial territory.)
+- multi-color-outside-labels (5-color palette is SCOPED to Kanban card labels only. Introducing multi-color as brand accent or section flood collapses the discipline.)
+- pill-card-corners (cards use 4px small-rounded corners, NOT 999px pills. 999px pills kill the Kanban board reading.)
+- stock-collab-photography (imagery must be flat SVG PM UI. Stock team-around-whiteboard is the AI-tell.)
+- emoji-task-icons (bespoke SVG only. Emoji is the biggest AI-tell for corporate PM slop.)

package/themes/team-kanban/tailwind.snippet.ts

@@ -0,0 +1,15 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: team-kanban
+export const teamKanbanTailwindExtend = {
+  colors: {
+    bg: "#f8f7f4",
+    surface: "#ffffff",
+    ink: "#2a2a2a",
+    accent: "#ff5a5f",
+  },
+  fontFamily: {
+    display: ["A modern geometric sans at medium-bold weight — Inter Display / Söhne. Free fallback stack — \"Inter Display\", \"Inter\", \"Söhne\", \"Space Grotesk\", system-ui, sans-serif. Weight 500-700, mixed case, letter-spacing -0.02em. Top of scale ~72px hero, 40px section headings, 20px card titles."],
+    body: ["A clean sans for body copy and card content — Inter / system-ui. Free fallback stack — \"Inter\", \"Söhne\", system-ui, sans-serif. Weight 400 for body copy, 500 for card labels, 600 for column headers. 14-15px body copy, line-height 1.55."],
+    mono: ["JetBrains Mono / IBM Plex Mono for issue IDs (CDN-01, CDN-02), story points, and sprint metrics. Weight 400-500, 11-13px. LEGITIMATE here because Kanban cards genuinely display issue IDs."],
+  },
+};

package/themes/team-kanban/theme.yml

@@ -0,0 +1,209 @@
+# Team Kanban — Family D, Contemporary Web (project-management subregion).
+#
+# Trello / Notion-anchored kanban-first project-management register.
+# Off-white canvas (#f8f7f4) + warm coral brand accent (#ff5a5f) +
+# MULTI-COLOR CARD LABELS (blue / green / yellow / red / purple) —
+# multi-color labels are a THEME-SPECIFIC EXCEPTION to the general
+# single-accent discipline because Kanban boards genuinely require
+# color-coded labels to work as project-management tools. Geometric
+# sans (Inter Display) + system-ui body + JetBrains Mono for issue IDs.
+# Sharp-ish corners (4px on cards, 0px elsewhere).
+#
+# Influence anchor: Trello + Notion at their most kanban-forward, with
+# Height / Asana density added. Placeholder brand: "CADENCE" — a
+# fictional project-management tool. Original name, original copy.
+#
+# Distinct from other Family D bases:
+#   - Signal Dark is dashboard/tool with green terminal accent
+#   - Arc Stack is protocol infrastructure with saturated signal-glow
+#   - Kinetic Headline is kinetic-marketing display
+#   - Bento Modular is grid-driven dashboard
+#   - Enterprise Tech is Palantir institutional dark cyan
+#   - Nature Distilled is earthy grounded warmth
+#   - Fresh Plate is cleantech monochrome forest
+# Team Kanban fills the KANBAN-FIRST PM slot — the literal kanban
+# board is the composition's signature move.
+#
+# Twenty-first theme via the v2 harness. Sixth Family D theme.
+# Upgrade of the existing v1 archetype-fallback slug.
+
+name: Team Kanban
+concept: Trello / Notion-anchored kanban-first project-management register — off-white canvas at #f8f7f4 with warm coral brand accent and MULTI-COLOR card labels (blue / green / yellow / red / purple) as a Kanban chrome-inventory exception. Geometric sans display (Inter Display) + JetBrains Mono for issue IDs. Full horizontal kanban board with 4 columns (Backlog / In Progress / Review / Done), each card carrying label chips, avatar stacks, due-date badges, checklist progress bars, priority indicators. Live card-move animation every 6 seconds (a card slides from one column to another via CSS transform), WIP counter updates as card moves, sprint burndown chart draws via stroke-dashoffset, team roster with bespoke SVG avatars, timeline / Gantt mini view.
+influence: |
+  Modern project-management tools (Trello at its most kanban-first,
+  Notion at its most workspace-forward, Height / Asana for density,
+  Linear for keyboard-first opinionated design). Distinct from
+  developer-tool surfaces through the KANBAN BOARD ANCHOR + MULTI-
+  COLOR CARD LABELS + AVATAR STACKS + DUE-DATE BADGES trio — which
+  reads as team-collaboration rather than issue-tracker.
+
+family: D
+base_number: 37
+base_note: |
+  Family D Contemporary Web, PROJECT-MANAGEMENT slot. Distinct from
+  other Family D bases through the KANBAN BOARD signature move (full
+  horizontal board is the hero — not a chart, not a spec grid) +
+  MULTI-COLOR CARD LABEL exception. Enterprise Tech is Palantir
+  cyan institutional; Signal Dark is dashboard/tool with terminal
+  green; Bento Modular is dashboard grid. Team Kanban fills the
+  kanban-first PM slot. Upgrade of the existing v1 team-kanban slug
+  from archetype-fallback.
+
+render_url: http://localhost:5173/themes/team-kanban
+
+surface: web
+
+typography:
+  display: A modern geometric sans at medium-bold weight — Inter Display / Söhne. Free fallback stack — "Inter Display", "Inter", "Söhne", "Space Grotesk", system-ui, sans-serif. Weight 500-700, mixed case, letter-spacing -0.02em. Top of scale ~72px hero, 40px section headings, 20px card titles.
+  body: A clean sans for body copy and card content — Inter / system-ui. Free fallback stack — "Inter", "Söhne", system-ui, sans-serif. Weight 400 for body copy, 500 for card labels, 600 for column headers. 14-15px body copy, line-height 1.55.
+  mono: JetBrains Mono / IBM Plex Mono for issue IDs (CDN-01, CDN-02), story points, and sprint metrics. Weight 400-500, 11-13px. LEGITIMATE here because Kanban cards genuinely display issue IDs.
+  scale: 1.25 (perfect fourth — comfortable for dense card UI)
+  eyebrow_exception: |
+    Team Kanban LEGITIMATELY uses small-caps 0.14em-tracked 10-11px labels for KANBAN COLUMN HEADERS ('BACKLOG · 8', 'IN PROGRESS · 3 / 5 WIP', 'REVIEW · 2', 'DONE') and STATUS PILL LABELS ('IN REVIEW', 'BLOCKED', 'READY'). This is a THEME-SPECIFIC EXCEPTION — kanban column headers use these EXACTLY in this register as diegetic PM chrome, not decorative eyebrow slop.
+  multi_color_exception: |
+    Team Kanban LEGITIMATELY uses a 5-color CARD LABEL palette (blue #3d5afe / green #22c55e / yellow #fbbf24 / red #ef4444 / purple #a855f7) as CARD CATEGORY TAGS — this is a THEME-SPECIFIC EXCEPTION to the general single-accent discipline because Kanban boards require color-coded labels to work as project-management tools. The BRAND accent is coral (#ff5a5f) and is used ONLY for the brand wordmark, primary CTAs, and hover states — the multi-color palette is scoped ONLY to card labels within the Kanban board.
+
+palette:
+  bg: "#f8f7f4"           # off-white canvas — warm undertone (Notion-adjacent)
+  surface: "#ffffff"      # white raised card
+  ink: "#2a2a2a"          # warm near-black
+  accent: "#ff5a5f"       # coral brand accent — wordmark + CTA + hover
+  cream: "#f8f7f4"        # alias for bg
+  darkInk: "#0f0f0f"      # deepest black for masthead
+  mute: "#7a7570"         # dimmed for captions
+  labelBlue: "#3d5afe"    # Kanban card label — blue
+  labelGreen: "#22c55e"   # Kanban card label — green
+  labelYellow: "#fbbf24"  # Kanban card label — yellow
+  labelRed: "#ef4444"     # Kanban card label — red
+  labelPurple: "#a855f7"  # Kanban card label — purple
+
+density: dense
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Hero + kanban board reveal on paint — headline fades in with 800ms cubic-bezier(0.23,1,0.32,1), then the kanban board fades in 200ms later.
+  2. Card cycling animation — one card in the Kanban board cycles between columns every 6 seconds: it slides from Backlog → In Progress → Review → Done via CSS transform + transition, then returns to Backlog and restarts. The WIP counter in the In Progress column header updates to reflect the moving card.
+  3. Sprint burndown chart — line draws via stroke-dashoffset over 1400ms cubic-bezier on IntersectionObserver visibility at 40% threshold. Goal line and actual line draw sequentially (goal first at 800ms, actual at 1400ms).
+  4. Team roster stagger reveal — 6 team-member cards fade in with 100ms per-card stagger on scroll into view.
+  5. Timeline bars slide-in — 8 timeline task bars slide in from left with 80ms per-bar stagger on scroll.
+  6. Priority badges pulse — HIGH PRIORITY badges scale from 1 → 1.05 → 1 on a 2s loop (subtle attention pull for urgent tasks).
+  7. Sprint velocity counter — count up 0 → target on scroll into view via requestAnimationFrame, 1600ms ease-out.
+  8. Section reveals — each below-fold section fades in over 700ms cubic-bezier on IntersectionObserver at 25% threshold.
+  9. Nav shrink on scroll after 200px.
+  10. prefers-reduced-motion: reduce — card cycling paused; chart shows at full stroke; badges paused; state changes still fire.
+
+  Motion character: kinetic, team-collaboration, live-workspace. Custom cubic-bezier(0.23,1,0.32,1) for reveals + cubic-bezier(0.65, 0, 0.35, 1) for card movements. Reads as a working PM tool, not a marketing page.
+
+signature: |
+  Off-white canvas at #f8f7f4 — the register's non-negotiable base
+  (warmer than pure white, cooler than warm cream, Notion-adjacent).
+  Warm coral brand accent #ff5a5f used ONLY for the wordmark, primary
+  CTAs, hover states, and a signature 'HIGH PRIORITY' badge color.
+  MULTI-COLOR card labels (blue / green / yellow / red / purple) are
+  LEGITIMATELY used as Kanban card category tags — this is a chrome-
+  inventory exception scoped ONLY to the Kanban board. Sharp-ish
+  corners (4px on cards, 0px on buttons and structural elements).
+
+  MASTHEAD — a coral 'CADENCE' wordmark in Inter Display 700 medium
+  at 20px on the left, a horizontal nav (Board / Timeline / Roster /
+  Retrospectives / Settings) center, a filled coral 'New task'
+  button right-aligned. Shrinks after 200px scroll.
+
+  HERO SPLIT — two-column layout. LEFT: small caps 'CDN-SPRINT-24 ·
+  ACTIVE' + big Inter Display headline ('Where the work happens.
+  Live.') + body copy + coral 'Create your first board' CTA + link
+  'Watch the two-minute tour'. RIGHT: a preview mini kanban board at
+  reduced scale showing 3 columns + 2-3 cards each.
+
+  THE KANBAN BOARD — the SIGNATURE MOVE. A full horizontal Kanban
+  board with 4 columns (BACKLOG · 8 · gray column header / IN PROGRESS
+  · 3 / 5 WIP · coral column header / REVIEW · 2 · yellow column
+  header / DONE · 12 · green column header). Each column contains
+  multiple cards with:
+    • Multi-color label chips (blue / green / yellow / red / purple)
+    • Issue ID in mono (CDN-01 through CDN-25)
+    • Card title in Inter Display 500 at 15px
+    • Optional checklist progress bar with green fill percentage
+    • Optional due-date badge (red for overdue, yellow for imminent)
+    • Priority indicator (red HIGH pulses on a 2s loop)
+    • Avatar stack (bespoke SVG circular portraits)
+    • Story points in mono
+  ONE CARD animates every 6 seconds — slides from Backlog to In
+  Progress to Review to Done via CSS transform, then returns to
+  Backlog and restarts. The In Progress column's WIP counter updates
+  live as the card moves.
+
+  SPRINT METRICS — 3-panel dashboard with:
+    • BURNDOWN CHART (goal line drawn first in mute gray, then actual
+      line drawn in coral over 1400ms via stroke-dashoffset)
+    • VELOCITY panel with counting number (Sprint 24: 47 points) and
+      trend indicator (▲ 12% vs Sprint 23)
+    • WIP LIMIT panel showing current 3/5 with progress bar
+
+  TEAM ROSTER — 6 team-member cards with bespoke SVG circular
+  avatars, name, role, current-task summary, and status pill
+  ('Working on CDN-03', 'In review · CDN-08', 'Off · back Monday').
+  Cards stagger reveal at 100ms per card.
+
+  TIMELINE / GANTT VIEW — a mini alternative view showing the same 8
+  tasks on a horizontal timeline with day markers, task bars sliding
+  in from left with 80ms per-bar stagger. Task bars use the same
+  multi-color labels as the Kanban cards.
+
+  RETROSPECTIVE CALLOUT — quote-style summary card 'Sprint 24: 47
+  points shipped. 3 blockers. 1 hot-fix. Team velocity up 12% Q/Q.'
+  in a large Inter Display italic pull quote with team-lead attribution.
+
+  PRICING TIERS — 3-tier grid (Free / Team / Enterprise) with feature
+  lists and coral highlight on the recommended Team tier.
+
+  FOOTER — dark inverted band with 'CADENCE' wordmark at ~120px,
+  4-column utility grid, and a small SOC 2 badge in the corner.
+
+  Six bespoke SVG marks (kanban-board icon, priority-flag, checklist-
+  bar, avatar-stack, timeline-marker, sprint-burndown-chart) drop as
+  PUNCTUATION at specific compositional moments, never as a uniform
+  icon row.
+
+imagery: |
+  BESPOKE SVG diagrams and icons — the reference uses flat card UI,
+  SVG avatars (circle-portraits with team-color backgrounds), and
+  minimalist column indicators. FPO imagery here should read as
+  considered PM UI (flat cards, circular SVG avatars with warm skin
+  tones, subtle status pills). NO stock 'diverse team collaborating
+  around a whiteboard' photography (that's the AI-tell for corporate
+  PM slop). NO 3D-rendered UI mockups. NO radial-gradient placeholder
+  fills.
+
+best_for:
+  - Project management tools (kanban / issue tracker / roadmap)
+  - Team collaboration platforms and productivity SaaS
+  - Software engineering team dashboards
+  - Design ops platforms and creative-team workflow tools
+  - Boutique PM tools targeting design teams / creative agencies
+  - Remote-team collaboration hubs
+
+avoid:
+  - "Dark canvas — Team Kanban's canvas is OFF-WHITE at #f8f7f4. Dark canvas inverts the kanban-first PM register into a developer-issue-tracker register (Linear-adjacent, different theme)."
+  - "Pure white canvas — #f8f7f4 is deliberately WARMER than pure white, matching Notion's page-background register. Pure white kills the specific warmth this base carries."
+  - "Serif display — the register requires modern GEOMETRIC SANS. Serif display collapses into editorial territory."
+  - "Multi-color palette beyond the SCOPED CARD-LABEL exception — the 5-color card label palette is LEGITIMATELY scoped to the Kanban board only. Introducing multi-color as brand accent, hero decoration, or section-background flood collapses the discipline into candy slop."
+  - "Fully-rounded pill corners on cards — cards use SMALL rounded corners (4px) NOT 999px pill. Buttons and column headers stay at 0px radius. 999px pills anywhere on this register kill the kanban-board reading."
+  - "Stock team-collaboration photography — imagery MUST feel like considered SVG PM UI (flat cards, circular SVG avatars, subtle status pills). Stock team-around-whiteboard photography is the AI-tell for corporate PM slop."
+  - "3D-rendered UI mockups — visuals must be flat SVG UI elements. 3D renders read as consumer-tech launch."
+  - "Emoji task icons ✅ 🎯 📌 — bespoke SVG only for icons. Emoji is the biggest AI-tell for corporate-PM slop."
+  - "Marketing-loud copy language ('supercharge your team', 'unlock productivity', 'game-changing collaboration') — the register requires PM-tool voice. Marketing-loud copy collapses into startup slop."
+  - "Cycling headline words or ticker bars — the LIVE motion is the CARD CYCLING animation only. Auto-advancing headline sliders collapse into marketing slop."
+
+banned_defaults:
+  - "claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is #f8f7f4, cooler than claude-cream."
+  - "void+acid"
+  - "broadsheet-on-noneditorial"
+  - "tech-bro purple gradient"
+  - "uniform-everything"
+  - "dark-canvas-inversion (canvas is off-white. Swapping to dark inverts into Linear-adjacent developer register.)"
+  - "serif-display-anywhere (register requires modern geometric sans. Serif display collapses into editorial territory.)"
+  - "multi-color-outside-labels (5-color palette is SCOPED to Kanban card labels only. Introducing multi-color as brand accent or section flood collapses the discipline.)"
+  - "pill-card-corners (cards use 4px small-rounded corners, NOT 999px pills. 999px pills kill the Kanban board reading.)"
+  - "stock-collab-photography (imagery must be flat SVG PM UI. Stock team-around-whiteboard is the AI-tell.)"
+  - "emoji-task-icons (bespoke SVG only. Emoji is the biggest AI-tell for corporate PM slop.)"

package/themes/team-kanban/tokens.ts

@@ -0,0 +1,35 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "team-kanban",
+  family: "D",
+  base: "37",
+  palette: {
+    "bg": "#f8f7f4",
+    "surface": "#ffffff",
+    "ink": "#2a2a2a",
+    "accent": "#ff5a5f",
+    "cream": "#f8f7f4",
+    "darkInk": "#0f0f0f",
+    "mute": "#7a7570",
+    "labelBlue": "#3d5afe",
+    "labelGreen": "#22c55e",
+    "labelYellow": "#fbbf24",
+    "labelRed": "#ef4444",
+    "labelPurple": "#a855f7"
+  },
+  typography: {
+    "display": "A modern geometric sans at medium-bold weight — Inter Display / Söhne. Free fallback stack — \"Inter Display\", \"Inter\", \"Söhne\", \"Space Grotesk\", system-ui, sans-serif. Weight 500-700, mixed case, letter-spacing -0.02em. Top of scale ~72px hero, 40px section headings, 20px card titles.",
+    "body": "A clean sans for body copy and card content — Inter / system-ui. Free fallback stack — \"Inter\", \"Söhne\", system-ui, sans-serif. Weight 400 for body copy, 500 for card labels, 600 for column headers. 14-15px body copy, line-height 1.55.",
+    "mono": "JetBrains Mono / IBM Plex Mono for issue IDs (CDN-01, CDN-02), story points, and sprint metrics. Weight 400-500, 11-13px. LEGITIMATE here because Kanban cards genuinely display issue IDs.",
+    "scale": "1.25 (perfect fourth — comfortable for dense card UI)",
+    "eyebrow_exception": "Team Kanban LEGITIMATELY uses small-caps 0.14em-tracked 10-11px labels for KANBAN COLUMN HEADERS ('BACKLOG · 8', 'IN PROGRESS · 3 / 5 WIP', 'REVIEW · 2', 'DONE') and STATUS PILL LABELS ('IN REVIEW', 'BLOCKED', 'READY'). This is a THEME-SPECIFIC EXCEPTION — kanban column headers use these EXACTLY in this register as diegetic PM chrome, not decorative eyebrow slop.\n",
+    "multi_color_exception": "Team Kanban LEGITIMATELY uses a 5-color CARD LABEL palette (blue #3d5afe / green #22c55e / yellow #fbbf24 / red #ef4444 / purple #a855f7) as CARD CATEGORY TAGS — this is a THEME-SPECIFIC EXCEPTION to the general single-accent discipline because Kanban boards require color-coded labels to work as project-management tools. The BRAND accent is coral (#ff5a5f) and is used ONLY for the brand wordmark, primary CTAs, and hover states — the multi-color palette is scoped ONLY to card labels within the Kanban board.\n"
+  },
+  surface: "web",
+  density: "dense",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Hero + kanban board reveal on paint — headline fades in with 800ms cubic-bezier(0.23,1,0.32,1), then the kanban board fades in 200ms later.\n2. Card cycling animation — one card in the Kanban board cycles between columns every 6 seconds: it slides from Backlog → In Progress → Review → Done via CSS transform + transition, then returns to Backlog and restarts. The WIP counter in the In Progress column header updates to reflect the moving card.\n3. Sprint burndown chart — line draws via stroke-dashoffset over 1400ms cubic-bezier on IntersectionObserver visibility at 40% threshold. Goal line and actual line draw sequentially (goal first at 800ms, actual at 1400ms).\n4. Team roster stagger reveal — 6 team-member cards fade in with 100ms per-card stagger on scroll into view.\n5. Timeline bars slide-in — 8 timeline task bars slide in from left with 80ms per-bar stagger on scroll.\n6. Priority badges pulse — HIGH PRIORITY badges scale from 1 → 1.05 → 1 on a 2s loop (subtle attention pull for urgent tasks).\n7. Sprint velocity counter — count up 0 → target on scroll into view via requestAnimationFrame, 1600ms ease-out.\n8. Section reveals — each below-fold section fades in over 700ms cubic-bezier on IntersectionObserver at 25% threshold.\n9. Nav shrink on scroll after 200px.\n10. prefers-reduced-motion: reduce — card cycling paused; chart shows at full stroke; badges paused; state changes still fire.\n\nMotion character: kinetic, team-collaboration, live-workspace. Custom cubic-bezier(0.23,1,0.32,1) for reveals + cubic-bezier(0.65, 0, 0.35, 1) for card movements. Reads as a working PM tool, not a marketing page.\n",
+  signature: "Off-white canvas at #f8f7f4 — the register's non-negotiable base\n(warmer than pure white, cooler than warm cream, Notion-adjacent).\nWarm coral brand accent #ff5a5f used ONLY for the wordmark, primary\nCTAs, hover states, and a signature 'HIGH PRIORITY' badge color.\nMULTI-COLOR card labels (blue / green / yellow / red / purple) are\nLEGITIMATELY used as Kanban card category tags — this is a chrome-\ninventory exception scoped ONLY to the Kanban board. Sharp-ish\ncorners (4px on cards, 0px on buttons and structural elements).\n\nMASTHEAD — a coral 'CADENCE' wordmark in Inter Display 700 medium\nat 20px on the left, a horizontal nav (Board / Timeline / Roster /\nRetrospectives / Settings) center, a filled coral 'New task'\nbutton right-aligned. Shrinks after 200px scroll.\n\nHERO SPLIT — two-column layout. LEFT: small caps 'CDN-SPRINT-24 ·\nACTIVE' + big Inter Display headline ('Where the work happens.\nLive.') + body copy + coral 'Create your first board' CTA + link\n'Watch the two-minute tour'. RIGHT: a preview mini kanban board at\nreduced scale showing 3 columns + 2-3 cards each.\n\nTHE KANBAN BOARD — the SIGNATURE MOVE. A full horizontal Kanban\nboard with 4 columns (BACKLOG · 8 · gray column header / IN PROGRESS\n· 3 / 5 WIP · coral column header / REVIEW · 2 · yellow column\nheader / DONE · 12 · green column header). Each column contains\nmultiple cards with:\n  • Multi-color label chips (blue / green / yellow / red / purple)\n  • Issue ID in mono (CDN-01 through CDN-25)\n  • Card title in Inter Display 500 at 15px\n  • Optional checklist progress bar with green fill percentage\n  • Optional due-date badge (red for overdue, yellow for imminent)\n  • Priority indicator (red HIGH pulses on a 2s loop)\n  • Avatar stack (bespoke SVG circular portraits)\n  • Story points in mono\nONE CARD animates every 6 seconds — slides from Backlog to In\nProgress to Review to Done via CSS transform, then returns to\nBacklog and restarts. The In Progress column's WIP counter updates\nlive as the card moves.\n\nSPRINT METRICS — 3-panel dashboard with:\n  • BURNDOWN CHART (goal line drawn first in mute gray, then actual\n    line drawn in coral over 1400ms via stroke-dashoffset)\n  • VELOCITY panel with counting number (Sprint 24: 47 points) and\n    trend indicator (▲ 12% vs Sprint 23)\n  • WIP LIMIT panel showing current 3/5 with progress bar\n\nTEAM ROSTER — 6 team-member cards with bespoke SVG circular\navatars, name, role, current-task summary, and status pill\n('Working on CDN-03', 'In review · CDN-08', 'Off · back Monday').\nCards stagger reveal at 100ms per card.\n\nTIMELINE / GANTT VIEW — a mini alternative view showing the same 8\ntasks on a horizontal timeline with day markers, task bars sliding\nin from left with 80ms per-bar stagger. Task bars use the same\nmulti-color labels as the Kanban cards.\n\nRETROSPECTIVE CALLOUT — quote-style summary card 'Sprint 24: 47\npoints shipped. 3 blockers. 1 hot-fix. Team velocity up 12% Q/Q.'\nin a large Inter Display italic pull quote with team-lead attribution.\n\nPRICING TIERS — 3-tier grid (Free / Team / Enterprise) with feature\nlists and coral highlight on the recommended Team tier.\n\nFOOTER — dark inverted band with 'CADENCE' wordmark at ~120px,\n4-column utility grid, and a small SOC 2 badge in the corner.\n\nSix bespoke SVG marks (kanban-board icon, priority-flag, checklist-\nbar, avatar-stack, timeline-marker, sprint-burndown-chart) drop as\nPUNCTUATION at specific compositional moments, never as a uniform\nicon row.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/telehealth-modern/THEME.md

@@ -0,0 +1,95 @@
+# Design Direction — Telehealth-Modern
+
+## Ethos
+Headway therapist directory · Cerebral lavender soft · Talkspace warm blue · Spruce clinical-tool density · Calm Health structured-soft
+
+## Feel
+Modern telehealth dashboard energy. The patient schedules a session, refills a prescription, reviews a session note; the provider documents an encounter, sends a message, reviews a chart. The surface is dense but warm — cream-tinted panels, white cards, lavender as the canonical primary action, warm-blue and sage and amber as a small status palette. Inter does everything. The brand reads competent and kind — clinical-software competence with the bedside manner of a good therapist, not an EHR built in 2008.
+
+## Reference brands
+- **Headway** → warm cream background, therapist-directory tile pattern, friendly Inter at every size.
+- **Cerebral** → lavender primary, soft elevated cards, mental-health competence without the heavy clinical chrome.
+- **Talkspace** → warm-blue accent for appointment and messaging surfaces, friendly approachable type.
+- **Spruce Health** → dense provider-tool layouts with a warm accent, dosage strings and ICD codes in mono.
+- **Calm Health** → sage for wellness/positive-status indicators, structured layouts that still feel soft.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Do not introduce numbered or generic tokens — if a new color is needed, name a brand it traces to.
+
+Surface stack is **warm cream** (background) → **white** (card and panel) → **deeper cream** (secondary panel) → **brand-tint** (lavender-soft, warm-blue-soft, sage-soft, amber-soft as status pills and hover states). Depth comes from soft slate-tinted shadows and one-step lifts. The cream base is what distinguishes this from a generic SaaS dashboard — a pure-white page reads cold and the brand collapses.
+
+Brand tokens: `--lavender`, `--lavender-soft`, `--warm-blue`, `--warm-blue-soft`, `--sage`, `--sage-soft`, `--amber`, `--amber-soft`, `--cream`. Primary is **Cerebral lavender**. The status palette is constrained: lavender = session/primary, warm-blue = appointment/booking, sage = adherence-good/wellness-complete, amber = pending/refill-due, warm-red = destructive/cancel.
+
+## Typography
+- **Display:** Inter (Headway/Cerebral feel). Weights 500/600/700. Tracking `-0.015em` at large sizes.
+- **Body:** Inter — same family as display. Telehealth dashboards use one face; hierarchy via weight + size, never face change. Body base **15px** with **line-height 1.55** — denser than marketing surfaces because dashboards pack information.
+- **Mono:** IBM Plex Mono. Dosage strings, ICD codes, MRNs, appointment-time slots inside CTAs. Slightly warmer than JetBrains Mono — patient-facing chrome benefits from the softer stroke.
+
+H1 uses `clamp(2rem, 4.5vw, 3.25rem)` — tool-first, not magazine-large. Numbers always use tabular figures. Font features: `"cv11"`, `"ss01"`, `"tnum"`, `"calt"`.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-6` — wide; provider dashboards run edge-to-edge with sidebar.
+- **Section padding tiers:**
+  - Hero: `pt-16 pb-12 lg:pt-24 lg:pb-16` (modest — this is a tool brand, not an editorial site)
+  - Default: `py-12 lg:py-20`
+  - Tight: `py-8 lg:py-12`
+- **Allowed scale values:** 2 4 6 8 10 12 14 16 20 24 32 40 48 64 80. Dense-allowed micro-steps (2 and 14 included) — dashboard layouts need fine adjustments inside dense table rows and inline-form clusters.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. The status palette is closed — do not introduce a new "info" green or a "warning" orange; the four brand colors plus destructive carry every state.
+
+Lavender is the only color that appears on primary-action buttons. Warm-blue is for appointment chips, booking flow, and chat-message bubbles — never for primary CTA. Sage indicates positive completion (adherence streak, session completed, lab in range). Amber indicates attention-needed but not alarm (Rx refill due, follow-up scheduled). Warm-red is destructive only.
+
+## Radius
+`--radius: 0.625rem` (10px). **Softer than dense-utility, less pillowy than DTC.** Pills are allowed and core (`pillsAllowed: true`) — appointment-status chips, Rx-state badges, adherence indicators. Tighter radius than the DTC siblings because dense data tables read better with crisper corners.
+
+## Shadows
+**Soft slate-tinted shadows.** Utilities:
+- `.shadow-panel` — base panel and card lift
+- `.shadow-panel-lg` — hover state and elevated detail panel
+- `.shadow-popover` — dropdown, modal, calendar-pickers — heavier
+- `.shadow-inset-soft` — 1px inner highlight for cards that need extra dimension
+
+No glows. No colored drop-shadows. Shadow color is slate-tinted (not gray) so it reads warm against cream.
+
+## Motion
+Five keyframes — `fade-rise` (panel and row entrance, 400ms — dashboard-quick), `scale-in` (modal, popover, dropdown, 180ms), `soft-pulse` (unread-message dot and live-session indicator, 1800ms infinite, opacity only), `shimmer` (appointment-list and chart-row loading skeleton), `slide-in-right` (side-panel and chart-detail drawer entrance, 280ms).
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — wrapped in a media query in every motion utility. **No ambient motion** — this is a clinical tool, and motion that doesn't confirm an action reads as distraction. The reveal duration is fast on purpose; clinical software must feel responsive.
+
+## Component patterns
+- **Buttons:** Primary = solid lavender fill, white text, rounded-lg, shadow-panel. Secondary = white fill with 1px border, foreground text. Tertiary = text-link in lavender. Destructive = warm-red ghost (border + text), upgrades to solid only on confirm step. Hover: shadow-panel-lg + 4% darken, never scale (jumpiness in clinical chrome reads error-prone).
+- **Cards:** Rounded-lg, white fill on cream background, 1px warm border, shadow-panel. Internal padding `p-5 lg:p-6` (denser than marketing). Dashboard-tile variant uses a 4px top-border in the brand color matching the data (lavender = session, warm-blue = appointment, sage = adherence, amber = pending).
+- **Inputs:** Rounded-md, 1px warm border, white background. Compact height (h-9). Label sits above in Inter 500. Focus = 2px lavender ring at 40% opacity. Error = warm-red border + warm-red helper text below, no fill change. Inline validation appears as the user types — clinical forms need real-time feedback because a typo in a dosage field is a real harm.
+- **CTAs:** Primary lavender solid is the dashboard default. Marketing pages may pair primary + warm-blue ghost side-by-side. Appointment-booking CTAs always show the next-available slot in mono inside the button itself (*"Book Tuesday 2:30pm"*) — reduces clicks-to-conversion.
+
+## Recommended rich media
+Telehealth photography is **provider portraits and product-UI screenshots**, not lifestyle moments. Provider portraits look like LinkedIn done well — clean background, warm lighting, slight smile, eye contact. Patient testimonials use real photography (not stock) with consent and attribution.
+
+Product-UI screenshots are the hero. Show the actual session interface, the actual appointment-calendar, the actual chart-note — telehealth buyers (both patients and providers) need to see the tool before they trust it. Screenshots get a subtle warm-cream device-frame background, never a starscape or gradient gimmick.
+
+**AI tool recommendations:** **Midjourney / Flux** for provider portraits with prompts like *"professional healthcare provider portrait, soft warm lighting, neutral cream background, friendly slight smile, natural skin"*. **Recraft** or **Ideogram** for category illustrations in a friendly editorial style (lavender or warm-blue accent on cream). Avoid: 3D rendered medical instruments, glossy stethoscope shots, anything that looks like a 2014 startup marketing site.
+
+**Aspect ratios:** 4:3 or 3:2 for product-UI screenshots (matches actual device aspect), 1:1 square for provider portraits (directory tile standard), 4:5 portrait for marketing testimonial photography. Never 21:9.
+
+**Video:** product walkthroughs are core marketing content — ≤90 seconds, captions baked in (accessibility and sound-off mobile autoplay). Provider testimonial videos are talking-head with the provider in their actual workspace, never a green-screen studio. ≤10 MB, H.265.
+
+**Performance:** hero screenshot ≤200 KB AVIF at 2000w (UI detail must hold up); provider-portrait tiles ≤40 KB at 400w. LCP under 2.5s.
+
+**Avoid:** stock photography of stethoscope-on-clipboard, blue-tinted hospital corridors, doctors-pointing-at-tablets, glowing-data-overlay 3D renders, anything from a generic healthcare-marketing stock library, lens flare, the "trusted by these logos" gray-on-gray logo wall (use color logos on the warm cream — the warmth is the brand).
+
+**Accessibility:** product-UI screenshot alt-text describes the interface state: *"Patient dashboard showing three upcoming appointments and a refill reminder for sertraline."* Provider portrait alt-text: *"Dr. Maya Chen, licensed therapist, smiling in her office."*
+
+## Component families
+None at install time. The hint sheet for appointment-tile, chart-row, dose-card, message-bubble, and provider-directory-tile patterns lives in the design-system handoff once the first views ship; the Director appends them here as patterns stabilize.
+
+## Details
+- **Selection:** `hsl(var(--lavender) / 0.22)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — lavender at half-opacity.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands (a third-party data table embedded in a chart view that must follow upstream HSL values, a partner-brand pixel-match), add it here with the reason. The Director's consistency pass lists all exceptions for human review.
+
+## Revisions
+- Initial direction, generated at install time.