# Capsule Deck

> Single-file horizontal-swipe HTML deck in the Capsule design language — modular pill-shaped cards on warm bone with a full pastel-pop palette. For lifestyle, beauty, creator, DTC, and agency briefs that should feel modular, modern, and a little Y2K.

- Skill: `leilei926524-tech/capsule-deck` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add leilei926524-tech/capsule-deck`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leilei926524-tech/capsule-deck/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: leilei926524-tech (https://skillmd.com/u/leilei926524-tech)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/leilei926524-tech/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`)

```css
: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.