CSS custom properties (variables) declared in :root{} are the foundation of any scalable design system. They allow you to define your color palette, type scale, spacing system and radii once, then reference them anywhere with var(--token-name). Changes to the root immediately cascade through every component that uses them — making global redesigns a one-line edit. This tool lets you build, preview and export a complete token set in CSS, SCSS, or JSON format.