Theme pack

A theme pack bundles color tokens, typography stack, spacing scale, and radius tokens into one installable unit. Themes are the broadest-reach designer asset — installing a single theme pack restyles every widget across an entire build.

What you ship

my-theme/
├── manifest.json
├── tokens/
│   ├── color.json        # OKLCH color scale
│   ├── type.json         # font stacks + sizes + weights
│   ├── space.json        # spacing scale
│   └── radius.json       # border-radius scale
├── preview/
│   └── hero.png          # 1200x630 hero preview
└── README.md

Key contracts

• Color scale: 11 stops per hue (50–950) in OKLCH. Dark-mode variant is auto-derived by the runtime — you do not ship a separate dark theme.
• Typography: declare a heading stack + a body stack. Sizes use a modular scale (1.125, 1.25, 1.333, 1.414, 1.5, 1.618).
• Spacing: 8-step scale rooted at 4px. Multiples are applied across margins, paddings, and gaps.
• Brand fingerprints: declare which of the 12 brand registers your theme targets (editorial, hospitality, technical, etc).

Scaffold

vincia create theme-pack my-theme
cd my-theme
vincia preview         # opens preview server
vincia publish --dry-run

Approval gates

The marketplace gate runs:

1. Token parse — every JSON file in tokens/ must parse + match the schema in @vincia/sdk-types. 2. Contrast — body text on every surface variant must meet WCAG AA (4.5:1). 3. Dark-mode derivation — the OKLCH transform must produce a usable dark variant without clipping. 4. Preview present — preview/hero.png exists and is ≤ 500 KB.

Where to learn more

• /foundations — ThemePreset shape + the OKLCH transform.
• Examples — the Editorial-warm theme pack ships with source available.