# Colors

<details>

<summary>✅ Atualizado (07/07/2025)  - Ver detalhes</summary>

## Julho 2025

* **07/07/2025**\
  \
  .Adição de tokens Alpha Colors (Global Tokens)\
  `neutral-alpha-100-92` e `neutral-alpha-13-92`\
  \
  .Adição de token elevation *<mark style="color:blue;">(Aplicação dos tokens acima)</mark>*\
  `base-neutral-elevation-dynamicAlpha-over-92`\
  \
  .Adição de token background\
  `base-neutralReverse-background-dynamicAlpha-100-0-alt`\
  \&#xNAN;*<mark style="color:blue;">OBS: Diferente do token que temos na mesma categoria (apenas 100-0), sua versão com sufixo</mark> **alt**<mark style="color:blue;">, converte a cor base de 100 para 10.</mark>*<br>

## Junho 2025

* **16/06/2025**

&#x20;      **.Correção na organização de tokens Neutral**\
\
&#x20;       Dynamic Colors (Alpha) separados entre Neutral e Neutral Reverse.\
&#x20;       (Sendo neutral: tokens em alpha que iniciam com paleta escura no light e neutralReverse:\
&#x20;       tokens em alpha que iniciam com paleta clara no light)\
\
\----------------------------------------------------------------------------------------------------------\
\
&#x20;     **.Adição de tokens em alpha para elevation**\
&#x20;        \
&#x20;       `base-neutral-elevation-dynamicAlpha-under-0`\
&#x20;      `base-neutral-elevation-dynamicAlpha-over-0`\
\
\----------------------------------------------------------------------------------------------------------         \
&#x20;      \
&#x20;      **.Revisão: tokens de border (neutral e neutralReverse)**\
&#x20;       **(apenas para conferirmos se cadastramos todos esses tokens)**\
\
&#x20;      **.Border (neutral)**\
\
&#x20;        Possui as seguintes categorias e tokens\
\
&#x20;        **dynamic:** \
&#x20;        `base-neutral-border-dynamic-10`\
\
&#x20;        **dynamicAlpha:** \
&#x20;        `base-neutral-border-dynamicAlpha-0-6`\
&#x20;       `base-neutral-border-dynamicAlpha-0-8`

\
&#x20;        **fixedAlpha:** \
&#x20;        `base-neutral-border-fixedAlpha-0-6`\
&#x20;       `base-neutral-border-fixedAlpha-0-8`\
\
&#x20;        **.Border (neutralReverse)**\
\
&#x20;         Possui as seguintes categorias e tokens\
\
&#x20;         **dynamicAlpha:** \
&#x20;        `base-neutralReverse-border-dynamicAlpha-100-6`\
&#x20;       `base-neutralReverse-border-dynamicAlpha-100-8`\
\
&#x20;         **fixedAlpha:** \
&#x20;        `base-neutralReverse-border-fixedAlpha-100-6`\
&#x20;       `base-neutralReverse-border-fixedAlpha-100-8`\
&#x20;                        \
\----------------------------------------------------------------------------------------------------------\
\
&#x20;         .**Cadastro de novas decorative colors**\
&#x20;           \
&#x20;         **Foreground (dynamic colors)**\
\
&#x20;           todas as cores com o token:\
&#x20;           `decorative-(nome da cor)-foreground-dynamic-50`\
\
&#x20;          **Background (fixed colors - alpha)**\
\
&#x20;           todas as cores com o token:\
&#x20;           `decorative-(nome da cor)-background-fixedAlpha-60-8`\
&#x20;            \
&#x20;      &#x20;**&#x20; &#x20;**<mark style="color:green;">**Novo\***</mark>**&#x20;Border (fixed colors - alpha)**\
\
&#x20;          todas as cores com o token:\
&#x20;          `decorative-(nome da cor)-border-fixedAlpha-60-16`\
&#x20;          com excessão do vermelho, que fica como:\
&#x20;          `decorative-red-border-fixedAlpha-70-16`\
\
\----------------------------------------------------------------------------------------------------------\
\
&#x20;         .**Global colors adicionadas**\
&#x20;      \
&#x20;         **Alpha colors**\
\
&#x20;         adição de:\
&#x20;        `(nome da cor)-alpha-60-16`\
\
&#x20;         <mark style="color:green;"></mark><mark style="color:green;">**conferir se temos\***</mark> :

&#x20;         `neutral-alpha-10-0`\
&#x20;         `neutral-alpha-13-0`\
&#x20;         `neutral-alpha-98-0`

\----------------------------------------------------------------------------------------------------------

## Abril 2025

* **28/04/2025**\
  \
  **.**&#x41;gora o token `elevation-dynamic-over`, converte no dark para `neutral-solid-13` (#222222)<br>
* **23/04/2025**<br>

  . Adicionamos **3 novos Global Tokens** `neutral-alpha` na paleta:\
  &#x20;`10-0`, `13-0` e `98-0`.\
  \
  \&#xNAN;*Esses tokens base nos ajudarão a criar gradientes em diferentes superficies.*<br>

  . A partir desses Global Tokens, adicionamos os seguintes **4 Semantic Tokens**:

  `base-neutral-background-dynamicAlpha-0-0` e também `100-0`

  além de

  `base-neutral-elevation-dynamicAlpha-under-0` e também `over-0`

  <br>
* **03/04/2025**\
  Adição dos seguintes tokens:\
  state-neutralReverse-common-fixedAlpha-enabled\
  state-neutralReverse-common-fixedAlpha-hovered\
  state-neutralReverse-common-fixedAlpha-pressed\
  state-neutralReverse-common-fixedAlpha-focused\
  state-neutralReverse-foreground-fixedAlpha-disabled

## Março 2025

* **11/03/2025**\
  \
  **Adição do token: b**ase-cifraBrand-border-fixedAlpha-70-16
* **10/03/2025**\
  \
  **base-background-dinamicAlpha:**\
  \
  adição dos token&#x73;**: 0-8, 100-4 e 100-8**

## Fevereiro 2025

* **18/02/2025**\
  \
  **Common States:**\
  \
  As opacidades de hover,  pressed  e focused foram ajustadas para:\
  6, 12 e 6 respectivamente.

## Janeiro 2025

* **20/01/25**\
  \
  **Geral**\
  \
  \> Revisão geral e repadronização das nomenclaturas.\
  Seguindo a mesma ordem das partes do token sempre e corrigindo os papeis conforme o novo padrão.\
  \
  \> Adição de anotações complementares.\
  \
  \> Referências aos Global Tokens adicionada.\
  \
  \> Reordenação das seções da página para maior clareza\
  \|  *Motivo: Nos tokens semânticos em alguns casos existem tanto alpha colors*     \
  \|  *como solid colors dentro de uma mesma categoria.*\
  \
  \> Adição do guia de nomenclatura e organização dos tokens.\
  \
  \> Nova separação de papeis de cores: foreground, background, elevation, border e common. Anotações com significado adicionadas.\
  \
  \> Distinção de comportamento de cores Alpha e Solid.\
  Comportamentos atuais: <mark style="color:orange;">**fixed**</mark>, <mark style="color:orange;">**fixedAlpha**</mark>, <mark style="color:orange;">**dynamic**</mark>, <mark style="color:orange;">**dynamicAlpha**</mark>.

  \
  \------------------------------------------------------------------------\
  \
  **Neutral Colors (Semantic Tokens)**\
  \
  \> Adição de prefixo "<mark style="color:orange;">**base**</mark>" para consistência com os demais tokens.\
  \
  \> Remoção de <mark style="color:orange;">**foreground-dynamic-95**</mark> (tanto dynmaic quanto fixed)\
  \
  \> Adição do token em alpha à tab de background: <mark style="color:orange;">**background-dynamicAlpha-0-4**</mark>.\
  Apesar de estar em alpha, os locais de uso e papeis correspondem às demais cores da tabela.\
  \
  \> Junção de Elevation e Border como papéis das Neutral Colors.\
  (Antes estavam separadas)\
  \
  \> Agora temos dois níveis de border.\
  \
  \
  \------------------------------------------------------------------------\
  \
  **Decorative Colors (Semantic tokens)**\
  \
  \> Redução na quantidade de tokens foreground e alteração nos valores para 50 e 60.\
  \
  \> Simplificação nos backgrounds para <mark style="color:orange;">**fixed-solid-50**</mark> e <mark style="color:orange;">**alpha-solid-60-16**</mark>\
  \
  \> Reordenação no nome dos tokens, para consistência com os demais.\
  &#x20;  Ex.: <mark style="color:blue;">**decorative-background-dynamic-blue-95**</mark> \
  &#x20;          para\
  &#x20;          <mark style="color:orange;">**decorative-blue-background-dynamic-95**</mark>\
  \
  \> Adição do identificador "<mark style="color:orange;">**solid**</mark>" em todos os Global Tokens. \
  \
  \> Adição do G**lobal Token** "<mark style="color:orange;">**red-solid-40**</mark>" correspondente à B**rand Color** do palcomp3.\
  &#x20;  \
  \--------------------------------------------------------------------------\
  &#x20;\
  **Alpha Colors** \
  \
  \> Agora aparecem junto às categorias correspondentes, mas os global tokens continuam separados.\
  (Algumas cores estavam ficando muito separadas de cores solidas em comum)\
  \
  \--------------------------------------------------------------------------\
  \
  **States** \
  \
  \> Alteração na opacidade de Backgrounds disabled para 4%\
  \
  \> Alteração na opacidade de Borders disabled para 6%\
  \
  \---------------------------------------------------------------------------\
  \
  **Status Colors**\
  \
  \> Redução nos foregrounds apenas para <mark style="color:orange;">**50**</mark> e <mark style="color:orange;">**80**</mark> (Dyamic e Solid)\
  \
  \> Backgrounds utilizando apenas <mark style="color:orange;">**fixed-50**</mark> e <mark style="color:orange;">**fixedAlpha-60-16**</mark> e <mark style="color:orange;">**70-16**</mark>.\
  \
  \> Borders atualizados para corresponder ao foreground. \
  \
  \
  \---------------------------------------------------------------------------\
  \
  **Brand Colors**\
  \
  \> Ajustes e redução na quantidade de valores dentro dos papéis.\
  \
  \> Adição do papel Border.\
  \
  \> Ajuste para deixar compativeis as cores Brand e Assistant do Cifra Club e Academy.\
  (Elas devem ser os mesmos valores invertidos entre assistant e brand)\
  \
  \
  \---------------------------------------------------------------------------\
  \
  **Shadows**\
  \
  \> Remoção dos tokens:\
  &#x20; <mark style="color:orange;">**shadows-dynamic-16**</mark> e <mark style="color:orange;">**32**</mark>\
  \
  \---------------------------------------------------------------------------\
  &#x20;\
  **Overlay**   \
  \
  \> Adição de mais um nível de overlay.\
  &#x20; &#x20;

## Dezembro 2024

* **12/12/24**\
  Inclusão de Global Tokens green/50 e purple/55 para as Semantic Tokens utilizadas no palcoAssistant e letrasBrand.
* **10/12/24**

  Inclusão de todas as cores e tokens respectivos cadastrados para o novo design system - Compasso.

</details>

{% file src="/files/fGzpSfT1EoC4Qhae57W3" %}

{% file src="/files/puFS0VWQjGjSDltcOAVu" %}

## Fundamentos

### ↳ Global Token vs Semantic Token

{% hint style="info" %}
A estrutura abaixo de semantic tokens é uma estrutura utilizada para facilitar o fluxo de trabalho do **time de design no Figma**.\
\
No caso de times de **desenvolvimento** essa estrutura pode ser executada de outra forma, sem existir esta herança, apenas cadastrando os HEX das cores respectivas.
{% endhint %}

{% hint style="warning" %}
No Figma, os **Semantic Tokens** foram nomeados como **Modes** para facilitar o entendimento dentro da estrutura (*Modes* reflete a troca entre estados dark e light mode), mas a aplicação é a mesma.
{% endhint %}

No Compasso, os tokens são organizados em duas categorias principais: **Global Tokens** e **Semantic Tokens**. Entender a diferença entre eles é essencial para garantir consistência e flexibilidade no uso das cores e outros estilos.

{% stepper %}
{% step %}

#### **Global Tokens**

Os **Global Tokens** representam valores puros e absolutos, sem associação a um contexto ou função específica.&#x20;

**Características:**

* São valores fixos, sem relação direta com o propósito de uso.
* Exemplo: `neutral-solid-50` (`#777777`).
* Utilizados para criar **Semantic Tokens** e outros elementos do sistema.

**Analogia:** Pense nos Global Tokens como os "materiais brutos", como tinta ou tecido, prontos para serem moldados em algo específico.
{% endstep %}

{% step %}

#### **Semantic Tokens**

Os **Semantic Tokens**, por sua vez, são abstrações contextuais baseadas nos **Global Tokens**. Eles traduzem valores brutos em aplicações práticas e específicas, como cores para textos, fundos, bordas, ou estados de interação.

**Características:**

* São utilizados em componentes com base no seu propósito funcional.
* Adotam valores dos **Global Tokens**, mas com um significado atribuído.
* Exemplo:
  * `neutral-foreground-dynamic-10` (é um token utilizado usado para textos - em light mode ele herda o token `neutral-solid-10` e para dark mode herda `neutral-solid-95` mas o token aplicado no componente texto em si, é único).

**Analogia:** Os Semantic Tokens são como peças de roupa feitas a partir do tecido bruto — elas têm um propósito e um design que atende a uma necessidade específica.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Por que essa distinção é importante?

## ![](/files/Sst4O1Lj8HvkTppTcNYJ)

A separação entre **Global Tokens** e **Semantic Tokens** proporciona:

1. **Flexibilidade:** Alterações nos Global Tokens atualizam automaticamente os Semantic Tokens e mantêm a consistência.
2. **Contextualização:** Os Semantic Tokens garantem que as aplicações sejam feitas com base no significado funcional, não apenas no valor bruto.
3. **Escalabilidade:** Permite ajustes e adaptações entre temas (como Light e Dark Mode) ou novas implementações sem comprometer a estrutura base.
   {% endhint %}

### ↳ Estrutura de Semantic Tokens

Nossos tokens seguem uma estrutura base que ajuda a definir os papeis e comportamentos de cada token, bem como seus valores.&#x20;

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

#### Agrupamentos documentados

Esses agrupamentos formam as combinações que serão encontradas ao longo dos tokens.

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

### ↳ Fixed e Dynamic Colors

Nos nossos tokens, você encontrará definições de `fixed` e `dynamic`, que se comportam de formas distintas dependendo do tema (Light ou Dark):

* **Fixed Colors (Solid + Alpha)**\
  São cores  que permanecem inalteradas, independentemente do tema ativo. Ou seja, elas não sofrem conversão ao alternar entre os modos Light e Dark.\
  \
  Essa característica pode ser identificada no token por meio de <mark style="color:orange;">**`fixed`**</mark> e <mark style="color:orange;">**`fixedAlpha`**</mark>**.**\
  \
  **-**<br>
* **Dynamic Colors (Solid + Alpha)**\
  São cores que se adaptam automaticamente ao tema. Ao mudar de Light para Dark (ou vice-versa), essas cores serão convertidas para versões específicas, garantindo contraste e legibilidade adequados em cada ambiente.\
  \
  Essa característica pode ser identificada no token por meio de <mark style="color:orange;">**`dynamic`**</mark> e <mark style="color:orange;">**`dynamicAlpha`**</mark>**.**\
  \
  **-**

### ↳ Neutral e Neutral Reverse

* **Neutral**\
  **São paletas utilizadas com referência ao tema aplicado (Dark e Light)**\
  Em cores sólidas,  geralmente se juntam às cores mais próximas em contraste aos BGs do tema em questão.\
  Já as cores em alpha, as cores mais opostas ao tema base, são tidas como Neutral, pois a aplicação devida necessita contraste no tema. Aparece em aplicações como: States e Borders.\
  \
  -<br>
* **Neutral Reverse**\
  Em cores sólidas, geralmente estão opostas ao tema aplicado. \
  Em cores com alpha, estarão próximas à base do tema, mas desta maneira precisam ser aplicadas em elementos que se opõem à base (escura ou clara). Pois apenas assim permanecem gerando contraste. Aparece em aplicações como: States e Borders.\
  \
  Essa característica pode ser identificada no token por meio de <mark style="color:orange;">**`dynamic`**</mark> e <mark style="color:orange;">**`dynamicAlpha`**</mark>**.**\
  \
  **-**

### ↳ Papéis das cores

Definem em quais locais pode der aplicado cada token.

1. **Foreground**\
   Elementos em camadas superiores, como textos e ícones.
2. **Background**\
   Elementos de base que ficam abaixo dos foregrounds, como superfícies (surfaces), containers, entre outros.
3. **Border**\
   Utilizadas em bordas de elementos como cards, botões e divisores.
4. **Elevation**

   Utilizados para gerar uma noção de profundidade nos elementos da tela.
5. **Common**\
   Aparecem em em tokens onde não há distinção de utilização entre foreground ou background.\
   Ex.: States.\
   \
   \-

## <mark style="color:orange;">🟠</mark> Semantic Color Tokens

### <mark style="color:orange;">↳</mark>  Neutral (Base) 🏁

Tokens que servem para montar os materiais básicos de todo o sistema e determinar a conversão de tons neutros entre os modos de aparência **Light** e **Dark**. Ajudam a manter a consistência e contraste em tons neutros.\
\
São utilizadas nessa categoria, as paletas: <mark style="color:orange;">**`neutral`**</mark> e <mark style="color:orange;">**`neutralReverse`**</mark>.\
\
\&#xNAN;*<mark style="background-color:blue;">OBS:</mark> <mark style="background-color:blue;"></mark><mark style="background-color:blue;">**Neutral Reverse Colors**</mark> <mark style="background-color:blue;"></mark><mark style="background-color:blue;">aparecem em tokens com cores em alpha, pois neles há distinção do que deve ser utilizado entre</mark> <mark style="background-color:blue;"></mark><mark style="background-color:blue;">**Ligh**</mark><mark style="background-color:blue;">t e</mark> <mark style="background-color:blue;"></mark><mark style="background-color:blue;">**Dark Mode.**</mark>*\
\
Seus papéis são divididos entre: <mark style="color:orange;">**`foreground`**</mark>, <mark style="color:orange;">**`background`**</mark>, <mark style="color:orange;">**`elevation`**</mark> e <mark style="color:orange;">**`border`**</mark>.

{% tabs %}
{% tab title="1️⃣ Foreground" %}

#### Dynamic Colors (Solid)

<table data-full-width="false"><thead><tr><th width="274">Token (Neutral)</th><th width="213">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutral-foreground-dynamic-10</code> </td><td><code>neutral-solid-10</code></td><td><code>neutral-solid-95</code></td></tr><tr><td><code>base-neutral-foreground-dynamic-40</code></td><td><code>neutral-solid-40</code></td><td><code>neutral-solid-70</code></td></tr><tr><td><code>base-neutral-foreground-dynamic-70</code></td><td><code>neutral-solid-70</code></td><td><code>neutral-solid-40</code></td></tr><tr><td><code>base-neutral-foreground-dynamic-100</code> </td><td><code>neutral-solid-100</code></td><td><code>neutral-solid-10</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Solid)

<table><thead><tr><th width="275">Token (Neutral)</th><th width="213">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutral-foreground-fixed-10</code></td><td><code>neutral-solid-10</code></td><td><code>neutral-solid-10</code></td></tr><tr><td><code>base-neutral-foreground-fixed-40</code></td><td><code>neutral-solid-40</code></td><td><code>neutral-solid-40</code></td></tr><tr><td><code>base-neutral-foreground-fixed-70</code></td><td><code>neutral-solid-70</code></td><td><code>neutral-solid-70</code></td></tr><tr><td><code>base-neutral-foreground-fixed-100</code></td><td><code>neutral-solid-100</code></td><td><code>neutral-solid-100</code></td></tr></tbody></table>
{% endtab %}

{% tab title="2️⃣ Background" %}

#### Dynamic Colors (Solid)

<table data-full-width="false"><thead><tr><th width="276">Token (Neutral)</th><th width="206">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutral-background-dynamic-0</code> </td><td><code>neutral-solid-0</code></td><td><code>neutral-solid-100</code></td></tr><tr><td><code>base-neutral-background-dynamic-10</code></td><td><code>neutral-solid-10</code></td><td><code>neutral-solid-100</code></td></tr><tr><td><code>base-neutral-background-dynamic-15</code></td><td><code>neutral-solid-15</code></td><td><code>neutral-solid-95</code></td></tr><tr><td><code>base-neutral-background-dynamic-20</code></td><td><code>neutral-solid-20</code></td><td><code>neutral-solid-90</code></td></tr><tr><td><code>base-neutral-background-dynamic-30</code></td><td><code>neutral-solid-30</code></td><td><code>neutral-solid-80</code></td></tr><tr><td><code>base-neutral-background-dynamic-40</code></td><td><code>neutral-solid-40</code></td><td><code>neutral-solid-70</code></td></tr><tr><td><code>base-neutral-background-dynamic-50</code></td><td><code>neutral-solid-50</code></td><td><code>neutral-solid-60</code></td></tr><tr><td><code>base-neutral-background-dynamic-60</code></td><td><code>neutral-solid-60</code></td><td><code>neutral-solid-50</code></td></tr><tr><td><code>base-neutral-background-dynamic-70</code></td><td><code>neutral-solid-70</code></td><td><code>neutral-solid-40</code></td></tr><tr><td><code>base-neutral-background-dynamic-80</code></td><td><code>neutral-solid-80</code></td><td><code>neutral-solid-30</code></td></tr><tr><td><code>base-neutral-background-dynamic-90</code></td><td><code>neutral-solid-90</code></td><td><code>neutral-solid-20</code></td></tr><tr><td><code>base-neutral-background-dynamic-95</code></td><td><code>neutral-solid-95</code></td><td><code>neutral-solid-15</code></td></tr><tr><td><code>base-neutral-background-dynamic-100</code></td><td><code>neutral-solid-100</code></td><td><code>neutral-solid-10</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Dynamic Colors (Alpha)

<table data-full-width="false"><thead><tr><th width="276">Token (Neutral)</th><th width="206">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutral-background-dynamicAlpha-0-0</code> </td><td><code>neutral-alpha-0-0</code></td><td><code>neutral-alpha-100-0</code></td></tr><tr><td><code>base-neutral-background-dynamicAlpha-0-4</code> </td><td><code>neutral-alpha-0-4</code></td><td><code>neutral-alpha-100-4</code></td></tr><tr><td><code>base-neutral-background-dynamicAlpha-0-8</code> </td><td><code>neutral-alpha-0-8</code></td><td><code>neutral-alpha-100-8</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

<table data-full-width="false"><thead><tr><th width="276">Token (Neutral Reverse)</th><th width="206">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutralReverse-background-dynamicAlpha-100-0</code></td><td><code>neutral-alpha-100-0</code></td><td><code>neutral-alpha-0-0</code></td></tr><tr><td><code>base-neutralReverse-background-dynamicAlpha-100-0-alt</code></td><td><code>neutral-alpha-100-0</code></td><td><code>neutral-alpha-10-0</code></td></tr><tr><td><code>base-neutralReverse-background-dynamicAlpha-100-4</code> </td><td><code>neutral-alpha-100-4</code></td><td><code>neutral-alpha-0-4</code></td></tr><tr><td><code>base-neutralReverse-background-dynamicAlpha-100-8</code> </td><td><code>neutral-alpha-100-8</code></td><td><code>neutral-alpha-0-8</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Solid)

<table data-full-width="false"><thead><tr><th width="276">Token (Neutral)</th><th width="208">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutral-background-fixed-0</code> </td><td><code>neutral-solid-0</code></td><td><code>neutral-solid-0</code></td></tr><tr><td><code>base-neutral-background-fixed-10</code></td><td><code>neutral-solid-10</code></td><td><code>neutral-solid-10</code></td></tr><tr><td><code>base-neutral-background-fixed-15</code></td><td><code>neutral-solid-15</code></td><td><code>neutral-solid-15</code></td></tr><tr><td><code>base-neutral-background-fixed-20</code></td><td><code>neutral-solid-20</code></td><td><code>neutral-solid-20</code></td></tr><tr><td><code>base-neutral-background-fixed-30</code></td><td><code>neutral-solid-30</code></td><td><code>neutral-solid-30</code></td></tr><tr><td><code>base-neutral-background-fixed-40</code></td><td><code>neutral-solid-40</code></td><td><code>neutral-solid-40</code></td></tr><tr><td><code>base-neutral-background-fixed-50</code></td><td><code>neutral-solid-50</code></td><td><code>neutral-solid-50</code></td></tr><tr><td><code>base-neutral-background-fixed-60</code></td><td><code>neutral-solid-60</code></td><td><code>neutral-solid-60</code></td></tr><tr><td><code>base-neutral-background-fixed-70</code></td><td><code>neutral-solid-70</code></td><td><code>neutral-solid-70</code></td></tr><tr><td><code>base-neutral-background-fixed-80</code></td><td><code>neutral-solid-80</code></td><td><code>neutral-solid-80</code></td></tr><tr><td><code>base-neutral-background-fixed-90</code></td><td><code>neutral-solid-90</code></td><td><code>neutral-solid-90</code></td></tr><tr><td><code>base-neutral-background-fixed-95</code></td><td><code>neutral-solid-95</code></td><td><code>neutral-solid-95</code></td></tr><tr><td><code>base-neutral-background-fixed-100</code></td><td><code>neutral-solid-100</code></td><td><code>neutral-solid-100</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="3️⃣ Elevation" %}

#### Dynamic Colors (Solid)

<table><thead><tr><th width="277">Token (Neutral)</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutral-elevation-dynamic-under</code></td><td><code>neutral-solid-98</code></td><td><code>neutral-solid-10</code></td></tr><tr><td><code>base-neutral-elevation-dynamic-over</code></td><td><code>neutral-solid-100</code></td><td><code>neutral-solid-13</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Dynamic Colors (Alpha)

<table><thead><tr><th width="277">Token (Neutral)</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutral-elevation-dynamicAlpha-under-0</code></td><td><code>neutral-alpha-98-0</code></td><td><code>neutral-alpha-10-0</code></td></tr><tr><td><code>base-neutral-elevation-dynamicAlpha-over-0</code></td><td><code>neutral-alpha-100-0</code></td><td><code>neutral-alpha-13-0</code></td></tr><tr><td><code>base-neutral-elevation-dynamicAlpha-over-92</code></td><td><code>neutral-alpha-100-92</code></td><td><code>neutral-alpha-13-92</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="4️⃣ Border" %}

#### Dynamic Colors (Solid )

<table><thead><tr><th width="277">Token (Neutral)</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutral-border-dynamic-10</code></td><td><code>neutral-solid-10</code></td><td><code>neutral-solid-100</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Dynamic Colors (Alpha)

<table><thead><tr><th width="277">Tokens (Neutral)</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutral-border-dynamicAlpha-0-6</code></td><td><code>neutral-alpha-0-6</code></td><td><code>neutral-alpha-100-6</code></td></tr><tr><td><code>base-neutral-border-dynamicAlpha-0-8</code></td><td><code>neutral-alpha-0-8</code></td><td><code>neutral-alpha-100-8</code></td></tr></tbody></table>

<table><thead><tr><th width="277">Tokens (Neutral Reverse)</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutralReverse-border-dynamicAlpha-100-6</code></td><td><code>neutral-alpha-100-6</code></td><td><code>neutral-alpha-0-6</code></td></tr><tr><td><code>base-neutralReverse-border-dynamicAlpha-100-8</code></td><td><code>neutral-alpha-100-8</code></td><td><code>neutral-alpha-0-8</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Alpha)

<table><thead><tr><th width="277">Token (Neutral)</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutral-border-fixedAlpha-0-6</code></td><td><code>neutral-alpha-0-6</code></td><td><code>neutral-alpha-0-6</code></td></tr><tr><td><code>base-neutral-border-fixedAlpha-0-8</code></td><td><code>neutral-alpha-0-8</code></td><td><code>neutral-alpha-0-8</code></td></tr></tbody></table>

<table><thead><tr><th width="277">Token (Neutral)</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-neutral-border-fixedAlpha-100-6</code></td><td><code>neutral-alpha-100-6</code></td><td><code>neutral-alpha-100-6</code></td></tr><tr><td><code>base-neutral-border-fixedAlpha-100-8</code></td><td><code>neutral-alpha-100-8</code></td><td><code>neutral-alpha-100-8</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

### <mark style="color:orange;">↳</mark> Brand (Base) 🔶&#x20;

A escala de *Brand Colors* é aplicada em componentes que possuem direta correlação com algum de nossos produtos.

#### <mark style="color:purple;">↳</mark> Global tokens

No caso de *Brand Colors* os tokens globais já são cadastrados herdados das *Decorative Colors*, sem necessidade de replicação. [**Ver Decorative Colors →**](#decorative-colors)

#### <mark style="color:orange;">↳</mark> Semantic Tokens ✦ `cifraBrand`

A escala do *cifraBrand* é utilizada em componentes e elementos que tem referência direta à cor **orange**, também **primária** do Cifra Club. Na prática ela serve para facilitar a dinâmica de troca de temas em componentes e telas, também complementando as *Neutral Colors* para a definir nossa identidade visual.\
\
Seus papéis são divididos entre: <mark style="color:orange;">**`foreground`**</mark>, <mark style="color:orange;">**`background`**</mark>e <mark style="color:orange;">**`border`**</mark>.

{% tabs %}
{% tab title="1️⃣ Foreground" %}

#### Dynamic Colors (Solid)

<table><thead><tr><th width="252">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-cifraBrand-foreground-dynamic-68</code></td><td><code>orange-solid-68</code></td><td><code>orange-solid-75</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Solid)

<table><thead><tr><th width="268">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-cifraBrand-foreground-fixed-70</code></td><td><code>orange-solid-70</code></td><td><code>orange-solid-70</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="2️⃣ Background" %}

#### Fixed Colors (Solid)

<table><thead><tr><th width="265">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-cifraBrand-background-fixed-70</code></td><td><code>orange-solid-70</code></td><td><code>orange-solid-70</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Alpha)

<table><thead><tr><th width="285">Token</th><th width="220">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-cifraBrand-background-fixedAlpha-70-8</code></td><td><code>orange-alpha-70-8</code></td><td><code>orange-alpha-70-8</code></td></tr><tr><td><code>base-cifraBrand-background-fixedAlpha-70-16</code></td><td><code>orange-alpha-70-16</code></td><td><code>orange-alpha-70-16</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="3️⃣ Border" %}

#### Dynamic Colors (Solid)

<table><thead><tr><th width="254">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-cifraBrand-border-dynamic-68</code></td><td><code>orange-solid-68</code></td><td><code>orange-solid-75</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Alpha)

<table data-full-width="true"><thead><tr><th width="254">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-cifraBrand-border-fixedAlpha-70-16</code></td><td><code>orange-alpha-70-16</code></td><td><code>orange-alpha-70-16</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
O **`orange-solid-68`** e **`orange-solid-75`**(apesar de ser muito semelhante ao **`orange-solid-70`**) existe por questão de acessibilidade. Ele é uma cor de fonte pra casos específicos tipo *Nome do Artista* na tela de **cifra que é usado SÓ pra texto** (em versoes light e dark), porque o laranja **`orange-70`** #FF6600 não funciona.

Exemplos:

![](/files/USh9AIQlrdFTNAAa9vcH) ![](/files/2g356a273WRUZAlf7Xt3)

{% endhint %}

#### <mark style="color:orange;">↳</mark> Semantic Tokens ✦ `cifraAssistant`

A escala do *cifraAssistant* é utilizada em componentes e elementos que tem referência direta à cor **teal** da escala Global, utilizada também na identidade visual das assinaturas.\
\
Seus papéis são divididos entre: <mark style="color:orange;">**`foreground`**</mark>, <mark style="color:orange;">**`background`**</mark>e <mark style="color:orange;">**`border`**</mark>.

{% tabs %}
{% tab title="1️⃣ Foreground" %}

#### Dynamic Colors (Solid)

<table><thead><tr><th width="297">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-cifraAssistant-foreground-dynamic-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-80</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Solid)

<table><thead><tr><th width="303">Token</th><th>Global Token (Light)</th><th>Global Token (Light)</th></tr></thead><tbody><tr><td><code>base-cifraAssistant-foreground-fixed-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-50</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="2️⃣ Background" %}

#### Fixed Colors (Solid)

<table><thead><tr><th width="302">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-cifraAssistant-background-fixed-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-50</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Alpha)

<table><thead><tr><th width="302">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-cifraAssistant-background-fixedAlpha-60-8</code></td><td><code>teal-alpha-60-8</code></td><td><code>teal-alpha-60-8</code></td></tr><tr><td><code>base-cifraAssistant-background-fixedAlpha-60-16</code></td><td><code>teal-alpha-60-16</code></td><td><code>teal-alpha-60-16</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="3️⃣ Border" %}

#### Dynamic Colors (Solid)

<table><thead><tr><th width="302">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-cifraAssistant-border-dynamic-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-80</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

#### <mark style="color:orange;">↳</mark> Semantic Tokens ✦ `academyBrand`

A escala do *academyBrand* é utilizada em componentes e elementos que tem referência direta à cor **cifraAssistan**t do Cifra Club. Na prática ela serve para facilitar a dinâmica de troca de temas em componentes e telas.\
\
Seus papéis são divididos entre: <mark style="color:orange;">**`foreground`**</mark>, <mark style="color:orange;">**`background`**</mark>e <mark style="color:orange;">**`border`**</mark>.

{% tabs %}
{% tab title="1️⃣ Foreground" %}

#### Dynamic Colors (Solid)

<table><thead><tr><th width="297">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-academyBrand-foreground-dynamic-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-80</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Solid)

<table><thead><tr><th width="294">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-academyBrand-foreground-fixed-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-50</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="2️⃣ Background" %}

#### Fixed Colors (Solid)

<table><thead><tr><th width="300">Token</th><th width="208">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-academyBrand-background-fixed-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-50</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Alpha)

<table><thead><tr><th width="303">Token</th><th width="207">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-academyBrand-background-fixedAlpha-60-8</code></td><td><code>teal-alpha-60-8</code></td><td><code>teal-alpha-60-8</code></td></tr><tr><td><code>base-academyBrand-background-fixedAlpha-60-16</code></td><td><code>teal-alpha-60-16</code></td><td><code>teal-alpha-60-16</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="3️⃣ Border" %}

#### Dynamic Colors (Solid)

<table><thead><tr><th width="307">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-academyBrand-border-dynamic-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-80</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

#### <mark style="color:orange;">↳</mark> Semantic Tokens ✦ `academyAssistant`

A escala do *academyAssistant* é utilizada em componentes e elementos secundários que tem referência direta à cor **cifraBrand** do Cifra Club.\
\
Seus papéis são divididos entre: <mark style="color:orange;">**`foreground`**</mark>, <mark style="color:orange;">**`background`**</mark>e <mark style="color:orange;">**`border`**</mark>.

{% tabs %}
{% tab title="1️⃣ Foreground" %}

#### Dynamic Colors (Solid)

<table data-full-width="true"><thead><tr><th width="321">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-academyAssistant-foreground-dynamic-68</code></td><td><code>orange-solid-68</code></td><td><code>orange-solid-75</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Solid)

<table><thead><tr><th width="317">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-academyAssistant-foreground-fixed-68</code></td><td><code>orange-solid-68</code></td><td><code>orange-solid-68</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="2️⃣Background" %}

#### Fixed Colors (Solid)

<table><thead><tr><th width="322">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-academyAssistant-background-fixed-70</code></td><td><code>orange-solid-70</code></td><td><code>orange-solid-70</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Alpha)

<table><thead><tr><th width="320">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-academyAssistant-background-fixedAlpha-70-8</code></td><td><code>orange-alpha-70-8</code></td><td><code>orange-solid-70-8</code></td></tr><tr><td><code>base-academyAssistant-background-fixedAlpha-70-16</code></td><td><code>orange-alpha-70-16</code></td><td><code>orange-alpha-70-16</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="3️⃣ Border" %}

#### Dynamic Colors (Solid)

<table><thead><tr><th width="320">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-academyAssistant-border-fixed-68</code></td><td><code>orange-solid-68</code></td><td><code>orange-solid-75</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

#### <mark style="color:orange;">↳</mark> Semantic Tokens ✦ `palcoBrand`

A escala do *palcoBrand* é utilizada em componentes e elementos que tem referência direta à cor **identidade visual do PalcoMP3**.\
\
Utiliza apenas o papel: <mark style="color:orange;">**`background`**</mark>.

#### Background (Fixed Colors)

<table><thead><tr><th width="346">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-palcoBrand-background-fixed-40</code></td><td><code>red-solid-40</code></td><td><code>red-solid-40</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### <mark style="color:orange;">↳</mark> Semantic Tokens ✦ `palcoAssistant`

A escala do *palcoAssistant* é utilizada em componentes e elementos que tem secundários em relação a **identidade visual do PalcoMP3**.\
\
Utiliza apenas o papel: <mark style="color:orange;">**`background`**</mark>.

#### Background (Fixed Colors)

<table><thead><tr><th width="342">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>base-palcoAssistant-background-fixed-40</code></td><td><code>green-solid-40</code></td><td><code>green-solid-40</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### <mark style="color:orange;">↳</mark> Semantic Tokens ✦ `letrasBrand`

A escala do *letrasBrand* é utilizada em componentes e elementos que tem referência direta à cor **identidade visual do Letras**.\
\
Seus papéis são divididos entre: <mark style="color:orange;">**`foreground`**</mark> **e** <mark style="color:orange;">**`background`**</mark>.

#### Background (Dynamic)

<table><thead><tr><th width="452">Token</th><th>HEX Light</th><th>HEX Dark</th></tr></thead><tbody><tr><td><code>base-letrasBrand-foreground-dynamic-39</code></td><td><code>citron-solid-39</code></td><td><code>citron-solid-36</code></td></tr><tr><td><code>base-letrasBrand-background-dynamic-36</code></td><td><code>citron-solid-36</code></td><td><code>citron-solid-39</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

### <mark style="color:orange;">↳</mark> Decorative  🏳️‍🌈

Tokens semânticos de função decorativa utilizadas em contextos variados. \
\
Seus papéis são divididos entre: <mark style="color:orange;">**`foreground`**</mark>,<mark style="color:orange;">**`background`**</mark>e <mark style="color:orange;">**`border`**</mark>

{% tabs %}
{% tab title="1️⃣ Foreground" %}

#### Fixed colors (Solid)

<table><thead><tr><th width="274">Token</th><th width="203">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>decorative-blue-foreground-fixed-50</code></td><td><code>blue-solid-50</code></td><td><code>blue-solid-50</code></td></tr><tr><td><code>decorative-blue-foreground-fixed-60</code></td><td><code>blue-solid-60</code></td><td><code>blue-solid-60</code></td></tr><tr><td><code>decorative-orange-foreground-fixed-50</code></td><td><code>orange-solid-50</code></td><td><code>orange-solid-50</code></td></tr><tr><td><code>decorative-orange-foreground-fixed-60</code></td><td><code>orange-solid-60</code></td><td><code>orange-solid-60</code></td></tr><tr><td><code>decorative-purple-foreground-fixed-50</code></td><td><code>purple-solid-50</code></td><td><code>purple-solid-50</code></td></tr><tr><td><code>decorative-purple-foreground-fixed-60</code></td><td><code>purple-solid-60</code></td><td><code>purple-solid-60</code></td></tr><tr><td><code>decorative-red-foreground-fixed-50</code></td><td><code>red-solid-50</code></td><td><code>red-solid-50</code></td></tr><tr><td><code>decorative-red-foreground-fixed-60</code></td><td><code>red-solid-60</code></td><td><code>red-solid-60</code></td></tr><tr><td><code>decorative-rose-foreground-fixed-50</code></td><td><code>rose-solid-50</code></td><td><code>rose-solid-50</code></td></tr><tr><td><code>decorative-rose-foreground-fixed-60</code></td><td><code>rose-solid-60</code></td><td><code>rose-solid-60</code></td></tr><tr><td><code>decorative-teal-foreground-fixed-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-50</code></td></tr><tr><td><code>decorative-teal-foreground-fixed-60</code></td><td><code>teal-solid-60</code></td><td><code>teal-solid-60</code></td></tr><tr><td><code>decorative-yellow-foreground-fixed-50</code></td><td><code>yellow-solid-50</code></td><td><code>yellow-solid-50</code></td></tr><tr><td><code>decorative-yellow-foreground-fixed-60</code></td><td><code>yellow-solid-60</code></td><td><code>yellow-solid-60</code></td></tr></tbody></table>

#### Dynamic colors (Solid)

<table><thead><tr><th width="274">Token</th><th width="203">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>decorative-blue-foreground-dynamic-50</code></td><td><code>blue-solid-50</code></td><td><code>blue-solid-80</code></td></tr><tr><td><code>decorative-orange-dynamic-fixed-50</code></td><td><code>orange-solid-50</code></td><td><code>orange-solid-80</code></td></tr><tr><td><code>decorative-purple-foreground-dynamic-50</code></td><td><code>purple-solid-50</code></td><td><code>purple-solid-80</code></td></tr><tr><td><code>decorative-red-foreground-dynamic-50</code></td><td><code>red-solid-50</code></td><td><code>red-solid-80</code></td></tr><tr><td><code>decorative-rose-foreground-dynamic-50</code></td><td><code>rose-solid-50</code></td><td><code>rose-solid-80</code></td></tr><tr><td><code>decorative-teal-foreground-dynamic-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-80</code></td></tr><tr><td><code>decorative-yellow-foreground-dynamic-50</code></td><td><code>yellow-solid-50</code></td><td><code>yellow-solid-80</code></td></tr></tbody></table>
{% endtab %}

{% tab title="2️⃣ Background" %}

#### Fixed Colors (Solid)

<table><thead><tr><th width="274">Tokens</th><th width="203">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>decorative-blue-background-fixed-50</code></td><td><code>blue-solid-50</code></td><td><code>blue-solid-50</code></td></tr><tr><td><code>decorative-orange-background-fixed-50</code></td><td><code>orange-solid-50</code></td><td><code>orange-solid-50</code></td></tr><tr><td><code>decorative-purple-background-fixed-50</code></td><td><code>purple-solid-50</code></td><td><code>purple-solid-50</code></td></tr><tr><td><code>decorative-red-background-fixed-50</code></td><td><code>red-solid-50</code></td><td><code>red-solid-50</code></td></tr><tr><td><code>decorative-rose-background-fixed-50</code></td><td><code>rose-solid-50</code></td><td><code>rose-solid-50</code></td></tr><tr><td><code>decorative-teal-background-fixed-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-50</code></td></tr><tr><td><code>decorative-yellow-background-fixed-50</code></td><td><code>yellow-solid-50</code></td><td><code>yellow-solid-50</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed colors (Alpha)

<table><thead><tr><th width="274">Fixed tokens</th><th width="203">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>decorative-blue-background-fixedAlpha-60-8</code></td><td><code>blue-alpha-60-8</code></td><td><code>blue-alpha-60-8</code></td></tr><tr><td><code>decorative-blue-background-fixedAlpha-60-16</code></td><td><code>blue-alpha-60-16</code></td><td><code>blue-alpha-60-16</code></td></tr><tr><td><code>decorative-orange-background-fixedAlpha-60-8</code></td><td><code>orange-alpha-60-8</code></td><td><code>orange-alpha-60-8</code></td></tr><tr><td><code>decorative-orange-background-fixedAlpha-60-16</code></td><td><code>orange-alpha-60-16</code></td><td><code>orange-alpha-60-16</code></td></tr><tr><td><code>decorative-purple-background-fixedAlpha-60-8</code></td><td><code>purple-alpha-60-8</code></td><td><code>purple-alpha-60-8</code></td></tr><tr><td><code>decorative-purple-background-fixedAlpha-60-16</code></td><td><code>purple-alpha-60-16</code></td><td><code>purple-alpha-60-16</code></td></tr><tr><td><code>decorative-red-background-fixedAlpha-70-8</code></td><td><code>red-alpha-70-8</code></td><td><code>red-alpha-70-8</code></td></tr><tr><td><code>decorative-red-background-fixedAlpha-70-16</code></td><td><code>red-alpha-70-16</code></td><td><code>red-alpha-70-16</code></td></tr><tr><td><code>decorative-rose-background-fixedAlpha-60-8</code></td><td><code>rose-alpha-60-8</code></td><td><code>rose-alpha-60-8</code></td></tr><tr><td><code>decorative-rose-background-fixedAlpha-60-16</code></td><td><code>rose-alpha-60-16</code></td><td><code>rose-alpha-60-16</code></td></tr><tr><td><code>decorative-teal-background-fixedAlpha-60-8</code></td><td><code>teal-alpha-60-8</code></td><td><code>teal-alpha-60-8</code></td></tr><tr><td><code>decorative-teal-background-fixedAlpha-60-16</code></td><td><code>teal-alpha-60-16</code></td><td><code>teal-alpha-60-16</code></td></tr><tr><td><code>decorative-yellow-background-fixedAlpha-60-8</code></td><td><code>yellow-alpha-60-8</code></td><td><code>yellow-alpha-60-8</code></td></tr><tr><td><code>decorative-yellow-background-fixedAlpha-60-16</code></td><td><code>yellow-alpha-60-16</code></td><td><code>yellow-alpha-60-16</code></td></tr></tbody></table>

{% endtab %}

{% tab title="3️⃣ Border" %}
Fixed colors (Alpha)

<table><thead><tr><th width="274">Fixed tokens</th><th width="203">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>decorative-blue-border-fixedAlpha-60-16</code></td><td><code>blue-alpha-60-16</code></td><td><code>blue-alpha-60-16</code></td></tr><tr><td><code>decorative-orange-border-fixedAlpha-60-16</code></td><td><code>orange-alpha-60-16</code></td><td><code>orange-alpha-60-16</code></td></tr><tr><td><code>decorative-purple-border-fixedAlpha-60-16</code></td><td><code>purple-alpha-60-16</code></td><td><code>purple-alpha-60-16</code></td></tr><tr><td><code>decorative-red-border-fixedAlpha-70-16</code></td><td><code>red-alpha-70-16</code></td><td><code>red-alpha-70-16</code></td></tr><tr><td><code>decorative-rose-border-fixedAlpha-60-16</code></td><td><code>rose-alpha-60-16</code></td><td><code>rose-alpha-60-16</code></td></tr><tr><td><code>decorative-teal-border-fixedAlpha-60-16</code></td><td><code>teal-alpha-60-16</code></td><td><code>teal-alpha-60-16</code></td></tr><tr><td><code>decorative-yellow-border-fixedAlpha-60-16</code></td><td><code>yellow-alpha-60-16</code></td><td><code>yellow-alpha-60-16</code></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

### <mark style="color:orange;">↳</mark> States 👆

Tokens que se sobrepõem a camadas de background em elementos interativos para gerar feedback visual em seus estados.\
\
Aplicadas em contextos que requerem a representação de um estado específico, como botões em estados de *hover* ou *pressed*.\
Para esses casos, os **States** utilizam cores neutras com transparências (alfa). Por exemplo, em um botão com a cor base `#FF6600` no estado *hover*, será aplicado o token correspondente, que combina o HEX da cor base com a neutral color ajustada com alfa.\
\
Seus papéis são divididos entre: <mark style="color:orange;">**`foreground`**</mark>, <mark style="color:orange;">**`common`**</mark>e <mark style="color:orange;">**`border`**</mark>.\
\
O papel common aparece nesta categoria pois states muitas vezes tem os mesmos comportamentos independente de estarem aplicados em background ou foreground.

{% hint style="info" %}
Os states com opacidade 0% servem para que uma das camadas do objeto varie seu preenchimento entre  0, 4, 8, 16% de opacidade. Em casos de **Disabled Foreground**, a opacidade é 24%.
{% endhint %}

{% tabs %}
{% tab title="1️⃣  Foreground" %}

#### Neutral (Dynamic)

<table><thead><tr><th width="114">State</th><th width="203">Token </th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><strong>Disabled</strong></td><td><code>state-neutral-foreground-dynamicAlpha-disabled</code></td><td><code>neutral-alpha-0-24</code></td><td><code>neutral-alpha-100-24</code></td></tr></tbody></table>

#### Neutral Reverse (Dynamic)

<table><thead><tr><th width="116">State</th><th width="206">Token </th><th width="197">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><strong>Disabled</strong></td><td><code>state-neutralReverse-foreground-dynamicAlpha-disabled</code></td><td><code>neutral-alpha-100-24</code></td><td><code>neutral-alpha-0-24</code></td></tr></tbody></table>

#### &#x20;**Neutral Reverse (Fixed)**

<table><thead><tr><th width="116">State</th><th width="206">Token </th><th width="197">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><strong>Disabled</strong></td><td><code>state-neutralReverse-foreground-fixedAlpha-disabled</code></td><td><code>neutral-alpha-100-24</code></td><td><code>neutral-alpha-100-24</code></td></tr></tbody></table>

<br>
{% endtab %}

{% tab title="2️⃣ Common" %}

#### Neutral (Dynamic)

<table><thead><tr><th width="114">State</th><th width="216">Token</th><th width="187">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><strong>Enabled</strong></td><td><code>state-neutral-common-dynamicAlpha-enabled</code></td><td><code>neutral-alpha-0-0</code></td><td><code>neutral-alpha-100-0</code></td></tr><tr><td><strong>Hovered</strong></td><td><code>state-neutral-common-dynamicAlpha-hovered</code></td><td><code>neutral-alpha-0-6</code></td><td><code>neutral-alpha-100-6</code></td></tr><tr><td><strong>Pressed</strong></td><td><code>state-neutral-common-dynamicAlpha-pressed</code></td><td><code>neutral-alpha-0-12</code></td><td><code>neutral-alpha-100-12</code></td></tr><tr><td><strong>Focused</strong></td><td><code>state-neutral-common-dynamicAlpha-focused</code></td><td><code>neutral-alpha-0-6</code></td><td><code>neutral-alpha-100-6</code></td></tr><tr><td><strong>Disabled</strong></td><td><code>state-neutral-common-dynamicAlpha-disabled</code></td><td><code>neutral-alpha-0-4</code></td><td><code>neutral-alpha-100-4</code></td></tr><tr><td></td><td></td><td></td><td></td></tr></tbody></table>

#### Neutral (Fixed)

<table><thead><tr><th width="114">State</th><th width="216">Token</th><th width="187">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><strong>Enabled</strong></td><td><code>state-neutral-common-fixedAlpha-enabled</code></td><td><code>neutral-alpha-0-0</code></td><td><code>neutral-alpha-0-0</code></td></tr><tr><td><strong>Hovered</strong></td><td><code>state-neutral-common-fixedAlpha-hovered</code></td><td><code>neutral-alpha-0-6</code></td><td><code>neutral-alpha-0-6</code></td></tr><tr><td><strong>Pressed</strong></td><td><code>state-neutral-common-fixedAlpha-pressed</code></td><td><code>neutral-alpha-0-12</code></td><td><code>neutral-alpha-0-12</code></td></tr><tr><td><strong>Focused</strong></td><td><code>state-neutral-common-fixedAlpha-focused</code></td><td><code>neutral-alpha-0-6</code></td><td><code>neutral-alpha-0-6</code></td></tr><tr><td><strong>Disabled</strong></td><td><code>state-neutral-common-fixedAlpha-disabled</code></td><td><code>neutral-alpha-0-4</code></td><td><code>neutral-alpha-0-4</code></td></tr><tr><td></td><td></td><td></td><td></td></tr></tbody></table>

#### Neutral Reverse (Dynamic)

<table><thead><tr><th width="115">State</th><th width="216">Token</th><th width="187">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><strong>Enabled</strong></td><td><code>state-neutralReverse-common-dynamicAlpha-enabled</code></td><td><code>neutral-alpha-100-0</code></td><td><code>neutral-alpha-0-0</code></td></tr><tr><td><strong>Hovered</strong></td><td><code>state-neutralReverse-common-dynamicAlpha-hovered</code></td><td><code>neutral-alpha-100-6</code></td><td><code>neutral-alpha-0-6</code></td></tr><tr><td><strong>Pressed</strong></td><td><code>state-neutralReverse-common-dynamicAlpha-pressed</code></td><td><code>neutral-alpha-100-12</code></td><td><code>neutral-alpha-0-12</code></td></tr><tr><td><strong>Focused</strong></td><td><code>state-neutralReverse-common-dynamicAlpha-focused</code></td><td><code>neutral-alpha-100-6</code></td><td><code>neutral-alpha-0-6</code></td></tr><tr><td><strong>Disabled</strong></td><td><code>state-neutralReverse-common-dynamicAlpha-disabled</code></td><td><code>neutral-alpha-100-4</code></td><td><code>neutral-alpha-0-4</code></td></tr></tbody></table>

#### Neutral Reverse (Fixed)

<table><thead><tr><th width="114">State</th><th width="212">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><strong>Enabled</strong></td><td><code>state-neutralReverse-common-fixedAlpha-enabled</code></td><td><code>neutral-alpha-100-0</code></td><td><code>neutral-alpha-100-0</code></td></tr><tr><td>Hovered</td><td><code>state-neutralReverse-common-fixedAlpha-hovered</code></td><td><code>neutral-alpha-100-6</code></td><td><code>neutral-alpha-100-6</code></td></tr><tr><td>Pressed</td><td><code>state-neutralReverse-common-fixedAlpha-pressed</code></td><td><code>neutral-alpha-100-12</code></td><td><code>neutral-alpha-100-12</code></td></tr><tr><td>Focused</td><td><code>state-neutralReverse-common-fixedAlpha-focused</code></td><td><code>neutral-alpha-100-6</code></td><td><code>neutral-alpha-100-6</code></td></tr><tr><td><strong>Disabled</strong></td><td><code>state-neutralReverse-common-fixedAlpha-disabled</code></td><td><code>neutral-alpha-100-4</code></td><td><code>neutral-alpha-100-4</code></td></tr></tbody></table>

#### Brand (Fixed)

<table><thead><tr><th width="114">State</th><th width="212">Token</th><th width="188">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><strong>Enabled</strong></td><td><code>state-cifraBrand-background-fixedAlpha-enabled</code></td><td><code>orange-alpha-70-0</code></td><td><code>orange-alpha-70-0</code></td></tr><tr><td><strong>Hovered</strong></td><td><code>state-cifraBrand-background-fixedAlpha-hovered</code></td><td><code>orange-alpha-70-8</code></td><td><code>orange-alpha-70-8</code></td></tr><tr><td><strong>Pressed</strong></td><td><code>state-cifraBrand-background-fixedAlpha-pressed</code></td><td><code>orange-alpha-70-16</code></td><td><code>orange-alpha-70-16</code></td></tr><tr><td><strong>Focused</strong></td><td><code>state-cifraBrand-background-fixedAlpha-focused</code></td><td><code>orange-alpha-70-8</code></td><td><code>orange-alpha-70-8</code></td></tr><tr><td><strong>Selected</strong></td><td><code>state-cifraBrand-background-fixedAlpha-selected</code></td><td><code>orange-alpha-70-8</code></td><td><code>orange-alpha-70-8</code></td></tr></tbody></table>

#### Error (Fixed)

<table><thead><tr><th width="114">State</th><th width="210">Token</th><th width="191">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><strong>Enabled</strong></td><td><code>state-error-background-fixedAlpha-enabled</code></td><td><code>red-alpha-70-0</code></td><td><code>red-alpha-70-0</code></td></tr><tr><td><strong>Hovered</strong></td><td><code>state-error-background-fixedAlpha-hovered</code></td><td><code>red-alpha-70-8</code></td><td><code>red-alpha-70-8</code></td></tr><tr><td><strong>Pressed</strong></td><td><code>state-error-background-fixedAlpha-pressed</code></td><td><code>red-alpha-70-16</code></td><td><code>red-alpha-70-16</code></td></tr><tr><td><strong>Focused</strong></td><td><code>state-error-background-fixedAlpha-focused</code></td><td><code>red-alpha-70-8</code></td><td><code>red-alpha-70-8</code></td></tr></tbody></table>
{% endtab %}

{% tab title="3️⃣ Border" %}

#### Neutral (Dynamic)

<table><thead><tr><th width="116">State</th><th width="200">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><strong>Disabled</strong></td><td><code>state-neutral-border-dynamicAlpha-disabled</code></td><td><code>neutral-alpha-0-6</code></td><td><code>neutral-alpha-100-6</code></td></tr><tr><td><strong>Selected</strong></td><td><code>state-neutral-border-dynamic-selected</code></td><td><code>neutral-solid-10</code></td><td><code>neutral-solid-100</code></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

### <mark style="color:orange;">↳</mark>  Shadows 🌒

Utilizados para que nossos efeitos de sombra sejam mais escuros em **Dark Mode**.

<table><thead><tr><th width="246">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>shadows-dynamicAlpha-0-4</code></td><td><code>neutral-alpha-0-4</code></td><td><code>neutral-alpha-0-16</code></td></tr><tr><td><code>shadows-dynamicAlpha-0-8</code></td><td><code>neutral-alpha-0-8</code></td><td><code>neutral-alpha-0-24</code></td></tr></tbody></table>

### ↳ Overlay ⬛️

Utilizados em camadas de cor que escurecem o conteúdo por trás, para ressaltar algum item na tela. Ex: Ao abrir **Modais** e **Bottom Sheets**.

<table><thead><tr><th width="249">Token</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>overlay-fixedAlpha-0-32</code></td><td><code>neutral-alpha-0-32</code></td><td><code>neutral-alpha-0-32</code></td></tr><tr><td><code>overlay-fixedAlpha-0-60</code></td><td><code>neutral-alpha-0-60</code></td><td><code>neutral-alpha-0-60</code></td></tr></tbody></table>

***

### <mark style="color:orange;">↳</mark> Status Colors  🚩

A escala status é aplicada para dar o feedback de status do sistema como por exemplo, erro, sucesso e alertas.

#### <mark style="color:purple;">↳</mark> Global Tokens

No caso de *Status Colors* os tokens globais já são cadastrados herdados das *Decorative Colors*, sem necessidade de replicação. [**Ver Decorative Colors →**](#decorative-colors)

#### <mark style="color:orange;">↳</mark> Semantic Tokens

Os *semantic tokens* são tokens referenciados pelos *global tokens*, onde são utilizados em contextos para papéis aplicados.

{% tabs %}
{% tab title="1️⃣ Foreground" %}

#### Dynamic Colors (Solid)

<table><thead><tr><th width="311">Token Light</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>status-error-foreground-dynamic-50</code></td><td><code>red-solid-50</code></td><td><code>red-solid-80</code></td></tr><tr><td><code>status-error-foreground-dynamic-80</code></td><td><code>red-solid-80</code></td><td><code>red-solid-50</code></td></tr><tr><td><code>status-success-foreground-dynamic-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-80</code></td></tr><tr><td><code>status-success-foreground-dynamic-80</code></td><td><code>teal-solid-80</code></td><td><code>teal-solid-50</code></td></tr><tr><td><code>status-alert-foreground-dynamic-50</code></td><td><code>blue-solid-50</code></td><td><code>blue-solid-80</code></td></tr><tr><td><code>status-alert-foreground-dynamic-80</code></td><td><code>blue-solid-80</code></td><td><code>blue-solid-50</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Solid)

<table><thead><tr><th width="311">Token Light</th><th width="194">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>status-error-foreground-fixed-50</code></td><td><code>red-solid-50</code></td><td><code>red-solid-50</code></td></tr><tr><td><code>status-error-foreground-fixed-80</code></td><td><code>red-solid-80</code></td><td><code>red-solid-80</code></td></tr><tr><td><code>status-success-foreground-fixed-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-50</code></td></tr><tr><td><code>status-success-foreground-fixed-80</code></td><td><code>teal-solid-80</code></td><td><code>teal-solid-80</code></td></tr><tr><td><code>status-alert-foreground-fixed-50</code></td><td><code>blue-solid-50</code></td><td><code>blue-solid-50</code></td></tr><tr><td><code>status-alert-foreground-fixed-95</code></td><td><code>blue-solid-80</code></td><td><code>blue-solid-80</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="2️⃣ Background" %}

#### Fixed Colors (Solid)

<table><thead><tr><th width="312">Token Light</th><th width="197">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>status-error-background-fixed-50</code></td><td><code>red-solid-50</code></td><td><code>red-solid-50</code></td></tr><tr><td><code>status-success-background-fixed-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-50</code></td></tr><tr><td><code>status-alert-background-fixed-50</code></td><td><code>blue-solid-50</code></td><td><code>blue-solid-50</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

#### Fixed Colors (Alpha)

<table><thead><tr><th width="310">Token Light</th><th width="197">Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>status-error-background-fixedAlpha-70-16</code></td><td><code>red-alpha-70-16</code></td><td><code>red-alpha-70-16</code></td></tr><tr><td><code>status-success-background-fixedAlpha-60-16</code></td><td><code>teal-alpha-60-16</code></td><td><code>teal-alpha-60-16</code></td></tr><tr><td><code>status-alert-background-fixedAlpha-60-16</code></td><td><code>blue-alpha-60-16</code></td><td><code>blue-alpha-60-16</code></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

{% endtab %}

{% tab title="3️⃣ Border" %}

#### Dynamic Colors (Solid)

<table><thead><tr><th width="312">Token Light</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>status-error-border-dynamic-50</code></td><td><code>red-solid-50</code></td><td><code>red-solid-80</code></td></tr><tr><td><code>status-error-border-dynamic-80</code></td><td><code>red-solid-80</code></td><td><code>red-solid-50</code></td></tr><tr><td><code>status-success-border-dynamic-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-80</code></td></tr><tr><td><code>status-success-border-dynamic-80</code></td><td><code>teal-solid-80</code></td><td><code>teal-solid-50</code></td></tr><tr><td><code>status-alert-border-dynamic-50</code></td><td><code>blue-solid-50</code></td><td><code>blue-solid-80</code></td></tr><tr><td><code>status-alert-border-dynamic-80</code></td><td><code>blue-solid-80</code></td><td><code>blue-solid-50</code></td></tr></tbody></table>

#### Fixed Colors (Solid)

<table><thead><tr><th width="313">Token Light</th><th>Global Token (Light)</th><th>Global Token (Dark)</th></tr></thead><tbody><tr><td><code>status-error--border-fixed-50</code></td><td><code>red-solid-50</code></td><td><code>red-solid-50</code></td></tr><tr><td><code>status-error-border-fixed-80</code></td><td><code>red-solid-80</code></td><td><code>red-solid-80</code></td></tr><tr><td><code>status-success-border-fixed-50</code></td><td><code>teal-solid-50</code></td><td><code>teal-solid-50</code></td></tr><tr><td><code>status-success-border-fixed-80</code></td><td><code>teal-solid-80</code></td><td><code>teal-solid-80</code></td></tr><tr><td><code>status-alert-border-fixed-50</code></td><td><code>blue-solid-50</code></td><td><code>blue-solid-50</code></td></tr><tr><td><code>status-alert-border-fixed-80</code></td><td><code>blue-solid-80</code></td><td><code>blue-solid-80</code></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

***

## <mark style="color:purple;">🟣</mark> Global Color Tokens

A escala Global Color Tokens é a base das cores do Compasso. São tokens de cores puras que são utilizadas dentro dos Semantic Color Tokens e não estão aplicadas diretamente aos componentes.

### <mark style="color:purple;">↳</mark> Neutral Colors&#x20;

Paleta tonal completa de cores entre Branco #FF e Preto #00. Compõem os **Neutral Semantic Tokens** de **Foreground**, **Background** e **Borders**.

<table><thead><tr><th width="80">Cor</th><th>Global Token/Name</th><th>HEX</th></tr></thead><tbody><tr><td><img src="/files/FdiDyuRRUATHd7jOtkh6" alt="" data-size="original"></td><td><code>neutral-solid-0</code></td><td>#000000</td></tr><tr><td><img src="/files/N0iXf2RzYQbB09qLUskh" alt="" data-size="original"></td><td><code>neutral-solid-10</code></td><td>#1B1B1B</td></tr><tr><td><img src="/files/e9iS2brMtSHXW2lTe4HF" alt="" data-size="original"></td><td><code>neutral-solid-13</code></td><td>#222222</td></tr><tr><td><img src="/files/nBaTkAKd3finY1tbG7L4" alt="" data-size="original"></td><td><code>neutral-solid-15</code></td><td>#262626</td></tr><tr><td><img src="/files/yh6fLrK9PH7aXHKWBnlA" alt="" data-size="original"></td><td><code>neutral-solid-20</code></td><td>#303030</td></tr><tr><td><img src="/files/yfW9qmQeWxnmFyhn7xOh" alt="" data-size="original"></td><td><code>neutral-solid-30</code></td><td>#474747</td></tr><tr><td><img src="/files/vJYfMUoSPKaDrjED8Ele" alt="" data-size="original"></td><td><code>neutral-solid-40</code></td><td>#5E5E5E</td></tr><tr><td><img src="/files/yEXBLv3HMY1zPepekHcg" alt="" data-size="original"></td><td><code>neutral-solid-50</code></td><td>#777777</td></tr><tr><td><img src="/files/dzsSfbMT3XVIlGEWHesm" alt="" data-size="original"></td><td><code>neutral-solid-60</code></td><td>#919191</td></tr><tr><td><img src="/files/QThsZPiHfWjQQug67I7d" alt="" data-size="original"></td><td><code>neutral-solid-70</code></td><td>#ABABAB</td></tr><tr><td><img src="/files/ieI2W0LNXFBrt6h5ox7V" alt="" data-size="original"></td><td><code>neutral-solid-80</code></td><td>#C6C6C6</td></tr><tr><td><img src="/files/WGKbFK1feRgWVi1y3Osx" alt="" data-size="original"></td><td><code>neutral-solid-90</code></td><td>#E2E2E2</td></tr><tr><td><img src="/files/exYCgwXjEjgo82K0a2r6" alt="" data-size="original"></td><td><code>neutral-solid-95</code></td><td>#F1F1F1</td></tr><tr><td><img src="/files/oqgREzRnJDLzUOF9W5wV" alt="" data-size="original"></td><td><code>neutral-solid-98</code></td><td>#F5F5F5</td></tr><tr><td><img src="/files/DxaVohqqpzn6A5PVnpOG" alt="" data-size="original"></td><td><code>neutral-solid-100</code></td><td>#FFFFFF</td></tr></tbody></table>

### <mark style="color:purple;">↳</mark> Decorative Colors&#x20;

Conjunto de paletas tonais decorativas. Compõem semantic tokens dentro das categorias: **Brand**, **Decorative** e **Status**.

<table><thead><tr><th width="80">Cor</th><th width="413">Global Token/Name</th><th>HEX</th></tr></thead><tbody><tr><td><img src="/files/uLOYLv0rwJUawvPj92bQ" alt="" data-size="original"></td><td><code>blue-solid-95</code></td><td>#D0E8FF</td></tr><tr><td><img src="/files/28zz9TNAShWwzFMMpo3n" alt="" data-size="original"></td><td><code>blue-solid-90</code></td><td>#C1E0FF</td></tr><tr><td><img src="/files/fTMwO8nOB1fF1YlXkzTx" alt="" data-size="original"></td><td><code>blue-solid-80</code></td><td>#81BFFF</td></tr><tr><td><img src="/files/DdqxfUSUzzew3ecw0u0Y" alt="" data-size="original"></td><td><code>blue-solid-70</code></td><td>#359BFF</td></tr><tr><td><img src="/files/RgmUGKWnMLmY7gczvTv6" alt="" data-size="original"></td><td><code>blue-solid-60</code></td><td>#2B81EB</td></tr><tr><td><img src="/files/C8rORQLp04ESOpcdNGPz" alt="" data-size="original"></td><td><code>blue-solid-50</code></td><td>#1D60B1</td></tr><tr><td><img src="/files/43I0RkaBIezT2gWxTBah" alt="" data-size="original"></td><td><code>blue-solid-30</code></td><td>#092B54</td></tr><tr><td><img src="/files/c8sSxDSDnJP8OKrViTCR" alt="" data-size="original"></td><td><code>blue-solid-20</code></td><td>#031631</td></tr><tr><td><img src="/files/mh1jbbO9ITW1k3ZEh1Xd" alt="" data-size="original"></td><td><code>orange-solid-95</code></td><td>#FFE8DC</td></tr><tr><td><img src="/files/otq7NsdgIPVgwg8Niefc" alt="" data-size="original"></td><td><code>orange-solid-90</code></td><td>#FFD0BA</td></tr><tr><td><img src="/files/WnP1dUu24rs5gWGaN1VP" alt="" data-size="original"></td><td><code>orange-solid-80</code></td><td>#FF9E73</td></tr><tr><td><img src="/files/2uOa0mXSWA8MwfMBy5XS" alt="" data-size="original"></td><td><code>orange-solid-75</code><mark style="color:orange;"><strong>*</strong></mark></td><td>#FF8822<mark style="color:orange;"><strong>*</strong></mark></td></tr><tr><td><img src="/files/CBbedA7oIgzD3fAuKpck" alt="" data-size="original"></td><td><code>orange-solid-70</code></td><td>#FF6600</td></tr><tr><td><img src="/files/n3yqGm3C7ZU4wMGRUOii" alt="" data-size="original"></td><td><code>orange-solid-68</code> <mark style="color:orange;"><strong>*</strong></mark></td><td>#EE6600 <mark style="color:orange;"><strong>*</strong></mark></td></tr><tr><td><img src="/files/lc996eT5aYc7XfJMa35k" alt="" data-size="original"></td><td><code>orange-solid-60</code></td><td>#D65400</td></tr><tr><td><img src="/files/KDTsibJJznA3Ep9IuHW3" alt="" data-size="original"></td><td><code>orange-solid-50</code></td><td>#A13D00</td></tr><tr><td><img src="/files/SyE49qQUzoND4hynWvLJ" alt="" data-size="original"></td><td><code>orange-solid-30</code></td><td>#4C1900</td></tr><tr><td><img src="/files/7xcDug3ECzcEkAJbt7HY" alt="" data-size="original"></td><td><code>orange-solid-20</code></td><td>#2C0B00</td></tr><tr><td><img src="/files/xyvxsOXYymjhSoZ5NLNo" alt="" data-size="original"></td><td><code>orange-solid-15</code></td><td>#180400</td></tr><tr><td><img src="/files/9uwKwTSGHiLDyqlYF903" alt="" data-size="original"></td><td><code>purple-solid-95</code></td><td>#EFDDFF</td></tr><tr><td><img src="/files/aqjCvmcEZySodGZVTGSn" alt="" data-size="original"></td><td><code>purple-solid-90</code></td><td>#EAD2FF</td></tr><tr><td><img src="/files/ScveKuyiUyJ60ei6NWO4" alt="" data-size="original"></td><td><code>purple-solid-80</code></td><td>#D5A4FF</td></tr><tr><td><img src="/files/ss4zc3IPfnZi6tdu61Sk" alt="" data-size="original"></td><td><code>purple-solid-60</code></td><td>#A15FD4</td></tr><tr><td><img src="/files/gz6HbyJ85QCIIpZyZx4O" alt="" data-size="original"></td><td><code>purple-solid-50</code></td><td>#78459F</td></tr><tr><td><img src="/files/FPoWuxZZ3m04lDyof0PT" alt="" data-size="original"></td><td><code>purple-solid-30</code></td><td>#371D4B</td></tr><tr><td><img src="/files/7PRFflpmK3i47hwpxJT4" alt="" data-size="original"></td><td><code>purple-solid-20</code></td><td>#1E0D2B</td></tr><tr><td><img src="/files/1A6YPAe5WwHP1KBb1i4v" alt="" data-size="original"></td><td><code>red-solid-95</code></td><td>#FFD7D5</td></tr><tr><td><img src="/files/qpFnfuqX8gwgUjNqPZoz" alt="" data-size="original"></td><td><code>red-solid-90</code></td><td>#FFCAC7</td></tr><tr><td><img src="/files/Tq314fqhZn8Ygpn3g3Dh" alt="" data-size="original"></td><td><code>red-solid-80</code></td><td>#FFA19E</td></tr><tr><td><img src="/files/ygBUDuc0E7g5X0Ojc4g0" alt=""></td><td><code>red-solid-70</code></td><td>#FB5259</td></tr><tr><td><img src="/files/PJUT3ijOGfrdjUEnEvqo" alt="" data-size="original"></td><td><code>red-solid-60</code></td><td>#DF484F</td></tr><tr><td><img src="/files/PCx82rHkhjilXYn7oZrk" alt="" data-size="original"></td><td><code>red-solid-50</code></td><td>#AB353A</td></tr><tr><td><img src="/files/6l9RYZ1qqsBrQIQ0BZyk" alt="" data-size="original"></td><td><code>red-solid-40</code></td><td>#CC3300</td></tr><tr><td><img src="/files/6Fl6sON9tMlldcv3hcAG" alt="" data-size="original"></td><td><code>red-solid-30</code></td><td>#4A1215</td></tr><tr><td><img src="/files/Cfrq1nC7t8SllCOrNbW5" alt="" data-size="original"></td><td><code>red-solid-20</code></td><td>#2B0708</td></tr><tr><td><img src="/files/dskwN8twTWU7BIX7OpL2" alt="" data-size="original"></td><td><code>rose-solid-95</code></td><td>#FFE5ED</td></tr><tr><td><img src="/files/PHa0rtjqCbTelc3HKyCg" alt="" data-size="original"></td><td><code>rose-solid-90</code></td><td>#FFCCDC</td></tr><tr><td><img src="/files/9iHjNVHCEBZvMDklauAN" alt="" data-size="original"></td><td><code>rose-solid-80</code></td><td>#FF96B9</td></tr><tr><td><img src="/files/XpDM01JizxykQXAv4K6C" alt="" data-size="original"></td><td><code>rose-solid-60</code></td><td>#D3497E</td></tr><tr><td><img src="/files/H8vEPsaLJNjQ1AH4nBKh" alt="" data-size="original"></td><td><code>rose-solid-50</code></td><td>#9F355E</td></tr><tr><td><img src="/files/PqLO1RxkoMU6QzXgVr3Z" alt="" data-size="original"></td><td><code>rose-solid-30</code></td><td>#4B142A</td></tr><tr><td><img src="/files/dPREdDriUWH2yxCsHB4I" alt="" data-size="original"></td><td><code>rose-solid-20</code></td><td>#2B0816</td></tr><tr><td><img src="/files/CjOiBDJOp6YuHFumQhio" alt="" data-size="original"></td><td><code>teal-solid-95</code></td><td>#CBE3D9</td></tr><tr><td><img src="/files/jQPwfX78PStx0m1JOSOR" alt="" data-size="original"></td><td><code>teal-solid-90</code></td><td>#BADACC</td></tr><tr><td><img src="/files/IDuSPG13VaMQZWbC5XOn" alt="" data-size="original"></td><td><code>teal-solid-80</code></td><td>#96C8B4</td></tr><tr><td><img src="/files/rt4QwCStG9co1OvXl5Mf" alt="" data-size="original"></td><td><code>teal-solid-70</code></td><td>#5EAC90</td></tr><tr><td><img src="/files/0pw2noQNzr4n1Vhwyd9v" alt="" data-size="original"></td><td><code>teal-solid-60</code></td><td>#00916E</td></tr><tr><td><img src="/files/E6QRuaWHWMm5geqaWhOB" alt="" data-size="original"></td><td><code>teal-solid-50</code></td><td>#017155</td></tr><tr><td><img src="/files/GV7L4WE9aweLrr5FTeUr" alt="" data-size="original"></td><td><code>teal-solid-30</code></td><td>#003526</td></tr><tr><td><img src="/files/CXucW92WpJzEgBUK1DZX" alt="" data-size="original"></td><td><code>teal-solid-20</code></td><td>#001A11</td></tr><tr><td><img src="/files/CZ5q6oz4UACkGRORuRjv" alt="" data-size="original"></td><td><code>teal-solid-15</code></td><td>#000E08</td></tr><tr><td><img src="/files/aStU73ahrb3gBuaTMIRh" alt="" data-size="original"></td><td><code>green-solid-40</code></td><td>#14B866</td></tr><tr><td><img src="/files/BFqKQJdKbQLH2pAOy2Fa" alt="" data-size="original"></td><td><code>citron-solid-36</code></td><td>#C2C800</td></tr><tr><td><img src="/files/LcCMxKyaFpnFPljBTEit" alt="" data-size="original"></td><td><code>citron-solid-39</code></td><td>#B7B700</td></tr><tr><td><img src="/files/5afYOTg5OS35lwNRArBs" alt="" data-size="original"></td><td><code>yellow-solid-95</code></td><td>#F4ECCF</td></tr><tr><td><img src="/files/TSYJhMUaXgnsmnVcqLTK" alt="" data-size="original"></td><td><code>yellow-solid-90</code></td><td>#ECDDA9</td></tr><tr><td><img src="/files/ajr0QKVaAm212LJw8KE2" alt="" data-size="original"></td><td><code>yellow-solid-80</code></td><td>#D9B83D</td></tr><tr><td><img src="/files/xhGJlV3TM4XojwVgJQwS" alt="" data-size="original"></td><td><code>yellow-solid-70</code></td><td>#C89600</td></tr><tr><td><img src="/files/oPWblK9Zqvl2HabNJZ4C" alt="" data-size="original"></td><td><code>yellow-solid-60</code></td><td>#AB8000</td></tr><tr><td><img src="/files/djaOWvob2KjxZyo7cWHl" alt="" data-size="original"></td><td><code>yellow-solid-50</code></td><td>#805F00</td></tr><tr><td><img src="/files/3vCJIBICrPahHbUPFxmi" alt="" data-size="original"></td><td><code>yellow-solid-30</code></td><td>#3A2900</td></tr><tr><td><img src="/files/0FSYE4i21FMfV4C5nkSs" alt="" data-size="original"></td><td><code>yellow-solid-20</code></td><td>#231700</td></tr><tr><td><img src="/files/BYMywynbnkxAgXebV73J" alt="" data-size="original"></td><td><code>yellow-solid-15</code></td><td>#130B00</td></tr></tbody></table>

### <mark style="color:purple;">↳</mark> Alpha Colors&#x20;

Conjunto de paletas tonais baseadas em **opacidade**. Compõem semantic tokens dentro das categorias: **Neutral (Background, Border, Overlay e Shadow)** e **States**.

{% stepper %}
{% step %}

#### Background

Existem componentes que necessitam ter uma cor cinza leve e que funcione em telas com diferentes tonalidades de background. Os alphas nesse caso, garantem que a cor do BG do componente sempre será somada à cor do BG da tela, garantindo um contraste consistente.
{% endstep %}

{% step %}

#### States

No caso de states, os tokens de alpha são aplicados acima de um componente que já possui outro token de cor aplicado, a fim de trazer o status do sistema respectivo, como *hovered*, *pressed*, *focused* etc.
{% endstep %}

{% step %}
**Shadows**

Em contextos que precisamos adicionar uma cor à sombra, por exemplo cards e top bars no estado de scroll.
{% endstep %}

{% step %}

#### Borders

Aplicado em bordas, por exemplo de botões outlines, para que se comporte da mesma forma no light e dark mode, sem necessidade de aplicar cores sólidas.
{% endstep %}

{% step %}

#### Overlay

Aplicado em contextos sobrepondo outras telas, por exemplo, a camada visual que fica abaixo de modais e no estado de hover em imagens.
{% endstep %}
{% endstepper %}

<table><thead><tr><th width="80">Cor</th><th width="413">Global Token/Name</th><th>HEX</th></tr></thead><tbody><tr><td><img src="/files/70MxNihiqSflvD4hC56Y" alt="" data-size="original"></td><td><code>neutral-alpha-0-0</code></td><td>#000000, 0%</td></tr><tr><td><img src="/files/y8DqMolq5oT1pXeuwOG9" alt="" data-size="original"></td><td><code>neutral-alpha-0-4</code></td><td>#000000, 4%</td></tr><tr><td><img src="/files/n8cEHTAunZVZ3NfEm4MZ" alt="" data-size="original"></td><td><code>neutral-alpha-0-6</code></td><td>#000000, 6%</td></tr><tr><td><img src="/files/1WhOzewHkT5INm9RuTdZ" alt="" data-size="original"></td><td><code>neutral-alpha-0-8</code></td><td>#000000, 8%</td></tr><tr><td><img src="/files/dBDYbHo4sKM5LEoOSvjb" alt="" data-size="original"></td><td><code>neutral-alpha-0-12</code></td><td>#000000, 12%</td></tr><tr><td><img src="/files/Nr3YbNghA7xm4PeJ7fpB" alt="" data-size="original"></td><td><code>neutral-alpha-0-16</code></td><td>#000000, 16%</td></tr><tr><td><img src="/files/cxe8WBqzk0gvpjyYV9YY" alt="" data-size="original"></td><td><code>neutral-alpha-0-24</code></td><td>#000000, 24%</td></tr><tr><td><img src="/files/WY9VPEa7Qe3imsWLJK84" alt="" data-size="original"></td><td><code>neutral-alpha-0-32</code></td><td>#000000, 32%</td></tr><tr><td><img src="/files/LsCMYEz7i4y2R6aAIJYA" alt="" data-size="original"></td><td><code>neutral-alpha-0-40</code></td><td>#000000, 40%</td></tr><tr><td><img src="/files/zExKOfvYNaVSyprnda0f" alt="" data-size="original"></td><td><code>neutral-alpha-0-60</code></td><td>#000000, 60%</td></tr><tr><td><img src="/files/042UehAiBhB4b6Sc6goW" alt="" data-size="original"></td><td><code>neutral-alpha-10-0</code></td><td>#1B1B1B, 0%</td></tr><tr><td><img src="/files/hwY3ETV0vF1w2kAYVsaC" alt="" data-size="original"></td><td><code>neutral-alpha-13-0</code></td><td>#222222, 0%</td></tr><tr><td><img src="/files/hwY3ETV0vF1w2kAYVsaC" alt="" data-size="original"></td><td><code>neutral-alpha-13-92</code></td><td>#222222, 92%</td></tr><tr><td><img src="/files/q5Z3vfSXBGQpi6GzlFb7" alt="" data-size="original"></td><td><code>neutral-alpha-98-0</code></td><td>#F5F5F5, 0%</td></tr><tr><td><img src="/files/ZD8d1o9CImHXEO7RZsF4" alt="" data-size="original"></td><td><code>neutral-alpha-100-0</code></td><td>#FFFFFF, 0%</td></tr><tr><td><img src="/files/WZIQqozg5YBawU3rfsBR" alt="" data-size="original"></td><td><code>neutral-alpha-100-4</code></td><td>#FFFFFF, 4%</td></tr><tr><td><img src="/files/tlWRUuKW7wINVXmzCxxT" alt="" data-size="original"></td><td><code>neutral-alpha-100-6</code></td><td>#FFFFFF, 6%</td></tr><tr><td><img src="/files/tRzViJ8NDnyEJe2ML4Mt" alt="" data-size="original"></td><td><code>neutral-alpha-100-8</code></td><td>#FFFFFF, 8%</td></tr><tr><td><img src="/files/IW4xg4TyWtvWTTCAVTe7" alt="" data-size="original"></td><td><code>neutral-alpha-100-12</code></td><td>#FFFFFF, 12%</td></tr><tr><td><img src="/files/BUS8T3tkTx1QTtoBdxDs" alt="" data-size="original"></td><td><code>neutral-alpha-100-16</code></td><td>#FFFFFF, 16%</td></tr><tr><td><img src="/files/mdGwJEyVTgvRDPnq6VS9" alt="" data-size="original"></td><td><code>neutral-alpha-100-24</code></td><td>#FFFFFF, 24%</td></tr><tr><td><img src="/files/jErMeMeZGmkSVxEpxzUy" alt="" data-size="original"></td><td><code>neutral-alpha-100-60</code></td><td>#FFFFFF, 60%</td></tr><tr><td><img src="/files/OQ2tllWiDPUUhf2mC1IA" alt="" data-size="original"></td><td><code>neutral-alpha-100-92</code></td><td>#FFFFFF, 92%</td></tr><tr><td><img src="/files/mmpf9xF0xHfdtxN4KpZH" alt="" data-size="original"></td><td><code>orange-alpha-70-0</code></td><td>#FF6600, 0%</td></tr><tr><td><img src="/files/k8LlgF7SMlbcara831M1" alt="" data-size="original"></td><td><code>orange-alpha-70-8</code></td><td>#FF6600, 8%</td></tr><tr><td><img src="/files/VVZWb9vcDBC9gVCApNs8" alt="" data-size="original"></td><td><code>orange-alpha-70-16</code></td><td>#FF6600, 16%</td></tr><tr><td><img src="/files/2HpDM0CWIu6fVufQ7Rez" alt="" data-size="original"></td><td><code>red-alpha-70-0</code></td><td>#FB5259, 0%</td></tr><tr><td><img src="/files/Brwb1KBCXQUbHlNQnraw" alt="" data-size="original"></td><td><code>red-alpha-70-8</code></td><td>#FB5259, 8%</td></tr><tr><td><img src="/files/BnE4cPtL7uGqBf4ZZIbC" alt="" data-size="original"></td><td><code>red-alpha-70-16</code></td><td>#FB5259, 16%</td></tr><tr><td><img src="/files/cMEarScRUJaYk8JNOotj" alt="" data-size="original"></td><td><code>blue-alpha-60-8</code></td><td>#2B81EB, 8%</td></tr><tr><td><img src="/files/sRBP6pDPLIsn0ICODZYJ" alt="" data-size="original"></td><td><code>blue-alpha-60-16</code></td><td>#2B81EB, 16%</td></tr><tr><td><img src="/files/SmvH5lsPufL8DnDYUik7" alt="" data-size="original"></td><td><code>purple-alpha-60-8</code></td><td>#A15FD4, 8%</td></tr><tr><td><img src="/files/iJUKwQLZ6apbGuQPw6jY" alt="" data-size="original"></td><td><code>purple-alpha-60-16</code></td><td>#A15FD4, 16%</td></tr><tr><td><img src="/files/ugTvIXLUEUcaVIsbBT37" alt="" data-size="original"></td><td><code>rose-alpha-60-8</code></td><td>#D3497E, 8%</td></tr><tr><td><img src="/files/dB53SRal9Xhr4LQqp7Km" alt="" data-size="original"></td><td><code>rose-alpha-60-16</code></td><td>#D3497E, 16%</td></tr><tr><td><img src="/files/otfqb0CGXovNMLypnTR2" alt="" data-size="original"></td><td><code>teal-alpha-60-8</code></td><td>#00916E, 8%</td></tr><tr><td><img src="/files/ZNMBTZjtgLS5dxQcoN4Y" alt="" data-size="original"></td><td><code>teal-alpha-60-16</code></td><td>#00916E, 16%</td></tr><tr><td><img src="/files/xCuY3IprFPv4qXbVCDxP" alt="" data-size="original"></td><td><code>yellow-alpha-60-8</code></td><td>#AB8000, 8%</td></tr><tr><td><img src="/files/It6M4BapeupkXARn2pc5" alt="" data-size="original"></td><td><code>yellow-alpha-60-16</code></td><td>#AB8000, 16%</td></tr></tbody></table>


---

# 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/styles/colors.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.