pm-workflow-studio 0.1.0

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

@@ -0,0 +1,71 @@
+# Design System Inspired by Dithered
+
+> Category: Retro & Nostalgic
+> Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
+
+## 1. Visual Theme & Atmosphere
+
+Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
+
+- **Visual style:** modern, minimal
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#3B82F6` — 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 (#3B82F6) 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=Open Sans, display=Space Grotesk, mono=IBM Plex 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 `#3B82F6`; 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 (#3B82F6) 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/doodle/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Doodle
+
+> Category: Creative & Artistic
+> Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.
+
+## 1. Visual Theme & Atmosphere
+
+Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.
+
+- **Visual style:** playful
+- **Color stance:** primary, secondary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#49B6E5` — Token from style foundations.
+- **Secondary:** `#263D5B` — 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 (#49B6E5) 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=Delius Swash Caps, display=Delius Swash Caps, 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 `#49B6E5`; 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 (#49B6E5) 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/dramatic/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Dramatic
+
+> Category: Bold & Expressive
+> High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.
+
+## 1. Visual Theme & Atmosphere
+
+High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.
+
+- **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:** `#8B5CF6` — Token from style foundations.
+- **Secondary:** `#F43F5E` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#09090B` — Token from style foundations.
+- **Text:** `#FAFAFA` — Token from style foundations.
+- **Neutral:** `#09090B` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#8B5CF6) for CTA emphasis.
+- Use Surface (#09090B) for large backgrounds and cards.
+- Keep body copy on Text (#FAFAFA) for legibility.
+
+## 3. Typography
+
+- **Scale:** 12/14/16/20/24/32
+- **Families:** primary=Outfit, display=Outfit, mono=JetBrains Mono
+- **Weights:** 400, 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 `#8B5CF6`; 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 (#8B5CF6) 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/duolingo/DESIGN.md

@@ -0,0 +1,154 @@
+# Design System Inspired by Duolingo
+
+> Category: Productivity & SaaS
+> Language-learning platform. Bright owl green, chunky shadows, gamified joy.
+
+## 1. Visual Theme & Atmosphere
+
+Duolingo is gamification rendered as visual language. The interface is unapologetically bright, with **owl green** (`#58cc02`) as the brand primary and a chunky 4px bottom-shadow on every interactive element that reads like a 3D button waiting to be pressed. The page is white (`#ffffff`) with thick 2–3px borders in a deep gray (`#e5e5e5`) and the entire system reads like an iOS app from 2015 reborn with better hierarchy.
+
+Typography uses **Feather Bold** (a custom rounded sans) for chrome and **Mona Sans** (or Inter) for body. Display sizes are big and confident — Duolingo never whispers. Headings often carry the green underline-stroke or sit on a green pill, and the mascot Duo (a green owl) appears as an active illustration character, not a static logo.
+
+Shape language is friendly: 16–20px radii on cards, 12px on buttons, 9999px on chips and progress bars. Iconography is filled, rounded, and color-coded by skill — every lesson surface has an instantly identifiable color pairing.
+
+**Key Characteristics:**
+- Owl green (`#58cc02`) as the dominant brand color, used in 30%+ of the surface
+- Chunky 4px bottom-shadow on every button (the "tactile press" affordance)
+- 2–3px solid borders, never hairlines
+- Feather Bold (rounded display) + Mona Sans (body)
+- Big confident type — display sizes start at 48px and climb
+- Mascot-as-character: Duo the owl appears in onboarding, errors, streaks
+- Streak orange (`#ff9600`) and gem pink (`#ce82ff`) as secondary brand colors
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Owl Green** (`#58cc02`): Brand primary, primary CTA, correct answer.
+- **Owl Green Deep** (`#58a700`): Pressed/shadow color for green buttons.
+- **Owl Green Light** (`#89e219`): Hover, soft fills.
+- **Owl Green Pale** (`#dbf8c5`): Soft surface, success banner.
+
+### Secondary Accents
+- **Streak Orange** (`#ff9600`): Streak counter, fire icon, premium energy.
+- **Streak Orange Deep** (`#cc7a00`): Pressed orange.
+- **Gem Pink** (`#ce82ff`): Gem currency, Super Duolingo.
+- **Eel Blue** (`#1cb0f6`): Hint button, info link.
+- **Cardinal Red** (`#ff4b4b`): Wrong answer, life lost.
+- **Bee Yellow** (`#ffc800`): Pro badge, achievement.
+
+### Surface
+- **Snow** (`#ffffff`): Primary background.
+- **Eel** (`#f7f7f7`): Section break, secondary surface.
+- **Swan** (`#e5e5e5`): Disabled background, inset block.
+- **Wolf** (`#777777`): Dark divider, secondary text.
+
+### Ink & Text
+- **Eel Black** (`#3c3c3c`): Primary text.
+- **Wolf** (`#777777`): Secondary text, captions.
+- **Hare** (`#afafaf`): Disabled, placeholder.
+
+### Border
+- **Swan** (`#e5e5e5`): Standard 2px border.
+- **Hare** (`#afafaf`): Emphasized border on hover.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / UI / Headings**: `Feather Bold`, with fallback: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
+- **Body / Long-form**: `Mona Sans`, with fallback: `'Helvetica Neue', system-ui, sans-serif`
+- **Code (rare, schools/admin)**: `JetBrains Mono`, with fallback: `ui-monospace, Menlo, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | Onboarding hero |
+| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | Page title |
+| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | Section heading |
+| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | Card title, lesson row |
+| Body Large | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | Lesson prompt, instruction |
+| Body | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | Standard prose |
+| Caption | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | XP counter, metadata |
+| Button | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | Standard button label |
+| Streak | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | Streak number, on flame |
+
+### Principles
+- **800 is default**: Feather Bold runs at 800 across headings and buttons. 700 feels weak in this system.
+- **Big type**: heading sizes are 25–40% larger than typical product brands — confidence as identity.
+- **Rounded letterforms**: every glyph has soft terminals; sharp serifs would break the friendliness contract.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Owl Green)**
+- Background: `#58cc02`
+- Text: `#ffffff`
+- Padding: 14px 24px
+- Radius: 16px
+- Border-bottom: 4px solid `#58a700` (the chunky shadow)
+- Hover: background `#89e219`
+- Active: translate-y 4px, border-bottom 0 (button "presses")
+- Use: "Continue", "Check", main CTA.
+
+**Secondary (White with Bottom-Shadow)**
+- Background: `#ffffff`
+- Text: `#777777`
+- Border: 2px solid `#e5e5e5`
+- Border-bottom: 4px solid `#e5e5e5`
+- Radius: 16px
+- Padding: 14px 24px
+- Hover: text `#3c3c3c`, border `#afafaf`
+
+**Streak Orange**
+- Background: `#ff9600`
+- Text: `#ffffff`
+- Border-bottom: 4px solid `#cc7a00`
+- Use: streak goal, "Start streak"
+
+**Error (Cardinal Red)**
+- Background: `#ff4b4b`
+- Text: `#ffffff`
+- Border-bottom: 4px solid `#cc3b3b`
+- Use: wrong answer feedback.
+
+### Cards / Lesson Tiles
+- Background: `#ffffff`
+- Border: 2px solid `#e5e5e5`
+- Border-bottom: 4px solid `#e5e5e5`
+- Radius: 16px
+- Padding: 16px
+- Hover: lift 2px, shadow `0 4px 0 #d7d7d7`
+
+### Skill Tree Node (Lesson Bubble)
+- Size: 80×72px
+- Background: skill-color tinted (green for active, gray for locked)
+- Border-bottom: 6px solid darker variant
+- Radius: 50% (circular)
+- Active: pulses 1.0 → 1.05 every 1.6s
+
+### Inputs
+- Background: `#ffffff`
+- Border: 2px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 16px
+- Focus: border `#1cb0f6` (eel blue), ring `0 0 0 3px rgba(28, 176, 246, 0.2)`
+
+### Progress Bar
+- Track: `#e5e5e5`
+- Fill: `#58cc02` (or `#ff9600` for streak)
+- Radius: 9999px
+- Height: 16px
+- Animated fill: 320ms ease-out on increment.
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64.
+- **Container**: max 1080px, 24px gutter.
+- **Lesson tree column**: 320px wide; centered on desktop.
+
+## 6. Motion
+
+- **Duration**: 180ms for button press; 320ms for skill-node unlock; 1.6s for active-node pulse.
+- **Easing**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (back-out, slight overshoot) for unlocks.
+- **Mascot**: Duo blinks every 4–6s, jumps on streak milestones (480ms ease-out spring).

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

@@ -0,0 +1,71 @@
+# Design System Inspired by Editorial
+
+> Category: Creative & Artistic
+> Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
+
+## 1. Visual Theme & Atmosphere
+
+Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
+
+- **Visual style:** modern, editorial
+- **Color stance:** primary, secondary, neutral, success
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#111111` — Token from style foundations.
+- **Secondary:** `#F1F1F1` — 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=Gelasio, display=Gelasio, mono=Ubuntu 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 `#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/elegant/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Elegant
+
+> Category: Professional & Corporate
+> Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.
+
+## 1. Visual Theme & Atmosphere
+
+Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.
+
+- **Visual style:** minimal, clean
+- **Color stance:** primary, secondary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#3B82F6` — 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 (#3B82F6) 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=Google Sans, display=Google Sans, mono=Anonymous Pro
+- **Weights:** 100, 200, 300, 400, 500, 600
+- 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 `#3B82F6`; 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 (#3B82F6) 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.