# Planning Guide

An integrated strategy management platform that enables organizations to create, align, execute, and track strategic initiatives from conception to delivery, replacing fragmented spreadsheets with a unified source of truth.

**Experience Qualities**:
1. **Authoritative** - Every view, metric, and decision point radiates confidence and clarity, positioning this as the definitive system of record for strategic execution.
2. **Structured yet Flexible** - Guided frameworks accelerate strategy creation while adapting to diverse methodologies (Hoshin Kanri, OKRs, Portfolio Management) without rigid constraints.
3. **Traceable** - Crystal-clear visibility from enterprise goals down to individual initiatives, with instant drill-down and relationship mapping that eliminates ambiguity.

**Complexity Level**: Complex Application (advanced functionality, likely with multiple views)
This is an enterprise-grade platform requiring multiple interconnected views (Strategy Cards creation, Workbench execution tracking, Portfolio management, KPI dashboards), role-based workflows, real-time data relationships, and sophisticated visualization of strategic hierarchies and dependencies.

## Essential Features

### Strategy Card Creation
- **Functionality**: Structured strategy formulation using proven frameworks (SWOT, Value Disciplines, Strategic Pillars)
- **Purpose**: Eliminate blank-page paralysis and ensure comprehensive strategic thinking
- **Trigger**: User clicks "Create Strategy Card" or "New Strategic Initiative"
- **Progression**: Select framework → Fill guided sections (Vision, Goals, Assumptions) → Add metrics → Review & Publish → Link to Workbench initiatives
- **Success criteria**: User can create a complete strategy card in under 10 minutes; all critical strategic elements are captured with clear rationale

### Initiative Execution Tracking
- **Functionality**: Translate strategic objectives into trackable initiatives with owners, timelines, and KPIs
- **Purpose**: Bridge the gap between strategy and execution with clear accountability
- **Trigger**: User creates initiative from Strategy Card or Workbench portfolio view
- **Progression**: Define initiative → Assign owner → Set timeline & budget → Link strategic goals → Define KPIs → Track status updates
- **Success criteria**: Every initiative clearly traces to strategic goals; real-time status is always current; owners receive clear accountability signals

### Portfolio Management & Governance
- **Functionality**: Group initiatives into portfolios (M&A, OpEx, ESG) with capacity planning and impact analysis
- **Purpose**: Enable enterprise-level prioritization and resource allocation decisions
- **Trigger**: User navigates to "Portfolios" and creates/manages portfolio groups
- **Progression**: Create portfolio → Add initiatives → Analyze capacity vs demand → Assess alignment score → Prioritize → Review governance dashboard
- **Success criteria**: Leadership can assess entire strategic portfolio at a glance; capacity conflicts are immediately visible; prioritization decisions are data-informed

### Real-Time KPI Dashboard
- **Functionality**: Multi-level scorecards from enterprise to initiative with drill-down capability
- **Purpose**: Provide unified visibility into strategic progress and financial outcomes
- **Trigger**: User accesses Dashboard or clicks metric in any view
- **Progression**: View enterprise scorecard → Select portfolio or initiative → Drill into specific KPI → View trend & targets → Navigate to related initiatives
- **Success criteria**: No ambiguity about performance; financial and operational metrics connected; accessible to all stakeholders

### Strategy-to-Execution Traceability
- **Functionality**: Visual relationship mapping showing how initiatives link to strategic goals and outcomes
- **Purpose**: Ensure every activity directly supports strategic intent; identify gaps
- **Trigger**: User clicks "View Connections" or "Trace to Strategy" on any initiative
- **Progression**: Select initiative or goal → View relationship map → Identify gaps or misalignments → Create new links or initiatives
- **Success criteria**: Complete line of sight from daily work to enterprise strategy; no orphaned initiatives

## Edge Case Handling

- **Orphaned Initiatives** - Display warnings when initiatives lack strategic linkage; suggest potential connections
- **Capacity Overload** - Flag portfolios exceeding resource capacity with visual indicators; recommend rebalancing
- **Stale Data** - Highlight KPIs and initiatives not updated within defined thresholds; send gentle reminders to owners
- **Conflicting Priorities** - Surface initiatives competing for same resources with conflict resolution workflow
- **Incomplete Strategy Cards** - Auto-save drafts; provide completion checklist; allow progressive elaboration
- **Access Control** - Role-based visibility ensuring executives see enterprise view while contributors focus on their initiatives

## Design Direction

The design should evoke **executive confidence, operational precision, and strategic clarity**. This is a tool for serious decisions—it must feel authoritative without being bureaucratic, data-rich without overwhelming, and sophisticated yet accessible. Visual language should suggest enterprise-grade reliability (think Bloomberg Terminal meets modern SaaS), with clear hierarchies, purposeful data density, and confident use of space to signal importance.

## Color Selection

**Deep Navy & Gold Executive Palette** - Conveys authority, strategic thinking, and high-stakes decision-making appropriate for C-suite and strategy offices.

- **Primary Color**: Deep Navy `oklch(0.28 0.05 250)` - Strategic authority and executive presence; used for primary navigation, key actions, and strategic elements
- **Secondary Colors**: 
  - Slate `oklch(0.42 0.02 250)` - Supporting structure for secondary actions and containers
  - Cool Gray `oklch(0.92 0.01 250)` - Subtle backgrounds and dividers maintaining visual hierarchy
- **Accent Color**: Rich Gold `oklch(0.72 0.14 85)` - Strategic focus and achievement; highlights critical metrics, success states, and high-priority initiatives
- **Foreground/Background Pairings**: 
  - Primary Navy (oklch(0.28 0.05 250)): White text (oklch(0.99 0 0)) - Ratio 11.2:1 ✓
  - Slate (oklch(0.42 0.02 250)): White text (oklch(0.99 0 0)) - Ratio 6.8:1 ✓
  - Gold Accent (oklch(0.72 0.14 85)): Deep Navy text (oklch(0.28 0.05 250)) - Ratio 4.9:1 ✓
  - Background (oklch(0.98 0.005 250)): Foreground text (oklch(0.25 0.02 250)) - Ratio 13.4:1 ✓

## Font Selection

Typography should communicate **executive gravitas, analytical precision, and structured thinking**—appropriate for strategy documents and financial reporting while remaining highly scannable for dashboard views.

- **Typographic Hierarchy**: 
  - H1 (Strategic Section Headers): Outfit Bold / 32px / tight (-0.02em) - Commands attention for major sections
  - H2 (Portfolio/Card Titles): Outfit SemiBold / 24px / tight (-0.01em) - Clear hierarchical signaling
  - H3 (Initiative Titles): Outfit Medium / 18px / normal - Balanced weight for scannability
  - Body (Descriptions/Content): Inter Regular / 15px / relaxed (1.6) - Exceptional readability for detailed content
  - Data/Metrics: JetBrains Mono Medium / 14px / normal - Precision and clarity for numbers, KPIs, dates
  - Captions/Labels: Inter Medium / 13px / wide (0.01em) / uppercase - Clear visual separation for metadata

## Animations

Animations should reinforce the sense of **authoritative transitions and data relationships**, never frivolous. Use purposeful motion to guide attention during navigation between strategy levels (enterprise → portfolio → initiative), smooth drill-downs that maintain spatial context, and subtle highlights when metrics update or thresholds are crossed. Strategic elements should feel weighty—cards and modals transition with slight deceleration suggesting substance and importance.

## Component Selection

- **Components**: 
  - `Card` - Primary container for Strategy Cards, initiative summaries, and portfolio groups; add subtle shadow and border treatment for depth
  - `Tabs` - Navigation between Strategy Cards and Workbench; styled with underline indicator and bold active state
  - `Dialog` - Full-screen modals for creating/editing Strategy Cards and initiatives with structured forms
  - `Table` - Initiative lists, KPI scorecards, and portfolio views with sortable columns and row hover states
  - `Badge` - Status indicators (On Track, At Risk, Blocked), priority levels, and portfolio tags with semantic colors
  - `Progress` - Visual representation of initiative completion, capacity utilization, and KPI achievement
  - `Select` - Framework selection, owner assignment, portfolio categorization with clear dropdown styling
  - `Button` - Primary actions use solid navy with gold hover accent; secondary actions use outline style
  - `Separator` - Clear visual breaks between strategy sections and dashboard panels
  - `Avatar` - Owner identification with fallback initials
  - `ScrollArea` - Smooth scrolling for long strategy content and initiative lists
  
- **Customizations**: 
  - Strategy Card component with collapsible framework sections (Vision, Goals, Metrics, Assumptions)
  - Traceability visualization using connected cards or tree view showing goal → initiative relationships
  - Portfolio capacity gauge combining Progress with numeric indicators
  - KPI scorecard component with trend indicators (up/down arrows) and target comparison
  - Initiative timeline component showing milestones and current progress
  
- **States**: 
  - Buttons: Navy default → Gold hover → Pressed with slight scale → Disabled with reduced opacity
  - Cards: Subtle hover elevation; active state with gold left border; selected state with gold outline
  - Table rows: Hover with light slate background; selected with stronger slate background
  - Status badges: Green (On Track), Amber (At Risk), Red (Blocked), Gray (Not Started)
  
- **Icon Selection**: 
  - `Strategy` - Use structured grid or layers icon for Strategy Cards
  - `ChartBar` - Workbench and execution tracking
  - `FolderOpen` - Portfolio management
  - `Target` - Goals and KPIs
  - `Link` - Traceability and connections
  - `Plus` - Create new cards/initiatives
  - `ArrowRight` - Drill-down and navigation
  - `Warning` - Risk flags and capacity alerts
  - `TrendUp/TrendDown` - KPI performance indicators
  
- **Spacing**: 
  - Page margins: `p-8` for generous breathing room around main content
  - Card padding: `p-6` for substantial internal space
  - Section gaps: `gap-6` between major sections; `gap-4` between related elements
  - List items: `py-3` for comfortable touch targets and scannability
  
- **Mobile**: 
  - Tab navigation converts to bottom sheet selector
  - Strategy Cards stack vertically with collapsible sections expanded one at a time
  - Tables transform to card-based lists with key data prioritized
  - Portfolio dashboard shows one metric card at a time with horizontal swipe
  - Create/Edit dialogs use full viewport with simplified forms
  - Reduce typographic scale by 10-15% for mobile readability