CSS variables and design tokens

CSS custom properties let you define a value once and reference it anywhere. Define your brand color as --primary in the root and every component references --primary instead of the raw hex. Change the root, and every usage updates at once. This is the native version of what design systems call tokens.

Dark mode becomes almost free. Define the variables in a media query or on a class, and every component updates at once. No deep rewrites, no chasing every rule that uses a color. Reach for tokens early and reap the benefits on every project.