Component · Content · 28
Phase Card
Phase Card = a numbered step card whose top edge carries an accent colour showing whether it is done or current.
PHASE 01
MVP
One engine, one protocol.
PHASE 02
Integration
Adapters for all engines.
PHASE 03
Polish
Native features and sync.
What is a Phase Card?
A phase card is one ordered step. Give each card a number, a title, one line, and mark the current phase.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- Say this state explicitly in the prompt.
Anatomy
These are the parts to name in your prompt.
- 01 Accent edge
- 02 Number
- 03 Title
- 04 Description
When to use
- Product or delivery roadmaps
- Onboarding flows with ordered steps
- Release plans with a visible current phase
Avoid when
- Steps have no order — use a card grid
- Long prose per step — use a page section
- More than six phases — group them first
See also
Create a roadmap of phase cards.
STYLE
- responsive card grid, top 4px accent edge, 12px radius
- monospace phase number in accent color
- 16px title, one muted description line
- three phases side by side
STATES
- default, current phase with a teal top edge
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui