> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tartini.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# As cores

> Base neutra, os dois sinais, os estados semânticos, o tema escuro e a proporção de tela.

A base não tem cor: papel claro e uma tinta quente, #14120F, que nunca é preto puro. Sobre ela entram dois sinais, terracota para pessoas e cobalto para inteligência artificial, e mais nada.

***

## O princípio

O cobalto é a cor mais protegida do sistema. Quando ele passa a ser usado como cor de link ou de destaque, o cliente perde a única referência confiável para saber que está lendo uma máquina.

Verde, vermelho e âmbar entram por significado: verde para concluído, conectado e saudável; vermelho para perigo real, como excluir, sair, erro de validação e canal fora do ar; âmbar para pendência que ainda não é erro. Usar vermelho como destaque gasta a única palavra que o sistema tem para dizer perigo.

O azul da SAN, #007BFF, fica fora da interface do produto: ele colide com o cobalto. O lugar dele é o selo de procedência.

***

## Proporção

A tela é quase toda neutra: cerca de 60% papel, 25% tinta, e o restante dividido entre os dois sinais. Uma tela majoritariamente terracota ou cobalto está errada mesmo usando as cores certas.

<img src="https://mintcdn.com/san-internet-241785e8/X1wH1yUK73ReXrAw/images/marca/proporcao.svg?fit=max&auto=format&n=X1wH1yUK73ReXrAw&q=85&s=b7fe533622d66ed68c8b06dc860d8f3c" alt="Barra de proporção da tela: 60% papel, 25% tinta, 9% cobalto e 6% terracota" noZoom width="640" height="78" data-path="images/marca/proporcao.svg" />

***

## Paleta

### Base

Papel e tinta carregam cerca de 85% de qualquer tela.

<img src="https://mintcdn.com/san-internet-241785e8/X1wH1yUK73ReXrAw/images/marca/paleta-base.svg?fit=max&auto=format&n=X1wH1yUK73ReXrAw&q=85&s=a55e9204da14fdf2c5d2a43645769086" alt="Paleta base: papel, apoio, linha, tinta, grafite, rótulo e névoa" noZoom width="676" height="96" data-path="images/marca/paleta-base.svg" />

| Nome    | Hex     |
| ------- | ------- |
| papel   | #FFFFFF |
| apoio   | #F6F6F4 |
| linha   | #E4E4E0 |
| tinta   | #14120F |
| grafite | #2B2823 |
| rótulo  | #5A5448 |
| névoa   | #8D8779 |

### Sinais

Terracota é o lado das pessoas, cobalto é o da IA; o destaque serve quando não há encontro.

<img src="https://mintcdn.com/san-internet-241785e8/X1wH1yUK73ReXrAw/images/marca/paleta-sinais.svg?fit=max&auto=format&n=X1wH1yUK73ReXrAw&q=85&s=b622e6caa9650243b980eecc91dc30de" alt="Paleta de sinais: equipe, véu equipe, texto equipe, ia, véu ia, texto ia e destaque" noZoom width="676" height="96" data-path="images/marca/paleta-sinais.svg" />

| Nome         | Hex     |
| ------------ | ------- |
| equipe       | #EB5E28 |
| véu equipe   | #FBDED2 |
| texto equipe | #B23F14 |
| ia           | #2667FF |
| véu ia       | #DCE6FF |
| texto ia     | #1A4FD6 |
| destaque     | #7FA3FF |

### Estados

Entram por significado, cada um com um véu de fundo e um tom de texto.

<img src="https://mintcdn.com/san-internet-241785e8/X1wH1yUK73ReXrAw/images/marca/paleta-estados.svg?fit=max&auto=format&n=X1wH1yUK73ReXrAw&q=85&s=1a6ce4e474404109f535dded29d4bb68" alt="Paleta de estados: concluído, véu ok, perigo, véu erro, pendência e véu atenção" noZoom width="578" height="96" data-path="images/marca/paleta-estados.svg" />

| Nome        | Hex     |
| ----------- | ------- |
| concluído   | #1F9D55 |
| véu ok      | #E8F6EE |
| perigo      | #C0341D |
| véu erro    | #FBE3DC |
| pendência   | #B7791F |
| véu atenção | #FBEED2 |

### Tema escuro

Os sinais clareiam para manter contraste sobre tinta; nunca reaproveitar o tom claro.

<img src="https://mintcdn.com/san-internet-241785e8/X1wH1yUK73ReXrAw/images/marca/paleta-escuro.svg?fit=max&auto=format&n=X1wH1yUK73ReXrAw&q=85&s=97e6d0f460af424eb22d58c31a25a4b1" alt="Paleta do tema escuro: página, card, borda, equipe, ia, concluído e texto" noZoom width="676" height="96" data-path="images/marca/paleta-escuro.svg" />

| Nome      | Hex     |
| --------- | ------- |
| página    | #14120F |
| card      | #1D1A16 |
| borda     | #2B2823 |
| equipe    | #F58E63 |
| ia        | #7DA2FF |
| concluído | #5BD78F |
| texto     | #B9B2A2 |


## Related topics

- [A terceira nota](/marca/a-terceira-nota.md)
- [Canais explicados](/canais/canais-explicados.md)
