wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
380 lines
24 KiB
HTML
380 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Write an Enterprise AI Adoption Brief like a Transformation Lead - AI literacy</title>
|
|
<style>/* html-ppt :: webfonts (only families actually used by this theme) */
|
|
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
|
|
</style>
|
|
<style>/* html-ppt :: base.css — reset + shared tokens + layout primitives */
|
|
/* Default tokens. Themes in assets/themes/*.css override the :root block. */
|
|
:root {
|
|
--bg: #ffffff;
|
|
--bg-soft: #f7f7f8;
|
|
--surface: #ffffff;
|
|
--surface-2: #f2f2f4;
|
|
--border: rgba(0,0,0,.08);
|
|
--border-strong: rgba(0,0,0,.16);
|
|
--text-1: #111216;
|
|
--text-2: #55596a;
|
|
--text-3: #8a8f9e;
|
|
--accent: #d97757;
|
|
--accent-2: #c65a3f;
|
|
--accent-3: #e8b15c;
|
|
--good: #1aaf6c;
|
|
--warn: #f5a524;
|
|
--bad: #e0445a;
|
|
--grad: linear-gradient(100deg,#e8b15c,#d97757 58%,#c65a3f);
|
|
--grad-soft: linear-gradient(100deg,#f7ead8,#f6e2d6 58%,#f3d9cd);
|
|
--radius: 18px;
|
|
--radius-sm: 12px;
|
|
--radius-lg: 26px;
|
|
--shadow: 0 10px 30px rgba(18,24,40,.08), 0 2px 6px rgba(18,24,40,.04);
|
|
--shadow-lg: 0 24px 60px rgba(18,24,40,.14), 0 6px 16px rgba(18,24,40,.06);
|
|
--font-sans: 'Inter',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
|
|
--font-serif: 'Source Serif 4',Georgia,serif;
|
|
--font-mono: 'JetBrains Mono',SFMono-Regular,Menlo,monospace;
|
|
--font-display: var(--font-serif);
|
|
--letter-tight: -.03em;
|
|
--letter-normal: -.01em;
|
|
--ease: cubic-bezier(.4,0,.2,1);
|
|
}
|
|
|
|
*,*::before,*::after{box-sizing:border-box}
|
|
html,body{margin:0;padding:0;background:var(--bg);color:var(--text-1);
|
|
font-family:var(--font-sans);font-weight:400;line-height:1.6;
|
|
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
|
|
letter-spacing:var(--letter-normal)}
|
|
img,svg,video{max-width:100%;display:block}
|
|
a{color:var(--accent);text-decoration:none}
|
|
a:hover{text-decoration:underline}
|
|
code,kbd,pre,samp{font-family:var(--font-mono)}
|
|
|
|
/* ================= SLIDE SYSTEM ================= */
|
|
.deck{position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--bg)}
|
|
.slide{
|
|
position:absolute;inset:0;
|
|
display:flex;flex-direction:column;justify-content:center;
|
|
padding:72px 96px;
|
|
box-sizing:border-box;
|
|
opacity:0;pointer-events:none;
|
|
transition:opacity .5s var(--ease), transform .5s var(--ease);
|
|
transform:translateX(30px);
|
|
overflow:hidden;
|
|
}
|
|
.slide.is-active{opacity:1;pointer-events:auto;transform:translateX(0);z-index:2}
|
|
.slide.is-prev{transform:translateX(-30px)}
|
|
|
|
/* single-page standalone (used when a layout file is opened directly) */
|
|
body.single .slide{position:relative;width:100vw;height:100vh;opacity:1;transform:none;pointer-events:auto}
|
|
|
|
/* ================= TYPOGRAPHY ================= */
|
|
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
|
|
.kicker{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
|
|
h1.title,.h1{font-family:var(--font-display);font-size:72px;line-height:1.05;font-weight:800;letter-spacing:var(--letter-tight);margin:0 0 18px;color:var(--text-1)}
|
|
h2.title,.h2{font-family:var(--font-display);font-size:54px;line-height:1.1;font-weight:700;letter-spacing:var(--letter-tight);margin:0 0 14px}
|
|
h3,.h3{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:var(--letter-normal);margin:0 0 10px}
|
|
h4,.h4{font-size:22px;line-height:1.3;font-weight:600;margin:0 0 8px}
|
|
.lede{font-size:22px;line-height:1.55;color:var(--text-2);font-weight:300;max-width:62ch}
|
|
.dim{color:var(--text-2)}
|
|
.dim2{color:var(--text-3)}
|
|
.mono{font-family:var(--font-mono)}
|
|
.serif{font-family:var(--font-serif)}
|
|
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
|
|
|
|
/* ================= LAYOUT PRIMITIVES ================= */
|
|
.stack>*+*{margin-top:14px}
|
|
.row{display:flex;gap:24px;align-items:center}
|
|
.row.wrap{flex-wrap:wrap}
|
|
.grid{display:grid;gap:24px}
|
|
.g2{grid-template-columns:repeat(2,1fr)}
|
|
.g3{grid-template-columns:repeat(3,1fr)}
|
|
.g4{grid-template-columns:repeat(4,1fr)}
|
|
.center{display:flex;align-items:center;justify-content:center;text-align:center}
|
|
.fill{flex:1}
|
|
.sp-t{padding-top:24px}.sp-b{padding-bottom:24px}
|
|
.mt-s{margin-top:8px}.mt-m{margin-top:18px}.mt-l{margin-top:32px}
|
|
.mb-s{margin-bottom:8px}.mb-m{margin-bottom:18px}.mb-l{margin-bottom:32px}
|
|
|
|
/* ================= CARDS ================= */
|
|
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
|
|
padding:26px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
|
|
.card-soft{background:var(--surface-2);border:1px solid var(--border)}
|
|
.card-outline{background:transparent;border:1.5px solid var(--border-strong);box-shadow:none}
|
|
.card-accent{background:var(--surface);border-top:3px solid var(--accent)}
|
|
.card-hover{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
|
|
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
|
|
|
|
.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:500;
|
|
background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
|
|
.pill-accent{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
|
|
|
|
/* ================= BARS / DIVIDERS ================= */
|
|
.divider{height:1px;background:var(--border);width:100%}
|
|
.divider-accent{height:3px;width:72px;background:var(--accent);border-radius:2px}
|
|
|
|
/* ================= CHROME (header/footer/progress) ================= */
|
|
.deck-header{position:absolute;top:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
|
|
font-size:12px;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;z-index:10;pointer-events:none}
|
|
.deck-footer{position:absolute;bottom:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
|
|
font-size:12px;color:var(--text-3);z-index:10;pointer-events:none}
|
|
.slide-number::before{content:attr(data-current)}
|
|
.slide-number::after{content:" / " attr(data-total)}
|
|
.progress-bar{position:fixed;left:0;right:0;bottom:0;height:3px;background:transparent;z-index:20}
|
|
.progress-bar > span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s var(--ease)}
|
|
|
|
/* ================= PRESENTER / OVERVIEW ================= */
|
|
.notes{display:none!important}
|
|
.notes-overlay{position:fixed;inset:auto 0 0 0;max-height:42vh;background:rgba(20,22,30,.95);color:#e8ebf4;
|
|
padding:20px 32px;font-size:16px;line-height:1.6;border-top:1px solid rgba(255,255,255,.1);transform:translateY(100%);
|
|
transition:transform .3s var(--ease);z-index:40;overflow:auto;font-family:var(--font-sans)}
|
|
.notes-overlay.open{transform:translateY(0)}
|
|
.overview{position:fixed;inset:0;background:rgba(10,12,18,.92);backdrop-filter:blur(12px);z-index:50;
|
|
display:none;padding:40px;overflow:auto}
|
|
.overview.open{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-content:start}
|
|
.overview .thumb{background:var(--surface);border:1px solid var(--border);border-radius:12px;
|
|
aspect-ratio:16/9;overflow:hidden;cursor:pointer;position:relative;color:var(--text-1);padding:16px;
|
|
font-size:11px;transition:transform .2s var(--ease)}
|
|
.overview .thumb:hover{transform:scale(1.04)}
|
|
.overview .thumb .n{position:absolute;top:8px;left:10px;font-weight:700;font-size:14px;color:var(--text-3)}
|
|
.overview .thumb .t{position:absolute;bottom:10px;left:14px;right:14px;font-weight:600;color:var(--text-1)}
|
|
|
|
/* ================= PRESENTER VIEW ================= */
|
|
/* Presenter view opens in a separate popup window (S key).
|
|
* All presenter styles are self-contained in the popup HTML generated by runtime.js.
|
|
* The audience window (this file) is NOT affected — it stays as normal deck view.
|
|
* Only the .notes class below is needed to hide speaker notes from audience. */
|
|
|
|
/* ================= UTILITY ================= */
|
|
.hidden{display:none!important}
|
|
.nowrap{white-space:nowrap}
|
|
.tr{text-align:right}.tc{text-align:center}.tl{text-align:left}
|
|
.uppercase{text-transform:uppercase;letter-spacing:.12em}
|
|
|
|
/* ================= PRINT ================= */
|
|
@media print{
|
|
.slide{position:relative;opacity:1!important;transform:none!important;page-break-after:always;height:100vh}
|
|
.deck-header,.deck-footer,.progress-bar,.notes-overlay,.overview{display:none!important}
|
|
}
|
|
|
|
</style>
|
|
<style>/* obsidian-claude-gradient — warm volcanic-obsidian dark base + Claude terracotta ember gradient (single warm-hue stance, serif display) */
|
|
.tpl-obsidian-claude-gradient{
|
|
--oc-bg:#151210; /* warm obsidian, never pure black */
|
|
--oc-surface:#1c1815;
|
|
--oc-surface2:#241f1a;
|
|
--oc-border:rgba(236,229,220,.13);
|
|
--oc-border-strong:rgba(236,229,220,.3);
|
|
--oc-accent:#d97757; /* claude terracotta */
|
|
--oc-accent2:#c65a3f; /* deep ember */
|
|
--oc-accent3:#e3996f; /* lit ember (kept: referenced by inline styles) */
|
|
--oc-green:#9ab98a;
|
|
--oc-blue:#e0b178; /* legacy hook, remapped to amber */
|
|
--oc-orange:#d97757;
|
|
--oc-yellow:#e0b178;
|
|
--oc-red:#c65a3f;
|
|
--oc-text:#ece5dc;
|
|
--oc-dim:#a99d8f;
|
|
--oc-dimmer:#867967; /* lifted from #6f6457 for AA-adjacent contrast on code comments + badge labels */
|
|
--oc-serif:'Source Serif 4',Georgia,serif;
|
|
--oc-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace;
|
|
--oc-ease:cubic-bezier(.16,1,.3,1);
|
|
background:var(--oc-bg);
|
|
color:var(--oc-text);
|
|
font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
|
|
}
|
|
.tpl-obsidian-claude-gradient .slide{background:var(--oc-bg);color:var(--oc-text);padding:72px 110px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;overflow:hidden}
|
|
/* one quiet ember glow rising from the lower edge — the only gradient surface besides .oc-g text */
|
|
.tpl-obsidian-claude-gradient .oc-cbg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(110% 70% at 18% 108%,rgba(217,119,87,.14) 0%,transparent 62%)}
|
|
/* hairline baseline above the footer zone instead of the old GitHub dot-grid */
|
|
.tpl-obsidian-claude-gradient .oc-cgrid{position:absolute;left:110px;right:110px;bottom:52px;top:auto;height:1px;pointer-events:none;background:var(--oc-border)}
|
|
.tpl-obsidian-claude-gradient .slide > *{position:relative;z-index:2}
|
|
.tpl-obsidian-claude-gradient .oc-snum{position:absolute;top:auto;bottom:30px;right:110px;color:var(--oc-dimmer);font-family:var(--oc-mono);font-size:11px;letter-spacing:.14em;z-index:3}
|
|
.tpl-obsidian-claude-gradient .oc-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--oc-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--oc-accent);margin-bottom:30px}
|
|
.tpl-obsidian-claude-gradient .oc-h1{font-family:var(--oc-serif);font-size:76px;font-weight:600;line-height:1.06;letter-spacing:-.022em;margin:0 0 10px;color:var(--oc-text)}
|
|
.tpl-obsidian-claude-gradient .oc-h2{font-family:var(--oc-serif);font-size:48px;font-weight:600;line-height:1.12;letter-spacing:-.018em;margin:0 0 14px}
|
|
.tpl-obsidian-claude-gradient .oc-sub{font-size:18px;color:var(--oc-dim);line-height:1.7;max-width:760px;margin-top:14px}
|
|
/* the gradient of the deck name: a warm ember ramp, amber into terracotta — one hue family, a stance */
|
|
.tpl-obsidian-claude-gradient .oc-g{background:linear-gradient(100deg,#e8b15c 0%,#d97757 58%,#c65a3f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
|
|
.tpl-obsidian-claude-gradient .oc-card{background:transparent;border:0;border-top:1px solid var(--oc-border-strong);border-radius:0;padding:24px 28px 22px 0;text-align:left;position:relative;overflow:hidden}
|
|
.tpl-obsidian-claude-gradient .oc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;width:100%;max-width:1000px;margin-top:30px}
|
|
.tpl-obsidian-claude-gradient .oc-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 48px;width:100%;max-width:1080px;margin-top:30px}
|
|
.tpl-obsidian-claude-gradient .oc-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--oc-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:0;border-radius:0;margin-bottom:12px}
|
|
.tpl-obsidian-claude-gradient .oc-bp{background:transparent;color:var(--oc-accent)}
|
|
.tpl-obsidian-claude-gradient .oc-bb{background:transparent;color:var(--oc-dimmer)}
|
|
.tpl-obsidian-claude-gradient .oc-bg{background:transparent;color:var(--oc-green)}
|
|
.tpl-obsidian-claude-gradient .oc-bo{background:transparent;color:var(--oc-accent3)}
|
|
.tpl-obsidian-claude-gradient .oc-code{background:#0e0c0a;border:1px solid var(--oc-border);border-radius:4px;padding:22px 26px;font-family:var(--oc-mono);font-size:14px;line-height:1.85;width:100%;max-width:860px;text-align:left;color:var(--oc-text)}
|
|
.tpl-obsidian-claude-gradient .oc-code .cp{color:var(--oc-green)}
|
|
.tpl-obsidian-claude-gradient .oc-code .cc{color:#e0b178}
|
|
.tpl-obsidian-claude-gradient .oc-code .ca{color:var(--oc-accent3)}
|
|
.tpl-obsidian-claude-gradient .oc-code .cm{color:var(--oc-dimmer)}
|
|
.tpl-obsidian-claude-gradient .oc-code .cs{color:var(--oc-accent)}
|
|
.tpl-obsidian-claude-gradient .oc-hl{background:transparent;border:0;border-left:2px solid var(--oc-accent);border-radius:0;padding:6px 0 6px 24px;font-size:16px;line-height:1.7;max-width:860px;text-align:left;color:var(--oc-dim)}
|
|
.tpl-obsidian-claude-gradient .oc-hl b{color:var(--oc-text)}
|
|
.tpl-obsidian-claude-gradient .oc-steps{display:flex;flex-direction:column;gap:0;width:100%;max-width:820px;text-align:left;border-top:1px solid var(--oc-border-strong);margin-top:14px}
|
|
.tpl-obsidian-claude-gradient .oc-step{display:flex;gap:26px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--oc-border)}
|
|
.tpl-obsidian-claude-gradient .oc-sn{width:44px;flex-shrink:0;font-family:var(--oc-mono);font-weight:500;font-size:13px;color:var(--oc-accent);background:none;border-radius:0;height:auto;display:block}
|
|
.tpl-obsidian-claude-gradient .oc-sc h4{font-size:17px;font-weight:600;margin:0 0 6px;color:var(--oc-text)}
|
|
.tpl-obsidian-claude-gradient .oc-sc p{font-size:14px;color:var(--oc-dim);line-height:1.6;margin:0}
|
|
.tpl-obsidian-claude-gradient .oc-pill{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--oc-border-strong);border-radius:2px;padding:9px 18px;font-family:var(--oc-mono);font-size:13px;font-weight:400;color:var(--oc-text);margin:4px 10px 4px 0;transition:border-color .25s var(--oc-ease),transform .25s var(--oc-ease)}
|
|
.tpl-obsidian-claude-gradient .oc-pill:hover{border-color:var(--oc-accent);transform:translateY(-2px)}
|
|
.tpl-obsidian-claude-gradient .oc-quote{max-width:860px}
|
|
.tpl-obsidian-claude-gradient .oc-quote blockquote{font-family:var(--oc-serif);font-size:36px;font-weight:600;line-height:1.4;letter-spacing:-.01em;position:relative;padding:0;margin:0;color:var(--oc-text)}
|
|
.tpl-obsidian-claude-gradient .oc-quote blockquote::before{content:'';position:absolute;left:-34px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,#e8b15c,#c65a3f)}
|
|
.tpl-obsidian-claude-gradient .oc-quote .attr{margin-top:24px;font-family:var(--oc-mono);font-size:13px;color:var(--oc-dim)}
|
|
.tpl-obsidian-claude-gradient .oc-big{font-family:var(--oc-serif);font-size:140px;font-weight:700;line-height:.95;letter-spacing:-.03em}
|
|
|
|
/* entrance: transform+opacity only, staggered ease-out, reduced-motion safe */
|
|
@keyframes oc-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
|
|
.tpl-obsidian-claude-gradient .slide.is-active > *{animation:oc-rise .65s var(--oc-ease) both}
|
|
.tpl-obsidian-claude-gradient .slide.is-active > *:nth-child(4){animation-delay:.06s}
|
|
.tpl-obsidian-claude-gradient .slide.is-active > *:nth-child(5){animation-delay:.12s}
|
|
.tpl-obsidian-claude-gradient .slide.is-active > *:nth-child(6){animation-delay:.18s}
|
|
.tpl-obsidian-claude-gradient .slide.is-active > *:nth-child(7){animation-delay:.24s}
|
|
.tpl-obsidian-claude-gradient .slide.is-active > *:nth-child(n+8){animation-delay:.3s}
|
|
.tpl-obsidian-claude-gradient .slide.is-active > .oc-cbg,
|
|
.tpl-obsidian-claude-gradient .slide.is-active > .oc-cgrid,
|
|
.tpl-obsidian-claude-gradient .slide.is-active > .oc-snum{animation:none}
|
|
@media (prefers-reduced-motion:reduce){.tpl-obsidian-claude-gradient .slide.is-active > *{animation:none}}
|
|
|
|
</style>
|
|
<style>
|
|
/* Static-preview fallback (runtime.js is absent — keep every slide visible) */
|
|
.deck{height:auto;min-height:100vh;overflow:visible}
|
|
.slide{position:relative;inset:auto;opacity:1;pointer-events:auto;transform:none;height:100vh;page-break-after:always}
|
|
.deck-header,.deck-footer,.slide-number,.progress-bar,.notes-overlay,.overview{pointer-events:none}
|
|
.notes{display:none!important}
|
|
</style></head>
|
|
<body class="tpl-obsidian-claude-gradient">
|
|
<div class="deck">
|
|
|
|
<!-- 1. COVER -->
|
|
<section class="slide is-active">
|
|
<div class="oc-cbg"></div>
|
|
<div class="oc-cgrid"></div>
|
|
<div class="oc-snum">01 / 08</div>
|
|
<div class="oc-tag">● AI LITERACY · ENTERPRISE ADOPTION BRIEF</div>
|
|
<h1 class="oc-h1">The Enterprise AI Adoption Brief<br>every <span class="oc-g">Transformation Lead</span> needs</h1>
|
|
<p class="oc-sub">How Open Design puts local-first, BYOK AI agents to work —<br>with the risk controls, ROI case, and rollout plan a CIO can actually sign off on.</p>
|
|
<div style="margin-top:32px">
|
|
<span class="oc-pill">🧭 For Leadership, IT & Security</span>
|
|
<span class="oc-pill">🔒 Local-first · BYOK</span>
|
|
<span class="oc-pill">📊 ROI-backed</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. SECTION -->
|
|
<section class="slide">
|
|
<div class="oc-cbg"></div>
|
|
<div class="oc-cgrid"></div>
|
|
<div class="oc-snum">02 / 08</div>
|
|
<div class="oc-tag">● CHAPTER 01 · WHY NOW</div>
|
|
<h1 class="oc-h1" style="font-size:110px">Why <span class="oc-g">now</span>?</h1>
|
|
<p class="oc-sub">Employees are already pasting confidential briefs into consumer AI apps, with zero audit trail.<br>The choice in front of leadership isn't "AI or no AI" — it's "sanctioned agent or shadow IT."</p>
|
|
</section>
|
|
|
|
<!-- 3. CONTENT — compare cards -->
|
|
<section class="slide">
|
|
<div class="oc-cbg"></div>
|
|
<div class="oc-cgrid"></div>
|
|
<div class="oc-snum">03 / 08</div>
|
|
<div class="oc-tag">● CHAPTER 02 · WORKFLOW MAP</div>
|
|
<h2 class="oc-h2">Shadow AI vs a <span class="oc-g">sanctioned agent workflow</span></h2>
|
|
<div class="oc-grid-2">
|
|
<div class="oc-card">
|
|
<span class="oc-badge oc-bb">TODAY · SHADOW AI</span>
|
|
<h4 style="font-size:20px;margin-bottom:10px">Ungoverned data flow</h4>
|
|
<p style="color:var(--oc-dim);font-size:14px;line-height:1.65">Marketing and product teams already use consumer AI tools —<br>• Pastes go through personal accounts, no company log<br>• Briefs, brand assets, and customer data leave the network<br>• IT has no visibility into which model saw what</p>
|
|
</div>
|
|
<div class="oc-card" style="border-top-color:var(--oc-accent)">
|
|
<span class="oc-badge oc-bp">SANCTIONED · OPEN DESIGN</span>
|
|
<h4 style="font-size:20px;margin-bottom:10px">One workflow, fully observable</h4>
|
|
<p style="color:var(--oc-dim);font-size:14px;line-height:1.65">The same work, brought inside the perimeter —<br>• Runs on the employee's machine; nothing uploaded by default<br>• BYOK routes every model call through IT-approved keys<br>• Full agent transcript stored locally for audit</p>
|
|
</div>
|
|
</div>
|
|
<div class="oc-hl" style="margin-top:26px">💡 <b>Key insight:</b> the fastest way to stop shadow AI is to make the sanctioned path faster than the workaround.</div>
|
|
</section>
|
|
|
|
<!-- 4. STEPS -->
|
|
<section class="slide">
|
|
<div class="oc-cbg"></div>
|
|
<div class="oc-cgrid"></div>
|
|
<div class="oc-snum">04 / 08</div>
|
|
<div class="oc-tag">● CHAPTER 03 · THE PILOT</div>
|
|
<h2 class="oc-h2">A 90-day pilot, not a platform migration</h2>
|
|
<div class="oc-steps">
|
|
<div class="oc-step"><div class="oc-sn">1</div><div class="oc-sc"><h4>Week 1-2 — Scope one team</h4><p>Pick a single high-friction workflow (e.g. marketing deck production) and a 6-10 person pilot cohort.</p></div></div>
|
|
<div class="oc-step"><div class="oc-sn">2</div><div class="oc-sc"><h4>Week 3-6 — Install with existing keys</h4><p>IT provisions BYOK credentials once; no new vendor contract, no data-processing addendum for a local-first tool.</p></div></div>
|
|
<div class="oc-step"><div class="oc-sn">3</div><div class="oc-sc"><h4>Week 7-10 — Measure against baseline</h4><p>Track cycle time, review rounds, and spend per deliverable against the team's last quarter.</p></div></div>
|
|
<div class="oc-step"><div class="oc-sn">4</div><div class="oc-sc"><h4>Week 11-13 — Decide: expand, adjust, or stop</h4><p>Present the pilot's ROI and risk-control readout to leadership before any wider rollout commitment.</p></div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. CODE -->
|
|
<section class="slide">
|
|
<div class="oc-cbg"></div>
|
|
<div class="oc-cgrid"></div>
|
|
<div class="oc-snum">05 / 08</div>
|
|
<div class="oc-tag">● CHAPTER 04 · RISK CONTROL</div>
|
|
<h2 class="oc-h2">Data residency, by architecture — not by policy</h2>
|
|
<pre class="oc-code"><span class="cm">// .od/ — all of Open Design's runtime data lives in this local directory</span>
|
|
.od/
|
|
├── <span class="cc">app.sqlite</span> <span class="cm">// local SQLite: sessions & design memory</span>
|
|
├── <span class="cc">projects/</span> <span class="cm">// per-project agent working directories</span>
|
|
├── <span class="cc">artifacts/</span> <span class="cm">// generated briefs / decks / prototypes</span>
|
|
└── <span class="cc">media-config.json</span> <span class="cm">// BYOK credentials, <span class="cs">API keys never leave the machine</span></span>
|
|
</pre>
|
|
<p class="oc-sub" style="margin-top:18px">No sign-up, no cloud sync, no third-party retention — enforced by where the data lives, not by a policy PDF. <b style="color:var(--oc-accent3)">Security review becomes a one-time architecture check, not a per-project exception.</b></p>
|
|
</section>
|
|
|
|
<!-- 6. STATS -->
|
|
<section class="slide">
|
|
<div class="oc-cbg"></div>
|
|
<div class="oc-cgrid"></div>
|
|
<div class="oc-snum">06 / 08</div>
|
|
<div class="oc-tag">● CHAPTER 05 · THE ROI CASE</div>
|
|
<h2 class="oc-h2">The <span class="oc-g">numbers</span> leadership will ask for</h2>
|
|
<div class="oc-grid-3" style="margin-top:28px">
|
|
<div class="oc-card"><div class="oc-big oc-g" style="font-size:80px">3.4x</div><p style="color:var(--oc-dim);margin-top:14px;font-size:13px">faster brief-to-first-draft cycle, pilot team average</p></div>
|
|
<div class="oc-card"><div class="oc-big oc-g" style="font-size:80px">$0</div><p style="color:var(--oc-dim);margin-top:14px;font-size:13px">added SaaS spend — BYOK reuses existing model contracts</p></div>
|
|
<div class="oc-card"><div class="oc-big oc-g" style="font-size:80px">-80%</div><p style="color:var(--oc-dim);margin-top:14px;font-size:13px">estimated per-deliverable cost vs a closed cloud design tool</p></div>
|
|
</div>
|
|
<div class="oc-hl" style="margin-top:26px">The business case isn't "AI is powerful" — it's "this specific team shipped 3.4x faster at zero new spend, with every action logged."</div>
|
|
</section>
|
|
|
|
<!-- 7. QUOTE / CTA -->
|
|
<section class="slide">
|
|
<div class="oc-cbg"></div>
|
|
<div class="oc-cgrid"></div>
|
|
<div class="oc-snum">07 / 08</div>
|
|
<div class="oc-tag">● CHAPTER 06 · ROLLOUT PLAN</div>
|
|
<div class="oc-quote">
|
|
<blockquote>Approve the pilot, not the platform.<br>Every gate after that is a <span class="oc-g">data-backed decision</span>.</blockquote>
|
|
<div class="attr">— Recommendation to the steering committee</div>
|
|
</div>
|
|
<div style="margin-top:36px">
|
|
<span class="oc-pill">① Pilot · 90 days</span>
|
|
<span class="oc-pill">② Department rollout · 2 quarters</span>
|
|
<span class="oc-pill">③ Org-wide with governance board</span>
|
|
<span class="oc-pill">④ Quarterly risk & ROI review</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 8. THANKS -->
|
|
<section class="slide">
|
|
<div class="oc-cbg"></div>
|
|
<div class="oc-cgrid"></div>
|
|
<div class="oc-snum">08 / 08</div>
|
|
<div class="oc-big oc-g">Thanks.</div>
|
|
<p class="oc-sub" style="margin-top:26px">Prepared for the AI steering committee — pilot scope, risk-control architecture, and ROI model available on request.<br><b style="color:var(--oc-accent3)">Next step: schedule the 90-day pilot kickoff.</b></p>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|