2026-06-12 17:17:58 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2026-07-10 17:41:47 +08:00
< title > Write a B2B SaaS Sales Proposal like a Tier-1 Enterprise AE - B2B sales</ title >
2026-06-12 17:17:58 +08:00
<!-- Fonts: Electric Studio is all-Manrope — 800 for display, 400/500 for body -->
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link href = "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;800&display=swap" rel = "stylesheet" >
< style >
/* ===========================================
CSS CUSTOM PROPERTIES (THEME)
Electric Studio preset — bold split panels,
white over cobalt #4361ee, all Manrope.
=========================================== */
: root {
--bg-dark : #0a0a0a ;
--bg-white : #ffffff ;
--accent-blue : #4361ee ;
--text-dark : #0a0a0a ;
--text-light : #ffffff ;
--text-dark-soft : rgba ( 10 , 10 , 10 , 0.58 );
--text-light-soft : rgba ( 255 , 255 , 255 , 0.72 );
--line-dark : rgba ( 10 , 10 , 10 , 0.14 );
--line-light : rgba ( 255 , 255 , 255 , 0.28 );
--blue-soft : rgba ( 67 , 97 , 238 , 0.10 );
--stage-bg : var ( -- bg - dark );
--slide-bg : var ( -- bg - white );
/* Typography — authored at the 1920×
--font : 'Manrope' , sans-serif ;
--title-size : 152 px ;
--h2-size : 88 px ;
--lede-size : 33 px ;
--body-size : 27 px ;
/* Spacing — authored at the 1920×
--slide-pad-x : 110 px ;
--edge-bar-h : 14 px ;
/* Animation */
--ease-out-expo : cubic-bezier ( 0.16 , 1 , 0.3 , 1 );
--duration-normal : 0.7 s ;
}
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
/* ===========================================
FIXED 16:9 STAGE: MANDATORY BASE STYLES
(full contents of viewport-base.css)
Slides are authored at 1920×
=========================================== */
html ,
body {
width : 100 % ;
height : 100 % ;
margin : 0 ;
overflow : hidden ;
background : var ( -- stage - bg , #000 );
}
. deck-viewport {
position : fixed ;
inset : 0 ;
overflow : hidden ;
background : var ( -- stage - bg , #000 );
}
/* Fixed 16:9 design canvas. JavaScript sets transform: translate(...) scale(...). */
. deck-stage {
position : absolute ;
left : 0 ;
top : 0 ;
width : 1920 px ;
height : 1080 px ;
overflow : hidden ;
transform-origin : 0 0 ;
background : var ( -- slide - bg , #fff );
}
/* Slides stack inside the fixed stage. Content laid out at 1920×
. slide {
position : absolute ;
inset : 0 ;
width : 1920 px ;
height : 1080 px ;
overflow : hidden ;
display : block ;
visibility : hidden ;
opacity : 0 ;
pointer-events : none ;
background : var ( -- slide - bg , #fff );
}
. slide . active ,
. slide . visible {
visibility : visible ;
opacity : 1 ;
pointer-events : auto ;
z-index : 1 ;
}
img , video , canvas , svg {
max-width : 100 % ;
max-height : 100 % ;
}
/* Presentation chrome stays outside the slide design system */
. deck-controls {
position : fixed ;
left : 50 % ;
bottom : 22 px ;
transform : translateX ( -50 % );
z-index : 1000 ;
}
@ media print {
html , body { width : 1920 px ; height : auto ; overflow : visible ; background : #fff ; }
. deck-viewport { position : static ; overflow : visible ; background : #fff ; }
. deck-stage { position : static ; width : auto ; height : auto ; transform : none !important ; background : none ; }
. slide {
position : relative ;
display : block !important ;
visibility : visible !important ;
opacity : 1 !important ;
pointer-events : auto !important ;
width : 1920 px ;
height : 1080 px ;
break-after : page ;
page-break-after : always ;
}
. slide : last-child { break-after : auto ; page-break-after : auto ; }
. deck-controls { display : none !important ; }
}
@ media ( prefers-reduced-motion : reduce ) {
*, * :: before , * :: after {
animation-duration : 0.01 ms !important ;
transition-duration : 0.2 s !important ;
}
}
/* ===========================================
SLIDE SHELL — Electric Studio split panels
White panel above, cobalt panel below, a dark
edge bar on the seam, brand marks in corners.
=========================================== */
. slide {
font-family : var ( -- font );
color : var ( -- text - dark );
transition : opacity 0.55 s var ( -- ease-out - expo );
}
. split {
position : absolute ;
inset : 0 ;
display : flex ;
flex-direction : column ;
}
. panel { position : relative ; overflow : hidden ; }
. panel-white { background : var ( -- bg - white ); color : var ( -- text - dark ); }
. panel-blue { background : var ( -- accent - blue ); color : var ( -- text - light ); }
. panel-pad { padding : 0 var ( -- slide - pad - x ); }
/* Signature device: accent bar on the panel edge (seam between panels) */
. edge-bar { flex : none ; height : var ( -- edge - bar - h ); background : var ( -- bg - dark ); }
. edge-bar . light { background : var ( -- bg - white ); }
/* Brand marks in the four corners — Electric Studio chrome */
. mark {
position : absolute ;
z-index : 6 ;
font-size : 19 px ;
font-weight : 800 ;
letter-spacing : 0.22 em ;
text-transform : uppercase ;
display : flex ;
align-items : center ;
gap : 14 px ;
}
. mark-tl { top : 52 px ; left : 64 px ; }
. mark-tr { top : 52 px ; right : 64 px ; }
. mark-bl { bottom : 48 px ; left : 64 px ; }
. mark-br { bottom : 48 px ; right : 64 px ; }
. mark . dark { color : var ( -- text - dark ); }
. mark . dark . soft { color : var ( -- text - dark - soft ); }
. mark . light { color : var ( -- text - light ); }
. mark . light . soft { color : var ( -- text - light - soft ); }
. mark . chip {
width : 16 px ;
height : 16 px ;
background : var ( -- accent - blue );
display : inline-block ;
}
. mark . light . chip { background : var ( -- bg - white ); }
/* ===========================================
TYPOGRAPHY
=========================================== */
. display {
font-weight : 800 ;
font-size : var ( -- title - size );
line-height : 0.96 ;
letter-spacing : -0.035 em ;
}
. h2 {
font-weight : 800 ;
font-size : var ( -- h2 - size );
line-height : 1.0 ;
letter-spacing : -0.025 em ;
}
. kicker {
font-size : 22 px ;
font-weight : 800 ;
letter-spacing : 0.34 em ;
text-transform : uppercase ;
color : var ( -- accent - blue );
margin-bottom : 28 px ;
}
. panel-blue . kicker { color : var ( -- text - light ); }
. lede {
font-size : var ( -- lede - size );
line-height : 1.5 ;
font-weight : 400 ;
/* Body copy on cobalt uses full --text-light for WCAG AA contrast;
soft alpha stays reserved for bold uppercase chrome (marks, hints). */
color : var ( -- text - light );
max-width : 56 ch ;
}
. blue { color : var ( -- accent - blue ); }
/* ===========================================
ANIMATIONS — trigger via .visible on the slide
=========================================== */
. reveal {
opacity : 0 ;
transform : translateY ( 36 px );
transition : opacity var ( -- duration - normal ) var ( -- ease-out - expo ),
transform var ( -- duration - normal ) var ( -- ease-out - expo );
}
. slide . visible . reveal { opacity : 1 ; transform : translateY ( 0 ); }
. reveal : nth-child ( 1 ) { transition-delay : 0.08 s ; }
. reveal : nth-child ( 2 ) { transition-delay : 0.18 s ; }
. reveal : nth-child ( 3 ) { transition-delay : 0.28 s ; }
. reveal : nth-child ( 4 ) { transition-delay : 0.38 s ; }
. reveal : nth-child ( 5 ) { transition-delay : 0.48 s ; }
. reveal : nth-child ( 6 ) { transition-delay : 0.58 s ; }
/* ===========================================
S1 · TITLE — 50/50 split, statement type on white
=========================================== */
. s-title . panel-white { flex : 1 ; display : flex ; flex-direction : column ; justify-content : flex-end ; padding-bottom : 64 px ; }
. s-title . panel-blue { flex : 1 ; display : flex ; flex-direction : column ; justify-content : center ; }
. s-title . meta-row {
display : flex ;
gap : 56 px ;
margin-top : 52 px ;
font-size : 22 px ;
font-weight : 800 ;
letter-spacing : 0.2 em ;
text-transform : uppercase ;
color : var ( -- text - light );
}
. s-title . meta-row . soft { color : var ( -- text - light - soft ); font-weight : 500 ; }
/* ===========================================
S2 · AGENDA — heading on white, numbered list on blue
=========================================== */
. s-agenda . panel-white { flex : none ; height : 348 px ; display : flex ; align-items : flex-end ; padding-bottom : 56 px ; }
. s-agenda . panel-blue { flex : 1 ; display : flex ; flex-direction : column ; justify-content : center ; }
. agenda-rows { display : flex ; flex-direction : column ; }
. agenda-row {
display : flex ;
align-items : baseline ;
gap : 56 px ;
padding : 30 px 0 ;
border-top : 1 px solid var ( -- line - light );
font-size : 42 px ;
font-weight : 500 ;
}
. agenda-row : last-child { border-bottom : 1 px solid var ( -- line - light ); }
. agenda-row . idx { font-weight : 800 ; font-size : 26 px ; min-width : 86 px ; letter-spacing : 0.1 em ; }
. agenda-row . hint {
margin-left : auto ;
font-size : 21 px ;
font-weight : 800 ;
color : var ( -- text - light - soft );
letter-spacing : 0.14 em ;
text-transform : uppercase ;
}
/* ===========================================
S3 · SECTION DIVIDER — full cobalt, outlined giant number
=========================================== */
. s-divider . panel-white { flex : none ; height : 150 px ; display : flex ; align-items : center ; }
. s-divider . panel-blue { flex : 1 ; display : flex ; flex-direction : column ; justify-content : center ; }
. divider-no {
font-weight : 800 ;
font-size : 430 px ;
line-height : 0.86 ;
letter-spacing : -0.04 em ;
color : transparent ;
-webkit- text-stroke : 3 px var ( -- bg - white );
}
. divider-label { margin-top : 30 px ; font-size : 84 px ; font-weight : 800 ; letter-spacing : -0.02 em ; }
/* ===========================================
S4 · BULLETS — proofs on white, takeaway on blue
=========================================== */
. s-bullets . panel-white { flex : 1 ; padding-top : 108 px ; }
. s-bullets . panel-blue { flex : none ; height : 240 px ; display : flex ; align-items : center ; }
. points { margin-top : 44 px ; display : grid ; gap : 34 px ; max-width : 1420 px ; }
. point { display : flex ; gap : 38 px ; align-items : flex-start ; }
. point . tick {
flex : none ;
width : 54 px ;
height : 54 px ;
background : var ( -- blue - soft );
border : 2 px solid var ( -- accent - blue );
display : grid ;
place-items : center ;
}
. point . tick svg { width : 24 px ; height : 24 px ; }
. point h3 { font-size : 33 px ; font-weight : 800 ; margin-bottom : 8 px ; letter-spacing : -0.01 em ; }
. point p { font-size : 25 px ; line-height : 1.5 ; font-weight : 400 ; color : var ( -- text - dark - soft ); }
. takeaway { font-size : 30 px ; font-weight : 500 ; line-height : 1.4 ; max-width : 60 ch ; }
. takeaway strong { font-weight : 800 ; }
/* ===========================================
S5 · BIG STAT — oversized cobalt number on white
=========================================== */
. s-stat . panel-white { flex : 1 ; display : flex ; align-items : center ; }
. s-stat . panel-blue { flex : none ; height : 300 px ; display : flex ; align-items : center ; }
. stat-num {
font-weight : 800 ;
font-size : 400 px ;
line-height : 0.9 ;
letter-spacing : -0.05 em ;
color : var ( -- accent - blue );
}
. stat-num . unit { font-size : 150 px ; letter-spacing : -0.02 em ; }
. stat-side { max-width : 980 px ; display : flex ; gap : 64 px ; align-items : baseline ; }
. stat-side h3 { font-size : 40 px ; font-weight : 800 ; flex : none ; }
. stat-side p { font-size : 26 px ; line-height : 1.5 ; color : var ( -- text - light ); }
/* ===========================================
S6 · QUOTE HERO — typography as the visual
=========================================== */
. s-quote . panel-white { flex : 1 ; display : flex ; flex-direction : column ; justify-content : center ; }
. s-quote . panel-blue { flex : none ; height : 220 px ; display : flex ; align-items : center ; }
. quote-mark {
font-weight : 800 ;
font-size : 220 px ;
line-height : 0.55 ;
color : var ( -- accent - blue );
}
. quote-text {
font-size : 92 px ;
font-weight : 800 ;
line-height : 1.08 ;
letter-spacing : -0.03 em ;
max-width : 1560 px ;
margin-top : 44 px ;
}
. quote-attr {
font-size : 24 px ;
font-weight : 800 ;
letter-spacing : 0.2 em ;
text-transform : uppercase ;
}
. quote-attr . soft { color : var ( -- text - light ); font-weight : 500 ; margin-left : 24 px ; letter-spacing : 0.14 em ; }
/* ===========================================
S7 · COMPARISON — the split itself is the contrast
=========================================== */
. s-compare . panel { flex : 1 ; display : flex ; flex-direction : column ; justify-content : center ; }
. cmp-head { display : flex ; align-items : baseline ; gap : 40 px ; margin-bottom : 30 px ; }
. cmp-head h3 { font-size : 46 px ; font-weight : 800 ; letter-spacing : -0.01 em ; }
. cmp-head . tag {
font-size : 19 px ;
font-weight : 800 ;
letter-spacing : 0.24 em ;
text-transform : uppercase ;
padding : 8 px 18 px ;
}
. panel-white . cmp-head . tag { border : 2 px solid var ( -- line - dark ); color : var ( -- text - dark - soft ); }
. panel-blue . cmp-head . tag { border : 2 px solid var ( -- line - light ); color : var ( -- text - light ); }
. cmp-list { list-style : none ; display : flex ; gap : 70 px ; }
. cmp-list li { font-size : 25 px ; line-height : 1.45 ; max-width : 360 px ; padding-top : 20 px ; position : relative ; }
. panel-white . cmp-list li { color : var ( -- text - dark - soft ); }
. panel-blue . cmp-list li { color : var ( -- text - light ); font-weight : 500 ; }
. cmp-list li :: before {
content : "" ;
position : absolute ;
top : 0 ;
left : 0 ;
width : 44 px ;
height : 4 px ;
background : var ( -- accent - blue );
}
. panel-blue . cmp-list li :: before { background : var ( -- bg - white ); }
/* ===========================================
S8 · PRINCIPLE GRID — 2×
=========================================== */
. s-grid . panel-white { flex : none ; height : 300 px ; display : flex ; align-items : flex-end ; padding-bottom : 52 px ; }
. s-grid . panel-blue { flex : 1 ; display : flex ; align-items : center ; }
. grid4 { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 30 px ; width : 100 % ; }
. gcard { border : 2 px solid var ( -- line - light ); padding : 42 px 48 px ; }
. gcard . gno { font-weight : 800 ; font-size : 24 px ; letter-spacing : 0.18 em ; margin-bottom : 18 px ; }
. gcard h3 { font-size : 31 px ; font-weight : 800 ; margin-bottom : 10 px ; letter-spacing : -0.01 em ; }
. gcard p { font-size : 25 px ; line-height : 1.45 ; color : var ( -- text - light ); }
/* ===========================================
S9 · BAR CHART — pure CSS, cobalt bars on white
=========================================== */
. s-chart . panel-white { flex : 1 ; padding-top : 140 px ; display : flex ; flex-direction : column ; }
. s-chart . panel-blue { flex : none ; height : 200 px ; display : flex ; align-items : center ; }
. chart { flex : 1 ; display : flex ; align-items : flex-end ; gap : 70 px ; padding : 80 px 0 64 px ; }
. bar-group { flex : 1 ; display : flex ; flex-direction : column ; justify-content : flex-end ; height : 100 % ; gap : 18 px ; }
. bar {
background : var ( -- blue - soft );
border : 2 px solid var ( -- accent - blue );
position : relative ;
transform-origin : bottom ;
transform : scaleY ( 0 );
transition : transform 0.9 s var ( -- ease-out - expo );
}
. bar . solid { background : var ( -- accent - blue ); }
. slide . visible . bar { transform : scaleY ( 1 ); }
. slide . visible . bar-group : nth-child ( 1 ) . bar { transition-delay : 0.15 s ; }
. slide . visible . bar-group : nth-child ( 2 ) . bar { transition-delay : 0.25 s ; }
. slide . visible . bar-group : nth-child ( 3 ) . bar { transition-delay : 0.35 s ; }
. slide . visible . bar-group : nth-child ( 4 ) . bar { transition-delay : 0.45 s ; }
. bar-val {
position : absolute ;
top : -52 px ;
left : 0 ;
right : 0 ;
text-align : center ;
font-weight : 800 ;
font-size : 30 px ;
color : var ( -- text - dark );
}
. bar-label {
text-align : center ;
font-size : 21 px ;
font-weight : 500 ;
letter-spacing : 0.12 em ;
text-transform : uppercase ;
color : var ( -- text - dark - soft );
}
/* ===========================================
S10 · CLOSING — cobalt dominant, statement type
=========================================== */
. s-close . panel-white { flex : none ; height : 150 px ; display : flex ; align-items : center ; }
. s-close . panel-blue { flex : 1 ; display : flex ; flex-direction : column ; justify-content : center ; }
. close-links {
display : flex ;
gap : 64 px ;
margin-top : 72 px ;
font-size : 24 px ;
font-weight : 800 ;
letter-spacing : 0.16 em ;
text-transform : uppercase ;
}
. close-links . lk { display : flex ; align-items : center ; gap : 16 px ; color : var ( -- text - light ); }
. close-links svg { width : 30 px ; height : 30 px ; flex : none ; }
/* ===========================================
DECK CHROME — page counter (outside the stage)
=========================================== */
. deck-controls {
font-family : var ( -- font );
font-size : 14 px ;
font-weight : 500 ;
letter-spacing : 0.22 em ;
color : rgba ( 255 , 255 , 255 , 0.72 );
background : rgba ( 10 , 10 , 10 , 0.65 );
border : 1 px solid rgba ( 255 , 255 , 255 , 0.16 );
padding : 8 px 18 px ;
border-radius : 999 px ;
user-select : none ;
}
. deck-controls . cur { color : var ( -- text - light ); font-weight : 800 ; }
/* ===========================================
REDUCED MOTION - strict degrade (supplements
the base block): no slide-up, no bar scale,
no stagger delays; content appears in place.
=========================================== */
@ media ( prefers-reduced-motion : reduce ) {
. reveal { transform : none ; transition-delay : 0 s !important ; }
. bar ,
. slide . visible . bar { transform : none ; transition-delay : 0 s !important ; }
}
</ style >
2026-06-16 17:32:15 +08:00
< style id = "od-no-pager" >. deck-controls , # counter , . deck-counter { display : none !important }</ style >
2026-06-12 17:17:58 +08:00
</ head >
< body >
< div class = "deck-viewport" >
< main class = "deck-stage" id = "deckStage" aria-label = "Slide deck" >
<!-- === SLIDE 1: TITLE === -->
< section class = "slide s-title active visible" >
< div class = "split" >
< div class = "panel panel-white panel-pad" >
2026-07-10 17:41:47 +08:00
< p class = "kicker reveal" > B2B Sales Proposal · 2026</ p >
2026-06-12 17:17:58 +08:00
< h1 class = "display reveal" > Open< br > Design< span class = "blue" > .</ span ></ h1 >
</ div >
< div class = "edge-bar" ></ div >
< div class = "panel panel-blue panel-pad" >
2026-07-10 17:41:47 +08:00
< p class = "lede reveal" > A proposal for your design organization: replace per-seat, closed-model tooling with a self-hosted, agent-native platform your team already half-owns — at a fraction of today's run-rate.</ p >
< div class = "meta-row reveal" >< span > Apache-2.0</ span >< span class = "soft" > /</ span >< span > Self-Hosted</ span >< span class = "soft" > /</ span >< span > BYOK</ span ></ div >
2026-06-12 17:17:58 +08:00
</ div >
</ div >
2026-08-18 07:09:45 +00:00
< div class = "mark mark-tl dark" >< span class = "chip" ></ span > OpenDesign</ div >
2026-07-10 17:41:47 +08:00
< div class = "mark mark-tr dark" >< span class = "soft" > Prepared for Design Leadership</ span ></ div >
< div class = "mark mark-bl light" >< span class = "soft" > Sales Proposal</ span ></ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-br light" > 01 / 10</ div >
</ section >
<!-- === SLIDE 2: AGENDA === -->
< section class = "slide s-agenda" >
< div class = "split" >
< div class = "panel panel-white panel-pad" >
2026-07-10 17:41:47 +08:00
< h2 class = "h2 reveal" > The case, page< br > by page< span class = "blue" > .</ span ></ h2 >
2026-06-12 17:17:58 +08:00
</ div >
< div class = "edge-bar" ></ div >
< div class = "panel panel-blue panel-pad" >
< div class = "agenda-rows" >
2026-07-10 17:41:47 +08:00
< div class = "agenda-row reveal" >< span class = "idx" > 01</ span > The cost of the status quo< span class = "hint" > Pain</ span ></ div >
< div class = "agenda-row reveal" >< span class = "idx" > 02</ span > What changes on day one< span class = "hint" > Change</ span ></ div >
< div class = "agenda-row reveal" >< span class = "idx" > 03</ span > Proof from teams like yours< span class = "hint" > Proof</ span ></ div >
< div class = "agenda-row reveal" >< span class = "idx" > 04</ span > Rollout plan & commercial ask< span class = "hint" > Ask</ span ></ div >
2026-06-12 17:17:58 +08:00
</ div >
</ div >
</ div >
2026-08-18 07:09:45 +00:00
< div class = "mark mark-tl dark" >< span class = "chip" ></ span > OpenDesign</ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-tr dark" >< span class = "soft" > Agenda</ span ></ div >
2026-07-10 17:41:47 +08:00
< div class = "mark mark-bl light" >< span class = "soft" > Sales Proposal</ span ></ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-br light" > 02 / 10</ div >
</ section >
<!-- === SLIDE 3: SECTION DIVIDER === -->
< section class = "slide s-divider" >
< div class = "split" >
< div class = "panel panel-white panel-pad" ></ div >
< div class = "edge-bar" ></ div >
< div class = "panel panel-blue panel-pad" >
< div class = "divider-no reveal" > 01</ div >
2026-07-10 17:41:47 +08:00
< div class = "divider-label reveal" > The Cost of the Status Quo</ div >
2026-06-12 17:17:58 +08:00
</ div >
</ div >
2026-08-18 07:09:45 +00:00
< div class = "mark mark-tl dark" >< span class = "chip" ></ span > OpenDesign</ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-tr dark" >< span class = "soft" > Section</ span ></ div >
2026-07-10 17:41:47 +08:00
< div class = "mark mark-bl light" >< span class = "soft" > Sales Proposal</ span ></ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-br light" > 03 / 10</ div >
</ section >
<!-- === SLIDE 4: BULLETS === -->
< section class = "slide s-bullets" >
< div class = "split" >
< div class = "panel panel-white panel-pad" >
2026-07-10 17:41:47 +08:00
< p class = "kicker reveal" > Three costs compounding today</ p >
< h2 class = "h2 reveal" style = "font-size: 66px;" > Seat fees, lock-in,< br > and lost leverage</ h2 >
2026-06-12 17:17:58 +08:00
< div class = "points" >
< div class = "point reveal" >
< span class = "tick" >< svg viewBox = "0 0 24 24" fill = "none" stroke = "#4361ee" stroke-width = "3" >< path d = "M4 12l5 5L20 6" /></ svg ></ span >
2026-07-10 17:41:47 +08:00
< div >< h3 > Per-seat SaaS tax</ h3 >< p > $500-$1,200 per designer per year across Figma, Claude Design, and adjacent AI add-ons — a bill that scales with headcount, not with output.</ p ></ div >
2026-06-12 17:17:58 +08:00
</ div >
< div class = "point reveal" >
< span class = "tick" >< svg viewBox = "0 0 24 24" fill = "none" stroke = "#4361ee" stroke-width = "3" >< path d = "M4 12l5 5L20 6" /></ svg ></ span >
2026-07-10 17:41:47 +08:00
< div >< h3 > Closed-model lock-in</ h3 >< p > Claude Design and similar tools hard-code one model vendor. You can't swap providers when pricing or quality shifts, and you can't self-host.</ p ></ div >
2026-06-12 17:17:58 +08:00
</ div >
< div class = "point reveal" >
< span class = "tick" >< svg viewBox = "0 0 24 24" fill = "none" stroke = "#4361ee" stroke-width = "3" >< path d = "M4 12l5 5L20 6" /></ svg ></ span >
2026-07-10 17:41:47 +08:00
< div >< h3 > Assets never leave the vendor's cloud</ h3 >< p > Every prototype, deck, and brand asset lives on someone else's servers — procurement inherits a permanent data-residency and security review.</ p ></ div >
2026-06-12 17:17:58 +08:00
</ div >
</ div >
</ div >
< div class = "edge-bar" ></ div >
< div class = "panel panel-blue panel-pad" >
2026-07-10 17:41:47 +08:00
< p class = "takeaway reveal" > Across a 40-person design org, that's roughly < strong > $38K-$48K a year</ strong > in seat fees alone — before counting the AI tooling most teams already pay for separately.</ p >
2026-06-12 17:17:58 +08:00
</ div >
</ div >
2026-08-18 07:09:45 +00:00
< div class = "mark mark-tl dark" >< span class = "chip" ></ span > OpenDesign</ div >
2026-07-10 17:41:47 +08:00
< div class = "mark mark-tr dark" >< span class = "soft" > Pain</ span ></ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-br light" > 04 / 10</ div >
</ section >
<!-- === SLIDE 5: BIG STAT === -->
< section class = "slide s-stat" >
< div class = "split" >
< div class = "panel panel-white panel-pad" >
2026-07-10 17:41:47 +08:00
< div class = "stat-num reveal" > 80< span class = "unit" > % lower run-rate</ span ></ div >
2026-06-12 17:17:58 +08:00
</ div >
< div class = "edge-bar" ></ div >
< div class = "panel panel-blue panel-pad" >
< div class = "stat-side reveal" >
2026-07-10 17:41:47 +08:00
< h3 > vs. Claude Design</ h3 >
< p > Full BYOK routes usage straight to Anthropic, OpenAI, Azure, or Google at cost. One pilot org's monthly bill fell from $500 to roughly $73 per seat once agent orchestration moved on-machine.</ p >
2026-06-12 17:17:58 +08:00
</ div >
</ div >
</ div >
2026-08-18 07:09:45 +00:00
< div class = "mark mark-tl dark" >< span class = "chip" ></ span > OpenDesign</ div >
2026-07-10 17:41:47 +08:00
< div class = "mark mark-tr dark" >< span class = "soft" > Current cost</ span ></ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-br light" > 05 / 10</ div >
</ section >
<!-- === SLIDE 6: QUOTE HERO === -->
< section class = "slide s-quote" >
< div class = "split" >
< div class = "panel panel-white panel-pad" >
< div class = "quote-mark reveal" > “ </ div >
2026-07-10 17:41:47 +08:00
< p class = "quote-text reveal" > We got our design system git-diffable and out of the < span class = "blue" > vendor's cloud</ span > in a week.</ p >
2026-06-12 17:17:58 +08:00
</ div >
< div class = "edge-bar" ></ div >
< div class = "panel panel-blue panel-pad" >
2026-07-10 17:41:47 +08:00
< p class = "quote-attr reveal" > VP of Design< span class = "soft" > 120-person product org, pilot cohort</ span ></ p >
2026-06-12 17:17:58 +08:00
</ div >
</ div >
2026-08-18 07:09:45 +00:00
< div class = "mark mark-tl dark" >< span class = "chip" ></ span > OpenDesign</ div >
2026-07-10 17:41:47 +08:00
< div class = "mark mark-tr dark" >< span class = "soft" > Proof</ span ></ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-br light" > 06 / 10</ div >
</ section >
<!-- === SLIDE 7: COMPARISON — split is the contrast === -->
< section class = "slide s-compare" >
< div class = "split" >
< div class = "panel panel-white panel-pad" >
2026-07-10 17:41:47 +08:00
< div class = "cmp-head reveal" >< h3 > Today's Stack</ h3 >< span class = "tag" > Locked-in</ span ></ div >
2026-06-12 17:17:58 +08:00
< ul class = "cmp-list reveal" >
2026-07-10 17:41:47 +08:00
< li > Per-seat billing that grows faster than the team</ li >
< li > One model vendor, no fallback if pricing changes</ li >
< li > Design files and history live only in vendor cloud</ li >
2026-06-12 17:17:58 +08:00
</ ul >
</ div >
< div class = "edge-bar" ></ div >
< div class = "panel panel-blue panel-pad" >
2026-08-18 07:09:45 +00:00
< div class = "cmp-head reveal" >< h3 > OpenDesign</ h3 >< span class = "tag" > Proposed</ span ></ div >
2026-06-12 17:17:58 +08:00
< ul class = "cmp-list reveal" >
2026-07-10 17:41:47 +08:00
< li > Apache-2.0 — fork, self-host, audit the code yourselves</ li >
< li > 21 coding agents — bring the one you already license</ li >
< li > Full BYOK — files and history stay in your own git repo</ li >
2026-06-12 17:17:58 +08:00
</ ul >
</ div >
</ div >
2026-08-18 07:09:45 +00:00
< div class = "mark mark-tl dark" >< span class = "chip" ></ span > OpenDesign</ div >
2026-07-10 17:41:47 +08:00
< div class = "mark mark-tr dark" >< span class = "soft" > Proposed change</ span ></ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-br light" > 07 / 10</ div >
</ section >
<!-- === SLIDE 8: PRINCIPLE GRID === -->
< section class = "slide s-grid" >
< div class = "split" >
< div class = "panel panel-white panel-pad" >
2026-07-10 17:41:47 +08:00
< h2 class = "h2 reveal" style = "font-size: 64px;" > The rollout plan< span class = "blue" > .</ span ></ h2 >
2026-06-12 17:17:58 +08:00
</ div >
< div class = "edge-bar" ></ div >
< div class = "panel panel-blue panel-pad" >
< div class = "grid4" >
2026-07-10 17:41:47 +08:00
< div class = "gcard reveal" >< div class = "gno" > Weeks 1-2</ div >< h3 > Pilot</ h3 >< p > 5-designer pilot on live projects; IT reviews the local-first security model in parallel.</ p ></ div >
< div class = "gcard reveal" >< div class = "gno" > Weeks 3-6</ div >< h3 > Expand</ h3 >< p > Roll out to the full design org; import existing Figma files and brand libraries as design systems.</ p ></ div >
< div class = "gcard reveal" >< div class = "gno" > Weeks 7-10</ div >< h3 > Integrate</ h3 >< p > Connect existing coding-agent licenses (Claude Code, Cursor, Codex); retire duplicate AI-design subscriptions.</ p ></ div >
< div class = "gcard reveal" >< div class = "gno" > Week 11+</ div >< h3 > Steady state</ h3 >< p > Procurement signs the annual support agreement; usage bills directly to your chosen model provider.</ p ></ div >
2026-06-12 17:17:58 +08:00
</ div >
</ div >
</ div >
2026-08-18 07:09:45 +00:00
< div class = "mark mark-tl dark" >< span class = "chip" ></ span > OpenDesign</ div >
2026-07-10 17:41:47 +08:00
< div class = "mark mark-tr dark" >< span class = "soft" > Rollout</ span ></ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-br light" > 08 / 10</ div >
</ section >
<!-- === SLIDE 9: BAR CHART === -->
< section class = "slide s-chart" >
< div class = "split" >
< div class = "panel panel-white panel-pad" >
2026-07-10 17:41:47 +08:00
< p class = "kicker reveal" > Annual cost · 40-seat design org</ p >
< h2 class = "h2 reveal" style = "font-size: 60px;" > Where the spend goes down</ h2 >
2026-06-12 17:17:58 +08:00
< div class = "chart" >
< div class = "bar-group reveal" >
2026-07-10 17:41:47 +08:00
< div class = "bar" style = "height: 100%;" >< span class = "bar-val" > $46K</ span ></ div >
< div class = "bar-label" > Today's stack</ div >
2026-06-12 17:17:58 +08:00
</ div >
< div class = "bar-group reveal" >
2026-07-10 17:41:47 +08:00
< div class = "bar solid" style = "height: 68%;" >< span class = "bar-val" > $31K</ span ></ div >
< div class = "bar-label" > Pilot, month 2</ div >
2026-06-12 17:17:58 +08:00
</ div >
< div class = "bar-group reveal" >
2026-07-10 17:41:47 +08:00
< div class = "bar solid" style = "height: 42%;" >< span class = "bar-val" > $19K</ span ></ div >
< div class = "bar-label" > Steady state</ div >
2026-06-12 17:17:58 +08:00
</ div >
< div class = "bar-group reveal" >
2026-07-10 17:41:47 +08:00
< div class = "bar" style = "height: 26%;" >< span class = "bar-val" > $12K</ span ></ div >
< div class = "bar-label" > Year-2 run-rate</ div >
2026-06-12 17:17:58 +08:00
</ div >
</ div >
</ div >
< div class = "edge-bar" ></ div >
< div class = "panel panel-blue panel-pad" >
2026-07-10 17:41:47 +08:00
< p class = "takeaway reveal" >< strong > $34K saved in year one</ strong > — re-deployable to headcount, not tooling (based on pilot cohort actuals).</ p >
2026-06-12 17:17:58 +08:00
</ div >
</ div >
2026-08-18 07:09:45 +00:00
< div class = "mark mark-tl dark" >< span class = "chip" ></ span > OpenDesign</ div >
2026-07-10 17:41:47 +08:00
< div class = "mark mark-tr dark" >< span class = "soft" > Cost model</ span ></ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-br light" > 09 / 10</ div >
</ section >
<!-- === SLIDE 10: CLOSING === -->
< section class = "slide s-close" >
< div class = "split" >
< div class = "panel panel-white panel-pad" ></ div >
< div class = "edge-bar" ></ div >
< div class = "panel panel-blue panel-pad" >
2026-07-10 17:41:47 +08:00
< h2 class = "display reveal" style = "color: var(--text-light);" > Approve the< br > pilot budget< span style = "color: var(--bg-dark);" > .</ span ></ h2 >
2026-06-12 17:17:58 +08:00
< div class = "close-links reveal" >
2026-07-10 17:41:47 +08:00
< span class = "lk" >< svg viewBox = "0 0 24 24" fill = "none" stroke = "#ffffff" stroke-width = "2" >< path d = "M3 8l9 6 9-6M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1z" /></ svg > Start a 5-seat pilot</ span >
< span class = "lk" >< svg viewBox = "0 0 24 24" fill = "none" stroke = "#ffffff" stroke-width = "2" >< circle cx = "12" cy = "12" r = "9" />< path d = "M3 12h18M12 3c2.5 2.5 3.8 5.6 3.8 9S14.5 18.5 12 21c-2.5-2.5-3.8-5.6-3.8-9S9.5 5.5 12 3z" /></ svg > Request the security & compliance brief</ span >
2026-06-12 17:17:58 +08:00
</ div >
</ div >
</ div >
2026-08-18 07:09:45 +00:00
< div class = "mark mark-tl dark" >< span class = "chip" ></ span > OpenDesign</ div >
2026-07-10 17:41:47 +08:00
< div class = "mark mark-tr dark" >< span class = "soft" > Commercial ask</ span ></ div >
< div class = "mark mark-bl light" >< span class = "soft" > Sales Proposal</ span ></ div >
2026-06-12 17:17:58 +08:00
< div class = "mark mark-br light" > 10 / 10</ div >
</ section >
</ main >
</ div >
<!-- Page counter lives outside the scaled stage -->
< div class = "deck-controls" aria-hidden = "true" >< span class = "cur" id = "pageCur" > 1</ span > / < span id = "pageTotal" > 10</ span ></ div >
< script >
/* ===========================================
SLIDE PRESENTATION CONTROLLER
Fixed 1920×
Navigation: ← → Space PageUp/PageDown Home/End, wheel,
touch swipe. Current slide is mirrored into the URL hash.
=========================================== */
( function () {
'use strict' ;
var STAGE_W = 1920 ;
var STAGE_H = 1080 ;
var stage = document . getElementById ( 'deckStage' );
var slides = Array . prototype . slice . call ( document . querySelectorAll ( '.slide' ));
var pageCur = document . getElementById ( 'pageCur' );
var pageTotal = document . getElementById ( 'pageTotal' );
var current = 0 ;
var wheelLockUntil = 0 ;
pageTotal . textContent = String ( slides . length );
/* --- Stage scaling: one transform, letterbox as needed --- */
function fitStage () {
var factor = Math . min ( window . innerWidth / STAGE_W , window . innerHeight / STAGE_H );
var x = ( window . innerWidth - STAGE_W * factor ) / 2 ;
var y = ( window . innerHeight - STAGE_H * factor ) / 2 ;
stage . style . transform = 'translate(' + x + 'px, ' + y + 'px) scale(' + factor + ')' ;
}
/* --- Hash routing: #/3 means slide index 3 (0-based) --- */
function indexFromHash () {
var m = /^#\/(\d+)$/ . exec ( window . location . hash );
if ( ! m ) return null ;
var idx = parseInt ( m [ 1 ], 10 );
return isNaN ( idx ) ? null : idx ;
}
function show ( index , skipHash ) {
current = Math . max ( 0 , Math . min ( index , slides . length - 1 ));
slides . forEach ( function ( slide , i ) {
slide . classList . toggle ( 'active' , i === current );
slide . classList . toggle ( 'visible' , i === current );
});
pageCur . textContent = String ( current + 1 );
if ( ! skipHash ) {
var target = '#/' + current ;
if ( window . location . hash !== target ) {
window . history . replaceState ( null , '' , target );
}
}
}
function next () { show ( current + 1 ); }
function prev () { show ( current - 1 ); }
/* --- Keyboard --- */
document . addEventListener ( 'keydown' , function ( e ) {
if ( e . target && e . target . getAttribute && e . target . getAttribute ( 'contenteditable' )) return ;
switch ( e . key ) {
case 'ArrowRight' :
case 'ArrowDown' :
case ' ' :
case 'PageDown' :
e . preventDefault (); next (); break ;
case 'ArrowLeft' :
case 'ArrowUp' :
case 'PageUp' :
e . preventDefault (); prev (); break ;
case 'Home' :
e . preventDefault (); show ( 0 ); break ;
case 'End' :
e . preventDefault (); show ( slides . length - 1 ); break ;
}
});
/* --- Mouse wheel (debounced) --- */
document . addEventListener ( 'wheel' , function ( e ) {
var now = Date . now ();
if ( now < wheelLockUntil ) return ;
if ( Math . abs ( e . deltaY ) < 12 ) return ;
wheelLockUntil = now + 650 ;
if ( e . deltaY > 0 ) { next (); } else { prev (); }
}, { passive : true });
/* --- Touch swipe --- */
var touchX = null ;
document . addEventListener ( 'touchstart' , function ( e ) {
if ( e . touches . length === 1 ) touchX = e . touches [ 0 ]. clientX ;
}, { passive : true });
document . addEventListener ( 'touchend' , function ( e ) {
if ( touchX === null ) return ;
var dx = e . changedTouches [ 0 ]. clientX - touchX ;
touchX = null ;
if ( Math . abs ( dx ) < 40 ) return ;
if ( dx < 0 ) { next (); } else { prev (); }
}, { passive : true });
/* --- Hash navigation (back/forward, deep links) --- */
window . addEventListener ( 'hashchange' , function () {
var idx = indexFromHash ();
if ( idx !== null && idx !== current ) show ( idx , true );
});
window . addEventListener ( 'resize' , fitStage );
fitStage ();
var initial = indexFromHash ();
show ( initial !== null ? initial : 0 , initial === null );
})();
</ script >
2026-07-10 17:41:47 +08:00
2026-06-12 17:17:58 +08:00
</ body >
</ html >
