vb-design-system
Web Components for documenting brand guidelines, design tokens, and visual standards — built on Vanilla Breeze and driven entirely by its theme tokens.
Showcases
A complete example design system — identity, tokens, type, components, voice.
One site, four brand looks (Starbucks, IBM, Anthropic, McDonald’s) — VB replicating brands via themes.
Nuvaris biosite + Luminary landing — mobile design systems in device frames.
Elements
<color-palette>Color ramp swatches with copy.
<semantic-palette>Semantic color roles from tokens.
<type-specimen>Typography scale specimen.
<spacing-specimen>Spacing scale specimen.
<token-specimen>Design-token table specimen.
<motion-specimen>Motion / easing specimen.
<component-sampler>Render a component across variants.
<theme-export>Export the active theme (DTCG / CSS).
Install
npm install @profpowell/vb-design-systemimport '@profpowell/vb-design-system';import '@profpowell/vb-design-system/css';Pair with Vanilla Breeze tokens/themes on the page — components inherit the active theme automatically. Try the Theme picker above.