# Vivid Gradient Future Deck

채도 높은 4정점 메시 그라디언트가 슬라이드를 풀블리드로 채우고, 발광 3D 형태와 굵은 기하 산세리프가 그 위에서 외치는 미래지향 테크 키노트 스타일.

- taxonomy: vibrant-gradient · mesh-gradient, glow, 3d-abstract, futuristic-tech, glassmorphism, heavy-display, full-bleed · complexity=high
- page types: presentation
- best for: 비전·미래 전략 키노트, AI·테크 제품 런칭 덱, 스타트업 투자 유치(데모데이) 피치덱
- avoid for: 보수적 경영진·재무 보고 덱(무채색 데이터 위주), 정부·법무 등 절제가 요구되는 공식 문서, 인쇄 흑백 배포용 자료
- provenance: authored (design-diversity 팩 'ppt-vivid-gradient-future' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual

## Design rules

# Vivid Gradient Future Deck

## Overview
A forward-looking AI/tech keynote language: a saturated four-vertex **mesh gradient** fills every 16:9 slide edge-to-edge, glowing curves and abstract 3D forms (spheres, ribbons, fluid blobs) float on top, and a heavy geometric sans shouts over it. Depth is never a black shadow — it is a vertex-colored glow. The whole identity reads at a glance as "next-generation tech." Where the Consulting Ghost Deck whispers in monochrome, this deck radiates in color; the persuasion is emotional impact, not data restraint.

## Colors & Roles
Canonical mode is **dark**: a deep violet-black canvas under a saturated mesh gradient is the style's core. The gradient's four vertices are fixed and traced from the pack — deep violet `#3A1C71`, magenta `#D11D8E`, electric blue `#2563EB`, cyan `#06B6D4` — carried verbatim into `chart-1..4` and `effects.gradient`. `primary` is magenta, `secondary` electric blue, `accent` the glow cyan `#7DF9FF` (`chart-5`), reserved for exactly one emphasized element per chart or diagram. Text is white; secondary text is light lavender. Surfaces are translucent glass (`rgba(255,255,255,0.12)`) with 1pt translucent-white borders — `border`/`input` keep that glass rgba rather than a solid. `destructive` maps to magenta (the palette has no red — chromatically closed). The dark surface neutrals (`background`, `card`, `muted`) are derived from the deep-violet vertex hue (~292); the entire **light** map is an authored adaptation (light lavender canvas, same vertex accents) for print or bright environments, absent from the source spec.

## Typography Rules
Two families: **Space Grotesk** (display/heading/metric) for Latin, **Inter** for body, with Pretendard/Noto Sans KR for Korean. Deck type steps, in pt on a 13.33in × 7.5in canvas: display (cover title) 52pt / bold / −0.02em; heading 38pt / bold / −0.02em; hero metric 88pt / bold — the single largest element on any slide; body 25pt / regular / 1.4 line-height, at most 6 lines per slide; caption 16pt / medium / +0.1em / uppercase as section labels. Value labels on charts are 16pt Space Grotesk Bold with tabular figures. Type sits directly on the gradient and must stay legible — white with a subtle glow, never a low-contrast tint.

## Layout Principles
16:9 canvas, 12-column grid. The background is full-bleed with no margin; content lives inside a safe area of 0.9in left/right, 0.8in top/bottom. Compose asymmetrically: text left or center, 3D forms on the opposite side cropped off the edge. Rotate the gradient's vertex positions slide to slide so the same background never repeats. Cards max 3 per slide; body max 6 lines.

## Depth & Elevation
Depth is color glow, never black. 3D shapes carry a 32pt outer glow; cards and forms cast a vertex-colored glow shadow (blur 40pt, ~35% opacity, zero offset). Glass surfaces use backdrop blur. Black hard shadows and grayscale flat fills are banned outright.

## Shapes
20pt border-radius everywhere — cards, nodes, images. Borders are 1pt translucent white only. Number badges are circular, vertex-color filled with an outer glow. No right-angle cards, no black borders.

## Component Stylings
- **Cover / title block**: full-bleed 4-color mesh, 52pt white title left or center, a glowing 3D sphere cropping in from the opposite edge, 16pt uppercase caption label at the bottom.
- **Glass card**: `rgba(255,255,255,0.12)` fill, 1pt `rgba(255,255,255,0.30)` border, 20pt radius, backdrop blur, vertex-color glow shadow. Max 3 per slide.
- **Charts**: SVG precision — no gridlines, no legend box, no data-area border; axis is a 0.75pt translucent-white hairline or omitted. Lines are vertex-color 3pt strokes + 12pt outer glow, with glow dots (4pt white core + 8pt color halo) at vertices. Bars are single vertex-color fills, 8pt radius, baseline at 0; one emphasis bar gets glow-cyan. Area fills fade vertex-color → transparent. Direct 16pt tabular value labels; series names labeled at the line end. No 3D widgets, rainbow palettes, truncated y-axes, or div-block bars.
- **Diagrams**: one shared language — glass nodes (20pt radius), vertex-color 2.5pt glowing connectors with glowing arrowheads, circular vertex-color number badges (Space Grotesk Bold 24pt white). Process, timeline, 2×2 matrix, comparison, hierarchy/funnel all derive from it; exactly one node/line is glow-cyan. SVG only, no div blocks.
- **KPI cards**: 2.8in × 2.2in glass cards — 88pt bold white hero number, 16pt uppercase label, vertex-color ▲▼ delta at 25pt, vertex-color glow shadow. Max 3 per slide.
- **Decoration**: glowing 3D forms (spheres, ribbons, fluid blobs) and glow curves only. No emoji, clipart, or flat 2D icons.

## Motion
Snappy. Slide transitions are Morph 0.6s (forms flow between slides) or Fade 0.4s; 3D shapes and hero metrics enter with Fade+Zoom. Emphasis easing is expressive (cubic-bezier 0.16, 1, 0.3, 1).

## Do's and Don'ts
**Do:** keep every background a four-vertex mesh gradient rotated per slide; express depth and emphasis with vertex-color glow; use translucent glass cards at 20pt radius; shout with heavy Space Grotesk over the gradient; decorate only with glowing 3D forms; reserve glow-cyan for one emphasis per chart.
**Don't:** use a default two-color purple-pink gradient or any flat/grayscale background; use black borders or black hard shadows; use right-angle cards; repeat the same gradient across slides; use emoji, clipart, or flat 2D icons; add gridlines, legend boxes, rainbow series, truncated y-axes, or 3D chart widgets.

## Slide Anatomy
- **Cover slide**: full-bleed mesh, 52pt white title (left or center), a glowing 3D sphere cropped in from the opposite edge, 16pt uppercase label bottom. No literal photography.
- **Content slide**: 38pt heading + up to 5 body lines on the left, two glass cards + one floating ribbon form on the right; the mesh continues behind everything with rotated vertices.
- **Metric slide**: up to three KPI glass cards, each an 88pt hero number over a 16pt label with a vertex-color delta and glow shadow.
- **Chart / exhibit slide**: one SVG glowing-line or vertex-color fade-area chart on a glass card; direct value labels, one glow-cyan emphasis, 0.75pt translucent-white axis, no gridlines or legend.
- **Diagram slide**: horizontal 4–5 step process or timeline in the shared node language — glass nodes, circular number badges, glowing vertex-color connectors, one glow-cyan active step.

## Agent Prompt Guide
> Build this presentation in the 'Vivid Gradient Future Deck' style: saturated full-bleed 16:9 slides whose background is a four-vertex mesh gradient (deep violet #3A1C71, magenta #D11D8E, electric blue #2563EB, cyan #06B6D4) built from stacked radial-gradients rotated per slide — never a two-color purple-pink gradient, never flat/grayscale. Depth and emphasis are vertex-color glow (blur 32–40pt, ~35%, zero offset), never black shadow. Cards and diagram nodes are translucent glass (rgba(255,255,255,0.12) fill, 1pt rgba(255,255,255,0.30) border, 20pt radius, backdrop blur). Heavy Space Grotesk Bold shouts over the gradient — 52pt cover, 38pt heading, 88pt hero metric — with 25pt Inter body and 16pt uppercase caption labels. Decorate only with glowing 3D forms and glow curves; charts and diagrams render precisely in SVG with glowing vertex-color lines, glow dots, rounded bars, and glass nodes, no gridlines/legends/rainbow/3D widgets; a single glow-cyan (#7DF9FF) marks one emphasis per exhibit. Motion is snappy (Morph 0.6s / Fade 0.4s, Fade+Zoom for shapes and metrics).

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `ppt-vivid-gradient-future` — an authored spec, not an extraction from a live deck, so all confidence fields are `manual`. This is a **ppt-track** entry: the shadcn token mapping is a web-rendering convenience (pt-based type steps, 16:9 frames, mesh gradient expressed as CSS radial-gradients). The canonical **dark** mode is native to the pack; the deep-violet surface neutrals are derived from the pack's vertex hue, and the entire **light** map is an authored adaptation absent from the source spec. The four mesh-vertex hexes are carried verbatim (never invented) and preserved in `effects.gradient` and `chart-1..5`.


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Vivid Gradient Future Deck — theme.css (generated, do not edit) */
:root {
  --radius: 20pt;
  --radius-selector: 20pt;
  --radius-field: 20pt;
  --font-sans: 'Inter', 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Pretendard', 'Noto Sans KR', sans-serif;
  --spacing: 8px;
  --shadow: 0px 0px 40pt 0px color-mix(in oklab, oklch(0.578 0.227 349.1) 35%, transparent);
  --ks-display-weight: 700;
  --ks-display-tracking: -0.02em;
  --background: oklch(0.974 0.009 299.2);
  --foreground: oklch(0.211 0.069 291.8);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.211 0.069 291.8);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.211 0.069 291.8);
  --primary: oklch(0.578 0.227 349.1);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.941 0.017 301.2);
  --secondary-foreground: oklch(0.457 0.070 295.2);
  --muted: oklch(0.974 0.009 299.2);
  --muted-foreground: oklch(0.514 0.068 296.7);
  --accent: oklch(0.715 0.126 215.2);
  --accent-foreground: oklch(0.211 0.069 291.8);
  --destructive: oklch(0.578 0.227 349.1);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.900 0.030 298.2);
  --input: oklch(0.900 0.030 298.2);
  --ring: oklch(0.578 0.227 349.1);
  --chart-1: oklch(0.578 0.227 349.1);
  --chart-2: oklch(0.546 0.215 262.9);
  --chart-3: oklch(0.715 0.126 215.2);
  --chart-4: oklch(0.324 0.137 293.4);
  --chart-5: oklch(0.913 0.111 199.6);
}

.dark {
  --background: oklch(0.141 0.039 292.0);
  --foreground: oklch(1 0 0);
  --card: oklch(0.211 0.069 291.8);
  --card-foreground: oklch(1 0 0);
  --popover: oklch(0.211 0.069 291.8);
  --popover-foreground: oklch(1 0 0);
  --primary: oklch(0.578 0.227 349.1);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.546 0.215 262.9);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.269 0.084 294.9);
  --muted-foreground: oklch(0.780 0.045 290.0);
  --accent: oklch(0.913 0.111 199.6);
  --accent-foreground: oklch(0.141 0.039 292.0);
  --destructive: oklch(0.578 0.227 349.1);
  --destructive-foreground: oklch(1 0 0);
  --border: rgba(255,255,255,0.30);
  --input: rgba(255,255,255,0.30);
  --ring: oklch(0.913 0.111 199.6);
  --chart-1: oklch(0.578 0.227 349.1);
  --chart-2: oklch(0.546 0.215 262.9);
  --chart-3: oklch(0.715 0.126 215.2);
  --chart-4: oklch(0.324 0.137 293.4);
  --chart-5: oklch(0.913 0.111 199.6);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<!-- Golden snippet for "Vivid Gradient Future Deck". Fragment — assumes the style's CSS variables
     (--background, --foreground, --primary, --secondary, --accent, --card, --border,
      --chart-1..5, --font-sans, --font-display, --radius, ...) are in scope.
     Tokens only; no literal colors or images. Two stacked 16:9 slide frames:
     a mesh-gradient vision slide, and a content slide with a glowing pill accent. -->
<div style="display:flex; flex-direction:column; gap:2rem; font-family:var(--font-sans); max-width:960px; margin:0 auto;">

  <!-- Slide 1: vision slide — saturated four-vertex mesh gradient + heavy display statement -->
  <section style="position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius); color:var(--foreground);
      background:
        radial-gradient(60% 80% at 12% 18%, var(--chart-4) 0%, transparent 60%),
        radial-gradient(55% 75% at 88% 22%, var(--chart-1) 0%, transparent 58%),
        radial-gradient(65% 85% at 78% 88%, var(--chart-2) 0%, transparent 60%),
        radial-gradient(60% 80% at 22% 90%, var(--chart-3) 0%, transparent 60%),
        var(--background);
      display:flex; flex-direction:column; justify-content:center; padding:7% 7.5%; box-sizing:border-box;">
    <!-- glowing 3D form cropped in from the right -->
    <div style="position:absolute; right:-8%; top:14%; width:42%; aspect-ratio:1; border-radius:50%;
        background:radial-gradient(circle at 35% 30%, var(--foreground) 0%, var(--chart-3) 30%, var(--chart-1) 75%);
        filter:blur(2px); box-shadow:0 0 90px 10px var(--chart-1); opacity:.9;"></div>
    <p style="position:relative; margin:0 0 .8em; font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; opacity:.85;">
      Keynote 2030 &mdash; Vision
    </p>
    <h1 style="position:relative; margin:0; font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,7vw,4.4rem); line-height:1.05; letter-spacing:-.02em; max-width:70%; text-shadow:0 0 32px var(--chart-2);">
      The next<br>intelligence<br>is ambient.
    </h1>
    <p style="position:relative; margin:1.4em 0 0; font-size:1rem; line-height:1.4; max-width:52%; opacity:.9;">
      A saturated mesh of light where every surface computes.
    </p>
  </section>

  <!-- Slide 2: content slide — glass cards + glowing pill accent -->
  <section style="position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius); color:var(--foreground);
      background:
        radial-gradient(55% 75% at 85% 15%, var(--chart-2) 0%, transparent 58%),
        radial-gradient(60% 80% at 15% 85%, var(--chart-1) 0%, transparent 60%),
        var(--background);
      display:flex; flex-direction:column; padding:6% 6.5%; box-sizing:border-box;">
    <!-- glowing pill / curve accent -->
    <span style="align-self:flex-start; display:inline-block; margin:0 0 1.1em; padding:.35em 1.1em; border-radius:999px;
        background:var(--accent); color:var(--accent-foreground); font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
        box-shadow:0 0 24px 2px var(--accent);">Live signal</span>
    <h2 style="margin:0 0 .8em; font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,4vw,2.3rem); line-height:1.15; letter-spacing:-.02em;">
      Three curves bend toward it.
    </h2>
    <div style="flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:4%; align-items:stretch;">
      <div style="border-radius:var(--radius); background:var(--card); border:1px solid var(--border); padding:7% 6%; box-shadow:0 0 40px -6px var(--chart-1); backdrop-filter:blur(8px);">
        <div style="font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,5vw,2.8rem); line-height:1;">92<span style="font-size:.5em;">%</span></div>
        <div style="margin-top:.6em; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; opacity:.85;">Adoption</div>
      </div>
      <div style="border-radius:var(--radius); background:var(--card); border:1px solid var(--border); padding:7% 6%; box-shadow:0 0 40px -6px var(--chart-2); backdrop-filter:blur(8px);">
        <div style="font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,5vw,2.8rem); line-height:1;">4.1<span style="font-size:.5em;">x</span></div>
        <div style="margin-top:.6em; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; opacity:.85;">Throughput</div>
      </div>
      <div style="border-radius:var(--radius); background:var(--card); border:1px solid var(--accent); padding:7% 6%; box-shadow:0 0 44px -4px var(--accent); backdrop-filter:blur(8px);">
        <div style="font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,5vw,2.8rem); line-height:1; color:var(--accent);">0.3<span style="font-size:.5em;">s</span></div>
        <div style="margin-top:.6em; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; opacity:.85;">Latency</div>
      </div>
    </div>
  </section>

</div>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/ppt-vivid-gradient.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.