Create CSS custom properties (variables) for your design system. Organize colors, typography, spacing, and other values in one central location for easy maintenance and theming.

Adding Variables

• Click "Add" in any section to create a new variable
• Enter the variable name (without --) and value
• For colors, use the color picker or enter hex/rgb values

Presets

• Minimal: Essential colors and typography
• Complete System: Full design token set
• Dark Mode Ready: Light/dark theme variables

/* Using CSS Variables */
:root {
  --color-primary: #667eea;
  --font-size-base: 1rem;
  --space-4: 1rem;
}

.button {
  background: var(--color-primary);
  font-size: var(--font-size-base);
  padding: var(--space-4);
}

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-text: #ffffff;
  }
}