> For the complete documentation index, see [llms.txt](https://dsplaybook.farcostudio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dsplaybook.farcostudio.com/part-2-the-process/documentation.md).

# Tokens

All design systems are powered by design tokens. They are variables that hold a design decision and enable a design system to have a single source of truth for designers and developers.&#x20;

This is standard and very well implemented in any system, for example:

<figure><img src="/files/QQsZTRSrTAw0Nhb2pYv9" alt=""><figcaption></figcaption></figure>

There are 3 tiers of tokens from more broad to more specific design decisions: **option tokens, semantic tokens, and component tokens.**

<figure><img src="/files/uTtv1UrhsreugvS72MuO" alt=""><figcaption></figcaption></figure>

**Option Tokens** represent all cases that could ever be useful in a Design System. They point to a static value. They are also called global tokens or reference tokens.

<figure><img src="/files/CEVaXCN3WGdDsgFvKVi3" alt=""><figcaption></figcaption></figure>

**Semantic Tokens** are the decisions that systematize the design language for a specific theme or context. They define the purpose that an option token serves in the UI. They are also called alias tokens or system tokens.

<figure><img src="/files/bB4GEFzHPsnqqX7m3G30" alt=""><figcaption></figcaption></figure>

Component tokens represent the elements and values that comprise a component. They used to point to a semantic tokens.

<figure><img src="/files/BGvPSmZBijguSi9vLdbx" alt=""><figcaption></figcaption></figure>

Option tokens by themselves are not flexible enough to scale to more than one brand.

<figure><img src="/files/5I25tA7n8JqqMbqK9wEB" alt=""><figcaption></figcaption></figure>

Problems such as legibility and page layout begin to break down as you switch between brands that have different brand languages—especially with color and typography.

<figure><img src="/files/P1g3ueczJxjv6AjiupHI" alt=""><figcaption></figcaption></figure>

We need to add the semantic token layer to tackle certain design decisions without affecting others.&#x20;

<figure><img src="/files/JtJYpzyaBPfeODTrEF0C" alt=""><figcaption></figcaption></figure>

In doing so we can switch between any number of brand decisions and maintain the integrity of the design, including dark and light mode.

<figure><img src="/files/byfnJakXJLgJPcSWviE2" alt=""><figcaption></figcaption></figure>
