Design Tokens & Foundation
Every professional component library starts with design tokens — the foundational variables that define colors, typography, spacing, shadows, and borders. Build a solid token system and every component you create will be consistent and easy to theme.
Building Design Tokens
Design tokens are the single source of truth for your visual language. Define them as CSS custom properties on :root and reference them in every component. A good token system includes: color primitives (--color-blue-500), semantic tokens (--color-primary mapping to a primitive), spacing scale (--space-1 through --space-12), typography scale (--text-xs through --text-4xl), and effect tokens (shadows, border-radius). Semantic tokens let you change the entire theme by remapping a handful of variables.
Token System Code
/* tokens.css — Design token foundation */
:root {
/* Color primitives */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-700: #374151;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-red-500: #ef4444;
--color-green-500: #22c55e;
/* Semantic tokens */
--color-primary: var(--color-blue-500);
--color-primary-hover: var(--color-blue-600);
--color-danger: var(--color-red-500);
--color-success: var(--color-green-500);
--color-text: var(--color-gray-900);
--color-text-muted: var(--color-gray-500);
--color-bg: white;
--color-bg-alt: var(--color-gray-50);
--color-border: var(--color-gray-200);
/* Spacing (4px base) */
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 20px; --space-6: 24px;
--space-8: 32px; --space-10: 40px; --space-12: 48px;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--text-xs: 0.75rem; --text-sm: 0.875rem;
--text-base: 1rem; --text-lg: 1.125rem;
--text-xl: 1.25rem; --text-2xl: 1.5rem;
/* Effects */
--radius-sm: 6px; --radius-md: 8px;
--radius-lg: 12px; --radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.07);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
}
/* Dark theme override */
[data-theme="dark"] {
--color-text: var(--color-gray-100);
--color-text-muted: var(--color-gray-300);
--color-bg: var(--color-gray-900);
--color-bg-alt: var(--color-gray-700);
--color-border: var(--color-gray-500);
}