Design Builder Reference Library — README

This library contains three companion documents for building (or operating) a comprehensive marketing-design builder. Read in this order if you're new; reference individually after that.

Discipline best-practice docs (email, social, ads, lead-gen, GA4 strategy — what the AI agents and Marita reference) live in KnowledgeBase/. The three docs below are the design/execution library; the KnowledgeBase is the strategy/practice layer and links back here for CTAs, effects, and dashboards.

The three documents

1. effects_matrix.md (v2.3) — the master reference

The foundational document. Covers ~90 visual effects + ~70 motion graphics effects across 17 channel codes. Map: what effects are available per channel, with complexity ratings, demo sources, and channel reality checks.

Channels covered:

• Original 6: S (social) / A (ads) / E (email — split into three sub-archetypes E-img, E-txt, E-html) / B (blogs) / L (landing pages) / U (product UI)
• v2 additions: W (general web) / C (case studies) / P (portfolio) / D (editorial) / G (agency sites) / T (thought leadership) / R (UGC)
• v2.2 additions: Co (corporate) / Sv (service-based business) / Ai (AI automation) / SaaS (SaaS marketing)
• v2.3 additions: Bi (BI dashboards) / Dk (decks/presentations)

Major sections:

• Master effects matrix (photo treatments, backgrounds, typography, containers, color, 3D/WebGL, SVG)
• Motion graphics matrix (page transitions, scroll choreography, text motion, SVG motion, image motion, cursor, layout/FLIP, UI components, 3D/physics, video, motion libraries)
• Channel reality checks for all 17 channels
• Channel quick-pick lists for all 17 channels
• Social by platform (Instagram, TikTok, X, LinkedIn, Pinterest, Threads/Bluesky, YouTube Shorts) with specs and trending effects
• Inspiration pens analyzed (the 10 CodePen links from the user with builder use cases)
• Currently trending vs trends to deprioritize
• Suggested build order (4 phases by complexity)
• Demo source quick reference

2. email_cta_playbook.md (v1) — conversion deep dive

Focused companion on email CTA design across all three email archetypes. Conversion patterns, not visual effects.

Sections:

• 2026 benchmarks (Klaviyo 1.69% campaign CTR avg, 5.58% flow CTR, button vs text link 2.4x lift, larger buttons +90%, personalization +202%, etc.)
• Universal CTA copy framework (high-agency verbs, specificity, outcome-focus, numbers, words to ban)
• E-txt patterns: 9 specific CTA patterns for text-based email, ranked by usage in high-performing 2026 newsletters
• E-html patterns: 5 button types with copy-paste code (VML bulletproof, padding-based, full-width mobile, personalized, dark mode-proof)
• E-img patterns: the cardinal rule (never image-only CTA), styled ALT text fallback, hybrid pattern, animated GIF, image mapping
• Dark mode CTA defense (three behavior tiers, white border trick, HEX vs RGB)
• Klaviyo-specific notes (button block limitations, Django merge tags, A/B test sequencing)
• Testing framework (variable sequencing)
• 20 builder presets to ship
• Situation-to-pattern quick reference matrix

3. dashboards_decks_playbook.md (v1) — analytics + presentation deep dive

Companion covering the Bi and Dk channels in depth, plus the ESP-specific reporting context.

Sections:

• Why dashboards are different (5-second test, action test, dashboards-vs-reports architecture)
• Information hierarchy on canvas + chart selection taxonomy (when to use line/bar/funnel/cohort/heatmap/Sankey/etc.)
• Marketing dashboard core patterns (executive summary, channel performance, cohort retention, campaign performance, send-time heatmap)
• KPI card anatomy (6 elements)
• Color systems for data viz (semantic, sequential, categorical, color blindness rules)
• Dashboard motion & effects (8 patterns that pass the test, effects to avoid)
• Loading / empty / error states
• Mobile responsiveness for dashboards, dark mode defaults
• 2026 BI trends (AI insights, NLQ, dashboard-optional, embedded analytics)
• ESP-specific notes — Klaviyo, HubSpot, Braze, Emarsys, Iterable, GoHighLevel — strengths, gaps, builder opportunities, data freshness, key metrics
• Why decks are different (title-as-message, narrative test)
• Deck taxonomy (12 deck types) + slide type taxonomy (15 patterns)
• Typography + color rules for decks
• 2026 deck design trends + trends to skip
• Motion in decks (restrained patterns)
• The monthly performance report template (20-slide opinionated structure for client review decks)
• Tool landscape (Gamma, Pitch, Tome, Beautiful.ai, etc.)
• Trending named styles (Analog Dreams, Luminous Fade, Tech Monochrome, etc.)
• Builder presets (12 deck templates, 15 slide types, 8 style presets, 6 output formats)
• Cross-cutting principles (dashboard meets deck, data-to-narrative pipeline, accessibility, i18n)
• Quality bar checklist (10-item pre-flight)
• What this means for the builder agent (Bi outputs, Dk outputs, data-to-narrative pipeline)

Reading order

For the builder agent (Claude Code building outputs):

1. Start with the matrix for any output type — find the channel codes that apply
2. If E channel, also read the relevant section of the CTA Playbook
3. If Bi or Dk channel, read the relevant section of the Dashboards & Presentations Playbook
4. Apply the cross-cutting infrastructure rules from the matrix (email routing logic, build order phases)

For internal team use (dashboards, reporting, client decks):

1. Read the Dashboards & Presentations Playbook end-to-end — particularly the action test and 5-second test, then the monthly performance report template
2. Reference the CTA Playbook when optimizing client email campaigns
3. Reference the matrix when proposing new effects or evaluating CodePen finds

Versioning

• effects_matrix.md — v2.3 (matrix master)
• email_cta_playbook.md — v1 (CTA conversion)
• dashboards_decks_playbook.md — v1 (analytics + decks)

All three last verified against 2026 trend reporting and benchmark data: May 2026.

ESP coverage notes

The library is built around the ESPs the team actually ships from:

• Klaviyo (deepest coverage in CTA playbook + Bi section)
• HubSpot (CRM + marketing)
• Braze (cross-channel, enterprise)
• Emarsys (revenue attribution, SAP CX)
• Iterable (experiments, journeys)
• GoHighLevel (agency multi-account)

Each has specific dashboard/reporting notes in the Dashboards & Presentations Playbook covering strengths, gaps, data freshness, and what the builder should layer on top.

Auto-update protocol (REQUIRED for build agents)

This library is a living wiki. Any agent/session that produces a creative output MUST:

1. Read the relevant playbook section BEFORE building (matrix → channel code; + CTA playbook if E; + dashboards/decks playbook if Bi/Dk).
2. Append a learning to LEARNINGS.md AFTER building — what was tried, the result (worked/rejected/mixed + why), and the reuse rule. Use the format at the top of that file (newest entry first).
3. On review, promote any pattern validated 2+ times into the matching playbook doc and bump its version note.

This is how the wiki stays current and how agents stop repeating mistakes. LEARNINGS.md is the append layer; the three playbooks are the curated source of truth.