# Tokens e Variables
{% hint style="warning" %}
EM ANDAMENTO
{% endhint %}
## **O que é um Design Token?**
Os Design Tokens representam as pequenas e repetidas decisões de design que compõem o estilo visual do Design System. Os tokens substituem valores estáticos, como hexadecimais para cores, por nomes auto explicativos.
Um token consiste em 2 partes:
1. Um nome semelhante a um código, como **`cifraBrand/foreground/dynamic/70`**
2. Um valor associado, como **`#FF6600`**
O valor associado ao token pode ser muitas coisas: uma cor, especificações de uma tipografia, uma medida ou até mesmo outro token.
Exemplo de um token de referência e seu valor de cor
* O uso de design tokens em vez de valores codificados pode simplificar o trabalho de criação, manutenção e dimensionamento de produtos com um Design System.
* O sistema de tokens é um formato agnóstico, que independe de plataforma, mas pode ser utilizado em cenários específicos de cada linguagem;
* Os tokens ajudam a manter o alinhamento e a consistência em um Design System.
Os Design Tokens conectam as escolhas de estilo, entre times, que antes não teriam uma relação clara. Por exemplo, se o designer e o desenvolvedor usarem o mesmo token, como o `cifraBrand/foreground/dynamic/70`, a mesma cor será usada em ambos os locais, mantendo a consistência. E caso esse estilo seja atualizado, as atualizações de estilo serão propagadas de forma consistente por todo um produto ou conjunto de produtos.
## Criação nomenclatura
Para criação das nomenclaturas de tokens e variables que possuem mais de uma palavra, utilizamos a variação de *cammel case* para documentar.
### Princípios Básicos
#### ↳ CammelCase
Para palavras compostas, que juntas significam alguma função atribuída, por exemplo "Border Radius", utilizamos a sequencia de letra minúscula na primeira palavra seguida por letra maiúscula na segunda palavra.
Exemplos:
#### ↳ Hífen
Para descrevermos escalas atribuídas a alguma função mas que não são palavras compostas, utilizamos o hífen "-" como padrão, exemplo: "`large-3x`"
Exemplo:
Esse tipo de semântica é essencial para facilitar a organização e consistência.
{% hint style="danger" %}
Importante sempre tentar manter o mínimo de palavras possível para facilitar a aplicação tanto no design quanto no desenvolvimento.
{% endhint %}
{% hint style="info" %}
A estrutura acima é a base da criação inicial de um token e pastas. Existe uma série de outras regras em como estruturar as pastas e collections que este token pertence, onde atualizaremos neste arquivo no futuro.
{% endhint %}
### Tipografias
Nas aplicações **semânticas** dos tokens você encontrará a seguinte hierarquia:
Exemplo acima utilizando o token $title-strong-large-x que pertence ao estilo Title
{% hint style="info" %}
É extremamente importante mantermos a hierarquia dos tokens para padronização e otimização do trabalho, de forma que fique fácil leitura e manutenção.
{% endhint %}
---
# 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://compasso.studiosol.com.br/manuals/tokens-e-variables.md?ask=
```
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.