⭕ Tokens

What tokens are?

Updated over a week ago

What do we do with design tokens in JUX? I would encourage you to read what design tokens are if you are not acquainted with the topic. However, if you want to get the TLDR, here it is; Design tokens provide a unified language for communicating design decisions, allowing for a multi-layered architecture of styles. Tokens are structured with three properties in mind: alias vs core tokens, simple vs composite tokens, and nested grouping of tokens. It's easier to communicate and document design decisions when designers think in terms of meaning and purpose rather than hard-coded values with tokens.

Design tokens also allow for semantic and specific tokens to be used, which point to other tokens, usually core tokens, and help with consistency and particularity. JUX suggests tokens to be organized by types, deciding which modes or sets to have, and creating three main folders for each token type: Core, Semantic, and Specific. The recipe to structure tokens includes creating all the core tokens first, followed by semantic and specific tokens for one mode, duplicating the token set for the other mode, and changing all the semantic and specific tokens to point to the correct core tokens for that mode. While different token types might have irregular distributions of the three prime folders, the existence of the three prime folders system helps make the whole token system as regular and readable as possible. Design teams can also create additional subfolders to reflect the particularity of each specific design system and their product's unique quirks.

As a result, design tokens are the future of how we communicate and document design decisions, and by embracing JUX's Core, Semantic, and Specific structure, we will improve communication and simplify the handover process.

Let codebase and design unite.

Did this answer your question?