User Experience Design tips#3

💡Token Naming in Design System

Creating a robust naming system for your design system tokens can be very challenging, and it’s always better not to do it from scratch, but rather analyze how the best design systems tackle this challenge. Adobe Spectrum can be a nice reference (https://lnkd.in/dG-6mY2e)

Adobe uses a 3-part structure for coming up with token names:

1️⃣ Context

3️⃣ Common unit

2️⃣ Clarification

This system is based on a human-friendly approach (narrative style), where the information is provided in a granular manner. Token names start with a broad context, then go into more specific detail.

Not all token names need to have context, common unit, and clarification together, but they all follow the same order. You can think of the most specific piece of information in the hierarchy as being equated to the property to set.

🧱 Some examples

✔ gray-100: Gray is a color, and gray-100 is a more specific color, which points to a specific value in the design color system.

✔ checkbox-control-size-small: A checkbox is a broad concept, while checkbox-control-size-small represents a particularly sized checkbox (small) used in a control panel context.