Yelp | Tokens 1.0
YELP DESIGN SYSTEM
Tokens…?
Tokens encapsulates design decisions such as colors, typography, spacing, etc., in a consistent and reusable way.
This ensures that all visual elements across different projects adhere to a unified design language.
Token Principles
Logical
Easy to remember
Simple
Keep It Simple Stupid
Scalable
Account for further expansions
Standardize
Can be used by all stakeholders
Tokens Tiers
Token tiers in design can create a modular & scalable system for defining and managing design elements.
Different tiers help maintain consistency and flexibility, making it easier to adjust and update the design across different platforms and devices.
🔒 | Raw values
Holds the raw value, unprocessed design decision
No abstraction
No Scalability
Pure value
🔒 | Reference Tokens
Gives a name to a raw value to enable theming and improve maintainability.
Holds raw static values
Context-agnostic names
Maintenance more manageable long term
🔎 | Semantic Tokens
Defines the specific cases in which a referenced value should be used.
Context & theme specific
Point to different reference tokens
🔎 | Component Tokens
Allows overwriting specific values for all components of the type.
Inherit from semantic tokens but are specific to a component
Why do this?
This modular approach simplifies maintenance and updates, making it easy to implement changes globally or locally. They also improve collaboration between designers and developers, ensuring that everyone is on the same page. Plus, they enable a more scalable and flexible design system, ready to adapt to future needs.
Different tiers make it very easy to make change in one single spot and have your designs automatically update across designs and platforms.
This allows you to act fast, and quickly update and improve your designs at any given time - allowing your design system to evolve and always be up-to-date,
Categories
These categories help create a structured, consistent, and adaptable design language across projects, enhancing the overall user experience.
Opacity
Dividers
Spacing
Borders
Colors
Shadows
Typography
Sizing
Round Corners
Implementation Process
Implementing design tokens involves defining raw values, then organized them into hierarchical token tiers to maintain consistency and scalability.
Tokens are then integrated into design and development workflows, ensuring that design decisions are applied uniformly across all platforms and components.
The process involved multiple steps and posed few challenges in different areas:
Token naming and definitions
Tokens’ prioritization
Communications between teams
Actual implementation
We came up with a solid process in order to manage all the complexity involved into this project. Here is a simplified flow chart.
Internal Documentation
In order to make the new token system accessible and understandable we updated our internal online documentation.
The documentation allows designers and engineers to easily access all the definition based on the different tiers and being able to filter based on needs.