# 10 — Sistema visual

Referência viva: `prototipos/v2/aprova.html`. Os valores abaixo são os que estão lá, em
variáveis CSS no `:root`. Copiar de lá, não redigitar daqui.

## A ideia

Duas metades com trabalhos diferentes.

**Gestão** — listas, formulários, situação da rodada. Papel quente, claro, texto confortável.
É onde se lê e se decide.

**Revisão** — a imagem ocupando a tela. Cinza neutro escuro, cromo mínimo, nada competindo
com o render. É onde se olha.

A marca aparece pouco: só na ação principal e na marcação ativa. Numa ferramenta que existe
para julgar imagem, cor de interface é ruído.

## Cor

### Claro

```
--paper     #FAF8F5   fundo da aplicação
--surface   #FFFFFF   cartão
--surface-2 #F4F1EC   cabeçalho de tabela, área rebaixada
--line      #E8E2D9   borda padrão
--line-2    #D8D0C4   borda de controle
--ink       #191512   texto
--ink-2     #4C453D   texto secundário
--ink-3     #7D746A   apoio
--ink-4     #A79E93   rótulo pequeno
```

O neutro é quente de propósito. Cinza puro ao lado de render de arquitetura fica azulado por
contraste simultâneo.

### Marca

```
--brand     #C4623C   terracota
--brand-600 #AC5230   estado pressionado
--brand-700 #8C4023   texto sobre fundo claro da marca
--brand-50  #FDF2EC   fundo de destaque
--brand-100 #F8DFD1   anel de foco
```

Terracota veio dos protótipos originais e merece ficar: é a cor do material que aparece nos
próprios projetos, e não é a cor de nenhum concorrente.

### Semântica

```
--ok      #2E7351   aprovado, resolvido
--warn    #94682C   pendente, atenção
--info    #3A6A88   em execução, herdado
--danger  #A33D2A   destrutivo
```

Cada uma com o tom `-50` para fundo e `-200` para borda. São dessaturadas — ao lado de um
render, verde e vermelho saturados parecem alarme de sistema.

### Escuro do visualizador

```
--v-0 #0D0D0D   palco
--v-1 #161616   barras
--v-2 #1E1E1E   painéis
--v-3 #292929   controles
--v-4 #363636   controle sobre controle
```

**Cinza rigorosamente neutro.** Qualquer tinta no entorno desloca a cor percebida da imagem —
é o mesmo motivo pelo qual laboratório de cor trabalha sobre cinza 18%. Como o produto existe
para aprovar cor, contaminar o entorno é errar no que ele promete.

O entorno da imagem é escolhível pelo usuário: preto, grafite, cinza médio, cinza claro.

## Tipografia

Pilha do sistema. Sem fonte externa: os protótipos são autocontidos e abrem sem rede, e
`Segoe UI Variable` no Windows e `SF` no Mac já são melhores do que qualquer coisa que dê
para baixar rápido.

```
--fs  -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
      Inter, Roboto, "Helvetica Neue", Arial, sans-serif
--fm  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
```

| uso | tamanho | peso | espacejamento |
|---|---|---|---|
| h1 | 27 px | 660 | −0,022em |
| h2 | 19 px | 660 | −0,016em |
| h3 | 15,5 px | 660 | −0,01em |
| corpo | 15 px | 400 | 0 |
| apoio | 13 px | 400 | 0 |
| rótulo maiúsculo | 10,5 px | 700 | +0,11em |

Título sempre com espacejamento negativo, rótulo maiúsculo sempre com positivo. É o que
separa um do outro sem precisar de cor.

Todo número que muda sozinho — contador, cronômetro, tráfego, timecode — usa
`font-variant-numeric: tabular-nums`. Sem isso o número dança quando atualiza.

Monoespaçada só onde o caractere importa: link do cliente, timecode, horário no relatório.

## Espaço, raio e profundidade

Escala de 4 px. Raios: `8` controle, `12` bloco, `16` cartão, `22` área de soltar.

Profundidade por borda de 1 px, não por sombra. A sombra entra fraca e larga, só para separar
o que flutua:

```
--sh-1  0 1px 2px rgba(40,28,18,.05)
--sh-2  --sh-1 + 0 10px 26px -14px rgba(40,28,18,.30)
--sh-3  0 2px 6px rgba(40,28,18,.07), 0 24px 54px -18px rgba(40,28,18,.36)
```

A sombra é quente, com o mesmo pigmento do papel. Sombra cinza sobre papel bege parece suja.

## Movimento

`--t: .18s` com `--e: cubic-bezier(.2,.8,.25,1)`. Rápido no começo, freando no fim.

Só três coisas se movem: o que responde ao ponteiro (cartão sobe 2 a 3 px), o que aparece
(pino cai, painel abre) e barra de progresso. Nada mais.

`prefers-reduced-motion` zera tudo. Está no topo da folha, uma regra só.

## Componentes

**Botão.** Um primário por tela. Secundário com borda. Terciário sem nada. O primário carrega
uma sombra colorida no tom da marca, que é o que faz ele parecer clicável sem precisar ser
maior.

**Cartão de item.** A imagem manda: 16/10, sem borda interna, com um degradê nas duas pontas
para o rótulo branco funcionar sobre qualquer render. A situação aparece em três lugares
redundantes de propósito — filete no topo, cor da borda, texto no rodapé — porque cor sozinha
não serve para quem não distingue verde de laranja.

**Faixa de fase.** Cinco passos em setas encaixadas, e abaixo um bloco que explica só a fase
atual: o que está acontecendo, quem está segurando, e as ações válidas agora. Botão de fase
que não se aplica não aparece desabilitado — não aparece.

**Números.** Servem de filtro. Clicar em "com ajustes" filtra a grade. Estatística que não faz
nada é decoração.

**Marcações.** Pino gota de 26 px com número; área com filete de 2 px e número no canto; seta
com ponta calculada. Todas mantêm o tamanho na tela independentemente do zoom — marcação que
cresce junto com a imagem some quando se aproxima, que é justo quando ela é necessária.

**Estado vazio.** Ícone em caixa arredondada, título, uma frase do que fazer, um botão. Nunca
só "nenhum resultado".

## Acessibilidade

Anel de foco visível em tudo que recebe teclado — 2 px na cor da marca, deslocado 2 px.
Nunca `outline: none` sem substituto.

Contraste: `--ink` sobre `--paper` dá 15,8:1; `--ink-3` sobre `--surface`, 4,8:1; branco sobre
`--brand`, 4,6:1. Texto pequeno nunca usa `--ink-4` sobre nada que não seja branco.

Alvo de toque mínimo de 40 px na barra do visualizador e no rodapé do cliente, que são as
partes que rodam no celular.

Situação nunca é comunicada só por cor — sempre há texto ou forma junto.

## Escrita

Vale D9 de `02-decisoes.md`: sem jargão. Além disso:

- Verbo no imperativo em botão: *Enviar para o cliente*, não *Envio*.
- O sistema conta o que aconteceu, não o que ele fez: *"Os comentários estão travados"*, não
  *"Operação concluída com sucesso"*.
- Erro diz o que fazer, não o código.
- Número por extenso até dez em texto corrido; algarismo em contador.
- Nada de "por favor" nem de exclamação.

## Como mexer

O protótipo v2 é gerado. Editar `aprova.html` na mão se perde na próxima montagem.

```bash
cd prototipos/v2/_fonte
python montar.py          # depois de mexer no template ou no JS
python gerar_assets.py    # só quando trocar os renders — é lento
```