# Identidade visual — Raro Labs

**Aplicada em 07/08/2026.** O app nasceu com um verde genérico (`#1B7F3B`) usado
como cor de tudo. Agora usa a marca da Raro.

## A cor

**`#615FF6`** — RGB(97, 95, 246).

Ela entra como semente do esquema Material 3, mas com uma escolha explícita:
`DynamicSchemeVariant.fidelity` em vez do `tonalSpot`, que é o padrão do Flutter.

O motivo é medido, não estético. Com `tonalSpot`, o Material transforma a semente
em `#595992` — um violeta acinzentado que **não é** a cor da marca:

| Variante | `primary` | `primaryContainer` |
| -------- | --------- | ------------------ |
| `tonalSpot` (padrão do Flutter) | `#595992` ✗ apagado | `#E2DFFF` |
| **`fidelity`** (escolhida) | `#4743DC` (contraste 6.76 com branco) | **`#615FF6`** — a marca, literal |

Com `fidelity`, a cor da marca aparece na tela como ela é, e o `primary` fica num
tom vizinho com contraste melhor para texto sobre botão. O teste
`test/tema_test.dart` trava as duas coisas: `primaryContainer` **é** `#615FF6`, e o
matiz de `primary` fica na faixa do violeta — se alguém trocar a semente sem
querer, o teste acusa.

## Fundo branco

**Pedido do dono em 07/08.** O Material 3 tinge as superfícies com a semente, e o
fundo saía `#FCF8FF` — um lilás quase imperceptível, mas presente. Agora as
superfícies de **página** são `#FFFFFF`: `surface`, `scaffoldBackgroundColor`,
`AppBar` (com `scrolledUnderElevation: 0`, senão o topo escurece sozinho ao rolar)
e `Card`.

As superfícies **elevadas** mantêm o tom tonal de propósito: barra de navegação,
diálogo e menu. É o que separa "o que está por cima" de "a página" — com tudo
branco, o diálogo perde a borda visual e a barra de baixo se funde com a lista. Se
quiser essas também brancas, é uma linha em `tema.dart`.

## Cores semânticas não seguem a marca

Verde quer dizer "deu certo" e dourado quer dizer "campeão" em qualquer app.
Pintar sucesso de violeta apagaria o sinal: a cor deixaria de informar e passaria
a apenas decorar. As duas ficam centralizadas em `CoresDoApp`, em vez de repetidas
em seis arquivos como estavam.

## Dois defeitos de acessibilidade encontrados no caminho

Ao medir o contraste para escolher a paleta nova, apareceram dois problemas que
**já existiam** no tema verde:

| Onde | Cor anterior | Contraste | Mínimo WCAG | Agora |
| ---- | ------------ | --------- | ----------- | ----- |
| Snackbar de confirmação ("palpite salvo"), 5 telas | `Colors.green.shade700` + texto branco | **4.12** ✗ | 4.5 (texto) | `#2E7D32` → **5.13** |
| Troféu do campeão no histórico | `Colors.amber.shade700` sobre a superfície | **2.04** ✗ | 3.0 (ícone) | `#946500` → **5.10** |

O troféu é o caso mais irônico: era o item que a pessoa quer mostrar no grupo, e
quase desaparecia para quem tem baixa visão.

E um terceiro, **causado pela troca de paleta** e pego na verificação em device:

| Onde | Problema | Contraste | Agora |
| ---- | -------- | --------- | ----- |
| Banner "Total da rodada" no extrato | texto escuro padrão sobre `primaryContainer`, que passou a ser a cor **cheia** da marca | **3.64** ✗ | par correto (`onPrimaryContainer`) → **4.54** |

Antes, `primaryContainer` era um lilás pálido e texto escuro em cima funcionava.
Com `fidelity` ele virou `#615FF6`, e o mesmo texto deixou de ser legível — o tipo
de efeito colateral que só aparece olhando a tela, não o diff.

Os cinco limites viraram teste (`test/tema_test.dart` e `test/extrato_page_test.dart`),
então regressão de contraste passa a falhar no gate em vez de virar reclamação
depois.

## A assinatura da marca

`MarcaRaro` (`lib/core/tema/marca.dart`) reproduz o logotipo **tipograficamente**:
a palavra em minúsculas, peso alto, com o ponto retangular na cor da marca.

**Não é o arquivo oficial do logo.** Para usar o logo de verdade, basta colocar o
SVG/PNG em `assets/` e trocar o widget por uma `Image` — nada mais muda.

Ela aparece só em **login e cadastro**. Dentro do bolão, a tela é do participante e
do jogo: assinatura repetida em toda tela rouba espaço de quem só quer palpitar
antes do apito.

## Verificado em device

Emulador `bolao`, Android: login com a marca, home com a ação em violeta, ranking
com a linha da própria pessoa destacada no tom da marca, e o snackbar de
confirmação no verde novo. `flutter analyze` limpo e 231 testes passando.

## O que não foi feito

- **Tema escuro.** O app só tem tema claro. A semente serve para os dois, mas
  ligar o escuro sem revisar as telas trocaria um problema por outro.
- **Ícone do app e splash.** Continuam os padrões do Flutter; dependem do arquivo
  do logo.
- **Nenhuma story cobre identidade visual** — nenhum PRD trata disso. Por isso não
  há task marcada em `docs/CONTROLE.md`: a mudança está registrada aqui.
