Slow connection, just a moment…
Mohammed Al-Bishari
Available for new projectsع
The Lab / Articles
article · Design systems · Handoff

Design tokens: a bridge between design and code

How colour and spacing become one source that Figma and code both read, closing the “it looked different in the design” gap.

7 min readPublished 2026/09/10Placeholder

Preview: all content, comments and numbers here are placeholders until the Lab is connected to the server.

01

Where the gap comes from

The designer writes “dark blue”, the developer writes #2B3C9B in twenty places. Six months later there are eleven blues.

02

Three layers of names

Raw values (blue-700), then meaning (accent), then component (button-bg). A change at the meaning layer flows across the product.

03

Dark mode, almost for free

With semantic names, dark mode is a second set of values for the same names, not a redesign.

Prompt

 · Placeholder
Video not available yetThis is a placeholder video. The player appears here once the real video is uploaded.
Chapters
    Contribute to the Lab
    Mohammed reviews what you share before it goes public. You will see it in place right away, marked “Under review”.
    Type
    A direct link, or a paragraph explaining the idea.
    Say hello