🀝

Design Tokens

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 πŸ‘‡πŸ»

1️⃣
Architecting Tokens (thread)

...moving forward!

2️⃣
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.