# Cor

Fonte: /pt-br/ux/style-and-usage/colour.md

- Resumo: A cor é um semáforo em um select por página, e uma opção mantém a mesma cor em todo lugar.
- Status: Adotada, em 2026-10-02
- Princípios: Máxima intuição, Jeito único
- Superfícies: Tela
- Do inglês de 2026-10-02

## Quando usar

Use em toda cor de card, cor de linha, opção de select e pílula.

## Quando não usar

Nenhum caso até agora.

## Como funciona

### Use a cor como semáforo em um select

A cor diz à pessoa se uma linha pede ação. Ela vem de um único select, definido como a cor de card ou a cor de linha da página.

Passa: toda página colorida diz qual é o 1 select que a colore, e cada cor dele diz o que pede que a pessoa faça.

### Use um campo para colorir a página

Uma página usa um campo de cor. Uma segunda fonte de cor na mesma página faz a pessoa se perguntar qual das duas está lendo.

Passa: todo elemento da página pega a cor do mesmo campo.

Um board com cards coloridos.

Faça: Cards coloridos só por Stage.

Não faça: Os cards do incident.io levam um Critical vermelho e uma segunda cor de Investigating no mesmo card.
Imagem: /ux/sources/dont-incidentio-cards-two-colours.webp

### Mantenha a cor da opção em todo select

O mesmo nome de opção, como `Won`, `High` ou `Active`, tem a mesma cor em todo select simples e múltiplo de todas as bases. Assim a cor se lê do mesmo jeito em todo card, linha e pílula.

Passa: todo select que tem um nome de opção o mostra em 1 cor.

### Copie as cores ao criar um select

Um select novo copia as cores do select existente que já tem aquelas opções. Uma opção nova recebe uma cor que nenhuma opção de outro significado usa na mesma paleta.

Passa: nenhuma opção nova tem a mesma cor de uma opção com significado diferente.

### Pinte os gráficos com as cores das opções

Um gráfico dividido por um select usa as cores das opções desse select. `Won` no gráfico tem a cor que `Won` tem no card.

Passa: em toda categoria do gráfico, o preenchimento bate com a cor da opção que ela conta.

A mesma opção em dois selects.

Faça: Lead com a mesma cor em Relationship type e em Deal stage.

Não faça: Lead como #FFEAB6 em Relationship type e como #E5E9F0 em Deal stage, como o nosso CRM mostra hoje.

## Referências

A regra dos gráficos vem da comparação de usabilidade de CRMs do revisor (2026-09-29/30) (comparação, linhas 2315 a 2352). Ela pede "Match chart colors to stage colors." (comparação, linha 2333) e mostra que os seis preenchimentos de gráfico do folk diferem das cores dos estágios: "this is a consistency problem, not a palette to copy" (é um problema de consistência, não uma paleta para copiar). A regra não tem captura de tela. O Não faça acima é o nosso próprio CRM: a comparação mede Lead em #FFEAB6 em Relationship type (comparação, linha 2273) e em #E5E9F0 em Deal stage (comparação, linha 2058), e pede "one Won treatment" (um só tratamento para Won) nos dois campos de estágio (comparação, linha 2084).

As outras regras vêm só do retorno do revisor e das regras da skill de interface. Em um sistema de pedidos, o revisor pediu que o card do pedido mostrasse "90% of Par (somewhere in yellow), or 10% above Par (in green", para o estado ser lido sem clique.

### Fontes

- [incident.io incidents board](https://mobbin.com/screens/be22fc87-f147-4aa1-81f6-5f213d007715)