Build a complete CSS custom properties system — colors, spacing, typography, shadows and more. Copy the :root block and drop it straight into your stylesheet.
CSS custom properties (variables) are defined with a -- prefix inside a selector — usually :root for global scope — and read with var(--name). Unlike preprocessor variables (Sass, Less), they are live in the browser: changing a variable at runtime with JavaScript instantly updates every element that uses it. They also cascade and inherit like any CSS property, so you can override a global token locally inside a component. This makes them the foundation of modern design systems — define your colors, spacing and type scale once in :root, and every component consumes the same source of truth. Dark mode switching becomes a single block of overrides on [data-theme="dark"] or @media (prefers-color-scheme: dark).