Themes in Stage Toolbox - Mockup v1

Click the green toolbox button to open the modal with Themes section

X-IPE
Stage Toolbox
🎨
Design Themes
4 available
Aa Inter + System
theme-default
Neutral, clean design system
Aa Poppins + Roboto
theme-ocean
Cool blue tones, modern feel
Aa Lato + Source Sans
theme-forest
Natural greens, organic style
Aa Montserrat + Open Sans
theme-sunset
Warm oranges, energetic vibe
💡
Ideation Stage
Brainstorm & visualize ideas
2 active
Ideation
📊
antv-infographic
🔀
mermaid
Mockup
🎨
frontend-design
🖌️
x-ipe-tool-frontend-design
Sharing
No tools configured
📋
Requirement Stage placeholder
Gather & analyze requirements
0 active
Gathering
Coming soon...
⚙️
Feature Stage placeholder
Design & implement features
0 active
Design
Coming soon...
✅
Quality Stage placeholder
Test & review code quality
0 active
Testing
Coming soon...
🔄
Refactoring Stage placeholder
Improve & optimize code
0 active
Analysis
Coming soon...

### 🎨 Mockup v1: Themes Section in Stage Toolbox

- Themes section at top of modal (before stages)
- Visual theme cards with color swatches
- Typography preview per theme
- Click to select theme (checkmark indicator)
- 4-column grid layout for theme cards
- Theme name in monospace font
- Badge showing available theme count
- Default theme pre-selected on load
- Persists to x-ipe-docs/config/tools.json on selection
- New x-ipe-tool-frontend-design in Mockup phase