Colors

Introduction

Tokens; being color, text, spacing, etc. represent small, repeatable design decisions. We use them instead of using raw values (hex,px,em). This makes it easy to make centralized changes and continue to modernize Incode's interfaces at a broad scale.

Let's say a brand has a Primary Pink color. Designers and developers should refer to this color by the same name and identity, regardless of platform (design, web, mobile etc). If the color changes in design, it should also change on all development platforms automatically (and vice versa).

Design tokens enable this behavior by creating an abstract identity and centralizing the source of truth for this color. Because they help to establish a source of truth, they are often found in design systems. They can be used for colors, text styles, spacings, animation values etc.

Token Category

PrimitiveColors define a raw value into a repeatable behavior. This tokens helps as the foundation and should never be used directly on code.

SemanticColors for color represent small, repeatable design decisions. Instead of using raw hex values, we refer to a 'semantic' token that give general instructions into where it should be used.

ComponentColors are also semantic tokens but they represent a specific repeatable design decision for a specific UI element, this makes it easy to differentiate & modify between tokens used in general places like backgrounds and more specific places like a button.

How are tokens grouped?

Semantic color tokens grouping

As the name implies, semantic tokens, create their meaning from the name is given. The name comes out of their property,intensity, and role. This grouping creates enough 'meaning' to guide to the correct usage of token (Semantic=meaning).

Component color tokens grouping

As their name imply, they are used strictly for UI components such as buttons, checkbox, etc... The naming of token relates to components interactivity and type: component type, property and state. This grouping signals the correct usage of a token based on component interaction.

Further reading

If you'd like to learn more about design tokens, explore the following links:

• Tokens in Design Systems - Nathan Curtis
• Using design tokens to promote collaboration and maintainability of a design system
• An example of design tokens in a live design system - Lightning Design System

---