# Infographic Generation Prompt

**Layout:** bento-grid (portrait, 2 columns × ~6 rows)
**Style:** corporate-memphis
**Aspect Ratio:** 9:16 (portrait, for slide use)
**Language:** English

---

## Image Prompt

Create a clean, portrait-orientation (9:16) infographic slide titled **"Design Token Migration — Progress & Roadmap"** with the subtitle "Unifying web, iOS & Android under one token system." A small pill-shaped status badge near the top right reads **"Phase 2 In Progress"**.

**Visual style: Corporate Memphis.** Flat vector illustration with vibrant, saturated colors. Clean geometric shapes, playful abstract elements, professional yet approachable. Color palette: electric blue (#4361EE), coral (#FF6B6B), purple (#7209B7), mint (#06D6A0), golden yellow (#FFD166). Background clean white (#F8F9FA). Dark navy (#1A1A2E) for headings, medium gray (#4A4A4A) for body text. Bold geometric sans-serif (Inter/Poppins style). Completely flat — no gradients or heavy shadows. Scatter small geometric decorative elements (dots, squiggles, circles, abstract blobs) sparingly in the margins.

**Layout: Bento Grid in portrait orientation.** 2-column grid with modules of varying heights, consistent rounded corners (12–16px radius), generous gutters (20px). Each module has a soft tinted background in its phase accent color (10% opacity fill).

### Module arrangement (top to bottom):

1. **Hero module (full-width, top):** "One Source of Truth"
   - Sub-copy: "Migrating from legacy SCSS variables to a unified JSON-based token system. 847 variables across 12 repositories being unified."
   - Visual: central token icon (stylized braces { }) radiating three lines to three device icons — a laptop (web), a phone (iOS), and a tablet/droid (Android). Use electric blue as the dominant color.

2. **Phase 1 — Foundation ✓** (left column)
   - Date label: "Feb → Mar 2026"
   - Green (#06D6A0) accent, checkmark badge in corner
   - Bullets: "Audited 847 SCSS variables across 12 repos • Defined token taxonomy (semantic, component, alias) • Built Style Dictionary pipeline • Deployed tokens to CDN"

3. **Phase 2 — Web Migration ●** (right column, same row as Phase 1)
   - Date label: "Mar → Apr 2026"
   - Electric blue (#4361EE) accent, bold "NOW" badge in corner
   - Bullets: "Codemod auto-replaced 623 of 847 variables • 224 variables need manual review • Dark mode via prefers-color-scheme • Visual regression QA on 48 critical pages"

4. **Phase 3 — Mobile Rollout** (left column)
   - Date label: "May → Jun 2026"
   - Purple (#7209B7) accent, phone icon
   - Bullets: "iOS Swift token pod per build • Android Gradle plugin → tokens.xml • Cross-platform screenshot parity audit"

5. **Phase 4 — Cleanup** (right column, same row as Phase 3)
   - Date label: "Jun → Jul 2026"
   - Coral/orange (#FF6B6B) accent, broom or sparkle icon
   - Bullets: "Remove legacy SCSS partials • Linter blocks raw values • Storybook token explorer as docs"

6. **Key Metrics module (full-width, large):** Headline "Migration Metrics". A clean comparison table with three columns — **Baseline → Current → Target** — showing eight metric rows:
   - 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
   - Unique color values: 312 → **89** → ≤48
   - Variables migrated: 0 → **623** → 847
   - Visual regressions / month: 6 → **1** → 0

   Use extra-bold oversized numerals for the "Current" column. Include mini horizontal progress bars next to the adoption percentages. One callout stat: **"Theme switch 8× faster"** in a bright yellow (#FFD166) rounded rectangle.

7. **Decisions Made** (full-width, shorter)
   - ✅ Phase 3 mobile rollout approved — starts May 1
   - 📅 Token versioning: CalVer (2026.04.1)
   - ⚠️ SCSS build warnings May 15, hard errors Jul 1

8. **Bottom timeline strip (full-width):** A horizontal bar split into 4 segments with date markers:
   - Feb–Mar: Phase 1 (green, checkmark)
   - Mar–Apr: Phase 2 (blue, highlighted, "you are here" marker)
   - May–Jun: Phase 3 (purple)
   - Jun–Jul: Phase 4 (coral)

**Footer:** "Updated April 2026"

### Rules & Constraints
- Portrait orientation 9:16, readable as a single slide.
- Each module independently readable; consistent iconography.
- Oversized bold numbers for all metrics.
- Ample whitespace — do not overcrowd.
- Do NOT include any: email addresses, Slack handles, API keys, bearer tokens, passwords, internal URLs, repository names, Jira IDs, dollar budgets, person names, or internal service hostnames. The infographic must be safe for a broad internal all-hands audience.
- Keep illustrations minimal and geometric; no photographs or realistic textures.