# Structured Content — Design Token Migration Infographic

## Title
Design Token Migration — Progress & Roadmap

## Subtitle
Unifying web, iOS & Android under one token system

## Status Badge
Phase 2 In Progress

---

## Module: Overview (Hero — 2×2)
**Headline:** One Source of Truth
**Body:**
- Migrating from legacy SCSS variables to a unified JSON-based token system
- Powers CSS custom properties, Swift enums, and Kotlin objects
- 847 variables across 12 repositories being unified

**Visual:** Hub-and-spoke icon — central token file radiating to Web / iOS / Android icons

---

## Module: Phase 1 — Foundation ✓ (Feature — 2×1)
**Headline:** Foundation (Complete)
**Dates:** Feb → Mar 2026
**Steps:**
- Audited 847 SCSS variables across 12 repos
- Defined token taxonomy: semantic, component, alias layers
- Built token pipeline with Style Dictionary
- Deployed tokens to CDN

**Visual:** Checkmark icon, green accent

---

## Module: Phase 2 — Web Migration ● (Feature — 2×1)
**Headline:** Web Migration (Current)
**Dates:** Mar → Apr 2026
**Steps:**
- Codemod auto-replaced 623 of 847 variables
- 224 variables need manual contextual review
- Dark mode integration via prefers-color-scheme
- Visual regression QA on 48 critical pages

**Visual:** Spinning/progress icon, blue accent, "NOW" badge

---

## Module: Phase 3 — Mobile Rollout (Feature — 1×2)
**Headline:** Mobile Rollout (Approved)
**Dates:** May → Jun 2026
**Steps:**
- iOS: Swift token pod per build
- Android: Gradle plugin → tokens XML
- Cross-platform screenshot parity audit

**Visual:** Phone icon, purple accent

---

## Module: Phase 4 — Cleanup (Detail — 1×1)
**Headline:** Deprecation & Cleanup
**Dates:** Jun → Jul 2026
**Steps:**
- Remove legacy SCSS partials
- Linter rules block raw values
- Storybook token explorer as docs

**Visual:** Broom/cleanup icon, orange accent

---

## Module: Key Metrics (Feature — 2×2)
**Headline:** Migration Metrics

| Metric | Baseline | Current | Target |
|--------|----------|---------|--------|
| Web adoption | 0% | 74% | 100% |
| iOS adoption | 0% | 12% | 100% |
| Android adoption | 0% | 8% | 100% |
| Theme switch time | 3.2s | 0.4s | <0.3s |
| Handoff errors/sprint | 14 | 5 | <2 |
| Color values in prod | 312 | 89 | ≤48 |
| Variables migrated | 0 | 623 | 847 |
| Visual regressions/mo | 6 | 1 | 0 |

**Visual:** Progress bars for adoption percentages; big stat callouts for theme switch time improvement

---

## Module: Key Decisions (Detail — 2×1)
**Headline:** Decisions Made
**Body:**
- ✅ Phase 3 mobile rollout: Approved — starts May 1
- 📅 Token versioning: CalVer (2026.04.1)
- ⚠️ SCSS build warnings start May 15; hard errors Jul 1

**Visual:** Decision/gavel icon

---

## Module: Timeline Bar (Bottom strip — full width)
**Visual:** Horizontal timeline bar showing all 4 phases with date markers
- Feb–Mar: Phase 1 ✓ (green)
- Mar–Apr: Phase 2 ● (blue, highlighted)
- May–Jun: Phase 3 → (purple)
- Jun–Jul: Phase 4 → (orange)

---

## Footer
Updated: April 2026