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.

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.