Tools

Interactive tools for building, exploring, and exporting Vanilla Breeze themes. Each tool works standalone and connects to the others via shared data.

Theme Composer

Compose a complete theme — colors, typography, spacing, fluid sizing, shape, borders, icons, surfaces, shadows, and motion — with live preview and production CSS export. Start from any of the 28 built-in themes or build from scratch.

Color Schemer

OKLCH color exploration with harmony modes, semantic token derivation, and WCAG contrast checking. Export hue values directly to the Theme Composer.

Type Explorer

Font discovery and pairing with Google Fonts, type specimens, and live preview. Export font selections and spacing to the Theme Composer.

Fluid Layout & Sizing

Explore viewport-responsive fluid type and space scales using clamp() formulas. Resize the preview to see tokens scale in real-time, then export to the Theme Composer.

Workflow

The tools work best together in this flow:

  1. Color Schemer — explore color harmonies and find your palette
  2. Type Explorer — discover font pairings and set type hierarchy
  3. Fluid Layout — define responsive sizing curves
  4. Theme Composer — combine everything, add shape/borders/shadows/motion, preview live, and export production CSS

Each tool has a “Send to Composer” button that saves its output to localStorage. The Composer’s “Import” options in the Starting Point selector load that data automatically.

Related

Themes

Theme documentation, all 28 built-in themes, and custom theme creation guide.

Theme Lab

Live playground for comparing extreme themes, border styles, and icon sets side by side.