Sistema Cromático Operacional
Precisão Viva v3.0: chrome neutro, tinta #0d0d1a, acento violeta #5a5ae6, gradiente de assinatura, paleta categórica e status — aplicação dos tokens v1.5.
Sistema Cromático Operacional Sincronow v3.0 — Precisão Viva
Status: Documento de execução, recalibrado para a família "Precisão Viva" (DL-015, 18/07/2026). Substitui integralmente as gerações anteriores (v1.x terrosa e v2.0 Alabaster/Golden Sand) — ver §5 "O que a DL-015 revogou".
Versão: 3.0.0 — recalibração Precisão Viva (21-22/08/2026).
Quando consultar: antes de qualquer implementação digital (CSS, tokens, Figma), produção de peça com cor, ou validação de acessibilidade cromática.
1. Papel deste documento e fonte da verdade
Este documento é APLICAÇÃO, não origem. Os valores nascem em um único lugar:
- Fonte da verdade dos valores: vault
sincronow-mind/1-projects/design-system-v2/tokens/00-tokens.md(Precisão Viva, v1.5). - Régua de aplicação entre produtos: vault
2-areas/@sincronow/05-sincronow-mind/21-style-guide-da-marca.md(as 8 regras — Decisão 98). - Implementação neste app:
sincronow-brand-app/styles/tokens.csse o bloco@themedeapp/globals.css.
Este documento nunca diverge do 00-tokens. Se divergir, os tokens vencem — e a divergência é bug deste documento, a corrigir aqui.
2. A paleta v1.5
2.1 Superfícies e tinta (produto, modo claro — o padrão)
Regra do chrome neutro: o chrome (página, sidebar, hovers, washes) é CINZA NEUTRO, sem tinta da marca — "o acento só tem poder se for raro". O violeta vive apenas no funcional (ação, foco, tags, dados) e na expressão (site, gradiente).
| Casa | Var CSS (neste app) | Valor | Onde usar |
|---|---|---|---|
| Página / trilho | --color-luz-papel (aliases --color-background, --color-surface-page, --color-sidebar) | #fafafa | fundo de página e trilho/sidebar — neutro puro |
| Superfície / card | --color-crista-papel (aliases --color-card, --color-branco-funcional) | #ffffff | card e superfície principal — o branco domina |
| Bloco recuado | --color-argila-suave-50 | #f7f7f8 | bloco contido no miolo branco; a hairline faz a borda |
| Tinta | --color-tinta-noite (alias --color-foreground) | #0d0d1a | texto principal — preto-azulado sutil |
| Tinta 2 (secundária) | --color-chumbo-voz (alias --color-muted-foreground) | #55555c | texto secundário — 7.0:1 no card |
| Tinta 3 (muted) | --color-petroleo-500 | #98989e | só decorativa, nunca texto essencial |
| Hairline / borda | --color-penumbra-papel (aliases --color-border, --color-concreto-bruto) | #e9e9ea | bordas e divisores |
| Wash (hover, muted bg) | --color-argila-suave (alias --color-accent) | #f1f1f2 | hover e fundo sutil |
| Raio | --radius-lg | 10px (grafado 0.625rem neste app) | cards, modais — precisão, não almofada |
⚠️ Tinta 3 — convergência declarada, aplicação pendente: o canônico é
#98989e(00-tokens v1.5, "a única tinta 3"). O token legado--color-nevoa-friadeste app ainda grava#6e6e76; a v1.5 declarou a convergência para o canônico — até o PR de aplicação, não citar--color-nevoa-friacomo referência de valor.
2.2 Acento de marca (violeta) e estados
Uso cirúrgico: botão primário, link, foco, nó da marca no grafo, momentos de expressão. Nunca em superfícies grandes do produto.
| Papel | Var CSS (neste app) | Claro | Escuro |
|---|---|---|---|
| Primário (ação, foco, marca) | --color-acento (aliases --color-violeta, --color-primary, --color-brand-primary) | #5a5ae6 | #7b7bee |
| Hover / pressed do primário | --color-acento-hover (alias --color-violeta-800) | #4444b8 | — |
| Sobre o primário | --color-content-inverse | #ffffff | #0d0d1a |
| Tag — fundo | --color-violeta-50 | #e8e8fa | #2c2c4a (--color-violeta-900) |
| Tag — texto | --color-violeta-800 | #4444b8 | #b3b3f2 (sem var neste app hoje — valor do 00-tokens) |
Os valores do modo escuro moram no 00-tokens (--acento-escuro #7b7bee);
este app ainda não carrega o bloco escuro — ver §3, regra 5.
2.3 Gradiente de assinatura — SÓ expressão de marca
O nome canônico é --gradiente-assinatura (português). Só existe UM
gradiente, o de 5 paradas:
--gradiente-assinatura: linear-gradient(115deg,
#4338ca 0%, #5a5ae6 34%, #8b5cf6 58%, #d9668c 86%, #f0a05a 100%);Índigo → violeta → magenta → âmbar. Onde: site, capas de diagnóstico, apresentações, hero — expressão de marca. NUNCA no produto de trabalho diário. É o gradiente da logo oficial (ressuscitada pela DL-015).
Recorte deliberado para tamanhos pequenos (selo, chip):
--gradiente-assinatura-compacto — 4 paradas, sem o âmbar final. É intenção
escrita, não uma segunda versão do gradiente.
2.4 Paleta categórica (entidades, grafo, séries)
Ordem FIXA, validada contra daltonismo (validador da skill dataviz). Vars
--chart-1..6 neste app carregam o modo claro; os valores do escuro moram no
00-tokens.
| Slot | Var CSS | Cor | Claro | Escuro | Entidade |
|---|---|---|---|---|---|
| 1 | --chart-1 | violeta | #5a5ae6 | #7b7bee | @sincronow |
| 2 | --chart-2 | âmbar | #eda100 | #c98500 | @viga |
| 3 | --chart-3 | verde | #008300 | #008300 | @gustsantamaria |
| 4 | --chart-4 | magenta | #e87ba4 | #d55181 | @mascote-natureba |
| 5 | --chart-5 | azul | #2a78d6 | #3987e5 | @sinctatts |
| 6 | --chart-6 | aqua | #1baf7a | #199e70 | próxima entidade |
Regras: o hue segue a ENTIDADE, nunca o rank; nova entidade ganha o
próximo slot; além do 6º, neutro #898781 + rótulo. Slots 2/4/6 ficam abaixo
de 3:1 no claro — rótulos visíveis obrigatórios.
2.5 Status (semânticos — nunca reciclados como categóricos)
| Papel | Var CSS (neste app) | Valor | Nota |
|---|---|---|---|
| Positivo | --color-semantic-success | #395917 | herdado do Mind OS; distinto do verde categórico |
| Erro (fora do shadcn) | --color-semantic-error | #b93c3c | canônico para superfícies sem o --destructive oklch; dentro de app shadcn, vale o --destructive do framework |
| Aviso | --color-semantic-warning | #eda100 | reusa o âmbar; o 00-tokens manda ampliar warning/serious só quando o produto pedir |
3. Regras de aplicação (recorte do doc 21 — a régua vale em TODO produto)
Do 21-style-guide-da-marca.md (as 8 regras), as pertinentes a cor:
- Regra 1 — hex em componente é proibido. Valor de cor vive em token,
token vive no
@theme. Inclusive gradiente: o de assinatura é token, nunca hex inline. - Regra 5 — modo escuro: os valores do 00-tokens, mesmo dormindo. Página
#101018, card#16161f, tinta#f2f2f7, primário#7b7bee. Definido e validado; acorda quando existir toggle — dark divergente acorda junto e quebra junto. - Regra 6 — radius
10px, um jeito só de escrever o mesmo pixel. - Regra 7 — um idioma por conceito nos nomes semânticos. E o
caso-exemplo: marca nunca se chama
accent— neste app (como no Mind OS e na Central),--color-accenté o cinza de hover#f1f1f2; a marca é--color-acento/--color-primary.
4. Como conferir uma peça (checklist mínimo)
[ ] Toda cor da peça sai da tabela §2 (ou do 00-tokens)? Hex fora dela não entra.
[ ] Chrome neutro: nenhuma superfície grande carrega violeta?
[ ] Violeta só no funcional (ação, foco, tag, dado) ou na expressão?
[ ] Gradiente de assinatura só em expressão de marca — nunca em produto de trabalho?
[ ] Texto essencial em tinta ou tinta 2 (nunca tinta 3 #98989e)?
[ ] Série/entidade usa o slot categórico da entidade, com rótulo nos slots 2/4/6?
[ ] Status usa os semânticos — nunca uma cor categórica reciclada?5. Registro de mudança — o que a DL-015 revogou
A paleta Precisão Viva foi decidida em 18/07/2026 (DL-015). A recalibração deste documento é de 21-22/08/2026. Quem tiver material antigo confere contra esta tabela:
| Saiu (gerações anteriores) | Entrou (Precisão Viva) |
|---|---|
Alabaster: página #ECEFF2, sidebar #D5DDE2, card #F9FAFB (v2.0, 06/2026) | chrome neutro: página #fafafa, card #ffffff |
Luz-Papel quente #F8F6F4 · Penumbra #EDEAE6 · Crista #FDFCFB (v1.1, 05/2026) | idem — superfícies §2.1 |
Tinta-Noite #22292F (undertone petróleo) | tinta #0d0d1a (preto-azulado sutil) |
Golden Sand / Areia-Dourada-600 #DD7302 como acento primário | acento violeta #5a5ae6 — funcional, não cerimonial |
Terra-Ocre #C49A4A e a escala Areia como sistema vivo | históricos — só uso impresso/editorial legado |
Escala Petróleo azulada como link/hover (#425462/#394753) | link/hover no violeta; a "escala petróleo" do app foi re-mapeada para os neutros frios da casa |
Violeta-Sincronow #4E3DBE cerimonial (<1%, 4 contextos governados) | o violeta é #5a5ae6 e é funcional e raro, não cerimonial |
Verde-sálvia #4A6E4C (semantic.success) | positivo #395917 |
"Branco puro #FFFFFF proibido como fundo" | caiu — o card é branco puro; o branco domina |
| "Gradiente eliminado em qualquer aplicação" | caiu — o gradiente de assinatura é OFICIAL (é o da logo), governado pela regra "só expressão" |
| Proporções 60-70% Tinta · 5-10% Areia etc. | substituídas pela regra do chrome neutro + acento raro |
As tabelas Pantone/CMYK das gerações anteriores descreviam cores que não
existem mais no sistema. Equivalentes de impressão da Precisão Viva:
[CONFIRMAR — não existem no 00-tokens; definir quando houver produção impressa].
6. A régua renderizada ao vivo
Para conferência rápida, a página viva brand.sincronow.com/tokens
renderiza a régua direto dos tokens do app — é a documentação que não
diverge porque É o código.
Histórico de versões
- v3.0.0 (21-22/08/2026) — Recalibração completa para Precisão Viva (DL-015 de 18/07/2026, tokens v1.5 de 20/08/2026). A nota-curativo de 20/08 morre; o documento passa a ser aplicação da fonte única (00-tokens.md) em vez de registro histórico com aviso.
- v2.0 (11/06/2026) — Sistema Visual v2.0: neutro base Alabaster, acento Golden Sand. Revogada pela DL-015.
- v1.1.0 (26/05/2026) — Atualização cromática: escalas Areia Dourada e Petróleo, Violeta cerimonial. Revogada pela DL-015.
- v1.0.0 — Primeira versão (paleta terrosa). Revogada.