Variables

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Build reusable design tokens

CSS Variables (Custom Properties) are a system for reusing values. Store your brand colors, spacing, radius, shadow, and font sizes in variables and you get something like a design system. If you want to change the primary color across an entire website, you no longer need to hunt through every file. Change one variable, and everything updates at once.

css

:root {
  --primary-color: #77f5ff;
  --text-color: #eaf2ff;
  --card-radius: 16px;
}

.button {
  background: var(--primary-color);
  color: #041013;
  border-radius: var(--card-radius);
}

.card {
  color: var(--text-color);
  border-radius: var(--card-radius);
}

You should see

Buttons and cards will be able to share the same design tokens. When you change the theme, maintenance work drops a lot.

Tip

On a website with lots of pages, like the ThutaTech marketing site, using CSS variables is fantastic for keeping the brand consistent.