SimpleFinanceDash/.planning/phases/01-design-token-foundation/01-VALIDATION.md

phase, slug, status, nyquist_compliant, wave_0_complete, created

phase	slug	status	nyquist_compliant	wave_0_complete	created
1	design-token-foundation	draft	false	false	2026-03-11

Phase 1 — Validation Strategy

Per-phase validation contract for feedback sampling during execution.

---

Test Infrastructure

Property	Value
Framework	vitest (not yet installed — Wave 0 installs)
Config file	frontend/vite.config.ts (extend with test block) or frontend/vitest.config.ts
Quick run command	cd frontend && bun vitest run --reporter=verbose
Full suite command	cd frontend && bun vitest run
Estimated runtime	~5 seconds

---

Sampling Rate

• After every task commit: Run cd frontend && bun vitest run src/lib/palette.test.ts src/components/InlineEditCell.test.tsx
• After every plan wave: Run cd frontend && bun vitest run
• Before /gsd:verify-work: Full suite must be green
• Max feedback latency: 10 seconds

---

Per-Task Verification Map

Task ID	Plan	Wave	Requirement	Test Type	Automated Command	File Exists	Status
01-01-01	01	0	DSGN-02	unit	bun vitest run src/lib/palette.test.ts -t "exports all categories"	❌ W0	⬜ pending
01-01-02	01	0	DSGN-05	unit	bun vitest run src/lib/palette.test.ts -t "amountColorClass"	❌ W0	⬜ pending
01-01-03	01	0	DSGN-03	unit	bun vitest run src/lib/palette.test.ts -t "headerGradient"	❌ W0	⬜ pending
01-01-04	01	0	FIX-02	unit	bun vitest run src/components/InlineEditCell.test.tsx	❌ W0	⬜ pending
01-XX-XX	XX	X	DSGN-01	manual	visual check — CSS oklch chroma values	manual-only	⬜ pending
01-XX-XX	XX	X	DSGN-04	manual	visual check — hero hierarchy	manual-only	⬜ pending

Status: ⬜ pending · ✅ green · ❌ red · ⚠️ flaky

---

Wave 0 Requirements

• cd frontend && bun add -d vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom — install test framework
• frontend/vite.config.ts — add test: { environment: 'jsdom', globals: true, setupFiles: ['./src/test-setup.ts'] }
• frontend/src/test-setup.ts — import '@testing-library/jest-dom'
• frontend/src/lib/palette.test.ts — stubs for DSGN-02, DSGN-03, DSGN-05
• frontend/src/components/InlineEditCell.test.tsx — stubs for FIX-02

---

Manual-Only Verifications

Behavior	Requirement	Why Manual	Test Instructions
All :root oklch values have non-zero chroma	DSGN-01	CSS token values require visual browser inspection	Open app in browser, inspect :root variables, verify all color tokens have chroma > 0
FinancialOverview/AvailableBalance visual hierarchy	DSGN-04	Typographic hierarchy is a visual judgment	Open dashboard, verify hero elements are visually dominant above secondary content

---

Validation Sign-Off

• All tasks have <automated> verify or Wave 0 dependencies
• Sampling continuity: no 3 consecutive tasks without automated verify
• Wave 0 covers all MISSING references
• No watch-mode flags
• Feedback latency < 10s
• nyquist_compliant: true set in frontmatter

Approval: pending