All articles
DesignTokens
04 Apr 2026·6 min read

A design system you'll actually use

Why we treat tokens as code from day one — and how it pays off when the brand inevitably evolves.

KS
Karim Saad
Head of Design

Most design systems die quietly. They get built with enthusiasm, documented in a polished Figma file, then drift out of sync with production within six months. Designers stop using them because shipping a one-off custom button is faster than negotiating with the system. Engineers stop trusting them because Figma and code don't match.

The fix isn't more documentation. It's making the system the path of least resistance — for both designers and engineers, every single day.

We start every project by extracting design tokens before we extract components. Colours, spacing, type scale, radii, shadows, motion — these get defined once, in code, and exported as Figma variables, CSS custom properties, and TypeScript constants. One source of truth, three consumption surfaces.

Components come next, but they're not the heart of the system. The tokens are. When the brand evolves (and it always does), changing a single token cascades through every component, every page, every prototype, automatically. We've shipped brand refreshes in days instead of weeks because of this.

The lesson: treat your design system as code-first infrastructure, not as a Figma library. Engineers contribute to it. Designers reference it. PMs trust it. And it stays alive — because using it is faster than working around it.

DesignTokens
Share this article