Visual Design Plan

Complete design system, slide-by-slide visual inventory, character bible, and asset specifications for the talk

1. Global Design System

Consistent tokens governing every slide: colors, type, layout, motion, and templates.

Color Palette

RoleSwatchHexUsage
Primary Dark #1A1A2E Slide backgrounds, title bars, deep contrast
Primary Accent #E94560 Call-outs, fraud highlights, BankBot's tie
Secondary Accent #0F3460 Supporting headers, data axes, info panels
Positive / Safe #16C79A "Approved" states, correct answers, growth indicators
Warning #F5A623 Caution states, "maybe" zone, time badges
Neutral Light #F0F0F5 Slide content backgrounds, card fills
Formula Gold #FFD700 Formula highlight backgrounds, math emphasis

Bayes Color-Coding System

TermSwatchHexMeaning
$$P(\text{Fraud} \mid \text{Data})$$ #FFD700 Gold Posterior — what we want to know
$$P(\text{Data} \mid \text{Fraud})$$ #E94560 Red Likelihood — how well evidence fits fraud
$$P(\text{Fraud})$$ #4A90D9 Blue Prior — how common fraud is
$$P(\text{Data})$$ #16C79A Green Evidence — how common this pattern is overall

Typography

RoleTypefaceWeightSize RangeUsage
Slide TitleInter / MontserratBold (700)44 – 56 ptSection openers, major headings
Body TextInterRegular (400)24 – 32 ptExplanations, bullet points
Formula DisplaySTIX Two MathRegular36 – 48 ptAll mathematical formulas
Cartoon / BankBot Textxkcd ScriptRegular20 – 28 ptSpeech bubbles, informal annotations
Data LabelsInterMedium (500)16 – 20 ptChart axes, data point labels
Source / CitationInterLight Italic (300i)12 – 14 ptImage credits, footnotes

Layout Grid

16:9 Aspect Ratio (1920 x 1080 px)
  • Safe margins: 80 px on all sides — no essential content in the outer 4%
  • Title zone: top 180 px reserved for section titles and progress bar
  • Content zone: 1760 x 720 px working area for visuals, text, and formulas
  • Footer strip: bottom 60 px for BankBot micro-reactions and slide numbers
  • Column splits: 50/50 for comparisons, 60/40 for text-visual, 30/70 for formula-reveal

Animation Philosophy

  • Build, don't flash: content appears in logical reading order, never all at once
  • Settle, then speak: animation completes 0.5 s before the speaker references the element
  • Direction = meaning: left-to-right = time progression; bottom-to-top = increase; fade-in = new idea
  • Consistent transitions: 400 ms ease-out for reveals; 200 ms for micro-interactions
  • No fly-ins: never slide content from off-screen edges; use opacity + short translate only

Slide Template Variants

TemplateLayoutUsage
TitleFull-bleed background, centered text, badgesSection openers, act transitions
StoryLeft: narrative text; Right: character illustrationBankBot dialogues, Mia's story
Data Viz70% chart area; 30% annotation panelAll charts, scatter plots, distributions
Formula Reveal30% context; 70% formula with color-codingBayes, sigmoid, weighted avg, etc.
Cartoon60% illustration; 40% caption/quoteBankBot moments, historical vignettes
Comparison50/50 split with divider lineYou vs AI, Grade vs Credit, before/after
InteractiveCentral prompt with voting UI overlayHand raise, Spot the Fraud, USE IT / SKIP IT
TimelineHorizontal lane with date markersMathematician timeline, morning timeline

2. Section-by-Section Visual Inventory

Summary of every section's slide count and key visual elements. ~32 slides total.

01

The Opening Hook

0:00 – 3:00 3 slides
  • Full-bleed title slide with talk name and badges
  • Morning Timeline Infographic — horizontal, 5 stations showing AI decisions before breakfast
  • BankBot Introduction — character reveal with speech bubble
02

"You Already Think Like an AI"

3:00 – 7:00 3 slides
  • Split-Screen Comparison — "You" (cafeteria) vs "AI" (data center)
  • Nightingale's Rose Diagram recreation — polar area chart
  • Bridge to Finance — transition visual connecting everyday patterns to financial data
03

Fraud Detection

7:00 – 15:30 7 slides
  • Opening Story (Mia) — character with spending scenario
  • Scatter Plot — Mia's spending with normal vs anomalous points
  • Animated Bell Curve — builds from data points to full distribution
  • Bayes' Theorem Reveal — color-coded formula, step-by-step build
  • Sigmoid Function Reveal — S-curve animation from 0 to 1
  • BankBot's Nightmare cartoon — sweating on the decision boundary
  • Rosenblatt's Perceptron — simple neuron diagram
04

"How Does the AI Learn?"

15:30 – 17:00 2 slides
  • BankBot Learning Panels — 4-panel comic strip (confident, wrong, confused, improving)
  • Ada Lovelace Vignette — portrait + Jacquard loom connection
05

Interactive: "Spot the Fraud"

17:00 – 21:00 3 slides
  • "Spot the Fraud" 3 Scenario Cards — Alex, Tomoko, Karla
  • Wald's Bomber Diagram — survivorship bias visual
  • BankBot False Positive — "FRAUD DETECTED!... suspicious flowers"
06

Credit Scoring

21:00 – 28:00 5 slides
  • Credit Score Comparison — school grade vs credit score side-by-side
  • Weight Slider Visualization — interactive-style weight adjustment bars
  • Linear Regression Scatter — data points with best-fit line building
  • Markov Chain Diagram — state transitions for payment patterns
  • Fortune Teller Cartoon — BankBot predicting the future
07

Live Demo

28:00 – 32:00 3 slides
  • Live Demo UI Mockup — simplified app interface showing inputs/outputs
  • Fallback: pre-recorded screencast embed
  • Fallback: static slide walkthrough with annotated screenshots
08

Recommendation Engines

32:00 – 34:00 2 slides
  • Dot Product Visual — matching preferences diagram
  • Cosine Similarity Angle Diagram — two vectors with angle labeled
  • BankBot recommends 47 houseplants (illustration overlay)
09

"Design Your Own AI"

34:00 – 37:00 2 slides
  • USE IT / SKIP IT rapid-fire voting interface
  • Data categories displayed as cards the audience evaluates
10

The Bigger Picture + Closing

37:00 – 42:00 3 slides
  • Career Map Constellation — roles radiating from a central "Math + AI" node
  • Math Cheat Sheet Layout — all formulas on one takeaway slide
  • BankBot Graduation — cap and diploma, final quote

3. BankBot Character Bible

Detailed appearance and behavioral spec for the talk's recurring AI mascot.

Core Appearance

  • Shape: Simple geometric robot — round head, rectangular body, thin limbs
  • Accessory: Banker's necktie (red, #E94560) — always visible
  • Eyes: Friendly round eyes, primary tool for expressing emotion
  • Style: Always rendered in line art — clean, monochrome except for the red tie
  • Size: Never larger than 15% of the slide area
  • Speech bubbles: White fill with dark text; rounded rectangle; tail points to BankBot's head
  • Expressions: Conveyed exclusively through eyes and mouth — no limb gestures for emotion

Eight Emotional States

🤖

Confident

Wide eyes, slight smile. Used in Section 1 intro.

😏

Cocky

Half-lidded eyes, smirk. "Too easy. Next." (Sec 4 warmup)

😰

Stressed

Sweat drops, wide alarmed eyes. Decision boundary scene (Sec 3).

🤔

Learning

Thoughtful look, one eye slightly squinted. Growth moment (Sec 3.5).

😳

Humbled

Embarrassed blush, downcast eyes. False positive moment (Sec 5).

🌱

Observant

Binoculars or magnifying glass. 47 houseplants recommendation (Sec 8).

🤨

Critical

Raised eyebrow, head shake. Ethics discussion, rejects social media data (Sec 9).

🎓

Wise

Graduation cap, serene smile. "I defer to the human." (Sec 10).

Design Rules

  • Always line art; never solid-filled or 3D-rendered
  • Red tie (#E94560) always visible regardless of pose
  • Facial expressions via eyes and mouth only — no exaggerated limb poses
  • Maximum size: 15% of slide area; consistent scale across all slides
  • Monochrome body except for the red tie; no background colors on the character
  • Speech bubbles: white (#FFFFFF) fill, dark text (#1A1A2E), 8px corner radius

4. Data Visualizations Deep Spec

17 distinct data visualizations required across all sections.

  1. Morning Timeline — horizontal infographic with 5 stations (alarm, commute, payment, feed, school)
  2. Split-Screen: You vs AI — left: cafeteria scene; right: data center making same decision
  3. Nightingale's Rose Diagram — faithful recreation of polar area chart (1854 data)
  4. Mia's Spending Scatter Plot — normal transactions in blue, anomalies in red, axes = amount x time
  5. Animated Bell Curve — builds from individual data points into full Gaussian; highlights sigma zones
  6. Bayes' Theorem Color-Coded Formula — each term colored per Bayes palette; step-by-step numeric build
  7. Sigmoid S-Curve — animated trace from left asymptote through inflection to right; threshold line at 0.5
  8. "Spot the Fraud" 3 Scenario Cards — each card: icon, name, transaction description, Fraud/Legit vote button
  9. Credit Score Comparison — school grade weights (left) vs credit score weights (right) in matching bar charts
  10. Weight Slider Visualization — horizontal sliders for each factor; total bar updates in real-time
  11. Linear Regression Scatter — data points appear first, then best-fit line animates through them
  12. Markov Chain Diagram — state bubbles (On-time, Late, Default) with transition arrows and probabilities
  13. Live Demo UI Mockup — simplified interface: input fields, "Analyze" button, output panel with score + verdict
  14. Dot Product Visual — two preference vectors shown as bar pairs; multiply-and-sum animation
  15. Cosine Similarity Angle Diagram — two vectors from origin with angle theta labeled; similarity score readout
  16. Career Map Constellation — central "Math + AI" node with radiating career paths (data scientist, quant, ethicist, etc.)
  17. Math Cheat Sheet Layout — all 7 formulas in a 2-column grid; color-coded by section

Example: Bayes Color-Coded Build

$$\color{#FFD700}{P(\text{Fraud} \mid \text{Data})} = \frac{\color{#E94560}{P(\text{Data} \mid \text{Fraud})} \cdot \color{#4A90D9}{P(\text{Fraud})}}{\color{#16C79A}{P(\text{Data})}}$$

5. Historical Imagery Research

8 mathematician visuals needed — portraits, diagrams, and artifacts.

6. Cartoon and Illustration Specs

11 custom cartoon illustrations needed, all in consistent xkcd-inspired line style.

7. Physical Props

Tangible items that enhance engagement during the live presentation.

🤖

BankBot Plushie / Cutout

Cardboard standee or small plushie placed on the lectern. Refer to it during BankBot dialogue moments.

📄

Laminated Math Cheat Sheet

A5 size, double-sided. All 7 formulas with color-coding. Distributed to each student as a takeaway.

⭐

"BankBot Approved" Stickers

Fun stickers for students who answer questions or participate in voting. Reward engagement.

🗒

Red / Green Voting Cards

Double-sided cards (red = Fraud, green = Legit). Used during "Spot the Fraud" and thumbs-up/down segments.

8. Priority Matrix

What must ship, what would be great, and what to aim for if time allows.

Must-Have
  • All 17 data visualizations (static or animated)
  • BankBot character in all 8 emotional states
  • Color-coded Bayes theorem build
  • Sigmoid and bell curve animations
  • "Spot the Fraud" scenario cards
  • Credit score comparison diagram
  • Laminated math cheat sheets for students
  • Red/green voting cards
  • Career map constellation (closing slide)
  • All 8 mathematician portraits/diagrams
Nice-to-Have
  • All 11 cartoon illustrations in final polished style
  • Smooth CSS/JS slide animations (vs. static builds)
  • Interactive weight slider (live demo, not pre-recorded)
  • Markov chain animated transitions
  • Nightingale rose diagram with real 1854 data
  • BankBot plushie/cutout prop
  • "BankBot Approved" stickers
  • Pre-recorded screencast as demo fallback
Dream
  • Fully interactive live demo app (not just screencast)
  • Real-time audience polling with phone-based voting
  • Animated BankBot sprite (multi-frame, responds to audience)
  • AR overlay — BankBot appears on students' phones
  • Custom xkcd-style font generated from handwriting
  • 3D printed BankBot figurines as prizes