Brand Seeds
The TokenSeed is the input to the entire theming system. From 5-6 values, the library generates 100+ design tokens that theme every component consistently.
TokenSeed Shape
interface TokenSeed {
primary: string; // Brand primary color (hex)
primaryDark?: string; // Dark mode variant (auto-generated if omitted)
mode: 'light' | 'dark';
spacingBase: number; // Base spacing unit in px (e.g. 4)
radiusBase: number; // Base border-radius in px (e.g. 8)
fontFamily?: string; // Primary font family
}Generated Token Categories
Surface, text, border, primary shades, status colors, dimmer overlays, opacity variants
Multiplied from spacingBase: xs (0.5×) through 6xl (16×)
Scaled from radiusBase: sm (0.5×) through full (9999px)
Font sizes from xs (12px) to 4xl (36px) with line heights
sm, md, lg, xl — mode-aware (lighter in light mode, heavier in dark)
Duration and easing tokens for consistent animation timing
How Components Consume Tokens
Components never hardcode colors or dimensions. They reference tokens via the getCSSVar() utility, which resolves to CSS custom properties:
import { getCSSVar } from '@buzzvil/design-library/tokens';
// In a component:
const style = {
background: getCSSVar('color', 'theme-base-100'),
// → 'var(--bzv-color-theme-base-100)'
color: getCSSVar('color', 'theme-base-content'),
borderRadius: getCSSVar('radius', 'lg'),
padding: getCSSVar('spacing', 'md'),
};When a brand seed changes, the ThemeProvider regenerates all CSS variables. Every component re-themes instantly without code changes.
Try It
Use the seed editor in the top-right corner of this docs site to change the primary color, spacing, and radius. All component previews across the site will re-theme in real-time.