Theme Composer

Start from any built-in theme, tweak colors, typography, spacing, shape, and motion through live specimens, and export a drop-in theme.css block.

Assembly, not recreation. This tool composes existing VB components: palette-generator, semantic-palette, font-pairer, the editable specimen family, a component-sampler preview, and theme-export — all wired to write the same CSS custom properties on :root.

Colors

Generate a palette from a seed hue with palette-generator, then map the results to semantic roles. The CSS output below writes to VB's hue/lightness/chroma seeds, so all derived colors (-hover, -active, -subtle) follow automatically.

Typography

Pair fonts with font-pairer, or edit the base font-family directly on the specimen below.

Spacing

Override any --size-* token. Edits write to :root.

Shape & Borders

Corner radii and border widths.

Shadows

Elevation scale. Edits accept any CSS box-shadow expression.

Motion

Easing curves and duration scale. Read-only specimen (motion tokens are typically fixed expressions); swap the base theme above to compare motion systems.

Icons

Choose an icon set from the Icons Pack.

Live Preview

Shows standard UI elements under the current tokens. Updates as you edit.

Start from a known system

Click any tile to seed the preview with a curated public design system. DTCG-shaped; license attribution surfaced on apply.

Import DTCG

Paste, upload, or fetch a .tokens.json file from any DTCG-aware tool (Tokens Studio, Style Dictionary, Penpot). Tokens land in the preview area; unmappable entries are surfaced in an “ignored” panel rather than dropped silently.

Theme Output

Drop this block into a .css file and load it alongside vanilla-breeze-core.css. The Download button saves it as theme.css — pick the DTCG format to save as theme.tokens.json instead.

How this page is built

The Theme Composer is pure HTML — no framework, no bundle. It assembles existing VB components:

theme-picker — choose a starting theme
palette-generator + semantic-palette — palette harmonics mapped to semantic roles
font-pairer + editable type-specimen — typography
Editable spacing-specimen, token-specimen (radius, border, shadow, color, icon) — token editing
motion-specimen — motion scale reference
component-sampler — live UI preview
theme-export — collects overrides and emits a drop-in theme

Every specimen writes CSS custom properties to :root; theme-export scans them back out. View source of this page to see the markup.