Design template

A design template is the most common designer contribution: a full multi-page site (landing + interior pages) authored as HTML + CSS, with theme tokens for the brand identity and placeholder slots Vincia fills in per site at build time. A user picks your template, names their brand, and has a publishable site in minutes.

What you ship

Since CLI v0.3.0, vincia create design-template scaffolds an HTML/CSS folder package (schema version 2, format html). The shape:

my-template/
├── _common/                  # shared metadata + agent prompt + preview helper
│   ├── CLAUDE.md
│   ├── README.md
│   ├── package.json
│   ├── _preview-data.json
│   └── preview-inline.js
├── website/                  # marketing-site variant (3 pages)
│   ├── index.html
│   ├── about.html
│   ├── contact.html
│   ├── styles.css
│   └── template.json
├── portal/                   # admin / business-app variant (6 pages)
│   └── …
└── website-with-auth/        # marketing + customer accounts (8 pages)
    └── …

Use --build-type website (default), --build-type portal, or the --include-auth flag to scaffold the customer-accounts variant.

Key contracts

HTML + CSS, not JSON page-trees. You author real HTML and stylesheets. No JavaScript — Vincia handles interactivity.
Theme tokens own the visual identity. Color, typography, spacing, radii, shadows, motion durations live as CSS custom properties (--brand, --ink, --font-display, --space-5, etc.). Vincia re-skins per site by overriding :root values; your HTML doesn't change.
Slots get filled per site at build time. Every brand-specific text is {{HEADLINE}} / {{LEDE}} etc. Every image is {{photo:hero-image}}. Declared in template.json under copySlots[] + photoSlots[].
Structural attributes are load-bearing. data-vincia-* attributes mark sections, slots, and insertion zones so the Studio parser can make widgets editable.
Optional widget UI supplement. Style how every typical widget for the archetype renders inside your template — auth forms, marketing widgets, customer-private widgets. Templates that cover the full typical set earn a complete coverage badge in the marketplace.

Scaffold

vincia create design-template my-template --build-type website
cd my-template
vincia preview
vincia publish --dry-run

--logo <path-or-url> (optional) generates favicons, apple-touch, OG image, and monochrome variants for SVG sources.

Approval gates

1. Schema parse — template.json validates against the v2 manifest schema. 2. Slot integrity — every {{SLOT}} in HTML is declared in copySlots[]; every {{photo:slot}} in photoSlots[] with three or more semantic tags. 3. Theme tokens present — every color in styles is a CSS custom property in :root, not a hard-coded hex. 4. Image sources allow-listed — Unsplash, Pexels, Pixabay, picsum, placehold.co, or Vincia's CDN. 5. Archetype declared — archetype is website or portal (no third value). 6. Quality — reviewers grade ≥9.5/10 on page narrative, type hierarchy, color discipline, distinctive moments, cross-page coherence, and accessibility (WCAG AA on body, focus-visible everywhere, reduced-motion respected).

The full anti-pattern list lives in the kit's ANTI-PATTERNS.md.

Where to learn more

/types/designer — the broader designer offering.
Examples — reference templates ship with source.