Design Tokens: The Foundation Layer Most Teams Skip

Rishabh Sharma 3 min readJune 23, 2024

Tokens as contracts

A token is a named value: --color-brand, --spacing-md, --font-body. Designers and engineers share the same names for the same values.

Color, spacing, typography. Everything else is optional. A 40-token system covers 90% of needs.

Figma variables + CSS custom properties + Tailwind config. Same names everywhere. Changes propagate without hunting.

Why most dark modes look cheap — and the design rules that make a proper dark variant.

Design decisions drive performance. Setting performance budgets up front prevents the painful rework cycle later.

Most agency redesigns destroy SEO. Here's the handover process we use to redesign sites without losing a single organic session.

Our team ships web design programs every week. Book a free consult — we'll tell you what would move the needle for your brand.