# 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.