# Glassmorphism Deck

반투명 프로스티드 글래스 패널이 4색 메시 그라디언트 위에 부유하고, 밝은 하이라이트 보더가 깊이를 만드는 16:9 슬라이드 스타일 — 배경이 색을 담당하고 강조는 흰색 하나뿐.

- taxonomy: glassmorphism · glassmorphism, frosted-glass, backdrop-blur, mesh-gradient, highlight-border, keynote, translucent-panel · complexity=medium
- page types: presentation
- best for: 제품·테크 키노트와 런칭 발표, 브랜드·무드 중심의 감성 임팩트 덱, 디자인·스타트업 피치덱과 비전 발표
- avoid for: 데이터가 조밀한 전략 컨설팅·재무 보고 덱, 흑백 인쇄·저사양 프로젝터 배포용 자료, 장문 텍스트가 슬라이드를 가득 채우는 문서형 덱
- provenance: authored (design-diversity 팩 'ppt-glassmorphism' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual

## Design rules

# Glassmorphism Deck

## Overview
Glassmorphism generalized into a presentation deck. Every 16:9 slide is filled edge-to-edge by a four-stop **mesh gradient** (purple, sky, pink, mint), and all content floats above it inside **frosted-glass panels**: translucent fills that let the gradient bleed softly through, blurred behind, and edged with a bright 1.5px highlight border. Color is the background's job — the only accent is white. The panel comes in two variants (light glass for body slides, dark glass for cover and emphasis) but the identity never changes: translucency + backdrop blur + highlight border. "Content on floating glass over a colorful gradient" is the whole idea. Readability is non-negotiable: fills stay at 55%+ opacity and text hierarchy is built from size and weight, never faded with alpha.

## Colors & Roles
Canonical mode is **light** (light-glass panels are the pack's body-slide default). Both modes share the same vivid mesh; only the panel variant differs. The mesh is traced to the source pack: purple #7B5BFF, sky #3FA9FF, pink #FF6FB5, mint #48E1C8. `background`/`primary` map to the purple mesh anchor, and the full gradient is recorded in `effects.gradient` — the real background is a mesh, not a flat color. `card` is the glass panel surface (light = white, dark = deep ink #10122B) and `card-foreground` is the text on it (ink #1A1A2E on light, white on dark) — the two are always paired for WCAG 4.5:1. `accent` (sky), `destructive` (pink), and `chart-2..4` are traced from the mesh stops for token completeness; the deck's only *functional* accent remains white, and in-panel charts are encoded in the panel text color's lightness ramp (ink + mid-gray #6E7090 on light, white + white-45% on dark), with `chart-5` = ink. The dark map is an authored dark-glass adaptation faithful to the pack's dark-glass variant — same mesh, deep-ink panels, lifted tints.

## Typography Rules
One sans family: native SF Pro Display, delivered on the web as Inter (Latin) + Pretendard (Korean, Google Fonts fallback Noto Sans KR). Deck type steps, in pt on a 13.33in × 7.5in canvas: title 40pt / semibold / −0.01em / 1.15; subhead 22pt / medium / 1.3; body 18pt / regular / 1.4; label 13pt / medium / +0.04em / uppercase; chart value 14pt / semibold; KPI hero 40pt / semibold; caption 11pt. KPI numbers and chart values use tabular figures. The cardinal rule: hierarchy comes from size and weight only — never dim text with alpha, and never place text on the raw gradient without a panel or opaque chip behind it.

## Layout Principles
16:9 canvas, center-first composition. Content panels sit centered with ≥1.0in left/right margin; 1–3 panels per slide, overlapping 0.2–0.4in for depth. The mesh gradient is full-bleed behind everything. Inner panel padding is 0.4in minimum so text never crowds the translucent border. Cover = one large centered dark-glass panel; body = 2–3 light-glass panels; charts/diagrams render inside a panel, never on the mesh directly. Whitespace is generous — the gradient margin around each panel is what makes the glass read as floating.

## Depth & Elevation
Depth is built from three layers, not hard shadows: a soft drop shadow (0 8px 32px black-22%), a backdrop blur behind each panel (the frosted texture — the core identity cue), and the 1.5px white-65% highlight border catching light on the panel edge. No bevels, gloss, or hard shadows.

## Shapes
Large rounded corners everywhere: panels 24px, KPI sub-cards 16px, diagram nodes 12px. Icons are 1.5px line icons (ink on light glass, white on dark). Everything reads as a rounded glass card; square corners are banned.

## Component Stylings
- **Glass panel**: the core container — 55%+ translucent fill (white / deep-ink), backdrop blur, 1.5px white-65% highlight border, soft drop shadow, 24px radius. Never drop the fill below 55% (text sinks into the mesh).
- **Title / text**: title 40pt semibold; subhead 22pt medium; body 18pt regular. Text color pairs to the panel variant (ink on light, white on dark), always solid.
- **Chart**: inside a panel only, plot area ≤6.0×3.2in. Data shapes solid 100% in the panel text color; one emphasis, the rest mid-tone. No legends, gridlines-box, or border box — only a 0.75pt baseline, baseline at 0. Direct 14pt semibold tabular value labels. Donut ≤3 segments, 40pt center figure, thickness 30% of radius. Bars width:gap 3:2, 6px radius.
- **Diagram**: rounded-square nodes (12px, 12%-alpha chip fill + 30%-alpha border), 1.5pt solid connectors with 6px arrowheads, circular number badges (solid fill, inverse digit). One process language for flow / timeline / comparison / 2×2 / funnel; emphasis is one chip at 22% alpha + solid border, never alpha on text/connectors/badges.
- **KPI card**: small glass sub-card (16px radius, 55%+ fill + highlight border + soft shadow), 2.5×1.6in — 13pt uppercase label, 40pt semibold value (tabular), 13pt ▲/▼ delta, all solid. 3–4 cards overlapping 0.2in.
- **Cover panel**: one large centered dark-glass panel on the mesh — 40pt white title + 22pt white subhead, all solid, highlight border.

## Slide Anatomy
- **Cover slide**: full mesh background, one large centered dark-glass panel holding a 40pt white title + 22pt subhead, highlight border, soft shadow.
- **Content slide**: mesh background with 2–3 light-glass panels slightly overlapping; each carries a 13pt label + 18pt body in solid ink, backdrop blur giving the frosted texture.
- **Chart slide**: a centered light-glass panel holds one SVG donut or column chart, encoded in ink lightness with a single emphasis, direct value labels, baseline 0 — chart inside the panel only.
- **Divider slide**: mesh background with a centered glass panel carrying a large section number and a section title; otherwise open gradient.
- **KPI slide**: mesh background with 3–4 small glass sub-cards overlapping — label + 40pt value + delta, all solid.

## Motion
Subtle only. Slide transitions are a 0.4s fade plus a slight scale-up (0.97 → 1.0) — glass settling gently into place. No bouncy or heavy object animation.

## Do's and Don'ts
**Do:** keep content inside frosted-glass panels with backdrop blur, highlight border, and 55%+ fill; use the full 4-stop mesh background; pair text color to the panel variant for 4.5:1; make hierarchy with size/weight; render charts inside a panel in the panel text color's lightness ramp.
**Don't:** drop panel fill below 55%; place text on the raw gradient without a panel/chip; use square corners, single-color backgrounds, or only purple-pink; add hard shadows, bevels, gloss, emoji, or clipart; draw charts on the mesh directly, fade data shapes with alpha, or use rainbow/3D/truncated-axis charts.

## Agent Prompt Guide
> Build this deck in the 'Glassmorphism Deck' style: full-bleed 16:9 slides on a 4-stop mesh gradient (purple, sky, pink, mint); all content inside frosted-glass panels floating on the gradient — 55%+ translucent fill (white light glass / deep-ink dark glass), backdrop blur, 1.5px white-65% highlight border, 24px radius, soft drop shadow. The gradient carries the color; the only accent is white. Pair text to the panel (ink on light, white on dark) for 4.5:1; build hierarchy with size and weight, never alpha. Center-aligned overlapping panels; charts and diagrams inside a panel only, encoded in the panel text color's lightness with solid data shapes, no legends/gridlines, baseline 0. Subtle 0.4s fade + scale transitions. Fonts: Inter + Pretendard (native SF Pro Display).

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `ppt-glassmorphism` — an authored spec, not an extraction from a live deck, so all confidence fields are `manual`. A ppt-track entry: the shadcn token mapping is a web-rendering convenience (pt-based type steps, 16:9 frames, a single-color `background` token standing in for the recorded mesh gradient), and the dark color map is an authored dark-glass adaptation faithful to the pack's dark-glass variant. The mesh stops, panel fills, ink/mid-tone text, and 55%-opacity floor all trace to the pack; `accent`/`destructive`/`chart` brand hues are assigned for token completeness beyond the pack's white-only functional accent.


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

```css
/* Glassmorphism Deck — theme.css (generated, do not edit) */
:root {
  --radius: 24px;
  --radius-selector: 12px;
  --radius-field: 16px;
  --font-sans: 'Inter', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --spacing: 8px;
  --shadow: 0px 8px 32px 0px color-mix(in oklab, oklch(0 0 0) 22%, transparent);
  --background: oklch(0.597 0.231 286.0);
  --foreground: oklch(1 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.228 0.038 282.9);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.228 0.038 282.9);
  --primary: oklch(0.597 0.231 286.0);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.93 0.03 286);
  --secondary-foreground: oklch(0.359 0.041 284.1);
  --muted: oklch(0.95 0.02 286);
  --muted-foreground: oklch(0.87 0.035 286);
  --accent: oklch(0.714 0.158 247.1);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.736 0.189 352.4);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.90 0.02 286);
  --input: oklch(0.90 0.02 286);
  --ring: oklch(0.597 0.231 286.0);
  --chart-1: oklch(0.597 0.231 286.0);
  --chart-2: oklch(0.714 0.158 247.1);
  --chart-3: oklch(0.736 0.189 352.4);
  --chart-4: oklch(0.824 0.132 179.6);
  --chart-5: oklch(0.228 0.038 282.9);
}

.dark {
  --background: oklch(0.42 0.17 286);
  --foreground: oklch(1 0 0);
  --card: oklch(0.196 0.050 277.3);
  --card-foreground: oklch(1 0 0);
  --popover: oklch(0.196 0.050 277.3);
  --popover-foreground: oklch(1 0 0);
  --primary: oklch(0.68 0.20 286);
  --primary-foreground: oklch(0.196 0.050 277.3);
  --secondary: oklch(0.28 0.04 280);
  --secondary-foreground: oklch(0.92 0.01 286);
  --muted: oklch(0.30 0.035 280);
  --muted-foreground: oklch(0.72 0.03 285);
  --accent: oklch(0.74 0.145 247);
  --accent-foreground: oklch(0.196 0.050 277.3);
  --destructive: oklch(0.78 0.17 352);
  --destructive-foreground: oklch(0.196 0.050 277.3);
  --border: oklch(0.46 0.035 283);
  --input: oklch(0.46 0.035 283);
  --ring: oklch(0.68 0.20 286);
  --chart-1: oklch(0.68 0.20 286);
  --chart-2: oklch(0.74 0.145 247);
  --chart-3: oklch(0.78 0.17 352);
  --chart-4: oklch(0.85 0.13 180);
  --chart-5: oklch(0.95 0.006 286);
}
```

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

```html
<!-- Golden snippet for "Glassmorphism Deck". Fragment — assumes the style's CSS variables
     (--background, --foreground, --card, --card-foreground, --primary, --accent, --chart-3,
     --border, --muted-foreground, --font-sans, --radius-box, ...) are in scope.
     Tokens only; no literal colors or images. Two 16:9 frames: a frosted-glass content slide
     over a mesh gradient, and a section divider. Translucency via color-mix; frosted via backdrop-filter. -->
<div style="display:flex; flex-direction:column; gap:2rem; font-family:var(--font-sans); max-width:960px; margin:0 auto;">

  <!-- Slide 1: glass content slide over mesh gradient -->
  <section style="position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-box, 24px);
      background:
        radial-gradient(60% 80% at 12% 8%, color-mix(in oklch, var(--primary) 92%, transparent), transparent 60%),
        radial-gradient(70% 90% at 92% 18%, color-mix(in oklch, var(--accent) 88%, transparent), transparent 62%),
        radial-gradient(75% 85% at 82% 96%, color-mix(in oklch, var(--chart-3) 85%, transparent), transparent 60%),
        radial-gradient(80% 90% at 8% 92%, color-mix(in oklch, var(--chart-4) 85%, transparent), transparent 62%),
        var(--background);
      display:flex; align-items:center; justify-content:center; padding:7% 8%; box-sizing:border-box;">

    <!-- frosted light-glass panel -->
    <div style="flex:1; max-width:78%; padding:6% 6%; box-sizing:border-box;
        border-radius:var(--radius-box, 24px);
        background:color-mix(in srgb, var(--card) 60%, transparent);
        -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
        border:1.5px solid color-mix(in srgb, white 65%, transparent);
        box-shadow:0 8px 32px color-mix(in srgb, black 22%, transparent);
        color:var(--card-foreground);">
      <p style="margin:0 0 .6em; font-size:.66rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--card-foreground);">Product Keynote &mdash; Vision</p>
      <h2 style="margin:0 0 .5em; font-size:1.7rem; font-weight:600; line-height:1.15; letter-spacing:-.01em;">Everything floats on glass.</h2>
      <p style="margin:0; font-size:.9rem; font-weight:400; line-height:1.4;">A translucent panel lets the gradient breathe through while the text stays solid and legible.</p>
    </div>
  </section>

  <!-- Slide 2: section divider — dark-glass panel on mesh -->
  <section style="position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-box, 24px);
      background:
        radial-gradient(65% 85% at 88% 10%, color-mix(in oklch, var(--accent) 90%, transparent), transparent 60%),
        radial-gradient(70% 90% at 10% 30%, color-mix(in oklch, var(--primary) 92%, transparent), transparent 62%),
        radial-gradient(80% 90% at 78% 92%, color-mix(in oklch, var(--chart-3) 85%, transparent), transparent 60%),
        var(--background);
      display:flex; align-items:center; padding:8% 9%; box-sizing:border-box;">

    <div style="display:flex; align-items:center; gap:7%; width:100%; padding:5% 6%; box-sizing:border-box;
        border-radius:var(--radius-box, 24px);
        background:color-mix(in srgb, var(--foreground) 22%, transparent);
        -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
        border:1.5px solid color-mix(in srgb, white 65%, transparent);
        box-shadow:0 8px 32px color-mix(in srgb, black 22%, transparent);
        color:var(--primary-foreground);">
      <div style="font-size:3.4rem; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; padding-right:7%; border-right:1.5px solid color-mix(in srgb, white 45%, transparent);">02</div>
      <div>
        <p style="margin:0 0 .5em; font-size:.66rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; opacity:.85;">Section 02 &mdash; Experience</p>
        <h2 style="margin:0; font-size:1.7rem; font-weight:600; line-height:1.15; letter-spacing:-.01em;">Depth without a single hard edge.</h2>
      </div>
    </div>
  </section>

</div>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/ppt-glassmorphism.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.