Design Tokens & Theming

Overview

A SaaS UI looks "designed" when every color, space, and font size comes from a small, named scale — not arbitrary values sprinkled per component. Define tokens once as CSS variables, expose them through Tailwind, and let dark mode be a swap of variable values, not a rewrite of class names.

When to use

• Starting a new app and deciding colors/spacing/typography.
• Components use raw hex codes or one-off pixel values.
• You need dark mode or multi-brand theming.

Semantic tokens (the key idea)

Name tokens by role, not by hue. --primary, --muted, --destructive — not --blue-500. Roles let you re-theme without touching components. shadcn/ui uses exactly this convention: