Elements
Nineteen design-system documentation components. Each page has a live, themeable example and its full API.
<brand-specimen>Brand mark on light/dark surfaces, size scale, and clear-space box.
<color-palette>Color ramp swatches with copy.
<palette-generator>Generate harmonious palettes from a seed color.
<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).
<accessibility-specimen>WCAG contrast table and accessibility checklist.
<breakpoint-specimen>Responsive breakpoint ruler with live width readout.
<layout-specimen>VB layout primitives, live examples + snippets.
<font-pairer>Interactive font pairing tool with Google Fonts loading + CSS export.
<gradient-builder>Interactive CSS gradient tool with color stops, angle, and color-space controls.
<theme-import>Apply a DTCG tokens.json file via paste, file, or URL import.
<theme-catalog>Browse and apply curated public design-system token sets.
<icon-set>Searchable icon catalog with click-to-copy names.
<icon-specimen>Curated icon set across the sizing scale.