@profpowell/vb-design-system
VB Design System
Nineteen Web Components that document, build, and export a design system. They read the Vanilla Breeze tokens already on the page and render whatever theme is active, so the same markup documents every brand.
Live from the current theme. Switch it with the Theme picker in the header and every specimen on this site follows.
Elements by role
Each element is a standalone light-DOM component with a no-JS fallback. Load the bundle, or import one at a time.
Specimens & samplers
Show the system as it is: type, spacing, tokens, motion, layout primitives, breakpoints, and native UI in the active theme.
Color & palette
Build the color system: generate palettes from a seed, map them to semantic roles with WCAG checks, build gradients, and pair fonts.
Icons & brand
Document identity: a searchable icon catalog, a curated icon specimen across the size scale, and the brand mark on light and dark surfaces with clear-space.
Theming
Round-trip themes: browse curated public token sets, export the active theme as CSS or DTCG JSON, and apply a tokens.json to a preview scope.
Tools
The elements composed into working tools.
Assemble a complete theme — colors, type, spacing, shape, motion, icons — by editing live specimens, then export a drop-in CSS block.
Playground for theme identity: border styles, icon sets, and color modes with full component previews.
Every Vanilla Breeze theme with downloadable CSS and DTCG artifacts and copyable CDN URLs.
Showcases
Complete design systems documented with these elements.
A complete example design system — identity, tokens, type, components, voice.
One site, four brand looks (Starbucks, IBM, Anthropic, McDonald’s) — replicating brands via themes.
Nuvaris biosite + Luminary landing — mobile design systems in device frames.
Guides
From brand values to a documented, living design system.
Turn an existing brand into tokens, themes, and specimens.
The Design Tokens Community Group format and round-tripping themes.
What the pack includes and how to load it.
Install
npm install @profpowell/vb-design-systemimport '@profpowell/vb-design-system';import '@profpowell/vb-design-system/css';The first import registers all 19 elements; the second loads their light-DOM styles. Load Vanilla Breeze tokens and a theme on the page (or your own compatible tokens) and the components adopt it. vanilla-breeze is an optional peer dependency. Read the pack guide for CDN and per-element imports.