Spring Design Library — Phase Playbook

Audience: Product, design, engineering, QA
Purpose: Detailed tasks, expected outcomes, testing, and exit criteria for each wave
Last updated: June 2026

---

How to use this document

Each section maps to a milestone in 02-roadmap-and-milestones.md. For every wave:

1. Complete action items in order where dependencies exist.
2. Run tests before claiming exit criteria met.
3. Update personal-loan-appflow-master-plan.md when AppFlow status changes.

---

Phase 0 — Publish sprint (Weeks 1–2)

Dates: Jun 29 – Jul 13, 2026
Milestone: M1 — Application Flow publish
Inspired risk focus: Value + Usability (can we demo the product story?)

Objective

Ship a clickable, stakeholder-ready Application Flow that proves the design system works as a product building block.

Action items

P0-2 approach options (pick one)

P0-1 acceptance

• Email/value prop + CTA → name
• Shell progress ~7%
• Mobile floating CTA
• Registered in personalLoanFlow.ts with status: 'ready'

Component swap efficiency test

Run during the publish sprint to validate DS product efficiency.

Testing

npm run lint
npm run build
npm run build:personal-loan

Manual walkthrough (minimum paths):

1. Happy path: start → name → loan-amount → … → verify-income → analyzing → application-success
2. Declined outcome: analyzing → application-declined
3. Foundation cross-sell: analyzing → application-foundation
4. Flow map: click tile → Open view → mobile toggle
5. Standalone: repeat path 1 on /personal-loans/start

Exit criteria (M1)

• All P0 action items complete
• Component coverage ≥90%
• Walkthrough checklist signed by PM + designer
• lint + build pass for both apps

Manual walkthrough checklist (appendix)

---

Phase 1 — Internal validation loop (Weeks 3–4)

Dates: Jul 14 – Jul 27, 2026
Milestone: M2 — Internal validation complete
Inspired risk focus: Value + Usability + Business viability

Objective

Gather structured feedback from designers, stakeholders, and developers; produce a risk-ranked backlog.

Action items

P1 parallel delivery (if capacity allows)

Review session templates

Designer review

Output: Design sign-off OR numbered change list with screen slugs.

Stakeholder demo

Output: Go / no-go for broader sharing + top 3 concerns.

Developer review

Output: Architecture notes → input for Wave 2 RFC.

Testing

• Re-run M1 walkthrough checklist after any P1 changes
• Update master plan step statuses

Exit criteria (M2)

• All three review sessions completed
• Backlog prioritized with risk tags
• Stakeholder go/no-go recorded
• Master plan updated

---

Phase 2 — Architecture and DevOps alignment (Weeks 5–6)

Dates: Jul 28 – Aug 10, 2026
Milestone: M3 — Architecture aligned
Inspired risk focus: Feasibility

Objective

Align developers and DevOps on package consumption, CI, deployment, and publish path.

Action items

Architecture RFC topics

Testing

npm run lint
npm run build
npm run build:personal-loan

CI must pass on a clean PR before M3 sign-off.

Exit criteria (M3)

• Architecture RFC approved
• manual QA smoke in CI
• Both apps build in CI
• Deployment doc exists

---

Phase 3 — Injectable design system (Weeks 7–9)

Dates: Aug 11 – Aug 31, 2026
Milestone: M4 — Injectable DS proven
Inspired risk focus: Feasibility + Value

Objective

Prove Spring look-and-feel can be applied to any host app — even when not all components exist.

Adoption layers

Action items

Pilot pass criteria

• External-style app reaches typography/color/spacing parity in <4 hours using L1+L2 alone
• Gap matrix covers all AppFlow-critical inputs (TextField, SpringButton, modals, etc.)

Testing

Exit criteria (M4)

• Injectable guide published
• Pilots A, B, C pass
• Gap matrix complete
• M3 RFC gate satisfied (no premature npm publish)

---

Phase 4 — Playground and vibe coding (Weeks 10–12)

Dates: Sep 1 – Sep 21, 2026
Milestone: M5 — Playground operational
Inspired risk focus: Value (discovery lane) + Usability

Objective

Operationalize the Playground as the discovery lane where anyone can vibe-code before package graduation.

Current base

• Registry: apps/design-library/src/gallery/playground/playgroundProjects.ts
• Categories: Components, Pages, Live Prototyping
• 3 existing projects (Bloom V1/V2, application-flow live prototype)

Action items

Graduation criteria (component → package)

• Full state coverage (default, hover, focus, disabled, error where applicable)
• Token fit — no raw hex
• Designer approval goal met in playground project
• Gallery doc page created
• Exported from packages/spring-ds-react/src/index.ts

Testing

Run one end-to-end cycle:

1. Create playground project (exploration)
2. Vibe-code or agent-generate UI
3. Designer review → pending-approval
4. Engineer PR to package
5. Gallery doc page live

Exit criteria (M5)

• Workflow documented
• ≥1 graduation completed
• Embed URLs verified for stakeholder review

Inspired note: Playground is discovery — unapproved playground code is not production DS.

---

Phase 5 — Multi-brand and theme switching (Weeks 13–15)

Dates: Sep 22 – Oct 12, 2026
Milestone: M6 — Multi-brand theme demo
Inspired risk focus: Feasibility + Business viability (DPP/partner)

Objective

Demonstrate theme switching when core DS is stable and injectability is proven.

Prerequisites (gates)

• M4 injectable guide validated
• Token architecture supports semantic overrides (--spring-semantic-*)
• AppFlow critical path covered by DS components

Action items

Testing

Exit criteria (M6)

• Theme switcher demo in gallery
• Foundation brand pilot complete
• Partner override spec documented
• No regression on default Spring theme

---

Cross-cutting testing matrix

---

Team responsibilities by wave

---

Related documents