Tokens Introduction

Naming system

Design tokens are an agnostic way to store variables such as typography, color, and spacing so that your design system can be shared across platforms like iOS, Android, and regular websites.

So it is all about semantics and being platform agnostic.

example

For example: We take a value like the color blue: #635bff, that applies to a button, and we give it a set of semantic and meaningful names like: $blue-500, $interaction-color-default, $button-primary-background-color. Then we store it in a platform agnostic way that serves as the source of truth of all our design decisions. Then by looking at that final/particular token $button-primary-background-color we immediately know what is it about, so if this token is been used for text color then we know that something is wrong and we should probably use a different token.

Zeta tokens and classes

Zeta uses a controlled vocabulary to create tokens and class names following a BEM method in combination with a predefined per component token vocabulary (aka the spreadsheet).

Zeta token and class syntax:

$token/.class
‍.namespace (theme.domain)
.object (group.component.element)
.base (category.concept.property)
.modifier (variant.state.scale.mode)
.value (actual values)

Example:

This is an example of a large disabled form button on dark mode based on the above syntax:

a large disabled form button

Token:

$button.zeta.form.l.disabled.dark

$button: refers to an actual element
.zeta: from the zeta theming library
.form: refers to a specific element inside a form (a button)
.l: refers to button's size (a large button)
.disabled: refers to button's background colour (a hex value)
.dark: refers to button's environment (white/dark/grey mode)

Class:

.button-zeta.button-zeta--form.button-zeta--l.button-zeta--disabled.button-zeta--dark