pm-workflow-studio 0.1.0

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

@@ -0,0 +1,157 @@
+# Design System Inspired by Canva
+
+> Category: Design & Creative
+> Visual creation platform. Vivid purple-blue gradient, generous spacing, friendly geometry.
+
+## 1. Visual Theme & Atmosphere
+
+Canva is the friendly face of design tools — the brand makes a point of looking inviting where Adobe looks intimidating. The page is built on a clean white canvas (`#ffffff`) with a signature **purple-to-blue gradient** (`#7d2ae8` → `#00c4cc`) used in the brand mark, hero buttons, and Pro/Magic moments. Surfaces are generously padded, edges are gently rounded (8–16px), and shadows are soft and cool-toned.
+
+Typography uses **Canva Sans** (a custom geometric sans) for chrome and prose, with rounded letterforms that share DNA with brands like Airbnb and Asana. Weight contrast does the heavy lifting — 800 for hero display, 700 for section heads, 400 for body — while size hierarchy is more compressed than typical product brands so cards and templates read at a glance.
+
+The shape system is ultra-soft: 12px on most cards, 16–20px on larger panels, 9999px on chips. Buttons are rectangles with a subtle elevation shadow (`0 2px 8px rgba(0,0,0,0.06)`) that grows on hover. Iconography is filled and rounded, never line-only — Canva's icons speak the same shape language as its UI.
+
+**Key Characteristics:**
+- White canvas with a violet-to-cyan gradient (`#7d2ae8` → `#00c4cc`)
+- Canva Sans (rounded geometric) for everything; weight contrast over color
+- 12–20px radii everywhere; 9999px pills for chips and tags
+- Soft cool-toned shadows that grow on hover
+- Filled rounded iconography — never outlined
+- Vibrant secondary palette (coral, mint, tangerine) for category tags
+- Pro/Magic moments lit by a static gradient — no animation
+
+## 2. Color Palette & Roles
+
+### Brand Gradient
+- **Canva Purple** (`#7d2ae8`): Brand primary; gradient origin.
+- **Canva Cyan** (`#00c4cc`): Brand secondary; gradient terminus.
+- **Canva Pink** (`#ff5757`): Tertiary brand accent (Magic Studio).
+
+### Surface
+- **Canvas** (`#ffffff`): Primary background.
+- **Surface Subtle** (`#f4f5f7`): Section break, sidebar.
+- **Surface Inset** (`#e8eaed`): Disabled, inset block.
+- **Surface Cool** (`#eef0fc`): Hover tint on purple-themed cards.
+
+### Ink & Text
+- **Ink Primary** (`#0e1318`): Primary text.
+- **Ink Secondary** (`#3c4043`): Body prose.
+- **Ink Muted** (`#5f6368`): Captions, descriptions.
+- **Ink Faint** (`#9aa0a6`): Placeholder, disabled label.
+
+### Semantic
+- **Success** (`#00b894`): Saved, exported.
+- **Warning** (`#ffb020`): Storage limit, advisory.
+- **Error** (`#ff5757`): Validation, destructive.
+- **Info** (`#0d99ff`): Tip, link.
+
+### Category Accents (Template Tags)
+- **Coral** (`#ff7059`): Social posts.
+- **Tangerine** (`#ff9633`): Marketing.
+- **Mint** (`#48c997`): Education.
+- **Sky** (`#3ea6ff`): Business.
+- **Lavender** (`#9b87f5`): Personal.
+
+### Border
+- **Border Default** (`#e1e3e6`): Standard hairline.
+- **Border Strong** (`#c7cdd3`): Emphasized border, hover state.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / UI / Body**: `Canva Sans`, with fallback: `'YS Text', system-ui, -apple-system, sans-serif`
+- **Editorial (rare)**: `Canva Sans Display`, with fallback: `'Canva Sans', sans-serif`
+- **Code (devtools only)**: `JetBrains Mono`, with fallback: `ui-monospace, Menlo, Consolas, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Hero | Canva Sans | 64px (4rem) | 800 | 1.05 | -0.02em | Marketing hero, "Design anything." |
+| H1 | Canva Sans | 36px (2.25rem) | 700 | 1.15 | -0.01em | Page heading |
+| H2 | Canva Sans | 24px (1.5rem) | 700 | 1.2 | -0.005em | Section heading |
+| H3 | Canva Sans | 18px (1.125rem) | 600 | 1.3 | normal | Sub-section, card title |
+| Body Large | Canva Sans | 16px (1rem) | 400 | 1.55 | normal | Lede, marketing body |
+| Body | Canva Sans | 14px (0.875rem) | 400 | 1.5 | normal | Standard UI prose |
+| Caption | Canva Sans | 12px (0.75rem) | 500 | 1.4 | 0.005em | Metadata, hint text |
+| Button | Canva Sans | 14px (0.875rem) | 600 | 1.2 | normal | Default button label |
+| Tag | Canva Sans | 11px (0.6875rem) | 600 | 1.2 | 0.04em | Uppercase category chip |
+
+### Principles
+- **Weight contrast over color contrast**: hierarchy steps via 800→700→600→400; the surface stays neutral.
+- **Tight line-height for cards**: card titles use 1.15–1.2 so a 3-line title still fits a 4:3 thumbnail.
+- **No display serif**: Canva is sans-only across all surfaces; serifs appear only as user-selectable template fonts inside the editor.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Gradient)**
+- Background: `linear-gradient(135deg, #7d2ae8, #00c4cc)`
+- Text: `#ffffff`
+- Padding: 12px 20px
+- Radius: 8px
+- Shadow: `0 2px 8px rgba(125, 42, 232, 0.2)`
+- Hover: shadow grows to `0 4px 14px rgba(125, 42, 232, 0.3)`
+- Use: hero CTAs, "Try Canva Pro"
+
+**Primary (Solid Purple)**
+- Background: `#7d2ae8`
+- Text: `#ffffff`
+- Padding: 12px 20px
+- Radius: 8px
+- Hover: `#6815d4`
+
+**Secondary**
+- Background: `#ffffff`
+- Text: `#0e1318`
+- Border: 1px solid `#e1e3e6`
+- Radius: 8px
+- Hover: background `#f4f5f7`, border `#c7cdd3`
+
+**Subtle / Tertiary**
+- Background: `rgba(125, 42, 232, 0.08)`
+- Text: `#7d2ae8`
+- Hover: background `rgba(125, 42, 232, 0.14)`
+
+### Cards / Template Tiles
+- Background: `#ffffff`
+- Border: 1px solid `#e1e3e6`
+- Radius: 12px
+- Shadow at rest: `0 1px 3px rgba(0,0,0,0.04)`
+- Shadow on hover: `0 8px 24px rgba(0,0,0,0.08)`, lift 2px
+- Aspect ratio: thumbnail respects template (1:1, 4:3, 9:16)
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#e1e3e6`
+- Radius: 8px
+- Padding: 10px 14px
+- Focus: border `#7d2ae8`, ring `0 0 0 3px rgba(125, 42, 232, 0.16)`
+
+### Chips / Tags
+- Background: category-tinted soft.
+- Text: matching strong category color.
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 11px / 600 / uppercase
+
+### Pro Badge
+- Background: `linear-gradient(135deg, #7d2ae8, #ff5757)`
+- Text: `#ffffff`
+- Padding: 2px 8px
+- Radius: 9999px
+- Font: 10px / 700 / uppercase
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96.
+- **Container**: max 1320px, 32px gutter.
+- **Sidebar (editor)**: 320px wide; collapses to 56px icons.
+- **Card grid gap**: 16px on mobile, 24px on desktop.
+
+## 6. Motion
+
+- **Duration**: 180ms for hover; 280ms for menu open; 420ms for editor sidebar collapse.
+- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)` (Material-style).
+- **Card lift**: translateY(-2px) + shadow grow on hover, single transition.

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

@@ -0,0 +1,201 @@
+# Design System Inspired by Cisco
+
+> Category: Backend & Data
+> Enterprise infrastructure brand. Dark trust surfaces, Cisco Blue signal, technical clarity.
+
+## 1. Visual Theme & Atmosphere
+
+Cisco's current public web presence is enterprise infrastructure rendered with cinematic restraint. The canvas is dark but not pure black: layered navy-charcoal surfaces create depth without resorting to glossy startup gradients. Bright Cisco Blue is used as a precise signal color rather than a wash across the page. The overall impression is "serious global platform" rather than "friendly SaaS app" — large high-confidence headlines, quiet chrome, and product imagery that emphasizes scale, networking, observability, and resilience.
+
+Typography is disciplined and corporate. Cisco's internal and presentation ecosystem points to `CiscoSansTT` as the preferred brand face, while the web experience remains compatible with modern grotesk fallbacks. Headings should feel concise and engineered. Body copy should read clearly and directly, not editorially. Geometrically, the system prefers soft pills for calls to action, rounded-but-not-playful cards, and glass-dark navigation shells floating over large atmospheric sections.
+
+What makes Cisco distinct is the combination of **deep infrastructure darkness** with a **single electric trust signal**. Use blue for the moment that matters: primary action, focus, active tab, chart highlight, or key data edge. Let the rest of the interface stay disciplined.
+
+**Key Characteristics:**
+- Dark navy-charcoal surfaces instead of flat black
+- Cisco Blue (`#049fd9`) as the primary signal color
+- Restrained neutral system built from grays and pale technical whites
+- Enterprise-scale headlines with compact, factual body copy
+- Pill CTAs and rounded control shells, but never toy-like UI
+- Product and platform imagery should suggest networks, telemetry, and systems at scale
+- Motion should feel controlled and infrastructural, not playful
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Cisco Blue** (`#049fd9`): High-signal accent, outline CTA, active state, key link.
+- **Status Blue** (`#64bbe3`): Focus halo, secondary emphasis, lightweight chart signal.
+- **Cisco Indigo** (`#005073`): Filled primary CTA, dense accent, deeper data emphasis.
+- **Dark Blue** (`#2b5592`): Secondary brand accent for graphics, charts, and layered blue compositions.
+
+### Neutral / Surface
+- **Dark Gray 1** (`#39393b`): Mid-dark container surface, panel base, dense modules.
+- **Dark Gray 2** (`#58585b`): Borders, separators, secondary shells.
+- **Medium Gray 2** (`#9e9ea2`): Muted labels and low-emphasis metadata.
+- **Pale Gray 1** (`#e8ebf1`): Light text support, cool technical background tint, separators on dark.
+- **Core White** (`#ffffff`): Primary inverse text, bright UI foreground, light surface content.
+
+### Support
+- **Sage Green** (`#abc233`): Positive outcome or infrastructure-health accent.
+- **Status Green** (`#6cc04a`): Success state.
+- **Status Yellow** (`#ffcc00`): Warning or caution state.
+- **Status Orange** (`#ff7300`): Alert or escalation state.
+- **Status Red** (`#cf2030`): Error or critical state.
+
+### Recommended Surface Roles
+- **Primary canvas**: a blue-black or charcoal blend built around `#0f1720` to `#1b2530` using the Cisco palette as anchor.
+- **Elevated card**: Dark Gray 1 (`#39393b`) or a slightly bluer variant.
+- **Border / outline**: Dark Gray 2 (`#58585b`) with subtle transparency when needed.
+- **Primary text on dark**: Core White (`#ffffff`) or Pale Gray 1 (`#e8ebf1`).
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `CiscoSansTT`, fallbacks: `Inter, Arial, Helvetica Neue, Helvetica, sans-serif`
+- **Mono / Technical**: `IBM Plex Mono`, `SF Mono`, or `ui-monospace` if a code-supporting mono face is needed for metrics and IDs
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Hero Display | CiscoSansTT | 72px | 500 | 1.05 | -1.6px | Large launch/positioning headline |
+| Section Display | CiscoSansTT | 56px | 500 | 1.08 | -1.1px | Major section statement |
+| Heading | CiscoSansTT | 32px | 500 | 1.20 | -0.4px | Feature title, card header |
+| Subheading | CiscoSansTT | 24px | 500 | 1.30 | -0.2px | Supporting header |
+| Body | CiscoSansTT | 16px | 400 | 1.55 | normal | Default body copy |
+| Body Small | CiscoSansTT | 14px | 400 | 1.50 | normal | Metadata, nav, helper text |
+| Label / Eyebrow | CiscoSansTT | 12px | 700 | 1.30 | 0.24px | Tags, overlines, section labels |
+| Button | CiscoSansTT | 16px | 500 | 1.20 | normal | CTA labels |
+
+### Principles
+- Keep display typography decisive and compressed, but not ultra-light or editorial.
+- Body copy should be practical and highly legible, with no clever type effects.
+- Use bold weight mainly for short labels, status tags, and compact emphasis.
+- Favor one-family coherence over showy font mixing.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Action Pill**
+- Background: Cisco Indigo (`#005073`)
+- Text: White (`#ffffff`)
+- Radius: full pill
+- Padding: generous horizontal padding, medium vertical height
+- Hover: Dark Blue (`#2b5592`)
+- Active: a darker indigo tone around `#00364d`
+- Focus ring: 2px outer halo in Status Blue (`#64bbe3`) with a 1px white inner keyline on dark surfaces
+- Use case: high-priority submit, deploy, or "learn more" action on dark Cisco surfaces
+
+**Signal Outline Pill**
+- Background: transparent
+- Text: Cisco Blue (`#049fd9`) on dark surfaces, Cisco Indigo (`#005073`) on light surfaces
+- Border: 1.5px Cisco Blue (`#049fd9`)
+- Radius: full pill
+- Hover: blue-tinted surface fill with the text color preserved
+- Focus ring: same visible halo pairing as the primary button
+- Use case: brand-forward secondary action that keeps Cisco Blue prominent without sacrificing contrast
+
+**Secondary Dark Pill**
+- Background: transparent or dark surface
+- Text: White or Pale Gray 1
+- Border: Dark Gray 2 (`#58585b`)
+- Radius: full pill
+- Purpose: low-noise secondary CTA
+
+### Cards & Containers
+- Background: layered dark surface based on `#39393b` or a cooler navy-charcoal adaptation
+- Border: 1px subtle border using `#58585b`
+- Radius: 16px to 20px
+- Shadow: minimal; depth should come mostly from surface contrast and spacing
+
+### Navigation
+- Dark glass-like masthead or shell over a dark hero
+- Text: White / Pale Gray 1
+- Active state: Cisco Blue underline, chip, or glow
+- Navigation should feel like product chrome, not marketing candy
+
+### Data / Product Modules
+- Charts and diagrams should use Cisco Blue as primary highlight and keep supporting colors minimal
+- Use green/yellow/red only for actual operational meaning
+- Dense technical blocks should still preserve breathing room and hierarchy
+
+### Brand-Specific Recipes
+
+**Network Telemetry Card**
+- Anatomy: eyebrow label, large metric, delta chip, 12-24h sparkline, quiet footer metadata
+- Density: compact but not cramped; 16px-24px padding with clear alignment to chart axes
+- States: normal, selected, degraded, critical, loading skeleton
+- Brand behavior: use Cisco Blue for the selected edge or sparkline, and semantic colors only for health state
+
+**Topology / Product Diagram Module**
+- Anatomy: title, system canvas, node chips, connection lines, side legend
+- Visual rule: dark field first, blue path highlight second, all other nodes muted until active
+- States: idle overview, hovered path, selected node, degraded route
+
+**Dense Control Panel**
+- Anatomy: left nav rail, filter bar, split metric region, log/event table, contextual right rail
+- Control sizing: compact 36px inputs are acceptable on desktop, but action buttons remain 44px minimum height
+- States: quiet default, blue active filter, clear warning/error escalation
+
+## 5. Layout Principles
+
+### Spacing & Grid
+- Base rhythm: 8px
+- Common scale: 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
+- Prefer wide desktop containers and large sectional spacing
+- 12-column desktop layout with generous gutters works well for the brand
+- Breakpoints: mobile up to 767px, tablet 768px-1199px, desktop 1200px and above
+
+### Composition
+- Alternate expansive hero/outcome sections with denser information bands
+- Use asymmetry where it serves product imagery or system diagrams
+- Large dark fields with one blue focal point are more on-brand than many small colorful fragments
+- On tablet, reduce wide split layouts to 2-column modules and keep telemetry cards in pairs
+- On mobile, collapse hero side-by-sides to a single column, stack data panels vertically, and convert dense control rows into progressive disclosure panels
+- Navigation should collapse from a full masthead to a compact menu button plus one primary CTA on tablet/mobile
+
+### Accessibility & Responsiveness
+- Minimum touch target: 44px by 44px for any tappable control
+- Keyboard focus must remain visible on every interactive element via the blue outer halo plus white inner keyline pairing
+- Do not rely on hover-only disclosure; show essential state and actions on focus and touch
+- Preserve readable line lengths on desktop and avoid more than 3 cards per row on tablet or 1 card per row on small phones
+
+## 6. Motion & Interaction
+
+- Motion should be controlled, smooth, and systems-like
+- Use fade, rise, subtle slide, and restrained glow
+- Interaction timing: roughly 160ms–260ms for control response, 320ms–500ms for larger section reveals
+- Avoid bouncy springs, elastic easing, or playful overshoot
+- Respect `prefers-reduced-motion`: remove parallax and staged reveals, keep only instant state swaps or short opacity transitions under 120ms
+
+## 7. Voice & Brand
+
+- Voice is confident, technical, and outcome-oriented
+- Headlines should sound like platform positioning or systems value, not consumer lifestyle copy
+- Use language that suggests trust, resilience, infrastructure, AI readiness, and operational scale
+- The brand should feel global, mission-critical, and composed under pressure
+
+## 8. Anti-patterns
+
+- Do not turn Cisco into a generic gradient startup site
+- Do not flood the page with many equally loud accent colors
+- Do not use pastel palettes or lifestyle-illustration aesthetics
+- Do not use overly rounded, bubbly controls
+- Do not rely on pure black alone; use layered charcoals and deep blue-blacks instead
+- Do not make body copy feel whimsical, editorial, or ironic
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary signal: Cisco Blue (`#049fd9`)
+- Hover / secondary signal: Status Blue (`#64bbe3`)
+- Deep accent: Cisco Indigo (`#005073`)
+- Mid-dark surface: Dark Gray 1 (`#39393b`)
+- Border: Dark Gray 2 (`#58585b`)
+- Inverse text: White (`#ffffff`) or Pale Gray 1 (`#e8ebf1`)
+
+### Example Component Prompts
+- "Create a Cisco-style dark enterprise landing page with layered navy-charcoal surfaces, a bright Cisco Blue primary CTA, and a 72px high-confidence hero headline."
+- "Design a technical dashboard card on a dark surface with a subtle gray border, white text, and Cisco Blue chart highlights."
+- "Build a dark glass navigation bar with restrained white labels and one Cisco Blue active indicator."