CSS variables (custom properties) are names you declare in CSS and reuse: a brand color, a spacing step, a body font. Change the value once, and every rule that uses the name updates. They live in the stylesheet, not in a slide deck.
They are one way to ship design tokens. A token is the decision — this purple, this gap. A CSS variable is that decision written so the browser can read it. A design system collects the decisions. Variables keep the built pages honest. Dark mode often swaps the same names to a darker set instead of duplicating every rule. Typography sizes and branding colors are typical residents. Front-end development is where they get wired in.
A real-life example of CSS variables
An Atlanta studio uses one purple on buttons, links, and the focus ring. A developer hard-codes three slightly different hex values. The site looks almost on brand, which is worse than obviously off. One named color on the root, and the CTA matches the logo. When they add dark mode, they override that name. They do not hunt through files.
Name the value, then use the name. Walkthrough: CSS variables and UI/UX games.