Staircase Progression Layout

April 23, 2026 · View on GitHub

Layout: Three or four phase columns with stepped heights, each phase visibly taller than the previous to signal accumulation Best for: Maturity curves, capability build-up stories, phased scope expansion where later phases carry strictly more surface area than earlier ones

Template

Phased Plan · Accumulating Scope

Three Stages of Platform Maturity

Each step is visibly taller than the last. The height encodes the growth of scope, not a prettier roadmap — phase three should feel heavier because it carries more than phase one.

Phase 1 · Focus Anchor Wins 6
Scope Two flagship workflows plus their shared foundation.
Mode Sequential handoff with human review on every exit.
Exit Gate Flagship ROI validated; baseline infrastructure in production.
Phase 2 · Breadth Line-of-Business Rollout +13
Scope Cross-functional workflows reach every core team.
Mode Scoped peer-to-peer calls; audit rails fully enabled.
Exit Gate Candidate workflows graduate to production status.
Phase 3 · Depth Federated Coverage +14
Scope Back-office and governance workflows join the platform.
Mode Cross-site orchestration under a unified control plane.
Exit Gate Platform released externally; industry extensions shipped.
Maturity Curve · Program Plan

Variations

  • Four steps: switch to repeat(4, 1fr) and add an s4 height above s3. Keep the height step consistent (roughly +40px each).
  • Count variant: the big number on each step can encode scope (scenarios, teams, workflows) or time (months). Pick one axis per card and keep it consistent.
  • Inverted stair: for de-scoping or wind-down stories, reverse the heights so later phases shrink. Rare; use only when the narrative really is contraction.

When Not to Use

  • All phases carry equal weight → use roadmap-board.
  • There is no clear accumulation story (each phase replaces, not extends, the previous) → use comparison.
  • More than four phases → the stair becomes gimmicky; switch to timeline-flow.