# Node Types and Their Cards in Strategy Builder

Each node type has a distinct color, icon, and card layout.

## Types

| Type | Icon | Color | Card shows |
|------|------|-------|------------|
| **Objective** | ◎ | Gold (#E09952) | Alignment (Low/Medium/High) |
| **Opportunity** | ◉ | Blue (#5B9BD5) | Spread, Intensity, Value, Score, Revenue |
| **Solution** | ▣ | Brown (#A07850) | RICE scores: Reach, Impact, Confidence, Effort, Score |
| **Experiment** | ⚗ | Red (#D4645C) | Result (Proven/Failed) or Budget, Complexity, Timeline |
| **Epic** | ▤ | Slate (#78909C) | Score, Estimate, Progress bar |
| **Feature** | ▤ | Slate (#78909C) | Score, Estimate, Progress bar |
| **Metric/KPI** | ◆ | Purple (#7E57C2) | Sparkline chart, Current value, Target benchmark |
| **Persona** | ◈ | Green (#4CAF68) | Role, Profile image |
| **Cluster** | ◇ | Orange (#E8673C) | Feedback item count |
| **Version** | ◇ | Teal (#4DB6AC) | Release scope |

## Status indicators

Cards show a colored status dot and label (except Objectives and Metrics):

| Status | Color | Meaning |
|--------|-------|---------|
| Healthy | Green | On track |
| At Risk | Orange | Needs attention |
| Blocked | Red | Stopped |
| Unvalidated | Grey | Not yet validated |

## Card header

Every card header shows:
- Colored icon badge (type color + white icon)
- Type label
- External key in a grey pill (e.g., `OPP-1`)
- Status indicator (if applicable)
- Three-dot action menu (on hover)

## Progress rollup

Parent nodes (Objectives, Opportunities, Solutions) display a **segmented status bar** below the card title. This bar shows the health distribution of all descendant nodes — not just direct children.

| Segment | Color | Represents |
|---------|-------|------------|
| Healthy | Green | Descendants with Healthy status |
| At Risk | Orange | Descendants with At Risk status |
| Blocked | Red | Descendants with Blocked status |
| Unvalidated | Grey | Descendants with Unvalidated status |

A compact label (e.g., **3 / 8 healthy**) appears alongside the bar. The bar updates automatically when descendant statuses change.

## Score info popovers

Opportunity and Solution cards show an **info icon (ⓘ)** next to their score. Clicking the icon opens a popover showing:

- The score formula
- A definition of each metric used
- A help link for further reading

| Card type | Formula shown |
|-----------|--------------|
| Opportunity | Opp Score = Spread + Intensity + Value |
| Solution | Score = (Reach × Impact × Confidence) / (Effort × 100) |

## Score breakdowns on cards

At **focus zoom (≥ 80%)**, Opportunity and Solution cards display a mini score grid directly on the card.

| Card type | Grid shows |
|-----------|-----------|
| Opportunity | Spread, Intensity, Value, Score |
| Solution | Reach, Impact, Confidence, Effort, Score |

Score breakdowns are hidden at overview and mini zoom levels.

## Compact card design

Cards use a compact layout — tighter padding, smaller badges, and a fixed width of **260px**. Cards auto-size vertically to fit their content. Row gaps between sibling nodes are larger for leaf nodes (nodes with no children) to improve readability.