Design Tokens

Roses are #ff0000, Violets are #624de3, Design tokens are sweet, And so are you.

In short


Design tokens essentially store design decisions — like colour, size, and space — which can be systematically applied throughout a product.

/* Design token */
$color-background-light: #ffffff;

/* CSS appliance */
body {
background-color: $color-background-light;

/* USING SASS we normally declare it as $white but it's too generic compared to the token */

Start from this 👇🏻

Architecting Tokens (thread)

...moving forward!

Implementing Tokens

Using Code as a Design tool Checklist

Update the library, style guide(s), or whatever design file(s) the team uses to share design assets.
Make sure the update is effectively tracked and queued for a developer to update the code, (for example, by creating a Github Issue).
Update any documentation.
Inform the team about the change. Ideally, they should be aware of the change before it’s been made. If I include them in the process of figuring out why the change is needed and what the change should be, you will avoid any conflicts or repetition of work.