Design System Pack

What's Included

Web Components

• <color-palette> — interactive color swatches with click-to-copy, grid/list/inline layouts
• <type-specimen> — font preview with type scale, weight scale, and character grid
• <spacing-specimen> — spacing token bar chart with computed px values
• <token-specimen> — unified token display for shadows, radii, borders, colors, and sizes via a type attribute
• <component-sampler> — themed grid of native UI elements (buttons, inputs, badges, selects)
• <palette-generator> — algorithmic color palette generation from a seed color using OKLCH harmony modes
• <gradient-builder> — interactive CSS gradient tool with color stops, angle control, and oklab/oklch interpolation
• <font-pairer> — font pairing tool with Google Fonts loading, live preview, curated suggestions, and CSS export

CSS Patterns (no JS required)

• Do/Don't lists — <ul data-list="do-dont"> with [data-do] and [data-dont] on list items. Also supports data-list="pro-con".
• Token reference table — <table class="ds-token-table"> with .ds-swatch preview spans

Loading

Token Specimen Types

One component, five rendering modes. The type attribute controls what's displayed while sharing the same core API.

Override tokens and prefix to display any set of CSS custom properties. Defaults are sensible for each type.

Do/Don't Lists

A CSS-only pattern on native <ul> elements. No JavaScript required.

Token Reference Table

A CSS-styled table for documenting individual tokens with inline color previews.

Live Demo

A complete brand guidelines page using all pack components:

Full Brand Example: Meridian Labs

A more comprehensive example showing a fictional climate research company’s complete design system — brand identity, color palettes, typography, spacing, shapes, motion, component showcase, and voice and tone guidelines.

Themes and Design Systems

In Vanilla Breeze, a design system is a theme with documentation. Every VB theme is already a partial design system — it defines colors, typography, spacing, shape, shadows, and motion through token overrides. The Design System Pack adds the documentation layer on top: brand identity, token reference, component showcase, and voice/tone guidelines.

This means the workflow is:

1. Define your brand values — who are your users, what is your visual identity?
2. Create a theme — override token seeds (hue, lightness, chroma, fonts, radii, motion) in a CSS file. Start from _theme-template.css or any existing theme.
3. Document it — use the Design System Pack components to build a living reference page that updates when your theme tokens change.

See real-world brand implementations:

• Alpenglow Gear — e-commerce site with McDonald’s, Anthropic, and IBM brand theme overlays
• Nuvaris Therapeutics — mobile biosite with branded tokens and scroll-driven animations
• Luminary SaaS — mobile-first project management app with custom brand tokens

When to Use

• Internal brand guidelines — document colors, fonts, spacing, and component styles for your team
• Public brand assets — publish brand guidelines for partners and vendors
• Token reference — give developers a quick-reference page for design tokens
• Theme showcase — demonstrate how your VB theme affects standard UI elements
• Design reviews — share living documentation that updates with your theme