# 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="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2Fz8hptGz2ubjg46C5ceAu%2Ftoken1.png?alt=media&#x26;token=87fda4e8-a2ee-45d4-bfb1-e2554a58ee05" 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="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2F2W2BK6sP26PsC1cs96Vm%2Ftoken2.png?alt=media&#x26;token=920844e3-a922-4315-bb7b-7c3dd065b3d3" 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="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2F4mQtT08TK0zvRsQnqpk3%2Ftoken3.png?alt=media&#x26;token=3fe2f1b3-d9d2-473a-a7d4-1397881d6277" 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="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FCMAoC39RTmwEyHpCRhj7%2Ftoken4.png?alt=media&#x26;token=10d1d211-057f-40d9-884e-33b5c74451e5" 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="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FE36c18geMV1T3dfAQ301%2Ftoken5.png?alt=media&#x26;token=ece5e0dc-cf24-4275-a309-b9e1011673b4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FZ7Hvis1q3n9kkCiKwWKK%2Ftoken6.png?alt=media&#x26;token=d4253c2a-e6ac-42da-a53d-77a1b5849686" 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="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2FMEhKL9Jhn9elUIBS5msf%2Ftoken7.png?alt=media&#x26;token=e8304a5c-656e-4f16-8458-0dcc6a7de756" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2Fe5UH918ckn5SknKq5ket%2Ftoken9.png?alt=media&#x26;token=cebdbaea-c07b-45a1-9c5e-a8ac58f45ba0" 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="https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN8XHqatGwdZo585nW3%2Fuploads%2Fl5AnWV8MnMB6fdKZO3B7%2Ftoken10.png?alt=media&#x26;token=353ab3fe-afe3-4bfa-8464-a161fbc4d36d" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dsplaybook.farcostudio.com/part-2-the-process/documentation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
