A toolkit for building brand guideline pages, token reference documentation, and visual standards — all with VB components and CSS patterns.
| Type | Functional |
|---|---|
| Version | 1.0.0 |
| JS | packs/design-system.full.js |
| CSS | packs/design-system.full.css |
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 atypeattribute<component-sampler>— themed grid of native UI elements (buttons, inputs, badges, selects)
CSS Patterns (no JS required)
- Do/Don't lists —
<ul data-list="do-dont">with[data-do]and[data-dont]on list items. Also supportsdata-list="pro-con". - Token reference table —
<table class="ds-token-table">with.ds-swatchpreview spans
Loading
CDN loading
<link rel="stylesheet" href="/cdn/packs/design-system.full.css"><script type="module" src="/cdn/packs/design-system.full.js"></script>Runtime activation
import { activateBundle } from '/cdn/vanilla-breeze.js'await activateBundle('design-system')Token Specimen Types
One component, five rendering modes. The type attribute controls what's displayed while sharing the same core API.
Shadow scale
<token-specimen type="shadow" label="Elevation Scale"></token-specimen>Radius scale
<token-specimen type="radius" label="Corner Radius"></token-specimen>Border widths
<token-specimen type="border" label="Border Widths"></token-specimen>Color tokens
<token-specimen type="color" tokens="primary,secondary,accent,success,error" label="Brand Colors"></token-specimen>Size scale
<token-specimen type="size" tokens="xs,s,m,l,xl" label="Spacing"></token-specimen>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.
Do/Don't list
<ul data-list="do-dont"> <li data-do>Use the full logo at minimum 32px height.</li> <li data-dont>Don't stretch or rotate the logo.</li> <li data-do>Use the monochrome variant for single-color contexts.</li> <li data-dont>Don't add drop shadows or gradients.</li></ul>Pro/Con list
<ul data-list="pro-con"> <li data-pro>Fast initial load time.</li> <li data-con>Requires JavaScript for interactivity.</li></ul>Token Reference Table
A CSS-styled table for documenting individual tokens with inline color previews.
Token table
<table class="ds-token-table"> <thead> <tr><th>Token</th><th>Preview</th><th>Value</th></tr> </thead> <tbody> <tr> <td><code>--color-primary</code></td> <td><span class="ds-swatch" style="background:var(--color-primary)"></span></td> <td>oklch(50% 0.2 260)</td> </tr> </tbody></table>Live Demo
A complete brand guidelines page using all pack components:
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