pm-workflow-studio 0.1.0

package/.codex/assets/design-themes/open-design/openai/DESIGN.md

@@ -0,0 +1,140 @@
+# Design System Inspired by OpenAI
+
+> Category: AI & LLM
+> Calm, near-monochrome system anchored in deep teal-black with generous white space and editorial typography.
+
+## 1. Visual Theme & Atmosphere
+
+OpenAI's product surface reads like a research lab dressed for the public — clinical, restrained, deliberately quiet. The page background is a true white (`#ffffff`) layered against a near-black ink (`#0d0d0d`) with a subtle teal undertone, so even the text feels slightly cooled rather than aggressively dark. The result is a chromatic neutrality that puts model output, code, and prose front and center, not the chrome around them.
+
+The signature move is the use of **Söhne** (or its system stand-in `inter`) at restrained weights — 400 for body, 500 for nav and labels, 600 for emphasis — paired with **Signifier**, a contemporary serif used for editorial display. Where most AI brands lean futuristic, OpenAI's serif headlines give the product a quietly literary tone, as if every announcement is an essay.
+
+The shape system is uniformly soft: 8px–12px radii, 9999px pills for tags and chips, no harsh corners anywhere. Section transitions are denoted by whitespace rather than dividers; when borders appear they are `#e5e5e5` hairlines that read as the absence of color rather than its presence.
+
+**Key Characteristics:**
+- True white canvas (`#ffffff`) with deep teal-black ink (`#0d0d0d`)
+- Söhne / Inter at modest weights (400, 500, 600) — restraint over assertion
+- Signifier serif for editorial display headlines
+- Soft 8–12px radii everywhere; 9999px pills for chips
+- Hairline borders (`#e5e5e5`) used sparingly; whitespace as primary divider
+- Single-color illustrations in deep teal — no gradients in marks
+- Generous line-height (1.55–1.65) and tracking near zero
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure White** (`#ffffff`): Primary background, card surface, button background.
+- **Ink Black** (`#0d0d0d`): Primary text, brand mark, primary CTA.
+- **Soft Black** (`#1a1a1a`): Secondary heading, alternative ink for non-critical text.
+
+### Surface & Background
+- **Mist** (`#fafafa`): Section break background, footer surface.
+- **Pearl** (`#f5f5f5`): Card surface, elevated panel.
+- **Cloud** (`#ececec`): Disabled background, divider tint.
+
+### Brand Accent
+- **OpenAI Teal** (`#10a37f`): Brand primary, link, highlight badge — the lone color in an otherwise neutral system.
+- **Teal Deep** (`#0a7a5e`): Hover and pressed state for the brand color.
+- **Teal Soft** (`#e8f5f0`): Surface tint for success badges, highlight callouts.
+
+### Neutrals & Text
+- **Graphite** (`#3c3c3c`): Body text, default reading color.
+- **Slate** (`#6e6e6e`): Secondary text, captions, metadata.
+- **Ash** (`#9b9b9b`): Tertiary text, placeholder, disabled label.
+- **Stone** (`#c4c4c4`): Decorative dividers, faint icons.
+
+### Semantic & Border
+- **Border Hairline** (`#e5e5e5`): Standard hairline separator.
+- **Border Soft** (`#ededed`): Card outline on white surface.
+- **Error** (`#ef4146`): Validation, destructive action.
+- **Warning** (`#f5a623`): Soft amber for advisory states.
+- **Info** (`#2563eb`): Informational link tone (used sparingly; teal still wins).
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / Editorial**: `Signifier`, with fallback: `'Source Serif Pro', Georgia, serif`
+- **Body / UI**: `Söhne`, with fallback: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Code / Mono**: `Söhne Mono`, with fallback: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Editorial hero, announcement titles |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Page heading |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Section heading |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Sub-section |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Lede paragraphs |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Standard reading text |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Card body, dense UI |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadata, badges |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Eyebrow, uppercase nav links |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Code blocks, terminal output |
+
+### Principles
+- **Restraint as identity**: weights cap at 600; 700+ feels off-brand. Hierarchy comes from size and color, not weight.
+- **Serif for soul, sans for system**: Signifier appears only in editorial display moments. The product UI is sans-only.
+- **Negative tracking on display**: -0.02em on display sizes; tracking returns to zero by 16px.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px (full pill) on chips, 12px on rectangular CTAs
+- Hover: `#1a1a1a` background
+- Use: Primary CTA, "Try ChatGPT", "Sign in"
+
+**Secondary**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: background `#fafafa`, border `#d4d4d4`
+
+**Brand Accent**
+- Background: `#10a37f`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- Use: Highlighted upgrade CTA, success path
+
+### Cards
+- Background: `#ffffff`
+- Border: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px–32px
+- Shadow: none by default; on hover `0 4px 16px rgba(13,13,13,0.06)`
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Focus: border `#10a37f`, ring `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Pills & Tags
+- Background: `#f5f5f5`
+- Text: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 500
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Container**: max-width 1200px, 24px gutter on mobile, 48px on desktop.
+- **Section rhythm**: 96–128px vertical between major sections; 64px on mobile.
+- **Grid**: 12-column desktop, 4-column mobile, 24px gap.
+
+## 6. Motion
+
+- **Duration**: 150–220ms for hover; 280–360ms for layout transitions.
+- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (smooth out) for entrances.
+- **Restraint**: no parallax, no scroll-jacking. Subtle fade and translate only.

package/.codex/assets/design-themes/open-design/openai/examples.html

@@ -0,0 +1,14 @@
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>OpenAI Theme Examples</title><style>
+:root{--bg:#fff;--ink:#0d0d0d;--body:#3c3c3c;--muted:#6e6e6e;--line:#e5e5e5;--mist:#fafafa;--teal:#10a37f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 Inter,system-ui,sans-serif}.preview{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;gap:16px;padding:12px 18px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.preview span{display:block;color:var(--muted);font-size:12px}.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.tab{border:1px solid var(--line);background:white;border-radius:999px;min-height:34px;padding:0 12px;cursor:pointer}.tab.active{background:var(--ink);color:white}.page{display:none;min-height:calc(100vh - 59px)}.page.active{display:block}h1,h2,p{margin:0}h1{font:400 58px/1.08 Georgia,"Source Serif Pro",serif;letter-spacing:-.03em}h2{font-size:22px}p{color:var(--body)}.btn{border:0;background:var(--ink);color:white;border-radius:999px;min-height:38px;padding:0 18px}.header{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 min(48px,5vw);border-bottom:1px solid var(--line)}.container{width:min(1120px,calc(100vw - 40px));margin:0 auto;padding:56px 0 82px;display:grid;gap:30px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}.panel,.card{background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:22px;min-height:150px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.chat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:12px}.bubble{border:1px solid var(--line);border-radius:12px;padding:14px}.admin{display:grid;grid-template-columns:230px 1fr;background:var(--mist)}.side{background:#fff;border-right:1px solid var(--line);padding:18px}.side a{display:block;color:var(--muted);padding:10px 0}.work{padding:24px;display:grid;gap:18px}.metric{font-size:40px}.phone-wrap{display:grid;place-items:center;min-height:calc(100vh - 59px);background:var(--mist)}.phone{width:330px;min-height:640px;background:white;border:1px solid var(--line);border-radius:34px;padding:18px;display:grid;gap:14px;align-content:start}pre{background:#0d0d0d;color:#e8f5f0;border-radius:12px;padding:18px;overflow:auto}@media(max-width:900px){.preview{flex-direction:column}.tabs{justify-content:flex-start}.hero,.grid,.admin{grid-template-columns:1fr}.side{display:none}h1{font-size:38px}}
+</style></head><body><aside class="preview"><div><strong>OpenAI 主题预览</strong><span>切换查看不同产品类型的完整页面</span></div><div class="tabs"><button class="tab active" data-target="brand">品牌主页</button><button class="tab" data-target="saas">SaaS 产品页</button><button class="tab" data-target="admin">后台管理系统</button><button class="tab" data-target="dashboard">数据分析看板</button><button class="tab" data-target="developer">开发者工具/文档页</button><button class="tab" data-target="mobile">移动/消费产品</button><button class="tab" data-target="editorial">内容/编辑型页面</button></div></aside>
+<section class="page active" data-sample="brand"><header class="header"><strong>Research Lab</strong><button class="btn">Try now</button></header><main class="container"><section class="hero"><div><h1>Calm intelligence for public product surfaces.</h1><p style="margin-top:18px">克制白底、编辑型标题、少量绿色信号。</p></div><div class="chat"><div class="bubble">How should we prioritize the MVP?</div><div class="bubble" style="background:var(--mist)">Start with the narrowest workflow that proves value.</div></div></section></main></section>
+<section class="page" data-sample="saas"><main class="container"><h1>AI 产品页</h1><section class="grid"><article class="card"><h2>模型能力</h2><p>清楚说明输入、输出和边界。</p></article><article class="card"><h2>企业控制</h2><p>权限、日志和数据策略。</p></article><article class="card"><h2>安全评估</h2><p>把可信证据前置。</p></article></section></main></section>
+<section class="page" data-sample="admin"><div class="admin"><aside class="side"><strong>Console</strong><a>Projects</a><a>Usage</a><a>Safety</a><a>Settings</a></aside><main class="work"><h1>模型管理控制台</h1><section class="grid"><article class="card"><h2>Requests</h2><div class="metric">8.2M</div></article><article class="card"><h2>Latency</h2><div class="metric">420ms</div></article><article class="card"><h2>Flags</h2><div class="metric">16</div></article></section></main></div></section>
+<section class="page" data-sample="dashboard"><main class="container"><h1>使用情况看板</h1><section class="grid"><article class="card"><h2>Tokens</h2><div class="metric">1.8B</div></article><article class="card"><h2>Cost</h2><div class="metric">¥42k</div></article><article class="card"><h2>Quality</h2><div class="metric">96%</div></article></section></main></section>
+<section class="page" data-sample="developer"><header class="header"><strong>API Docs</strong><button class="btn">Create key</button></header><main class="container"><section class="hero"><div><h1>Developer docs with essay-like clarity.</h1></div><pre>const response = await client.responses.create({
+  model: "gpt-5.5",
+  input: "Summarize this workflow"
+});</pre></section></main></section>
+<section class="page" data-sample="mobile"><main class="phone-wrap"><div class="phone"><h2>AI 助手</h2><p>移动端保持安静、可读。</p><div class="bubble">今天要处理什么？</div><button class="btn">开始</button></div></main></section>
+<section class="page" data-sample="editorial"><main class="container"><h1>Research notes and product essays</h1><section class="grid"><article class="card"><h2>安全说明</h2><p>长文阅读。</p></article><article class="card"><h2>产品更新</h2><p>克制发布。</p></article><article class="card"><h2>案例研究</h2><p>证据驱动。</p></article></section></main></section>
+<script>document.querySelectorAll('.tab').forEach(t=>t.addEventListener('click',()=>{document.querySelectorAll('.tab').forEach(x=>x.classList.toggle('active',x===t));document.querySelectorAll('.page').forEach(p=>p.classList.toggle('active',p.dataset.sample===t.dataset.target));}));</script></body></html>

package/.codex/assets/design-themes/open-design/opencode-ai/DESIGN.md

@@ -0,0 +1,284 @@
+# Design System Inspired by OpenCode
+
+> Category: AI & LLM
+> AI coding platform. Developer-centric dark theme.
+
+## 1. Visual Theme & Atmosphere
+
+OpenCode's website embodies a terminal-native, monospace-first aesthetic that reflects its identity as an open source AI coding agent. The entire visual system is built on a stark dark-on-light contrast using a near-black background (`#201d1d`) with warm off-white text (`#fdfcfc`). This isn't a generic dark theme -- it's a warm, slightly reddish-brown dark that feels like a sophisticated terminal emulator rather than a cold IDE. The warm undertone in both the darks and lights (notice the subtle red channel in `#201d1d` -- rgb(32, 29, 29)) creates a cohesive, lived-in quality.
+
+Berkeley Mono is the sole typeface, establishing an unapologetic monospace identity. Every element -- headings, body text, buttons, navigation -- shares this single font family, creating a unified "everything is code" philosophy. The heading at 38px bold with 1.50 line-height is generous and readable, while body text at 16px with weight 500 provides a slightly heavier-than-normal reading weight that enhances legibility on screen. The monospace grid naturally enforces alignment and rhythm across the layout.
+
+The color system is deliberately minimal. The primary palette consists of just three functional tones: the warm near-black (`#201d1d`), a medium warm gray (`#9a9898`), and a bright off-white (`#fdfcfc`). Semantic colors borrow from the Apple HIG palette -- blue accent (`#007aff`), red danger (`#ff3b30`), green success (`#30d158`), orange warning (`#ff9f0a`) -- giving the interface familiar, trustworthy signal colors without adding brand complexity. Borders use a subtle warm transparency (`rgba(15, 0, 0, 0.12)`) that ties into the warm undertone of the entire system.
+
+**Key Characteristics:**
+- Berkeley Mono as the sole typeface -- monospace everywhere, no sans-serif or serif voices
+- Warm near-black primary (`#201d1d`) with reddish-brown undertone, not pure black
+- Off-white text (`#fdfcfc`) with warm tint, not pure white
+- Minimal 4px border radius throughout -- sharp, utilitarian corners
+- 8px base spacing system scaling up to 96px
+- Apple HIG-inspired semantic colors (blue, red, green, orange)
+- Transparent warm borders using `rgba(15, 0, 0, 0.12)`
+- Email input with generous 20px padding and 6px radius -- the most generous component radius
+- Single button variant: dark background, light text, tight vertical padding (4px 20px)
+- Underlined links as default link style, reinforcing the text-centric identity
+
+## 2. Color Palette & Roles
+
+### Primary
+- **OpenCode Dark** (`#201d1d`): Primary background, button fills, link text. A warm near-black with subtle reddish-brown warmth -- rgb(32, 29, 29).
+- **OpenCode Light** (`#fdfcfc`): Primary text on dark surfaces, button text. A barely-warm off-white that avoids clinical pure white.
+- **Mid Gray** (`#9a9898`): Secondary text, muted links. A neutral warm gray that bridges dark and light.
+
+### Secondary
+- **Dark Surface** (`#302c2c`): Slightly lighter than primary dark, used for elevated surfaces and subtle differentiation.
+- **Border Gray** (`#646262`): Stronger borders, outline rings on interactive elements.
+- **Light Surface** (`#f1eeee`): Light mode surface, subtle background variation.
+
+### Accent
+- **Accent Blue** (`#007aff`): Primary accent, links, interactive highlights. Apple system blue.
+- **Accent Blue Hover** (`#0056b3`): Darker blue for hover states.
+- **Accent Blue Active** (`#004085`): Deepest blue for pressed/active states.
+
+### Semantic
+- **Danger Red** (`#ff3b30`): Error states, destructive actions. Apple system red.
+- **Danger Hover** (`#d70015`): Darker red for hover on danger elements.
+- **Danger Active** (`#a50011`): Deepest red for pressed danger states.
+- **Success Green** (`#30d158`): Success states, positive feedback. Apple system green.
+- **Warning Orange** (`#ff9f0a`): Warning states, caution signals. Apple system orange.
+- **Warning Hover** (`#cc7f08`): Darker orange for hover on warning elements.
+- **Warning Active** (`#995f06`): Deepest orange for pressed warning states.
+
+### Text Scale
+- **Text Muted** (`#6e6e73`): Muted labels, disabled text, placeholder content.
+- **Text Secondary** (`#424245`): Secondary text on light backgrounds, captions.
+
+### Border
+- **Border Warm** (`rgba(15, 0, 0, 0.12)`): Primary border color, warm transparent black with red tint.
+- **Border Tab** (`#9a9898`): Tab underline border, 2px solid bottom.
+- **Border Outline** (`#646262`): 1px solid outline border for containers.
+
+## 3. Typography Rules
+
+### Font Family
+- **Universal**: `Berkeley Mono`, with fallbacks: `IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Notes |
+|------|------|--------|-------------|-------|
+| Heading 1 | 38px (2.38rem) | 700 | 1.50 | Hero headlines, page titles |
+| Heading 2 | 16px (1.00rem) | 700 | 1.50 | Section titles, bold emphasis |
+| Body | 16px (1.00rem) | 400 | 1.50 | Standard body text, paragraphs |
+| Body Medium | 16px (1.00rem) | 500 | 1.50 | Links, button text, nav items |
+| Body Tight | 16px (1.00rem) | 500 | 1.00 (tight) | Compact labels, tab items |
+| Caption | 14px (0.88rem) | 400 | 2.00 (relaxed) | Footnotes, metadata, small labels |
+
+### Principles
+- **One font, one voice**: Berkeley Mono is used exclusively. There is no typographic variation between display, body, and code -- everything speaks in the same monospace register. Hierarchy is achieved through size and weight alone.
+- **Weight as hierarchy**: 700 for headings, 500 for interactive/medium emphasis, 400 for body text. Three weight levels create the entire hierarchy.
+- **Generous line-height**: 1.50 as the standard line-height gives text room to breathe within the monospace grid. The relaxed 2.00 line-height on captions creates clear visual separation.
+- **Tight for interaction**: Interactive elements (tabs, compact labels) use 1.00 line-height for dense, clickable targets.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Dark Fill)**
+- Background: `#201d1d` (OpenCode Dark)
+- Text: `#fdfcfc` (OpenCode Light)
+- Padding: 4px 20px
+- Radius: 4px
+- Font: 16px Berkeley Mono, weight 500, line-height 2.00 (relaxed)
+- Outline: `rgb(253, 252, 252) none 0px`
+- Use: Primary CTAs, main actions
+
+### Inputs
+
+**Email Input**
+- Background: `#f8f7f7` (light neutral)
+- Text: `#201d1d`
+- Border: `1px solid rgba(15, 0, 0, 0.12)`
+- Padding: 20px
+- Radius: 6px
+- Font: Berkeley Mono, standard size
+- Use: Form fields, email capture
+
+### Links
+
+**Default Link**
+- Color: `#201d1d`
+- Decoration: underline 1px
+- Font-weight: 500
+- Use: Primary text links in body content
+
+**Light Link**
+- Color: `#fdfcfc`
+- Decoration: none
+- Use: Links on dark backgrounds, navigation
+
+**Muted Link**
+- Color: `#9a9898`
+- Decoration: none
+- Use: Footer links, secondary navigation
+
+### Tabs
+
+**Tab Navigation**
+- Border-bottom: `2px solid #9a9898` (active tab indicator)
+- Font: 16px, weight 500, line-height 1.00
+- Use: Section switching, content filtering
+
+### Navigation
+- Clean horizontal layout with Berkeley Mono throughout
+- Brand logotype left-aligned in monospace
+- Links at 16px weight 500 with underline decoration
+- Dark background matching page background
+- No backdrop blur or transparency -- solid surfaces only
+
+### Image Treatment
+- Terminal/code screenshots as hero imagery
+- Dark terminal aesthetic with monospace type
+- Minimal borders, content speaks for itself
+
+### Distinctive Components
+
+**Terminal Hero**
+- Full-width dark terminal window as hero element
+- ASCII art / stylized logo within terminal frame
+- Monospace command examples with syntax highlighting
+- Reinforces the CLI-first identity of the product
+
+**Feature List**
+- Bulleted feature items with Berkeley Mono text
+- Weight 500 for feature names, 400 for descriptions
+- Tight vertical spacing between items
+- No cards or borders -- pure text layout
+
+**Email Capture**
+- Light background input (`#f8f7f7`) contrasting dark page
+- Generous 20px padding for comfortable typing
+- 6px radius -- the roundest element in the system
+- Newsletter/waitlist pattern
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Fine scale: 1px, 2px, 4px (sub-8px for borders and micro-adjustments)
+- Standard scale: 8px, 12px, 16px, 20px, 24px
+- Extended scale: 32px, 40px, 48px, 64px, 80px, 96px
+- The system follows a clean 4/8px grid with consistent doubling
+
+### Grid & Container
+- Max content width: approximately 800-900px (narrow, reading-optimized)
+- Single-column layout as the primary pattern
+- Centered content with generous horizontal margins
+- Hero section: full-width dark terminal element
+- Feature sections: single-column text blocks
+- Footer: multi-column link grid
+
+### Whitespace Philosophy
+- **Monospace rhythm**: The fixed-width nature of Berkeley Mono creates a natural vertical grid. Line-heights of 1.50 and 2.00 maintain consistent rhythm.
+- **Narrow and focused**: Content is constrained to a narrow column, creating generous side margins that focus attention on the text.
+- **Sections through spacing**: No decorative dividers. Sections are separated by generous vertical spacing (48-96px) rather than borders or background changes.
+
+### Border Radius Scale
+- Micro (4px): Default for all elements -- buttons, containers, badges
+- Input (6px): Form inputs get slightly more roundness
+- The entire system uses just two radius values, reinforcing the utilitarian aesthetic
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Default state for most elements |
+| Border Subtle (Level 1) | `1px solid rgba(15, 0, 0, 0.12)` | Section dividers, input borders, horizontal rules |
+| Border Tab (Level 2) | `2px solid #9a9898` bottom only | Active tab indicator |
+| Border Outline (Level 3) | `1px solid #646262` | Container outlines, elevated elements |
+
+**Shadow Philosophy**: OpenCode's depth system is intentionally flat. There are no box-shadows in the extracted tokens -- zero shadow values were detected. Depth is communicated exclusively through border treatments and background color shifts. This flatness is consistent with the terminal aesthetic: terminals don't have shadows, and neither does OpenCode. The three border levels (transparent warm, tab indicator, solid outline) create sufficient visual hierarchy without any elevation illusion.
+
+### Decorative Depth
+- Background color shifts between `#201d1d` and `#302c2c` create subtle surface differentiation
+- Transparent borders at 12% opacity provide barely-visible structure
+- The warm reddish tint in border colors (`rgba(15, 0, 0, 0.12)`) ties borders to the overall warm dark palette
+- No gradients, no blurs, no ambient effects -- pure flat terminal aesthetic
+
+## 7. Interaction & Motion
+
+### Hover States
+- Links: color shift from default to accent blue (`#007aff`) or underline style change
+- Buttons: subtle background lightening or border emphasis
+- Accent blue provides a three-stage hover sequence: `#007aff` → `#0056b3` → `#004085` (default → hover → active)
+- Danger red: `#ff3b30` → `#d70015` → `#a50011`
+- Warning orange: `#ff9f0a` → `#cc7f08` → `#995f06`
+
+### Focus States
+- Border-based focus: increased border opacity or solid border color
+- No shadow-based focus rings -- consistent with the flat, no-shadow aesthetic
+- Keyboard focus likely uses outline or border color shift to accent blue
+
+### Transitions
+- Minimal transitions expected -- terminal-inspired interfaces favor instant state changes
+- Color transitions: 100-150ms for subtle state feedback
+- No scale, rotate, or complex transform animations
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, reduced padding, heading scales down |
+| Tablet | 640-1024px | Content width expands, slight padding increase |
+| Desktop | >1024px | Full content width (~800-900px centered), maximum whitespace |
+
+### Touch Targets
+- Buttons with 4px 20px padding provide adequate horizontal touch area
+- Input fields with 20px padding ensure comfortable mobile typing
+- Tab items at 16px with tight line-height may need mobile adaptation
+
+### Collapsing Strategy
+- Hero heading: 38px → 28px → 24px on smaller screens
+- Navigation: horizontal links → hamburger/drawer on mobile
+- Feature lists: maintain single-column, reduce horizontal padding
+- Terminal hero: maintain full-width, reduce internal padding
+- Footer columns: multi-column → stacked single column
+- Section spacing: 96px → 64px → 48px on mobile
+
+### Image Behavior
+- Terminal screenshots maintain aspect ratio and border treatment
+- Full-width elements scale proportionally
+- Monospace type maintains readability at all sizes due to fixed-width nature
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Page background: `#201d1d` (warm near-black)
+- Primary text: `#fdfcfc` (warm off-white)
+- Secondary text: `#9a9898` (warm gray)
+- Muted text: `#6e6e73`
+- Accent: `#007aff` (blue)
+- Danger: `#ff3b30` (red)
+- Success: `#30d158` (green)
+- Warning: `#ff9f0a` (orange)
+- Button bg: `#201d1d`, button text: `#fdfcfc`
+- Border: `rgba(15, 0, 0, 0.12)` (warm transparent)
+- Input bg: `#f8f7f7`, input border: `rgba(15, 0, 0, 0.12)`
+
+### Example Component Prompts
+- "Create a hero section on `#201d1d` warm dark background. Headline at 38px Berkeley Mono weight 700, line-height 1.50, color `#fdfcfc`. Subtitle at 16px weight 400, color `#9a9898`. Primary CTA button (`#201d1d` bg with `1px solid #646262` border, 4px radius, 4px 20px padding, `#fdfcfc` text at weight 500)."
+- "Design a feature list: single-column on `#201d1d` background. Feature name at 16px Berkeley Mono weight 700, color `#fdfcfc`. Description at 16px weight 400, color `#9a9898`. No cards, no borders -- pure text with 16px vertical gap between items."
+- "Build an email capture form: `#f8f7f7` background input, `1px solid rgba(15, 0, 0, 0.12)` border, 6px radius, 20px padding. Adjacent dark button (`#201d1d` bg, `#fdfcfc` text, 4px radius, 4px 20px padding). Berkeley Mono throughout."
+- "Create navigation: sticky `#201d1d` background. 16px Berkeley Mono weight 500 for links, `#fdfcfc` text. Brand name left-aligned in monospace. Links with underline decoration. No blur, no transparency -- solid dark surface."
+- "Design a footer: `#201d1d` background, multi-column link grid. Links at 16px Berkeley Mono weight 400, color `#9a9898`. Section headers at weight 700. Border-top `1px solid rgba(15, 0, 0, 0.12)` separator."
+
+### Iteration Guide
+1. Berkeley Mono is the only font -- never introduce a second typeface. Size and weight create all hierarchy.
+2. Keep surfaces flat: no shadows, no gradients, no blur effects. Use borders and background shifts only.
+3. The warm undertone matters: use `#201d1d` not `#000000`, use `#fdfcfc` not `#ffffff`. The reddish warmth is subtle but essential.
+4. Border radius is 4px everywhere except inputs (6px). Never use rounded pills or large radii.
+5. Semantic colors follow Apple HIG: `#007aff` blue, `#ff3b30` red, `#30d158` green, `#ff9f0a` orange. Each has hover and active darkened variants.
+6. Three-stage interaction: default → hover (darkened) → active (deeply darkened) for all semantic colors.
+7. Borders use `rgba(15, 0, 0, 0.12)` -- a warm transparent dark, not neutral gray. This ties borders to the warm palette.
+8. Spacing follows an 8px grid: 8, 16, 24, 32, 40, 48, 64, 80, 96px. Use 4px for fine adjustments only.

package/.codex/assets/design-themes/open-design/pacman/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Pacman
+
+> Category: Themed & Unique
+> Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.
+
+## 1. Visual Theme & Atmosphere
+
+Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.
+
+- **Visual style:** high-contrast, playful, dotted borders
+- **Color stance:** primary, secondary, success, warning, danger, info, surface/subtle layers
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#2A3FE5` — Token from style foundations.
+- **Secondary:** `#F4B9B0` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#000000` — Token from style foundations.
+- **Text:** `#111827` — Token from style foundations.
+- **Neutral:** `#000000` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#2A3FE5) for CTA emphasis.
+- Use Surface (#000000) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** desktop-first expressive scale
+- **Families:** primary=Press Start 2P, display=Press Start 2P, mono=Space Mono
+- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- Headings should carry the style personality; body text should optimize scanability and contrast.
+
+## 4. Spacing & Grid
+
+- **Spacing scale:** 8pt baseline grid
+- Keep vertical rhythm consistent across sections and components.
+- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
+
+## 5. Layout & Composition
+
+- Prefer clear content blocks with consistent internal padding.
+- Keep hierarchy obvious: headline → support text → primary action.
+- Use whitespace to separate concerns before adding borders or shadows.
+
+## 6. Components
+
+- Buttons: primary action uses `#2A3FE5`; secondary actions stay neutral.
+- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
+- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
+
+## 7. Motion & Interaction
+
+- Use subtle transitions that emphasize Primary (#2A3FE5) as the interaction signal.
+- Default to short, purposeful transitions (150–250ms) with stable easing.
+- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
+
+## 8. Voice & Brand
+
+- Tone should reflect the visual style: concise, confident, and product-specific.
+- Keep microcopy action-oriented and avoid generic filler language.
+- Preserve the style identity in headlines while keeping UI labels literal and clear.
+
+## 9. Anti-patterns
+
+- Do not introduce off-palette colors when an existing token can solve the problem.
+- Do not flatten hierarchy by using the same type size/weight for all text.
+- Do not add decorative effects that reduce readability or accessibility.
+- Do not mix unrelated visual metaphors in the same interface.

package/.codex/assets/design-themes/open-design/paper/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Paper
+
+> Category: Retro & Nostalgic
+> Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.
+
+## 1. Visual Theme & Atmosphere
+
+Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.
+
+- **Visual style:** minimal, clean
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#111111` — Token from style foundations.
+- **Secondary:** `#8B5CF6` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#FFFFFF` — Token from style foundations.
+- **Text:** `#111827` — Token from style foundations.
+- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#111111) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** 14/16/18/24/32/40
+- **Families:** primary=Roboto, display=Montserrat, mono=PT Mono
+- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- Headings should carry the style personality; body text should optimize scanability and contrast.
+
+## 4. Spacing & Grid
+
+- **Spacing scale:** 4/8/12/16/24/32
+- Keep vertical rhythm consistent across sections and components.
+- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
+
+## 5. Layout & Composition
+
+- Prefer clear content blocks with consistent internal padding.
+- Keep hierarchy obvious: headline → support text → primary action.
+- Use whitespace to separate concerns before adding borders or shadows.
+
+## 6. Components
+
+- Buttons: primary action uses `#111111`; secondary actions stay neutral.
+- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
+- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
+
+## 7. Motion & Interaction
+
+- Use subtle transitions that emphasize Primary (#111111) as the interaction signal.
+- Default to short, purposeful transitions (150–250ms) with stable easing.
+- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
+
+## 8. Voice & Brand
+
+- Tone should reflect the visual style: concise, confident, and product-specific.
+- Keep microcopy action-oriented and avoid generic filler language.
+- Preserve the style identity in headlines while keeping UI labels literal and clear.
+
+## 9. Anti-patterns
+
+- Do not introduce off-palette colors when an existing token can solve the problem.
+- Do not flatten hierarchy by using the same type size/weight for all text.
+- Do not add decorative effects that reduce readability or accessibility.
+- Do not mix unrelated visual metaphors in the same interface.

package/.codex/assets/design-themes/open-design/perspective/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Perspective
+
+> Category: Layout & Structure
+> Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.
+
+## 1. Visual Theme & Atmosphere
+
+Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.
+
+- **Visual style:** modern, clean, high-contrast
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#00BD7D` — Token from style foundations.
+- **Secondary:** `#00BD7D` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#FFFFFF` — Token from style foundations.
+- **Text:** `#111827` — Token from style foundations.
+- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#00BD7D) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** 12/14/16/20/24/32
+- **Families:** primary=Poppins, display=Oswald, mono=JetBrains Mono
+- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- Headings should carry the style personality; body text should optimize scanability and contrast.
+
+## 4. Spacing & Grid
+
+- **Spacing scale:** 4/8/12/16/24/32
+- Keep vertical rhythm consistent across sections and components.
+- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
+
+## 5. Layout & Composition
+
+- Prefer clear content blocks with consistent internal padding.
+- Keep hierarchy obvious: headline → support text → primary action.
+- Use whitespace to separate concerns before adding borders or shadows.
+
+## 6. Components
+
+- Buttons: primary action uses `#00BD7D`; secondary actions stay neutral.
+- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
+- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
+
+## 7. Motion & Interaction
+
+- Use subtle transitions that emphasize Primary (#00BD7D) as the interaction signal.
+- Default to short, purposeful transitions (150–250ms) with stable easing.
+- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
+
+## 8. Voice & Brand
+
+- Tone should reflect the visual style: concise, confident, and product-specific.
+- Keep microcopy action-oriented and avoid generic filler language.
+- Preserve the style identity in headlines while keeping UI labels literal and clear.
+
+## 9. Anti-patterns
+
+- Do not introduce off-palette colors when an existing token can solve the problem.
+- Do not flatten hierarchy by using the same type size/weight for all text.
+- Do not add decorative effects that reduce readability or accessibility.
+- Do not mix unrelated visual metaphors in the same interface.