Freddie Deepak's Phase 1 · Design spec

Mailchimp campaign creation surface, 10 extensions, zero new components without rationale

A design extension of the existing Freddie / AI Email Generator prototype. Adds all 10 features from the Canva-gap roadmap Phase 1 to the existing surface using only baseline components and design tokens. Every new affordance traces back to a baseline C-XX ID or is filed as a /v.label variant of one. The win condition: a marketer completes the full creative workflow — from blank brief to send-ready, brand-perfect, hyper-personalized campaign — without leaving Mailchimp for Canva.

v1.0 · 7 sections · May 2026

Source baseline: 96 components · Lens 3

Phase 1 features · AI / AI 2.0 layer · cross-channel where physics allow

Baseline components reused (C-01 to C-96 · no breakage)

Genuinely new C-ID introduced (C-97 image manipulation popover · variant class of C-95)

Component variants registered (/v.label suffix · stay under parent C-ID)

Phase 1 is not about beating Canva — it's about stopping the round-trip. The Canva-gap analysis names three root causes in priority order: image-editing friction · lack of conversational design tools · brand consistency at scale. Features 01, 03, and 05 address those directly. Features 02, 04, 06, 07, 08, 09, 10 reinforce. Source: deepakp1308/canva-campaign-analysis · Phase 1 = 2–3 quarters, all 10 features ship across Email + SMS + WhatsApp where physics permit.

01What this spec is and isn't

Is	Isn't
A baseline-compliant design that ships 10 named Phase 1 features into the existing Freddie surface	A from-scratch redesign · baseline IA + state model + tokens are preserved
An annotated screen spec — ASCII wireframes for 7 features, full HTML+CSS mockups for the 3 load-bearing surfaces (Plan composer / Design editor / Brand Kit)	A pixel-perfect Figma file — mockups are baseline-faithful but expect refinement
A component-traceable spec — every affordance points to a `C-XX` baseline ID or a registered `/v.label` variant	A vague "AI surface" sketch — if a component doesn't map back to the baseline, it doesn't ship
A channel-honest matrix — explicit Email / SMS / WhatsApp coverage with N/A cells for physics constraints	Aspirational omnichannel marketing copy · "no images in SMS" is a hard constraint, not a roadmap item

02Reading guide — how to navigate this 7-section spec

Section 1 · Overview (this page) · the framing + KPI strip + reading guide
Section 2 · Constraint manifest · the 7 design rules R1–R7, locked mcds token table, the dual-CSS explainer (poster chrome vs mcds frame)
Section 3 · Feature × Surface heatmap · single 10×5 table showing where each feature lands in the existing surface (Plan composer / Strategy panel / Design editor / Brand Kit / Sidebar+Settings)
Section 4 · Plan-step features · per-feature cards for #5, #6, #7, #9, #10 (Brand Voice 2.0 / Memory / Live-Context Connectors / Web Research / MCP Bridge)
Section 5 · Design-step features · per-feature cards for #1, #2, #3, #4, #8 (Image Manipulation / Dream Lab / Conversational Design Editing / Magic Layers / Sticker-GIF) — includes the 3 load-bearing HTML+CSS wireframes
Section 6 · Cross-cutting · full 10×3 channel parity matrix, flow deltas (which of the 5 baseline flows change), new states inventory, complete new C-ID register, token compliance attestation
Section 7 · Execution · build sequence + validation checklist + cross-references back to the 18-tab brief, the 5 design lenses, and the Canva-gap analysis

Cross-references: Baseline component inventory at Tab 18 Design Audit Lens 3 (96 components, C-01 to C-96) · Baseline task flows at Lens 2 · Strategy alignment at Strategy Memo Pillar 4 (AI) and Pillar 5 (Unified Canvas + Collab) · Revised Goals at Tab 11 · The 10 Phase 1 features sourced from deepakp1308.github.io/canva-campaign-analysis/ Phase 1 roadmap.

Section 2 of 7 · The non-negotiables

Constraint manifest — the 7 rules every design decision honors

"Use only what's in the baseline. No white-coding. No invented widgets." This section formalizes that into 7 rules with examples, lists the locked design tokens, and explains the dual-CSS strategy used in this spec (poster chrome for the page itself; mcds frame for the wireframe mockups inside it).

R1–R7 · mcds tokens locked

Inventory ceiling: 97 (96 baseline + 1 new)

2.1The 7 design rules

No new tokens. Only the mcds token set: teal #017E89, yellow #FFE01B (brand cue only), text/bg neutrals, Graphik Web + Means Web fonts, radii lv0–lv6, elevation L0–L4. New affordances must compose from these.

No new shapes. Every new affordance reuses an existing primitive class — popover, chip, modal, panel, button, select, toggle, banner, card. If a feature requires a genuinely new shape, it gets a new C-XX ID with rationale documented in this spec.

Variant policy. Variants of existing components stay under the parent ID with a /v.label suffix (e.g. C-25/v.memory). The inventory stays at 96 baseline IDs. Only genuinely new shapes get new C-IDs (C-97+).

Channel parity by physics. Each feature gets a row in the 10×3 matrix (Section 6). Cells are Full, Partial, or N/A (physics). No aspirational checkmarks for "images in SMS." Honest matrix.

Yellow is brand cue only. #FFE01B appears only as the Home top-stripe (baseline C-02). It is never used for AI affordances, CTAs, alerts, or new feature surfaces. That stripe is the only sanctioned yellow in the entire surface.

Teal is the AI primary action color. #017E89 is the color of every Generate, Create, Confirm, and Send CTA — matching the existing baseline. New AI-feature CTAs inherit this color, not yellow, not amber, not red.

No invented copy. Quick-prompt chip text, follow-up chip text, theme preset names, and section labels reuse baseline strings where possible. New strings are added only when the feature genuinely needs them, and they follow the existing voice (sentence case, action-first, <50 chars).

2.2The locked mcds token table

Reproduced verbatim from ai-email-generator-decomp/docs/03-design-tokens.md. Every wireframe mockup in this spec uses these tokens; new affordances inherit them.

Token category	Names	Locked values
Surfaces	`--color-bg-primary / -secondary / -tertiary / -user-bubble / -hover`	`#FFFFFF` · `#F8FAFB` · `#F0F4F6` · `#F0F4F6` · `#F0F4F6`
Text	`--color-text-primary / -secondary / -tertiary / -on-dark`	`#21262A` · `#4C555B` · `#727E85` · `#FFFFFF`
Accent (AI)	`--color-accent-blue / -hover / -light`	`#017E89` · `#006771` · `#E0EDFF`
Brand cue	`--color-action-special-use`	`#FFE01B` (Mailchimp yellow · brand cue only per R5)
Destructive	`--color-ui-negative`	`#DB334D`
Borders	`--color-border-default / -selection`	`#E2E9ED` · `#017E89` (focus ring)
Typography	`--font-display-` (Means) · `--font-heading-` + `--font-text-*` (Graphik)	Means Web 400 for AI H1s · Graphik Web 400/500 for everything else
Radii	`lv0 / lv1 / lv2 / lv3 / lv4 / lv5 / lv6`	`0` · `2` · `4` · `8` · `12` · `38` (composer shell) · `9999px` (pills)
Elevation	L0–L4	`none` / `0 2px 2px` / `0 2px 8px` / `0 4px 16px` / `0 6px 24px` all on `rgba(76,85,91,.2)`
Motion	`--duration-fade-*` · `--animation-curve`	`150ms` / `200ms` · `cubic-bezier(.35, 0, .25, 1)`

2.3The dual-CSS strategy

This spec uses two design systems simultaneously — intentionally, and visibly separated:

Poster chrome · this page

Inherited from mailchimp-editor.html. Amber #C28A00, cream chips #FFF6D9, Inter + Source Serif 4. Used for the spec page itself: sections, headings, KPI cells, chips, tables, callouts.

--brand #C28A00 --chip #FFF6D9 Inter / Source Serif 4

mcds frame · wireframe mockups

Scoped under .fdpx-mcds-frame. Teal #017E89, Mailchimp yellow #FFE01B, neutral #F8FAFB bg, Graphik fallback to Inter, Means fallback to Source Serif. Used inside wireframe boxes so a reader sees "yes this is Freddie, not a generic brief."

--color-accent-blue #017E89 Graphik / Means lv0–lv6 radii

Why two systems? Because the spec is a document about the prototype, not the prototype itself. The page chrome must read as part of the brief (consistent with Tabs 1–18). The wireframes inside the page must read as Freddie (consistent with what's shipping). Mixing them would either make the spec look like a generic Word doc, or make the wireframes look like brief-tab content. Two scoped CSS contexts solve this.

2.4Policy chip legend — how to read the per-feature cards

Each per-feature card in Sections 4 + 5 uses these chips to communicate compliance with R2 + R3:

Reuse — the affordance reuses an existing C-XX baseline component unchanged

Variant — a variant of an existing component, registered as C-XX/v.label (inventory stays at 96)

New C-ID — genuinely new shape, gets a new C-97+ ID with rationale. Currently only C-97 exists.

Source manifest: Token table from ai-email-generator-decomp/docs/03-design-tokens.md. Component primitive families from ai-email-generator-decomp/docs/04-components.md. Variant policy decided via design-spec planning round (see plan file). Poster chrome CSS copied verbatim from mailchimp-editor.html root :root block.

Section 3 of 7 · The spine

Feature × Surface heatmap

Single table mapping the 10 Phase 1 features to the 5 baseline surfaces (Plan composer, Strategy panel, Design editor, Brand Kit modal, Sidebar + Settings). Filled cells indicate the surface gets extended; bold cells mark the primary surface for the feature. C-XX annotations point to the specific component being extended.

10 features × 5 surfaces

1 new C-ID · 18 variants

Phase 1 feature	Layer	Plan composer (Email/SMS/WA tabs)	Strategy panel (right pane)	Design editor (canvas + chat)	Brand Kit modal	Sidebar + Settings
01 · AI Image Manipulation Suite	AI			C-61, C-70, C-44 + new C-97
02 · Dream Lab (AI image gen)	AI			C-71/v.image-tab, C-19, C-58/v.aspect
03 · Conversational Design Editing	AI 2.0			C-54, C-43/v.preview-diff, C-70/v.refine-chips
04 · Magic Layers	AI 2.0	C-20, C-23/v.ingestion-progress		C-53/v.open-as-editable, C-72
05 · Brand Voice 2.0 + Brand Intelligence	AI / AI 2.0	C-23/v.brand-update-broadcast			C-89/v.profile-picker, C-87
06 · Mailchimp Memory	AI 2.0	C-25/v.memory	C-45 (recall chip)			C-9, C-11/v.memory-entry, C-82/v.memory-drawer
07 · Live-Context Connectors	AI 2.0	C-23/v.live-context-banner	C-43 prose response			C-91/v.connector-section, C-92/v.connector-toggle
08 · AI Sticker / GIF / Animation	AI			C-71/v.stickers-tab, C-72, C-25/v.sticker-prompts
09 · Web Research Integration	AI 2.0		C-46/v.research-depth, C-43 prose
10 · ChatGPT & Claude MCP Bridge	AI 2.0					C-91/v.mcp-section, C-92, C-90/v.mcp-token-row

3.1What this heatmap reveals

Design editor is the most-touched surface — 5 of 10 features extend it (Image Manipulation, Dream Lab, Conversational Editing, Magic Layers's downstream, Stickers). This is consistent with Phase 1's stated goal: close the Canva round-trip happens at the Design step.
Sidebar + Settings is the second-most-touched — 4 features (Memory, Live-Context Connectors, MCP Bridge, partial Brand Voice broadcast) land there. The settings popover (C-91) becomes the operator-facing config hub.
Brand Kit modal receives just 1 primary extension (Brand Voice 2.0) — correct, because Brand Kit is already mature in the baseline. Phase 1 deepens it, doesn't reshape it.
Plan composer receives 3 primary extensions (Magic Layers ingestion, Live-Context Connectors banner, Memory chips) — these are the "what to consider before generating" surface.
Strategy panel gets 1 primary extension (Web Research depth field, #9). Confirms the strategy panel is a settled pattern; new fields slot in via C-46/v.* variants.
Only 1 genuinely new C-ID (C-97 image manipulation popover, for feature #1). Every other feature decomposes into existing primitives.

Heatmap method: Each cell shows the primary C-XX reuse + any /v.label variants introduced. Bold + heavy-fill cells = primary surface. Light-fill cells = secondary touchpoint. Empty cells = feature does not touch that surface. Full per-feature decomposition in Sections 4 (Plan-step) + 5 (Design-step).

Section 4 of 7 · Plan step

5 Phase 1 features that extend the Plan step

Plan step in the 7-phase JTBD = "Pick the doctype, choose a template, define intent." These 5 features deepen the planning surface (composer, strategy panel, sidebar, settings) so the AI has the brand voice, memory, live context, and research it needs before any pixel is generated. Includes load-bearing wireframes W1 (Plan composer) and W3 (Brand Kit Brand Voice 2.0).

Features 05, 06, 07, 09, 10

Primary surfaces: Composer · Sidebar · Settings · Brand Kit

Brand Voice 2.0 + Brand Intelligence

Design step · AI / AI 2.0 layer · Primary surface: Brand Kit modal · Secondary: composer banner · Cross-channel: Full / Full / Full

What it does. Persists named brand-voice profiles (Default, Holiday, Launch, ...) inside the Brand Kit so AI generations can be tuned per-campaign without losing the master brand. "Brand Intelligence" auto-extracts tone, voice, do's-and-don'ts from a URL into editable fields. A broadcast banner appears on the Email tab when Brand Kit changed since last visit, with a one-click "Update all old templates" CTA.

Wireframe W3 · Brand Kit modal · Brand Voice 2.0 (the load-bearing mockup for this feature)

mcds frame · rendered in Freddie tokens

My Business

Logos

Colors

Fonts

Buttons

Brand Voice C-89

Social Links

Brand Voice 2.0 C-89/v.profile-picker

Save and switch between brand-voice profiles. AI generations will use the active profile by default.

Active profile

Default Holiday Launch + New profile

Personality

Warm, confident, direct

Formality (0–100)

50 · conversational

CTA style

Action verbs first · "Get yours" not "Click here"

Headline style

Sentence case, no exclamation marks

Brand Intelligence C-89 auto-extract Re-scan website →

Auto-detected from your URL last week: Tone warm + confident · Voice first-person plural · Avoid jargon, em-dashes · Sentence length 8–18 words avg

12 drafts use your previous voice profile. Update them to the latest Default voice in one pass? C-23/v.brand-update-broadcast

Component breakdown

Affordance	Maps to	Reuse / Variant
Profile picker (radio group)	`C-89/v.profile-picker`	Variant · radio-group molecule rendered inside C-89 brand voice composite
Brand Intelligence auto-detected card	`C-89` (existing field)	Reuse · rendered as a new row inside the existing composite (no new shape)
"Re-scan website" link	`C-83 URL importer`	Reuse · same URL importer modal, re-entered from this surface
"12 drafts" broadcast banner on Email tab	`C-23/v.brand-update-broadcast`	Variant · brand-context banner with broadcast state (count + CTA)
"Update all 12" primary CTA	`C-53 Create email CTA`	Reuse · same teal pill button

State delta vs baseline

Drafts now carry a brandVersion field; banner shows when current Brand Kit > draft's version
Banner has 3 states: dismissed (user X'd it) · acted-on (clicked Update all) · never-shown (drafts all current)
Profile picker has 3+ states: built-in Default + user-defined profiles (Holiday, Launch, etc.) + add-new

Channel parity

Email	SMS	WhatsApp
Full	Full	Full

All three channels generate copy via AI, so brand voice profiles + broadcast applies uniformly. SMS / WhatsApp use the same profile via the channel-specific composer.

Mailchimp Memory · Living Memory

Plan step · AI 2.0 layer · Primary surface: Sidebar (memory drawer) · Secondary: composer chip + strategy panel chip · Cross-channel: Full / Full / Full

What it does. AI learns the team's style and preferences across recurring campaigns and stores them as durable "memories." A new sidebar entry "Things I remember" opens a memory drawer (reusing the Brand Kit modal's left-nav pattern). Memory recall surfaces as a chip in the composer ("🧠 Use last week's launch tone") and as a chip inside the strategy panel header ("Drawing on 12 memories").

Wireframe W1a · Plan composer Email tab with memory chip + connector banner (load-bearing mockup)

mcds frame · Email tab composer extended for Phase 1

Generate emails with Mailchimp AI

Turn ideas into ready-to-send campaigns.

Describe the email you want…

↳ Create a welcome email for new subscribers C-25 ↳ Design a flash sale promotion email ↳ Build a monthly newsletter

🧠 Use last week's launch tone C-25/v.memory 🧠 Customers respond best to social-proof framing 🧠 Continue the "Spring Refresh" series

Memory drawer (sidebar) wireframe (ASCII)

┌─── Sidebar (expanded, 240px) ──── [C-9] ────┐
│ 🐵 Freddie · home   [×]                      │
│                                              │
│ [+ New]                                      │
│                                              │
│ TODAY                                        │
│   Welcome email for SS '26                   │
│   Flash sale draft v3                        │
│                                              │
│ YESTERDAY                                    │
│   Welcome-series experiment                  │
│                                              │
│ THINGS I REMEMBER [12 facts] →  [NEW]  ◀── C-11/v.memory-entry
│                                              │
│ ⚙ Prototype settings                         │
│ 🎨 Brand & business context                  │
└──────────────────────────────────────────────┘
        ↓ clicking opens memory drawer
┌─── Things I remember (modal) [C-82/v.memory-drawer] ────┐
│ Brand voice    │  Recently saved memories               │
│ Audience       │                                        │
│ Style ←active  │  · Hero CTAs work best in active voice │
│ Cadence        │  · Tuesday 10am AEST highest engagement│
│ Performance    │  · Customers respond to social proof   │
│ Inventory      │  · "Spring Refresh" is the launch tag  │
│                │                                        │
│ + Add a memory │  [Edit]  [Forget this]                 │
└──────────────────────────────────────────────────────────┘

Component breakdown

Affordance	Maps to	Reuse / Variant
Memory recall chip in composer	`C-25/v.memory`	Variant · quick-prompt chip with 🧠 glyph instead of ↳; same shape, same hover, same lv6 radius
"Things I remember" sidebar entry	`C-11/v.memory-entry`	Variant · conversation-list item with count badge + "NEW" tag
Memory drawer (modal)	`C-82/v.memory-drawer`	Variant · Brand Kit modal left-nav reused with 6 memory categories
"Drawing on N memories" chip in strategy panel header	`C-45 header` + `C-25/v.memory`	Reuse · status chip rendered inside existing header bar
"+ Add a memory" affordance	`C-10 + New button`	Reuse · same primary CTA pattern from sidebar

State delta vs baseline

Sidebar gains a "Things I remember" entry below conversation list, persists across sessions
Composer gains a second chip row (memory chips) below the standard quick-prompt chips — only shows if memories exist for the active channel + brand profile
Strategy panel header shows memory-count chip when generation drew on memories; clicking it opens the memory drawer scrolled to the recalled items
Each memory has states: fresh (just learned) · used (applied recently) · stale (not used in 90d) · forgotten (user dismissed)

Channel parity

Email	SMS	WhatsApp
Full	Full	Full

Memory is channel-agnostic by design. Some memories may be channel-tagged ("Tuesday 10am works best for SMS"), but the recall chip surfaces apply universally.

Live-Context Connectors

Plan step · AI 2.0 layer · Primary surface: composer banner + Prototype settings · Cross-channel: Full / Full / Full

What it does. Enable Slack, Drive, Notion, Zoom, Calendar connectors in Prototype settings; once enabled, AI pulls live context (latest launch brief in Notion, this week's marketing standup notes in Slack) directly into the campaign prompt. The composer's existing brand banner extends to show which sources are feeding the AI right now with a "Manage sources" link.

Wireframe W1b · Live-context banner already shown in W1a above (feature 06). Settings popover wireframe below (ASCII).

┌─── Prototype settings popover [C-91] ─────────────────────────┐
│ EXPERIENCES                                                    │
│   SMS AI                              [●—] on                  │
│   WhatsApp AI                         [●—] on                  │
│   Campaign AI                         [●—] on                  │
│                                                                │
│ LIVE-CONTEXT CONNECTORS  [NEW]  ◀── C-91/v.connector-section   │
│   ▣ Slack         last sync 2m ago    [●—] on  [C-92/v.connector-toggle]
│   ▣ Google Drive  last sync 11m ago   [●—] on                  │
│   ▣ Notion        last sync 3m ago    [●—] on                  │
│   ▣ Zoom          not connected       [—○] off [Connect]       │
│   ▣ Calendar      not connected       [—○] off [Connect]       │
│                                                                │
│ DISPLAY                                                        │
│   Dark mode                           [—○] off                 │
│                                                                │
│ EXPOSE MAILCHIMP AS MCP SERVER  [NEW]  ◀── C-91/v.mcp-section  │
│   (see feature 10)                                             │
│                                                                │
│ ─────────────────────────────                                  │
│ [Reset brand kit]                                              │
└────────────────────────────────────────────────────────────────┘

Connector OAuth + sync flow (ASCII state diagram)

[connector OFF] ── click Connect ──→ [browser OAuth] ──→ [granted]
                                                              │
                                                              ↓
[granted] ── auto-sync starts ──→ [syncing] ──→ [sync complete · last sync = now]
                                                              │
                                                              ↓ (next composer visit)
                                                  C-23/v.live-context-banner
                                                  "Pulling from Slack #marketing-launches"

Component breakdown

Affordance	Maps to	Reuse / Variant
"Live-Context Connectors" section in settings	`C-91/v.connector-section`	Variant · new labeled section inside settings popover; same internal layout as Experiences section
Per-connector toggle row	`C-92/v.connector-toggle`	Variant · experience-toggle molecule with service-logo (vendor SVG) + last-sync timestamp
"Connect" button for OAuth-required connector	`C-66 Send a test email` button pattern	Reuse · same secondary button style
Live-context banner on composer ("Pulling from Slack ...")	`C-23/v.live-context-banner`	Variant · brand-context banner extended to list source list + "Manage sources" link
Sync-in-progress indicator	`C-42 Building spinner`	Reuse · snowflake spinner from chat thread, recolored to grey for non-AI use? No — keep teal per R6 to mark AI-related sync

State delta vs baseline

Settings popover grows from 1 section (Experiences) to 3 sections (Experiences + Connectors + MCP)
Composer's brand banner has 2 new states: brand-only (existing) · brand + N connectors (new, lists sources)
Each connector has 4 states: not-connected · connecting · connected-syncing · connected-ready

Channel parity

Email	SMS	WhatsApp
Full	Full	Full

Connectors are workspace-level, channel-agnostic. The live-context banner renders identically on Email / SMS / WhatsApp composer surfaces.

Web Research Integration

Plan step · AI 2.0 layer · Primary surface: strategy panel · Cross-channel: Full / Full / Full

What it does. Before generating an email, AI searches the web and brings back structured competitive / seasonal / trend insights. A new "Research depth" field in the strategy panel lets the user pick None / Quick (under 10s) / Deep (under 60s). The chat thread shows research findings as a prose response with citations rendered using the existing AI disclaimer pattern.

Wireframe (ASCII) · Strategy panel with new "Research depth" field

┌─── Strategy panel (right pane) ── Ready ── × ─────────┐
│  [C-45 header]                                          │
│  Email strategy                                         │
│  Welcome to the community                               │
│                                                         │
│  Goal              ▾  Retention: Customer loyalty  [C-46]
│  Date                 _________________  📅       [C-47]
│  Recipients        ▾  New email subscribers (2,150)[C-48]
│                                                         │
│  Featured promo    ▾  Welcome guide + bonus       [C-49]
│  Focus metric      ▾  Revenue                     [C-50]
│                                                         │
│  Research depth    ▾  Quick (under 10s)      ◀── NEW   │
│                       [None]                           [C-46/v.research-depth]
│                       [Quick · under 10s]              │
│                       [Deep · under 60s · best]         │
│                                                         │
│  Featured products    [Product 1] [Product 2] [+]  [C-51]
│  Visual style         ▣ ▣ ▣ ▣                     [C-52]
│                                                         │
│  ─────────────────────────────                          │
│  [✦ Create email →]                                 [C-53]
└─────────────────────────────────────────────────────────┘

         after Create email click (chat thread):
┌─── Assistant message [C-43] ────────────────────────────┐
│ ✦ Email strategy: Version 1                  [Ready]    │
│   Welcome to the Community                              │
│                                                         │
│ I scanned 12 sources on welcome-email best practices    │
│ this week. Three highest-signal findings I'm using:     │
│                                                         │
│ 1. Q3 2025 industry-avg open rate for first welcome     │
│    email = 47% (your benchmark target).                 │
│ 2. Top-performing welcome emails reference user's       │
│    signup source within the first 3 lines.              │
│ 3. Including a single CTA (vs 2+) lifts CTR ~15%.       │
│                                                         │
│ Sources: 12 indexed pages · see citations →             │
│ ⚠ Intuit Intelligence can make mistakes... [C-55]       │
└─────────────────────────────────────────────────────────┘

Component breakdown

Affordance	Maps to	Reuse / Variant
"Research depth" select field	`C-46/v.research-depth`	Variant · same select pattern as Goal/Focus-metric, new label + 3 options
Research findings prose in chat	`C-43 assistant message body`	Reuse · same prose pattern, citations rendered as inline numbered superscripts
"see citations →" link	`C-65 Edit Brand Kit link` pattern	Reuse · same footer-link style; opens citations modal
Research-pending state on Create email CTA	`C-53` with C-42 spinner	Reuse · CTA disabled during research, building spinner replaces the arrow

State delta vs baseline

Strategy panel adds one new field (Research depth); panel height grows by ~40px
Create email CTA has new state: research-pending (disabled, spinner inline) for Quick/Deep selections
Chat thread shows research-findings response before the email-strategy response (sequential), so the user sees the data the AI used

Channel parity

Email	SMS	WhatsApp
Full	Full	Full

Web research is content-agnostic. SMS and WhatsApp strategies benefit equally from competitive / seasonal context.

ChatGPT & Claude MCP Bridge

Plan step · AI 2.0 layer · Primary surface: Prototype settings · Cross-channel: Full / Full / Full (workspace-level)

What it does. Expose Mailchimp campaign creation as an MCP server so a marketer working in ChatGPT, Claude, or Cursor can hand off "draft a welcome email for my MC audience X" to Mailchimp and pull back the rendered draft. Enable via a new section in Prototype settings, generate a bearer token, copy to clipboard. No new end-user surface in the campaign builder — it's an operator/admin affordance.

Wireframe (ASCII) · MCP section in Prototype settings

┌─── Prototype settings popover [C-91] ─────────────────────────┐
│ (Experiences + Connectors sections above)                      │
│                                                                │
│ EXPOSE MAILCHIMP AS MCP SERVER  [NEW]  ◀── C-91/v.mcp-section  │
│   Let ChatGPT, Claude, or Cursor call Mailchimp directly.      │
│                                                                │
│   MCP server                          [●—] enabled             │
│                                       [C-92]                   │
│                                                                │
│   Bearer token                                                 │
│   ┌──────────────────────────────────────────────────────┐    │
│   │ mc_live_a8f3b9c2e7d6f1...    👁  📋               │    │
│   │ [C-90/v.mcp-token-row: monospace + eye + copy]     │    │
│   └──────────────────────────────────────────────────────┘    │
│                                                                │
│   [Regenerate token]   [Revoke all]                            │
│   Last used 4m ago by Claude 4.5 (Cursor)                      │
│                                                                │
│   📖 Connection guide → (deep-link to Help Center)            │
└────────────────────────────────────────────────────────────────┘

Component breakdown

Affordance	Maps to	Reuse / Variant
"Expose Mailchimp as MCP server" section	`C-91/v.mcp-section`	Variant · new labeled section in settings popover, same layout as Experiences/Connectors
MCP server enable/disable toggle	`C-92 experience toggle`	Reuse · identical toggle molecule
Bearer token reveal row (monospace + eye + copy)	`C-90/v.mcp-token-row`	Variant · social-link input row with monospace font + eye/copy buttons
"Regenerate token" / "Revoke all" buttons	`C-94 Reset brand kit`	Reuse · same secondary button style as the Reset button below
"Connection guide →" link	`C-55 AI disclaimer link`	Reuse · same external link style

State delta vs baseline

Settings popover grows from 2 sections (now 3 with Connectors) to 3 sections (Experiences / Connectors / MCP) · popover height grows by ~120px
New workspace-level state: MCP-server-enabled · bearer token has hidden / revealed / copied states
Token last-used metadata persists, surfaces inline ("4m ago by Claude 4.5 (Cursor)")

Channel parity

Email	SMS	WhatsApp
Full	Full	Full

MCP exposure is workspace-level — once enabled, all three channels are addressable via the external client. No per-channel toggle needed.

Section 4 source: Features 05, 06, 07, 09, 10 from Canva-gap Phase 1 roadmap. Baseline components from Lens 3 Component × JTBD Matrix (96 IDs). Variant naming follows policy R3 from Section 2. Wireframe W1 (composer) rendered as HTML+CSS in the .fdpx-mcds-frame scope; W3 (Brand Kit Brand Voice 2.0) rendered the same way; remaining wireframes are ASCII per the user-approved Phase 1 depth.

Section 5 of 7 · Design step

5 Phase 1 features that extend the Design step

Design step in the 7-phase JTBD = "Lay out blocks, add content, apply brand identity, ensure mobile responsiveness." These 5 features close the round-trip to Canva by keeping image editing, design iteration, layered reconstruction, and asset generation inside the Freddie editor. Includes load-bearing wireframe W2 (Design editor with image-selected popover + chat preview-diff).

Features 01, 02, 03, 04, 08

Primary surface: Design editor · canvas + chat + manual rail

AI Image Manipulation Suite

Design step · AI layer · Primary surface: editor canvas (in-context popover) · The most-requested Canva-parity feature · Cross-channel: Full / N/A (no images in SMS) / Full

What it does. Right-click (or selection-tap) on any <img> block inside the email canvas reveals 4 in-context AI actions: brush-replace (paint over a region, regenerate that region), subject-extract (cut subject from background), frame-extend (extend canvas in any direction with generated content), themed text/shape effects (apply Brand-Kit-aware overlays). The popover is anchored to the selected element; the result replaces the original image in-place after Accept.

Wireframe W2 · Design editor with image-selected state + new popover (load-bearing mockup)

mcds frame · canvas + chat split-view, image clicked, popover open

Friday, May 16

✦ Email strategy: Version 1 Ready

Built a warm welcome with social-proof hero. Click any section to refine, or describe changes here.

You: "Make the hero more professional, B2B SaaS audience"

→

Hero restyled C-43/v.preview-diff

Ask anything…

Swap hero Shorten copy Add urgency C-70/v.refine-chips

C-61 hero selected

Aa Edit theme C-62

Mode radio C-57 (✦ AI / ✎ manual) and viewport radio C-58 omitted from this crop for clarity; they remain in the editor top bar as in the baseline.

Component breakdown

Affordance	Maps to	Reuse / Variant / New
Element-selection state on canvas	`C-61 iframe canvas`	Reuse · selection now becomes a first-class state (today the canvas has no select state)
Image manipulation popover	`C-97 (NEW)`	New C-ID · variant class of `C-95` theme popover but anchored to in-canvas elements instead of the floating Aa button. The only genuinely new shape in the spec.
4 sub-actions (brush, extract, extend, effects)	`C-25 quick-prompt chip` pattern	Reuse · styled as menu rows in the popover (same hover pattern)
"Open in Dream Lab" deep-link	`C-65 Edit Brand Kit link`	Reuse · same teal footer-link style; routes to feature 02
"Edit this image with AI" chip in C-70	`C-70 follow-up toolbar`	Reuse · new chip text using existing chip primitive
Image-processing spinner	`C-42 building spinner`	Reuse · same snowflake-spinner overlay during regenerate

Rationale for the new C-97

Every other Phase 1 feature decomposes into existing primitives or variants. Image Manipulation is the exception because no baseline component anchors to an in-canvas element. The closest baseline pattern is C-95 Theme editor popover (floating, anchored to the Aa button below the canvas). C-97 is the same popover primitive (same elevation L2, same lv3 radius, same content style), but its anchor target is an element inside the iframe. This warrants a new C-ID under R2/R3 because the interaction model is materially different (selection-driven, not button-driven), even though the visual primitive is reused.

State delta vs baseline

Canvas (C-61) introduces a selection state for the first time (focus ring + popover anchor)
Popover (C-97) has states: open · action-pending (one of 4 sub-actions clicked) · regenerating · result-staged (preview before Accept)
Mode radio (C-57) gets an additional implicit state: AI mode + image-selected — the floating Aa stays hidden when an element is selected (to make room for C-97)

Channel parity

Email	SMS	WhatsApp
Full	N/A (no images in SMS)	Full (image messages)

SMS is text-only by RFC; the SMS tab's design editor has no image blocks to manipulate. WhatsApp supports image messages so the full C-97 popover renders identically there.

Dream Lab — AI image generation with style references

Design step · AI layer · Primary surface: manual rail 4th tab "Image" · Cross-channel: Full / N/A / Full

What it does. High-fidelity AI image generation from a text prompt plus an uploaded brand-style reference image. The user picks aspect ratio (1:1 / 4:5 / 16:9 / 9:16), style strength (slider), and one of 4 style presets (editorial, product, lifestyle, illustration). Result drops into the canvas as a new image block.

Wireframe (ASCII) · Dream Lab panel inside manual-mode rail

┌─── Manual mode left rail [C-71] ────────────┐
│  📦 Blocks                                   │
│  ▦ Sections                                  │
│  🎨 Styles                                   │
│  ✨ Image  [NEW] ◀── C-71/v.image-tab        │
└──────────────────────────────────────────────┘
       ↓ clicking "Image" opens Dream Lab panel
┌─── Dream Lab [C-19 prompt + C-20 attach + C-21 sliders] ────┐
│                                                              │
│ Describe the image                              [C-19]      │
│ ┌──────────────────────────────────────────────────────┐    │
│ │ A confident professional holding a coffee cup,       │    │
│ │ window light, soft focus background                  │    │
│ └──────────────────────────────────────────────────────┘    │
│                                                              │
│ [+ Style reference image] [C-20 attach]                     │
│   └─ uploaded: brand-shoot-2024-q3.jpg  [×]                  │
│                                                              │
│ Style strength       ●━━━━━━━━━━━━━━━○  72%  [C-21 sliders]│
│                                                              │
│ Aspect ratio   ◯ 1:1   ⦿ 4:5   ◯ 16:9   ◯ 9:16              │
│                       [C-58/v.aspect]                        │
│                                                              │
│ Style preset                                                 │
│   [↳ Editorial] [↳ Product] [↳ Lifestyle] [↳ Illustration]  │
│                        [C-25 chips]                          │
│                                                              │
│ ─────────────────────                                        │
│ [✦ Generate image]                              [C-53 CTA]   │
└──────────────────────────────────────────────────────────────┘
       ↓ result preview appears here once Generate completes
[4 result thumbnails appear inline]  ─ pick one to drop in canvas
[👍 / 👎 / ↻ Regenerate]  [C-44 feedback row]

Component breakdown

Affordance	Maps to	Reuse / Variant
"Image" tab in manual rail	`C-71/v.image-tab`	Variant · left-rail tab pattern, 4th tab below Blocks/Sections/Styles
Prompt textarea	`C-19`	Reuse · same composer textarea, relabeled "Describe the image"
Style-reference attach	`C-20`	Reuse · same + attach button, file-picker only
Style-strength slider	`C-89 brand voice formality slider`	Reuse · same 0–100 slider primitive
Aspect ratio segmented control	`C-58/v.aspect`	Variant · viewport-radio molecule with 4 labels (1:1 / 4:5 / 16:9 / 9:16) instead of desktop/mobile/split
Style preset chips	`C-25`	Reuse · same quick-prompt chip with ↳ glyph
Generate CTA	`C-53 Create email CTA`	Reuse · teal pill, label "✦ Generate image"
Result-thumbnail picker	`C-52 visual style picker`	Reuse · same 3-4-swatch picker pattern
Feedback row on result	`C-44`	Reuse · Copy/Like/Dislike/Regenerate

State delta vs baseline

Manual rail (C-71) grows from 3 tabs to 4 tabs (Blocks / Sections / Styles / Image)
Dream Lab states: empty (no prompt yet) · generating (spinner) · 4-result-grid · selected-result-in-canvas
Generated image becomes a regular C-61-canvas-image-block; C-97 popover (feature 01) applies to it

Channel parity

Email	SMS	WhatsApp
Full	N/A	Full

Conversational Design Editing

Design step · AI 2.0 layer · Primary surface: chat composer (C-54) + assistant message body (C-43) · Cross-channel: Full / Full / Full

What it does. The existing post-generation chat composer (C-54 "Ask anything…") becomes the primary edit channel for the entire builder. Plain-English instructions like "Make the hero more professional," "Swap the hero," "Shorten body 30%," "Add urgency" are parsed and applied as scoped changes. Result is rendered as a before→after preview-diff strip inside the assistant message (using thumbnails of the affected region). User clicks Accept or Regenerate; manual edits are preserved.

Wireframe W2b · The preview-diff is already shown in feature 01's W2 mockup above (chat side, "Hero restyled" row). Below: the conversational-editing intent map.

User intent (plain English)         →  Scoped change applied
───────────────────────────────────    ────────────────────────────────
"Make the hero more professional"   →  Theme tweak  + copy rewrite (hero only)
"Swap the hero"                     →  Section replace (Hero section, alternative)
"Shorten copy 30%"                  →  Copy compression (body sections)
"Add urgency"                       →  Subject + hero copy rewrite + CTA verbs
"Make it feel like our spring launch" → Style transfer (uses Memory feature 06)
"Use Bold Product Cardstyle layout"  → Section swap (manual mode sections)
                                       [reuses C-75 Sections panel content]

Component breakdown

Affordance	Maps to	Reuse / Variant
Chat composer (post-generation)	`C-54`	Reuse · verbatim; the entire feature is scope-expansion of what intents it parses
Assistant message body	`C-43/v.preview-diff`	Variant · existing prose with embedded before→after thumbnail strip (uses `C-28` thumbnail primitive)
Follow-up chips with new text	`C-70/v.refine-chips`	Variant · existing chip toolbar, new content: "Swap hero" / "Make professional" / "Shorten copy" / "Add urgency"
Accept / Regenerate buttons	`C-53 + C-44`	Reuse · primary teal pill (Accept) + Regenerate from feedback row
Like / Dislike feedback	`C-44`	Reuse · existing 👍/👎 feedback row, signals to AI which intents land

State delta vs baseline

Chat thread gains a new state: staged-change (between AI proposal and user Accept) — preview-diff visible, canvas un-touched until Accept
Accept commits the change to the canvas iframe; Regenerate rolls the staged change back and re-runs the prompt
Manual edits made between AI prompts are preserved — the staged-change applies as a layered patch, not a full canvas replace

Channel parity

Email	SMS	WhatsApp
Full	Full (text-only edits)	Full

SMS conversational editing scopes to text-only changes ("shorten 30%," "more urgent," "change CTA verb"). Image-related intents are rejected on SMS with a hint ("SMS doesn't support images — try the WhatsApp tab").

Magic Layers — flat to editable

Design step · AI 2.0 layer · Primary surface: composer attach + ingestion banner · Cross-channel: Full / N/A / Partial

What it does. Drop a flat image / PDF / HTML file into the composer's existing + attach button. AI detects sections and reconstructs them as editable layered blocks. A progress banner shows ingestion ("Reading sections… 3 detected: Header, Hero, Footer"). User clicks "Open as editable email" and the result populates as draggable blocks in the manual editor.

Wireframe (ASCII) · Magic Layers ingestion flow

┌─── Email tab composer [C-16] ───────────────────────────────────┐
│                                                                  │
│ Describe the email…                                        │
│                          [+] ←── drop a flat file (jpg/pdf/html) │
│                          [C-20]                                  │
└──────────────────────────────────────────────────────────────────┘
                              ↓ drop detected
┌─── Ingestion banner [C-23/v.ingestion-progress] ────────────────┐
│ ✦ Reconstructing layers from "competitor-promo.jpg"             │
│   ●●●●●●●●●●○○○ 72%   3 sections detected                       │
│   ✓ Header   ✓ Hero   ⌛ Body   ⋯ Footer (next)                  │
└──────────────────────────────────────────────────────────────────┘
                              ↓ ingestion complete
┌─── Assistant message [C-43] ────────────────────────────────────┐
│ ✦ Magic Layers · 7 editable blocks                  [Ready]     │
│   Reconstructed from competitor-promo.jpg                       │
│                                                                 │
│ I extracted these sections: 1 Header, 1 Hero, 2 Body, 1 Coupon, │
│ 1 Product Grid, 1 Footer. Brand Kit applied: your logo replaced │
│ theirs, colors normalized to teal/cream palette.                │
│                                                                 │
│ [Open as editable email →]              [C-53/v.open-as-editable]
│ [👍 / 👎 / Regenerate]   [C-44]                                  │
└─────────────────────────────────────────────────────────────────┘
                              ↓ click "Open as editable email"
[Manual mode opens with 7 blocks pre-populated in C-61 canvas]
[User can now drag, edit, or run feature 03 conversational editing]

Component breakdown

Affordance	Maps to	Reuse / Variant
File drop on attach button	`C-20`	Reuse · existing + attach button, accepts jpg/pdf/html in addition to existing types
Ingestion progress banner	`C-23/v.ingestion-progress`	Variant · brand-context banner with progress bar + per-section status
Ingestion building spinner	`C-42`	Reuse · snowflake spinner in banner
"Open as editable email" CTA	`C-53/v.open-as-editable`	Variant · primary CTA with different label; routes to manual mode pre-populated
Reconstructed blocks in canvas	`C-72 content blocks grid`	Reuse · blocks from Sections panel populate the canvas as if user dragged them in
Section-detection assistant prose	`C-43`	Reuse · standard prose response listing detected sections

Note on "zero genuinely new C-IDs"

Magic Layers is the cleanest Phase 1 feature — it composes entirely from existing primitives and 2 variants. No new shape needed. The ingestion banner is conceptually new (progress + per-section status) but reuses C-23's shape with state extensions.

State delta vs baseline

Composer attach (C-20) gains ingestion-pending state (file dropped, waiting to start)
Banner (C-23/v.ingestion-progress) has states: idle · reading · %-progress · complete · failed
Flow routes Cold-start → Magic-Layers-ingestion → Manual-mode-pre-populated (skips strategy panel)

Channel parity

Email	SMS	WhatsApp
Full	N/A (no flat artifacts to ingest)	Partial (image attach only, no PDF/HTML)

AI Sticker / GIF / Animation Generator

Design step · AI layer · Primary surface: manual rail 5th tab "Stickers" · Cross-channel: Full / N/A / Full

What it does. Generate branded sticker packs (mascot, holiday, reaction sets) and one-click animations for hero blocks. Lives as a 5th tab in the manual mode left rail alongside Blocks / Sections / Styles / Image. Generated stickers persist in Brand Kit as a new asset type, addressable from any future campaign.

Wireframe (ASCII) · Stickers tab in manual rail

┌─── Manual mode left rail [C-71] ───────────────────────────────┐
│  📦 Blocks                                                      │
│  ▦ Sections                                                     │
│  🎨 Styles                                                      │
│  ✨ Image                  ◀── feature 02                       │
│  🎭 Stickers  [NEW]        ◀── C-71/v.stickers-tab              │
└────────────────────────────────────────────────────────────────┘
       ↓ clicking "Stickers" opens generator
┌─── Stickers panel ──────────────────────────────────────────────┐
│ Describe the sticker pack                          [C-19]      │
│ ┌──────────────────────────────────────────────────────────┐    │
│ │ A friendly mascot variant for our spring launch          │    │
│ └──────────────────────────────────────────────────────────┘    │
│                                                                  │
│ Style preset                                                     │
│   [↳ Branded mascot]  [↳ Holiday pack]  [↳ Reaction set]        │
│   [↳ Hero animation]                                             │
│                       [C-25/v.sticker-prompts]                   │
│                                                                  │
│ [✦ Generate sticker pack]                            [C-53 CTA] │
│                                                                  │
│ ───────────────────────────────                                  │
│ Recent packs                                                     │
│   [😊][😍][🎉][💡] Spring '26 mascot · 8 stickers      [Use]    │
│   [❤️][🔥][⭐][✨] Reaction set v2 · 4 stickers         [Use]    │
│                              [C-72 blocks grid]                  │
└──────────────────────────────────────────────────────────────────┘

Component breakdown

Affordance	Maps to	Reuse / Variant
"Stickers" tab in manual rail	`C-71/v.stickers-tab`	Variant · 5th tab using the same tab molecule
Prompt textarea	`C-19`	Reuse · existing composer textarea, relabeled
Style preset chips	`C-25/v.sticker-prompts`	Variant · quick-prompt chip text variants (Branded mascot / Holiday pack / Reaction set / Hero animation)
Generate CTA	`C-53`	Reuse · teal pill, label "✦ Generate sticker pack"
Sticker pack tile grid	`C-72 blocks tile grid`	Reuse · same drag-drop tile primitive as Blocks panel
"Use" button on saved pack	`C-66 Send a test email`	Reuse · secondary button style; inserts pack into canvas

State delta vs baseline

Manual rail grows from 4 tabs (with feature 02) to 5 tabs (Blocks / Sections / Styles / Image / Stickers)
Brand Kit assets gain a new type: sticker-pack · surfaces in Logos section? — no, surfaces in a new "Stickers & assets" sub-section (also a C-82/v.stickers-bk-tab variant if it lands; out of Phase 1 scope, addressable from manual rail only for now)
Generated sticker becomes a regular C-72 block; can be dragged into Hero, Body, or Footer sections

Channel parity

Email	SMS	WhatsApp
Full (animated GIF blocks)	N/A (no media in SMS)	Full (sticker messages native to WhatsApp)

Section 5 source: Features 01, 02, 03, 04, 08 from Canva-gap Phase 1 roadmap. Wireframe W2 (Design editor with image-selected popover + chat preview-diff) rendered as HTML+CSS in .fdpx-mcds-frame. The only genuinely new C-ID in the entire spec is C-97 Image manipulation popover — rationale: it's a popover anchored to an in-canvas element, which has no baseline analog. Every other feature decomposes into existing primitives or registered variants.

Section 6 of 7 · The system view

Cross-cutting concerns

Four system-level views that span all 10 features: (1) the full 10×3 channel parity matrix, (2) flow deltas to the 5 baseline task flows, (3) a complete inventory of new states introduced, (4) the registered new C-ID + variant list, (5) token compliance attestation.

10 features · 3 channels · 5 flows

1 new C-ID · 18 variants · 12 new states

6.1Channel parity matrix — full 10×3

Rule R4 from Section 2: each feature gets an honest cell per channel. Full = ships unchanged · Partial = ships with explicit scope-down · N/A = physics constraint, not a roadmap item.

Feature	Layer	Email	SMS	WhatsApp
01 AI Image Manipulation Suite	AI	Full	N/A · no images in SMS RFC	Full · image messages
02 Dream Lab	AI	Full	N/A · text-only channel	Full
03 Conversational Design Editing	AI 2.0	Full	Full · text-only edit intents	Full
04 Magic Layers	AI 2.0	Full	N/A · no flat artifacts to ingest	Partial · image attach only, no PDF/HTML
05 Brand Voice 2.0 + Brand Intelligence	AI / AI 2.0	Full	Full · tone applies to all copy	Full
06 Mailchimp Memory	AI 2.0	Full	Full	Full
07 Live-Context Connectors	AI 2.0	Full	Full	Full
08 AI Sticker / GIF / Animation	AI	Full · animated GIFs	N/A · no media in SMS	Full · sticker messages native
09 Web Research Integration	AI 2.0	Full	Full	Full
10 ChatGPT & Claude MCP Bridge	AI 2.0	Full	Full · workspace-level	Full

Coverage roll-up: 30 total cells · 23 Full · 1 Partial (feature 04 on WhatsApp) · 6 N/A. SMS is the most-constrained channel because of its text-only physics; WhatsApp benefits from media support and lands as Full for 8 of 10 features.

6.2Flow deltas — which of the 5 baseline task flows change

Source: Lens 2 baseline task flows from Design Audit Tab 18.

Baseline flow	Affected by features	New states / steps introduced
A · Cold start First-time signup → first send	05 (Brand Voice broadcast) · 06 (Memory recall) · 09 (Web Research)	Memory-recall-on-first-visit (returning users) · brand-broadcast-banner state · web-research-pending state delays Create CTA
B · Power user Recent → resume → refine	04 (Magic Layers) · 10 (MCP Bridge)	Magic-Layers-ingestion state on composer attach · MCP-server-enabled state on workspace
C · Brand Kit loop-back Mid-flow brand setup	05 (Brand Voice 2.0) · 07 (Connectors)	Brand-profile-versioned state · connector-OAuth state · connector-syncing state
D · Refinement Post-generation iteration	01 (Image) · 02 (Dream Lab) · 03 (Conv. Editing) · 08 (Stickers)	Image-selected canvas state · staged-change preview-diff state (between AI proposal & Accept) · sticker-pack state
E · Send Terminal action	(unchanged)	None · Phase 1 does not touch the Send transition. Existing Send-button audience-confirm gap (pre-mortem #4 Critical) remains and should be addressed concurrently per Tab 18 recommendations.

6.3New states inventory

12 new states introduced across Phase 1, grouped by surface.

Surface	State name	Triggered by
Canvas (C-61)	image-selected	Click an image block in canvas → enables C-97 popover anchor (feature 01)
Canvas (C-61)	regenerating (per-element)	C-97 popover action confirmed → snowflake overlay during regen (feature 01)
Chat thread (C-43)	staged-change	AI proposes a refinement → preview-diff visible, canvas untouched until Accept (feature 03)
Composer attach (C-20)	ingestion-pending	Flat file dropped → C-23/v.ingestion-progress banner appears (feature 04)
Brand Kit (C-89)	profile-active	Profile picker radio changed → all future AI gens use this profile (feature 05)
Email tab	brand-broadcast-pending	Brand Kit changed since last visit → C-23/v.brand-update-broadcast banner shows (feature 05)
Drafts	brandVersion mismatch	Draft's brandVersion < current Brand Kit version → counts toward "12 drafts" banner (feature 05)
Sidebar (C-9)	memory-drawer-open	Click "Things I remember" entry → C-82/v.memory-drawer modal opens (feature 06)
Composer (C-16)	memory-chips-visible	Active brand profile has matching memories → C-25/v.memory chips render below standard chips (feature 06)
Settings popover (C-91)	connector-syncing	Connector OAuth granted → snowflake spinner per row until sync complete (feature 07)
Strategy panel (C-46)	research-pending	Research depth = Quick/Deep → Create email CTA disabled, spinner inline (feature 09)
Settings popover (C-91)	mcp-server-enabled	MCP toggle on → bearer-token row visible, token in hidden state until eye toggled (feature 10)

6.4New C-ID + variant register

Per policy R3 from Section 2: variants stay under the parent C-ID with /v.label suffix. The baseline inventory stays at 96; the spec adds 1 genuinely new C-ID (C-97) and 18 variants.

New C-IDs (1)

ID	Name	Parent / closest analog	Rationale for new C-ID
C-97	Image manipulation popover	`C-95 Theme popover`	Same popover primitive (lv3 radius, elevation L2, white bg) but anchored to an in-canvas element via element-selection, not the floating Aa button. The interaction model is materially different (selection-driven, not chrome-driven), so it gets a new C-ID under R2.

Component variants (18) · all under parent C-IDs

Variant ID	Parent	Used by feature	Difference from parent
C-23/v.live-context-banner	C-23 banner	07 Connectors	Extended to list connected sources + "Manage sources" link
C-23/v.ingestion-progress	C-23 banner	04 Magic Layers	Progress bar + per-section detection status
C-23/v.brand-update-broadcast	C-23 banner	05 Brand Voice 2.0	Count badge ("12 drafts") + primary CTA ("Update all 12")
C-25/v.memory	C-25 quick-prompt chip	06 Memory	🧠 glyph instead of ↳ · warm yellow chip background instead of grey-blue
C-25/v.sticker-prompts	C-25	08 Stickers	Text variants: "Branded mascot" / "Holiday pack" / "Reaction set" / "Hero animation"
C-43/v.preview-diff	C-43 assistant message body	03 Conversational Editing	Embedded before→after thumbnail strip (uses C-28 thumbnail primitive)
C-46/v.research-depth	C-46 Goal select	09 Web Research	3-option select: None / Quick / Deep · inline with other strategy fields
C-53/v.open-as-editable	C-53 Create email CTA	04 Magic Layers	Same teal pill, label "Open as editable email →"; routes to manual mode pre-populated
C-58/v.aspect	C-58 Viewport radio	02 Dream Lab	Labels 1:1 / 4:5 / 16:9 / 9:16 instead of desktop/mobile/split · 4-option vs 3
C-70/v.refine-chips	C-70 follow-up toolbar	03 Conversational Editing	New chip text: "Swap hero" / "Make professional" / "Shorten copy" / "Add urgency"
C-71/v.image-tab	C-71 left rail tabs	02 Dream Lab	4th tab "Image" below Blocks/Sections/Styles
C-71/v.stickers-tab	C-71 left rail tabs	08 Stickers	5th tab "Stickers" alongside Image
C-82/v.memory-drawer	C-82 Brand Kit left tab nav	06 Memory	Same left-nav molecule with 6 memory categories instead of 7 brand sections
C-89/v.profile-picker	C-89 brand voice composite	05 Brand Voice 2.0	Profile-picker radio group inserted at top of composite (Default / Holiday / Launch / +)
C-90/v.mcp-token-row	C-90 social link row	10 MCP Bridge	Monospace token field + eye toggle + copy button instead of platform URL input
C-91/v.connector-section	C-91 settings popover	07 Connectors	New labeled section "Live-Context Connectors" inside settings popover
C-91/v.mcp-section	C-91 settings popover	10 MCP Bridge	New labeled section "Expose Mailchimp as MCP server" inside settings popover
C-92/v.connector-toggle	C-92 experience toggle	07 Connectors	Toggle row with vendor logo + last-sync timestamp metadata
C-11/v.memory-entry	C-11 conversation list item	06 Memory	Sidebar entry labeled "Things I remember" with count badge + NEW tag

6.5Token compliance attestation

Every Phase 1 affordance was checked against the rules R1, R5, R6 from Section 2. No new colors, no new fonts, no new radii. Yellow stays as brand cue only. Teal stays as AI primary action.

Affordance	Color used	Token	R1 / R5 / R6 compliant?
All ✦ Generate / Create / Confirm CTAs (every feature)	Teal	`--color-accent-blue #017E89`	✓ Yes · R6
C-23/v.brand-update-broadcast banner alert	Subtle teal background	`--color-accent-blue-light #E0EDFF`	✓ Yes · reuses existing banner token (R1)
C-90/v.mcp-token-row monospace field	Neutral bg + system mono font	`--color-bg-secondary` + `ui-monospace`	✓ Yes · system font already in stack; no new font
C-25/v.memory chip (warm yellow background)	Soft warm bg #FFFBE6	Chip primitive bg variant (within mcds neutral surface palette)	✓ Yes · not the #FFE01B brand stripe; subtle differentiator
Connector vendor logos (Slack, Drive, Notion, etc.)	Vendor SVG, no recolor	n/a · vendor assets	✓ Yes · vendor logos exempt from token rule per industry convention
C-97 popover elevation	Shadow L2	`0 2px 8px 0 rgba(76,85,91,.2)`	✓ Yes · matches C-95 theme popover
Yellow #FFE01B usage	Home top-stripe ONLY (existing C-02)	`--color-action-special-use`	✓ Yes · explicitly never used for any Phase 1 affordance per R5
Destructive actions (none in Phase 1)	n/a	`--color-ui-negative` reserved	✓ Yes · no destructive actions introduced

Section 6 source: Channel parity rules from R4 (Section 2). Flow definitions from Lens 2 baseline task flows. Variant register reflects R3 policy. Token attestation reflects R1 + R5 + R6. The 12 new states inventory is the authoritative list for engineering scope — each maps to a specific surface and trigger.

Section 7 of 7 · Ship checklist

Execution sequence + cross-references

The build sequence to ship Freddie Deepak's Phase 1, the validation gates that block GA, and back-references to the 18-tab brief + 5 design lenses + Canva-gap analysis.

11-step build sequence

Cross-refs: 4 tabs · 5 lenses · 1 site

7.1Build sequence (engineering work order)

Recommended order honors three orchestration moves: (a) ship the lowest-risk Plan-step extensions first to surface the AI's context, (b) ship the chat-side scope expansion before the in-canvas popover, (c) ship the operator-config features (MCP, connectors) before they become end-user-visible.

#	Step	Features	Why this order
1	Connector OAuth + sync infrastructure	07	Foundation for live-context retrieval; nothing else depends on it but feature 07's UX requires it backed
2	Persistent memory store + recall API	06	Same: shared infra used by features 06 and partially 09
3	Web research backend (search + citation extraction)	09	Strategy-panel-side change; reuses C-46 select primitive
4	Brand Voice 2.0 + Brand Intelligence URL extractor	05	Brand Kit extension; ships independent of generation surface
5	MCP server endpoint + bearer-token issuance	10	Operator surface only; no end-user impact until external clients connect
6	Settings popover restructure (3 sections: Experiences / Connectors / MCP)	07, 10	Single shipped layout change consolidates 2 features into the popover
7	Composer + sidebar surface changes (memory chip, live-context banner, memory drawer)	06, 07	End-user-visible Plan-step rollout begins; activates with feature-flag
8	Conversational Design Editing intent expansion + preview-diff in chat	03	Chat-side scope expansion; uses existing C-54 + new C-43/v.preview-diff variant
9	Dream Lab + Stickers tabs in manual mode rail	02, 08	Both are new tabs in C-71; ship together for symmetry
10	Magic Layers ingestion pipeline + composer integration	04	Composer + manual mode integration; cleanest decomposition into existing primitives
11	AI Image Manipulation Suite + C-97 popover (the only new C-ID)	01	Highest-risk: ships last. Requires canvas selection-state work + new popover primitive. Most engineering-heavy.

7.2Validation gates (block GA)

Gate	Check
G1 · C-XX inventory check	Every reference in the live UI traces back to a baseline C-XX ID or a registered `/v.label` variant from Section 6.4. The inventory ceiling stays at 97 (96 baseline + C-97).
G2 · Token compliance check	No new hex values introduced; yellow #FFE01B unused outside the existing Home top-stripe; teal #017E89 is the only AI primary action color.
G3 · Channel parity honest	Each feature ships with the exact parity declared in Section 6.1. SMS does not get image-related features pretending to work.
G4 · Flow A (cold start) end-to-end	New free user signs up → URL imports brand → Brand Voice 2.0 auto-detects → Memory empty (first visit) → AI generates with research-depth Quick → reaches Editor with all states correct. Time-to-first-send target: ≤ 2 days (CB1 from Revised Goals).
G5 · Flow B (power user) end-to-end	Returning power user opens prior conversation → sees memory chips in composer → refines via Conversational Design Editing → uses Image Manipulation popover → Send. All staged-change states roll back cleanly on regenerate.
G6 · Settings popover height fits viewport	3-section settings popover (Experiences / Connectors / MCP) must fit a 720px-height viewport without scroll. If overflow, collapse to accordion.
G7 · Manual rail 5 tabs scroll behavior	C-71 left rail with 5 tabs (Blocks / Sections / Styles / Image / Stickers) renders cleanly at 60-80px width. No tab labels truncated.
G8 · Connector OAuth doesn't break flows	OAuth redirect for Slack/Drive/Notion/Zoom/Calendar must return user to composer with state preserved — no draft loss.
G9 · Hallucination guardrails (pre-mortem #3 unaddressed by this spec)	External dependency. Phase 1 does not solve the AI-hallucination liability identified in Tab 18 Lens 4 Risk #3 (footer address, promo codes, products). Ship Phase 1 only if pre-send verification is concurrently in roadmap.
G10 · Send-flow audience confirm (pre-mortem #4 unaddressed by this spec)	External dependency. Phase 1 does not solve the missing audience-confirm modal at Send. Ship Phase 1 only if Send confirm is concurrently in roadmap.

7.3What this spec deliberately does not ship

Phase 2 features — now specified in Freddie Deepak Phase 2 specs (playable prototype; editor brief tab #freddiep2): Agentic Campaign Orchestrator · Real-Time Campaign Performance Loop · Send-Time AI Personalization · Cross-Channel Asset Studio · Compliance-Aware Localization · AMP for Email · Mailchimp Shield governance suite · Cross-Domain Conversational Agent. Per the Canva analysis, Phase 2 = "where Mailchimp wins permanently."
Universal Content propagation primitive (Pillar 2.1 in the FY27 strategy memo) — not in the Phase 1 roadmap, but the highest-leverage strategic ship. Brand Voice 2.0 (feature 05) is adjacent; full Universal Content is its own initiative.
Real-time multi-author co-edit (UR Bet 4) — Pillar 5.3, separate initiative.
NEB Code Mode + Liquid templating (Pillar 2.2.3) — the HTML escape hatch for Premium / agency power users. Phase 1 does not address; Tab 18 pre-mortem #2 (manual mode hidden behind post-generation radio) remains open and is a launch-blocking concern for the Premium cohort.
SMS TCPA guardrails (I-5.2.3) — Phase 1 does not surface SMS-compliance affordances. SMS AI is enabled in Prototype settings but the underlying ComplianceChecker tool (Build Plan Tools 11+12) must ship concurrently.
Pre-send AI-content verification — the hallucination liability identified in Tab 18 Lens 4 Risk #3. Not in Phase 1 scope; this spec assumes it ships in parallel.

7.4Cross-references · the source-of-truth back-links

Artifact	Location	Used in this spec for
Tab 18 · Design Audit (the Builder Lens Stack)	mailchimp-editor.html#designaudit	96-component inventory (C-01 to C-96) · 5-lens framework · pre-mortem references
Tab 17 · Freddie Strategy Assessment	mailchimp-editor.html#freddie	HVC / UR / Revised Goals scoring against the prototype
Tab 11 · Revised Goals	mailchimp-editor.html#revised	$21M ARR target · CB1–5 customer benefit metrics
Tab 15 · Strategy Memo	mailchimp-editor.html#memo	5 FY27 Pillars · 6-quarter roadmap · Builder Hierarchy of Needs
Lens 1 · Structural IA	`freddie-design-assessment/lenses/01-structural-ia.md`	Sitemap / route hierarchy / 2-shell decision · reused for IA continuity
Lens 2 · Interaction Model	`freddie-design-assessment/lenses/02-interaction-model.md`	5 baseline task flows A–E · state contract for chat ↔ editor mutex
Lens 3 · Component × JTBD Matrix	`freddie-design-assessment/lenses/03-component-jtbd-matrix.md`	Canonical 96-component spine · cited by C-XX throughout this spec
Lens 4 · Heuristic + a11y Scorecard	`freddie-design-assessment/lenses/04-heuristic-accessibility.md`	The 9 critical (S4) findings · pre-mortem #3 + #4 cited as external dependencies (G9, G10)
Lens 5 · Strategy-Fit Overlay	`freddie-design-assessment/lenses/05-strategy-fit.md`	Builder Hierarchy heatmap · FY27 Pillar coverage scorecard · top-10 RICE
Decomp doc 03 · Design tokens	`ai-email-generator-decomp/docs/03-design-tokens.md`	Verbatim mcds token table in Section 2.2
Decomp doc 04 · Components	`ai-email-generator-decomp/docs/04-components.md`	Component-family vocabulary · primitive-class names
Canva-gap analysis (the source for Phase 1 features)	deepakp1308.github.io/canva-campaign-analysis/	The 10 named Phase 1 features · 7-step JTBD workflow · 5 value dimensions · Harvey-ball ratings

7.5What success looks like for this spec

A designer or engineer reads this spec and ships any of the 10 Phase 1 features without inventing a single new component, hex value, or interaction pattern outside the registered baseline + the 19 declared variants + C-97. The Canva round-trip stops because the marketer can edit images, generate stickers, reconstruct flat artifacts, refine via chat, and pull live brand context — all without leaving Freddie. The work is recognizably Freddie at every pixel. If a contributor finds themselves needing a hex value outside the mcds palette, a font outside Graphik + Means, or a shape that doesn't reduce to popover / chip / modal / panel / button / select / toggle / banner / card — stop. Either compose from existing primitives, or open a new C-ID conversation with rationale. R2 + R3 are load-bearing.

Spec complete. v1.0 · May 2026 · Authored using the planning workflow in ~/.claude/plans/hey-so-you-have-greedy-acorn.md · All wireframes, component decompositions, and validation gates traced to either the Freddie baseline (ai-email-generator-decomp/), the Builder Lens Stack (freddie-design-assessment/lenses/), or the Canva-gap roadmap (canva-campaign-analysis). Iteration history will live in this repo's git log; raise design questions or component-ID disputes via PR comment on klaviyo-flows-competitive-analysis.