Vanilla Breeze

Tools

Interactive tools for building, exploring, and exporting Vanilla Breeze themes and design systems.

Available Now

Theme Composer

Compose a complete theme — colors, typography, spacing, shape, borders, shadows, motion, and icons — through live editable specimens. Exports a drop-in theme.css block.

Theme Lab

Live playground for comparing themes, border styles, and icon sets side by side. Preview typography, forms, navigation, data, and feedback surfaces under any theme.

Bundle Configurator

Select which CSS and JS bundles, themes, and add-ons you need. Generates a ready-to-paste HTML snippet with estimated gzip download size.

Roadmap

The following tools are planned to complete the design-to-production workflow. Each will work standalone and connect to the others via shared data.

Color Schemer

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

Planned

Type Explorer

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

Planned

Fluid Layout & Sizing

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

Planned

Target workflow: Color Schemer → Type Explorer → Fluid Layout → Theme Composer → production CSS export.

Related

Themes

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

Design System Pack

Components for documenting design systems — color palettes, type specimens, spacing scales, and component samplers.
↑