Design tokens

Design tokens are the basic building blocks of a website's look and feel. They are the colors, fonts, spacing, and shadows that make a website look consistent.

Think of it like a recipe. Instead of guessing how much sugar to add each time, you write it down once: "use 10 grams of sugar." Design tokens do the same for a website. Instead of guessing the blue color every time, you define it once: "primary blue is #0066FF."

When designers and developers use the same tokens, the website looks consistent everywhere. It also makes the code cleaner and the website lighter, because the same values are reused instead of being written over and over.

I prefer to define design tokens in tools like Penpot or Figma before building starts, so the entire site is built on a consistent foundation. Common patterns are font.size.lg, color.button.primary etc.