Shixin Liang
Design One-Pager · Portfolio Documentation
SAP Sapphire
CIO Keynote
2026
01 Key Slides — Gallery
02 Motion & Animation System
Stat Reveal + Icon Choreography
Numbers spin into focus, then scattered tool icons progressively appear — before gradually aligning as "More" rolls into "Right."
Rotate reveal · staggered fade-in · morph text swapMorph Transition: Continuity Between Slides
Shared elements carry over — headline stays anchored while background shapes shift. Creates continuity without a hard cut.
PowerPoint Morph · matched element names · 500msStat Counter: Number Roll
Numbers count up from 0 on entry. Deceleration easing — the number settles rather than snapping.
ease-out · 600–1200ms · integer steps onlyAnnouncement Reveal
Pill badge clips in with a left-edge mask wipe while the headline scales from 92%.
clip-path wipe 380ms + scale 0.92→1 · 280ms · delay 80msDiagram: Sequential Node Build
Diagrams build node-by-node on click. Connecting lines draw after both nodes land.
SVG stroke-dashoffset · 360ms per segmentVideo: Click-to-Start
All demo videos require a presenter click. No auto-advance after video ends.
Manual trigger · no auto-advance · no loopThe "No Surprise Motion" Rule
Every animation is click-triggered. Motion serves the spoken word — it never races ahead of it.
03 Visual Motifs & Shape Language
Recurring Geometric Vocabulary
Concentric Rings
Used on stat slides — the rings visually reinforce scale and draw the eye to the central number.
Concentric Shields
Governance & security slides. The shield depth visually reinforces layers of protection.
Stacked Parallelograms
Announcement & product reveal slides. Diagonal energy signals motion and forward momentum.
Floating Icon Cloud
Ecosystem & breadth slides. Scattered tiles at varying opacity convey abundance without listing.
Perspective Dot Grid
Feature/flow slides. Receding grid implies depth and "platform beneath everything" framing.
Soft Blob Accents
Data & ROI slides. Organic shapes in corners add warmth; they balance hard numbers on screen.
Hexagon Frame
CTA & closing slides. Hexagon connotes structure and connectivity — a call to "come build inside this."
Toggle Indicator
Before/after comparison slides. Instantly communicates binary state change without words.
04 Color System
Primary Palette — Lavender-First
SAP's brand is blue, but this AI-focused keynote shifts toward a lavender-purple palette to signal the AI theme — while retaining blue as a supporting accent. White canvas keeps the presentation confident and clean at venue scale.
Canvas
#FFFFFF
Slide background
Lavender
#EDEDFA
Shape fill / tint
Deep Indigo
#1C1A5E
Headlines / body
Soft Violet
#7B6FCE
Accent word / badge
Lilac
#9B90C8
Secondary text
Indigo
#4A3FA0
Icon / toggle active
SAP Blue
#6A9FEE
Icon background tile
Single Accent Discipline
Soft violet (#7B6FCE) is used exclusively for the one "power word" per headline. Overuse breaks the signal.
Joule Studio 2.0
live example · headline colour split
05 Typography System
Type Scale — SAP 72, Optimised for 15m Viewing Distance
now AI raises the bar further.
50–72px / −0.03em
SAP 72 ExtraBold
SAP 72 ExtraBold
Joule Studio 2.0
36–48px / split weight
ink + violet
ink + violet
75%
72–120px / −0.05em
white, no gradient
white, no gradient
One intelligent entry point
20–24px / violet
below headline only
below headline only
Announcement
14px · rounded pill
minimal, not amber
minimal, not amber
General Availability in Q3 2026
14px violet · toggle icon
GA date pattern
GA date pattern
Typeface
SAP 72 is SAP's proprietary typeface, built for screen legibility and multilingual support across all enterprise contexts.
Weight Contrast Rule
Every headline uses a weight split — product name in ExtraBold (800), descriptor in violet Bold (700). Rhythm without changing size.
06 Layout Patterns
Full Bleed Statement
One idea, max 12 words. Motif fills the background.
20%
100K
57K
Stat Triptych
3 KPIs side by side. Numbers ARE the visual.
75%
Efficiency Gain
Hero Metric
Single oversized number. Donut left, before/after bars right.
Left Visual + Right Copy
55/45 split. Visual grounds the abstract; copy defines it.
Intent →
Process →
Linear Flow Diagram
Pill-nodes on dashed lines. Animates node by node on click.
Announcement Grid
2×4 card grid. Product name + GA badge per card.
07 Brief & Design Intent
83
slides across 4 speakers, one unified visual grammar
20K+
attendees across Orlando and Madrid editions
1 hr
runtime — every second of attention budgeted intentionally
Host
Michael Ameling
CPO, Business Technology Platform · SAP SE
AI Strategy
Jonathan von Rueden
Chief AI Officer · SAP SE
Partner Voice
André Christ
Co-Founder & GM, SAP LeanIX · SAP SE
External Voice
Jan Oberhauser
Founder & CEO · n8n GmbH
The Core Challenge
One keynote. Four speakers. Three jobs: announcements, proof, and a boardroom-ready narrative.
Multi-speakerLive demosAnnouncement cadenceCustomer stories
Design North Star
"Turn enterprise AI complexity into a decision a CIO can make on Monday morning."
Design principle guiding every layout and transition decision08 Narrative Architecture
Act I
The Pain
95% get no ROI from GenAI. Governance is already hard.
Act II
The Vision
SAP Business AI Platform as command center. Autonomous Enterprise introduced.
Act III
The Proof
Live demos. Joule Studio: 2 days → 1 hr. €3M → €750K.
Act IV
The Govern
130K agents in enterprises. AI Agent Hub as control layer.
Act V
The Call
8 announcements. GA timeline. Physical CTA on the show floor.
Anxiety → Confidence Curve
Fear is validated first. Sparse single-statement slides prime receptivity — so the platform reveal on slide 9 lands as relief, not sales pitch.
Speaker Transitions as Visual Resets
Each guest speaker gets a full-bleed portrait slide. No copy. Signals "new voice, new credibility" and creates a natural act break.
3-Beat Announcement Formula
BEAT 1
Demo / Customer
Build desire before naming the product
BEAT 2
Announcement Slide
Pill badge + weight split + GA toggle date
BEAT 3
Stats / Quote
Quantify impact; customer voice as proof
09 Design Decisions & Principles
| Slide Type | Conventional Approach | Design Decision Rationale |
|---|---|---|
| Problem setup | Bullet list with icons | One full-bleed statement per slide. Forces the audience to sit with each idea. |
| Platform overview | Org chart / product map | Three-ring diagram. Communicates relationships, not just inventory. |
| ROI proof | Bar chart with axes | €3M vs €750K as oversized number pairs. No interpretation required. |
| Partner intro | Co-brand slide + bullets | Speaker portrait only. No slide competes with a person at the podium. |
| Technical benchmark | Feature matrix | "13% better prediction quality." One number, one comparator. |
| Call to action | QR code + URL | Two physical locations on the show floor. Physical beats digital. |
The 5 Laws of This Deck
1. One idea per slide
2. Numbers eat prose
3. One accent colour
4. Scarcity signals urgency
5. Presenter wins
What This Deck Deliberately Avoided
✕
Bullet lists
✕
Slide numbers and chrome
✕
More than 3 colours per slide
✕
Auto-advancing animations
✕
Stock photography