What are design tokens?

Design tokens are foundational design decisions representing a design system’s visual language. Tokens can represent colors, typography, effects, spacing, and animation. Tokens store values like colors, font styles, and font sizes, allowing the visual language to be applied across all products.

They streamline designer and developer workflows, enabling the design system to scale. Tokens are platform agnostic but can be applied with platform-specific code for ultimate flexibility.

How do they work in zeroheight?

Depending on the design tool you connect to zeroheight, zeroheight can generate design tokens based on your color, typography, and effect styles. Read more about what tokens you can create per design tool.

You can generate your tokens using the tokens 2.0 feature and then edit them to customize them for your needs. Before, if you used tokens 1.0, your tokens would be autogenerated and could not be modified.

What’s the benefit of documenting design tokens in zeroheight?

If you’re new to design tokens, zeroheight provides an easy way to get started. Tokens 2.0 pulls from styles defined in your design tool, ensuring consistency with the design to development workflow.

If you’re team already uses design tokens, you can use zeroheight to document all your tokens. This ensures having a single source of truth. Teams can feel confident that what they reference is accurate.

What’s the difference between Tokens 1.0 vs. Tokens 2.0?

Tokens 2.0 generates design tokens that can be changed and customized, whereas tokens 1.0 can’t be modified. You can create tokens from existing styles from your design uploads in tokens 2.0.   In contrast, you create the tokens from added styles in your styleguide with tokens 1.0. If you’re starting with design tokens, we recommend using Tokens 2.0 because it’s easier and more flexible.

You can read more in this table about the difference between the two.

When should I move over to Tokens 2.0 from Tokens 1.0?

You can transition to Tokens 2.0 whenever the timing suits the team. We recommend transitioning sooner since Tokens 2.0 provides more flexibility and customization.

The timing may depend on who would be affected and the extent of the impact. We recommend checking in with your design and development teams to see how they might be affected. Some engineering teams may be more ready than others. If some are prepared, but some are not, you can consider versioning your styleguide so some teams can continue to use previous versions until they’re ready to upgrade.