Background pack

A background pack ships backdrop treatments — gradients, mesh fills, textured surfaces, decorative atoms — so the empty regions of a page feel intentional instead of flat.

What you ship

my-backgrounds/
├── manifest.json
├── treatments/
│   ├── soft-mesh.json     # parametric mesh gradient
│   ├── paper-grain.json   # texture overlay + opacity
│   ├── grid-pinned.json   # geometric grid
│   └── …
├── assets/                # optional SVG / WebP texture files
│   └── grain.webp
├── preview/
│   └── tiles.png          # 1200x630 grid of treatments
└── README.md

Key contracts

• Parametric where possible. A mesh gradient is parameter-driven (color stops + warp points), not a raster file. The runtime regenerates it at the target resolution.
• Lightweight assets. When you must ship a raster, keep it ≤ 200 KB and prefer WebP.
• Section-purpose scoping. Declare which section purposes (hero, feature-grid, testimonial) each treatment fits.

Scaffold

vincia create background-pack my-backgrounds
cd my-backgrounds
vincia preview
vincia publish --dry-run

Approval gates

1. Schema parse + raster size budgets. 2. Theme-token aware — treatments reference theme.color.* tokens rather than hardcoded hex. 3. Reduced-motion — animated backgrounds ship a static fallback. 4. Preview present — preview/tiles.png exists.

Where to learn more

• /foundations — KitPreset background slot.