Capsule Deck

Capsule Deck

Build a single-file horizontal-swipe HTML deck whose visual language is Capsule — modular pill-shaped cards on warm bone, with a full pastel-pop palette (blossom, mint, lilac, butter, sky, bone). Use this when a SaaS-template look is wrong: lifestyle brands, beauty / wellness, creator portfolios, DTC launches, agency credentials, internal "let's adopt this brand system" pitches.

What Capsule is

• One primitive: the pill card. Full-radius (9999px). Padding scales with content; never resize the radius.
• Surface fill: one of six pastel surfaces. Opaque, never gradient, never tinted.
• Canvas: warm bone (#F2EAD8-adjacent). Off-white with a warm cast carries the pastels without clashing.
• Type stack: mono eyebrow, display title, mono meta. Body copy lives outside the pill, on the canvas.
• No accents. Pastel-pop means the surface is the color. Skip drop-caps, skip a single highlight stripe — let the pill do the work.

Capsule palette (bind into :root)

:root {
  --cap-bone:    #f2ead8;
  --cap-blossom: #f4a08c;
  --cap-mint:    #b4dcc1;
  --cap-lilac:   #d2c5ee;
  --cap-butter:  #f7e08a;
  --cap-sky:     #b8d6f0;
  --cap-ink:     #1a1916;
  --cap-meta:    #7a6f5a;
}

These are the Capsule-specific surfaces. Compose them with whatever foundation tokens (--bg, --fg, --muted, --border, --font-display, --font-body, --font-mono) the active design system provides — the example output uses Neutral Modern as the foundation and Capsule as the visual language layered on top.

Workflow

1. Read the example output. examples/capsule-adoption-deck.html is the reference. The class system, slide rhythm, and pill-card markup there are the blueprint — copy structure, replace content.
2. Decide slide count + theme rhythm before writing any slide. 6 for lightning talks, 8–10 for pitch decks, 12–18 for longer talks. Healthy rhythm: no 3+ same theme in a row, alternating breath every 3–4 slides, ≥1 hero dark and ≥1 hero light for 8+ slides.
3. Theme classes go on every slide. light | dark | hero light | hero dark. Bare class="slide" is a regression.
4. Pill cards everywhere. Product tiles, palette swatches, anatomy diagrams, before/after mocks — all variations of the same pill primitive. If a layout calls for a square card, pick a different layout.
5. Tag every slide with data-screen-label="01 Cover", "02 Problem", etc., in 1-indexed order.
6. Speaker notes go in <aside class="notes"> blocks. Hidden on screen, surfaced in print.
7. Self-check before emitting. No square cards, no rounded-rectangle cards with left-border accents, no warm beige used as an accent (it's the canvas, not an accent), no SaaS-blue CTA color.

Hard rules

• Pill silhouette is non-negotiable — border-radius: 9999px for any card-shaped surface. Aspect ratio is decided by content + padding, never by aspect-ratio on the pill itself.
• Six pastels max — blossom, mint, lilac, butter, sky, bone. Do not invent additional pastels in the same family.
• Bone is the canvas, not an accent. Most surfaces are bone; pastels are the variation.
• One typeface family for body. Capsule is intentionally typography-light — let the shapes carry the brand.
• No gradients, no drop shadows. Capsule is flat by construction.
• No emoji feature icons. A circular swatch on a pill is the only "icon" Capsule allows.
• Do not rewrite the iframe nav script if you reuse the simple-deck framework; copy it verbatim from the example.
• No scrollIntoView() — breaks the embedded preview. Use other DOM scroll methods.

When NOT to use Capsule

• Engineering / dev-tools / B2B SaaS pitches → use a tech-utility or modern-minimal direction instead.
• Editorial / magazine briefs → use an editorial direction.
• Anything where the audience expects density over personality — Capsule is intentionally low-density.