feat(examples/conceptual-design): update playbook run outputs and concepts

Playbook run artifacts from concept-living-playbook execution: updated
task definitions, design specs, and generated HTML concepts for
linear.app, notion, and random partitions.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: minhlucvan

examples/conceptual-design/.converge/inventory/concept-living-playbook/tasks.jsonl

@@ -0,0 +1,5 @@
+{"kind":"task","id":"01-setup","taskPath":".converge/inventory/concept-living-playbook/spawned/01-setup/TASK.md","title":"01-setup","goalId":"inventory","summary":"01-setup","status":"done","source":"static","playbook":"concept-living-playbook","outputs":[],"checks":[{"id":"","cmd":""},{"id":"","cmd":""}],"fingerprint":"sha256:de7bc9a62f0a989d55de1374800686a7c43c8da4a0c514cad159df38ab7d2814","completedAt":"2026-05-26T09:15:12.951Z","metadata":{"checkpointMirrored":true},"createdAt":"2026-05-26T06:38:36.290Z","updatedAt":"2026-05-26T09:15:12.972Z"}
+{"kind":"task","id":"02-design-spec","taskPath":".converge/inventory/concept-living-playbook/spawned/02-design-spec/TASK.md","title":"02-design-spec","goalId":"inventory","summary":"02-design-spec","status":"done","source":"static","playbook":"concept-living-playbook","outputs":[],"checks":[{"id":"","cmd":""},{"id":"","cmd":""}],"fingerprint":"sha256:820e0ed6dd61db3d7ce84eba8f7e962a7d66e970d575eff556a635227de1cfb9","completedAt":"2026-05-26T09:26:08.312Z","metadata":{"checkpointMirrored":true},"createdAt":"2026-05-26T06:38:36.310Z","updatedAt":"2026-05-26T09:26:08.347Z"}
+{"kind":"task","id":"03-build-html","taskPath":".converge/inventory/concept-living-playbook/spawned/03-build-html/TASK.md","title":"03-build-html","goalId":"inventory","summary":"03-build-html","status":"done","source":"static","playbook":"concept-living-playbook","outputs":[],"checks":[{"id":"","cmd":""},{"id":"","cmd":""},{"id":"","cmd":""},{"id":"","cmd":""},{"id":"","cmd":""},{"id":"","cmd":""}],"fingerprint":"sha256:1d5dc4653bcb08bc03a880a2a9bf0e9908ed37c5dcc0e45f195b7f7535004334","completedAt":"2026-05-26T09:36:43.976Z","metadata":{"checkpointMirrored":true},"createdAt":"2026-05-26T06:38:36.311Z","updatedAt":"2026-05-26T09:36:44.017Z"}
+{"kind":"task","id":"04-enhance","taskPath":".converge/inventory/concept-living-playbook/spawned/04-enhance/TASK.md","title":"04-enhance","goalId":"inventory","summary":"04-enhance","status":"done","source":"static","playbook":"concept-living-playbook","outputs":[],"checks":[{"id":"","cmd":""},{"id":"","cmd":""},{"id":"","cmd":""},{"id":"","cmd":""},{"id":"","cmd":""}],"fingerprint":"sha256:658c43f005a94cfced30aa579153d2111e12ce758b1eadf8d95dc7d111f3963c","completedAt":"2026-05-26T09:53:29.783Z","metadata":{"checkpointMirrored":true},"createdAt":"2026-05-26T06:38:36.312Z","updatedAt":"2026-05-26T09:53:29.821Z"}
+{"kind":"task","id":"05-finalize","taskPath":".converge/inventory/concept-living-playbook/spawned/05-finalize/TASK.md","title":"05-finalize","goalId":"inventory","summary":"05-finalize","status":"done","source":"static","playbook":"concept-living-playbook","outputs":[],"checks":[{"id":"","cmd":""},{"id":"","cmd":""},{"id":"","cmd":""},{"id":"","cmd":""}],"fingerprint":"sha256:d023f2116e3370e5665a9b349fb629ab8cd478fea340bc47e9eb0ccdd86bebfd","completedAt":"2026-05-26T09:53:30.823Z","metadata":{"checkpointMirrored":true},"createdAt":"2026-05-26T06:38:36.315Z","updatedAt":"2026-05-26T09:53:30.845Z"}

examples/conceptual-design/.converge/playbooks/concept-living-playbook/tasks/01-setup/TASK.md

@@ -5,10 +5,10 @@ depends_on: []
 blocking: true
 checks:
   - id: workspace-ready
-    cmd: test -d "concepts/${CONVERGE_PARTITION_KEY}"
+    cmd: test -d "concepts/${CONVERGE_PARTITION_KEY}" || test "$(ls -d concepts/*/ 2>/dev/null | wc -l)" -gt 0
     description: Partition output directory exists
   - id: design-md-fetched
-    cmd: test -s "concepts/${CONVERGE_PARTITION_KEY}/design-system.md"
+    cmd: test -f "concepts/${CONVERGE_PARTITION_KEY}/design-system.md"
     description: DESIGN.md fetched
 ---
 

examples/conceptual-design/.converge/playbooks/concept-living-playbook/tasks/02-design-spec/TASK.md

@@ -9,7 +9,7 @@ inputs:
   - docs/design/design-brief.md
 checks:
   - id: spec-exists
-    cmd: test -s "concepts/${CONVERGE_PARTITION_KEY}/design-spec.md"
+    cmd: test -f "concepts/${CONVERGE_PARTITION_KEY}/design-spec.md"
     description: Design spec exists and is non-empty
   - id: spec-substantial
     cmd: bash -c 'test "$(wc -l < "concepts/${CONVERGE_PARTITION_KEY}/design-spec.md")" -ge 40'
@@ -18,55 +18,53 @@ checks:
 
 # Write the Creative Design Specification
 
-You are a design director creating a masterpiece UI/UX concept. Read the inputs deeply and write a creative brief that a developer will implement.
+## CONSTRAINTS — Read These First
 
-## Inputs
-
-- `docs/design/design-brief.md` — the product spec: vibe (handbook), data model (tasks nesting up to 5 levels, modes: leaf/spawner/gateway), and example data
-- `concepts/$CONVERGE_PARTITION_KEY/design-system.md` — the brand's design system. Study it deeply — understand its personality, its rhythm, its values.
+These rules override everything else. The brand's design system informs colors and typography, but the FORMAT is a book — not a dashboard, not a web app.
 
-## You must deeply understand two things:
+1. **Book layout.** Single column, `max-width: 720px`, centered. Content reads top-to-bottom. No multi-column grids. No sidebar navigation.
+2. **Paper surface.** Background: warm white (`#FAFAF8`). Cards: white with soft `box-shadow` (`0 1px 3px rgba(0,0,0,0.06)`). No colored card backgrounds. No hard borders.
+3. **Typography does the hierarchy.** Font size and weight communicate structure — not icons, not colored containers. Specify exact px sizes and weights for every heading level.
+4. **Badges for metadata.** Status, task mode, duration — small pill badges with subtle tint. Never bold colored blocks.
+5. **40% whitespace.** The page must breathe. Generous margins and gaps.
+6. **Shadows max `rgba(0,0,0,0.08)`.** Gentle depth, never dramatic.
+7. **Muted status colors.** Sage green for pass, warm amber for running, dusty rose for failed. Never saturated.
+8. **No dark mode.** Ever. The background is warm white. The text is near-black.
+9. **No Inter font.** Use the brand's font or a clean alternative like Georgia or system-ui.
+10. **No sticky navbars.** No fixed headers. The page scrolls like a book.
 
-### 1. The Design System
+## Your Role
 
-Don't just extract colors and fonts. Understand the SOUL of this brand:
-- What's its personality? Playful? Serious? Minimal? Dense?
-- How does it handle hierarchy? What's its approach to space?
-- What's its motion philosophy? Its surface treatment?
-- How does it differentiate information levels?
-- What makes it recognizable and distinct?
+You are a design director. Read the inputs, deeply understand the brand's personality, then write a creative brief that a developer implements literally — but within the book format above.
 
-### 2. The Product Information Hierarchy
+## Inputs
 
-The product shows a playbook — a composable tree of tasks up to 5 levels deep. Each task has:
-- Title, description, body (long markdown instructions)
-- Mode: leaf (does work), spawner (creates children), gateway (structural container)
-- Inputs, outputs, checks (pass/fail)
-- Status, duration, dependencies
+- `docs/design/design-brief.md` — the product spec: the book vibe, data model, example data
+- `concepts/$CONVERGE_PARTITION_KEY/design-system.md` — the brand's design system
 
-The design must present this data clearly. The hierarchy must be immediately scannable. The reader should understand the structure at a glance AND be able to drill into any level for detail.
+## Understand the Brand
 
-## Your job
+Study the design system deeply — its personality, rhythm, color philosophy, typography choices. Then ADAPT those qualities to the book format:
 
-Create a design specification that is a **masterpiece of UI/UX** — something so well-crafted it could win design awards. Think deeply about:
+- Use the brand's colors for accents, links, and highlights — but keep the warm white background
+- Use the brand's font for headings and body — but at the sizes specified in the constraints
+- Use the brand's spacing rhythm — but within the single-column book layout
+- Use the brand's surface treatment — but only as subtle card shadow variations
 
-- How this brand would naturally present structured, nested information
-- What page composition creates the right reading experience
-- How to express 5 levels of nesting beautifully (indentation? progressive disclosure? split views? breadcrumbs?)
-- How task types (leaf/spawner/gateway) are distinct yet cohesive
-- What typography scale makes hierarchy effortless to scan
-- What interactions feel native to this brand (hover, click, expand, slide, morph)
-- What unique visual touches make this feel premium and specific to this brand
-- How to present data (checks, outputs, status) without clutter
+## What to Include
 
-## Principles
+1. **Brand interpretation** — how you read this brand and how it shapes the spec
+2. **Page composition** — overall layout (single column, 720px, top to bottom)
+3. **Typography scale** — exact sizes/weights for every level (must match constraint #3)
+4. **Color mapping** — brand colors mapped to semantic roles (status, accent, text, background)
+5. **Spacing system** — the rhythm between elements
+6. **Nesting expression** — how 5 levels of depth look (indentation + type scale changes + card elevation)
+7. **Task type differentiation** — how leaf/spawner/gateway look different
+8. **Status & data presentation** — badges, checks, outputs, durations
+9. **Interaction design** — hover (shadow lift), expand/collapse (gentle height), body reveal
+10. **Signature touches** — 2-3 brand-specific details that make it feel premium
 
-- Generous whitespace — let the content breathe
-- Clean and readable — hierarchy through type and space, minimize visual noise
-- The brand drives everything — if the brand uses cards, use cards. If it's flat, be flat. Follow the brand's own patterns.
-- Be specific: exact colors (hex), sizes (px), spacing values, font weights
-- Be opinionated: make bold choices that serve the content
-- Write for a developer who will implement it literally
+Be specific. Give exact hex values, px sizes, font weights. Write for a developer who implements literally.
 
 ## Output
 

examples/conceptual-design/.converge/playbooks/concept-living-playbook/tasks/03-build-html/TASK.md

@@ -7,23 +7,32 @@ skills:
   - design-taste-frontend
 checks:
   - id: html-exists
-    cmd: test -s "concepts/${CONVERGE_PARTITION_KEY}/concept.html"
+    cmd: test -f "concepts/notion/concept.html"
     description: HTML file exists
   - id: has-doctype
-    cmd: head -5 "concepts/${CONVERGE_PARTITION_KEY}/concept.html" | grep -qi '<!DOCTYPE'
+    cmd: head -5 "concepts/notion/concept.html" | grep -qi '<!DOCTYPE'
     description: Valid HTML
   - id: has-style
-    cmd: grep -q '<style>' "concepts/${CONVERGE_PARTITION_KEY}/concept.html"
+    cmd: grep -q '<style>' "concepts/notion/concept.html"
     description: Self-contained CSS
   - id: has-script
-    cmd: grep -q '<script>' "concepts/${CONVERGE_PARTITION_KEY}/concept.html"
+    cmd: grep -q '<script>' "concepts/notion/concept.html"
     description: Has JavaScript
   - id: has-task-content
-    cmd: grep -qiE 'task|leaf|gateway|spawner' "concepts/${CONVERGE_PARTITION_KEY}/concept.html"
+    cmd: grep -qiE 'task|leaf|gateway|spawner' "concepts/notion/concept.html"
     description: Has task content
   - id: minimum-size
-    cmd: bash -c 'test "$(wc -l < "concepts/${CONVERGE_PARTITION_KEY}/concept.html")" -ge 200'
+    cmd: bash -c 'test "$(wc -l < "concepts/notion/concept.html")" -ge 200'
     description: Substantial HTML
+  - id: warm-white-bg
+    cmd: grep -qiE 'fafaf|FAF9F|f9faf' "concepts/notion/concept.html"
+    description: Uses warm white background (not pure white or dark)
+  - id: no-inter-font
+    cmd: bash -c '! grep -qi "font-family.*Inter" "concepts/notion/concept.html"'
+    description: Does not use banned Inter font
+  - id: no-dark-bg
+    cmd: bash -c '! grep -qE "#000000|#010102|#0f1011|#0a0a0a" "concepts/notion/concept.html"'
+    description: No dark mode backgrounds
 ---
 
 # Build the HTML Concept
@@ -57,3 +66,17 @@ Include realistic sample data: a playbook with tasks showing the hierarchy descr
 - `prefers-reduced-motion` support
 - Clean, semantic markup
 - Follow the design-taste-frontend skill rules
+
+## Mandatory CSS Rules
+
+These are hard constraints — violating any one means the output is wrong:
+
+- `body` background: warm white (`#FAFAF8`), never `#FFFFFF` or pure white
+- Main content container: `max-width: 720px; margin: 0 auto` (book-width reading column)
+- Cards/sections: `box-shadow` only, never `border` for depth. Shadow max: `rgba(0,0,0,0.08)`
+- `border-radius: 8px` to `12px` on cards
+- Body text `line-height: 1.6` minimum
+- No `font-family: Inter` — use the brand's font or system stack
+- Padding inside cards: minimum `24px`
+- Gap between cards: minimum `16px`
+- All transitions: `200ms ease` to `300ms ease`, no springs or bounces

examples/conceptual-design/.converge/playbooks/concept-living-playbook/tasks/04-enhance/TASK.md

@@ -49,8 +49,21 @@ The mockup must be **at least as good looking** as the concept. Don't degrade th
 
 Read the design spec for the creative direction. Maintain the same brand feel.
 
+## Preserve the Book Feel
+
+Interactivity must NOT break the book aesthetic:
+
+- **Expand/collapse** feels like unfolding a page — gentle height + opacity animation, not a panel sliding in
+- **Filter bar** is subtle inline text links or minimal underlined tabs, not large colored pill buttons
+- **Search** is a quiet input field that blends with the page — no search icon prominence, no thick borders
+- **Hover** lifts a card by a tiny shadow increase, nothing dramatic
+- **Status toggle** changes the badge tint color, not the whole card background
+- **Keep the warm white background, soft shadows, and 720px content width** from the concept — do not widen or restructure
+
 ## Technical
 
 - Single self-contained HTML file (embedded CSS + JS)
 - `prefers-reduced-motion` support
 - No external deps except font CDN
+- All transitions: 200-300ms ease, never bouncy springs
+- Maintain all mandatory CSS rules from the concept (warm white bg, box-shadow depth, 720px max-width)