22 · Paleta de Cores
Fontes:
design-system/tokens/tokens.css— fonte da verdade da matéria cromática ·design-system/fundamentos/cor.html— documentação renderizada da paleta ·.claude/ui-design/visual-language.md§2, §3, §4.6, §7 ·MANIFESTO.md§2 ·brand/guidelines/19-identidade-visual.md§19.4, §19.8 ·brand/guidelines/21-simbolos-e-logotipo.md§21.6, §21.7 ·brand/guidelines/11-virtudes-da-marca.md·brand/guidelines/12-arquetipos-da-marca.md·brand/guidelines/01-essencia.md§1.4 ·brand/guidelines/research/auditoria-mercado.md§3.2, §3.5.Este capítulo responde qual é a cor da marca — em valores. É um capítulo de execução: vem depois do briefing estratégico da identidade (19) e do sistema de logotipo (21), e fixa a paleta que o capítulo 26 (manual visual) consolidará. O capítulo 19 (§19.4) delegou explicitamente a este capítulo a consolidação completa da paleta de acento V-B.
Uma ressalva de partida — a paleta não é página em branco
A maioria dos capítulos de paleta começa do zero: a estratégia decidida, e a cor a escolher. Este não. O Peppe já tem paleta, e ela já está em produção:
- A matéria cromática está materializada e versionada —
design-system/tokens/tokens.css, espelhada no appprototype-chat. - Está documentada e navegável no Design System público (
designsystem.peppeai.com, páginafundamentos/cor.html) — com tabela de tokens, regras de uso e validação de contraste. - Está aplicada em produção, no app de chat e no próprio Design System.
A consequência metodológica segue a precedência de 00-indice.md e repete a dos capítulos 19 e 21: este capítulo consolida, não inventa. A paleta é, na quase totalidade, DADO — decisão tomada upstream e materializada. Onde aparece PROPOSTA, é porque o corpus tem uma lacuna real — notadamente o escopo da família terrosa V-B e a leitura de "significado" das cores. Cada proposta vai marcada e listada no fechamento.
O que é "a fonte da verdade" aqui
O usuário cravou, para este capítulo, uma regra de precedência específica: a paleta definida no Design System é a fonte da verdade da cor. Operacionalmente:
- O arquivo
design-system/tokens/tokens.cssé o valor canônico de toda cor. Em conflito entre qualquer documento e otokens.css, otokens.cssprevalece quanto ao valor. - A página
cor.htmlé a documentação desse arquivo — reflete os tokens, não os define. - O
MANIFESTO.md §2continua prevalecendo sobre tudo quanto ao princípio (qual é a gramática de cor, o que cada paleta pode e não pode fazer). A divisão é limpa: o canônico decide a regra; o Design System decide o valor. - Onde a régua de execução
visual-language.mddeclara uma estrutura de cor que otokens.cssnão materializou (caso da famíliaaccent/earth-1..4— ver §22.5 e fechamento), vale otokens.css: a estrutura não-materializada é placeholder, não paleta vigente.
22.1 — Entendimento estratégico
Método, etapa 1. O que a marca quer transmitir, para quem, e como se diferencia.
A paleta não se decide pela cor — decide-se pelo que a cor precisa fazer. As três perguntas de partida já têm resposta no corpus.
A mensagem central — o que a paleta carrega
A ideia de marca é a automação ingênua (01-essencia.md §1.4): por fora, um efeito que parece mágico; por dentro, um mecanismo humano e esforçado. O princípio operacional — "mostra a mão, não a máquina".
A cor traduz isso de forma literal, e a tradução já está cravada no canônico (MANIFESTO.md §2.4):
- A cor tem função, ou não aparece. Não há cor decorativa no Peppe. Toda cor está a serviço de uma de três tarefas: construir o ambiente, sinalizar um estado de sistema, ou pontuar com personalidade. Cor que não faz nenhuma das três não entra.
- Honestidade cromática. A superfície é trabalhada por luz, não por efeito. Não há gradiente colorido vibrante em chrome de UI, não há sombra preta como filtro. A cor confessa de onde vem — é a virtude Honestidade feita pigmento.
- Restrição como assinatura. A paleta é fechada em três. Recusar a quarta paleta é a virtude Temperança — a justa medida é a régua.
O público — o que a cor deve fazer ele sentir
O usuário do Peppe é o Acumulador de Jornadas: profissional adulto, competente, sobrecarregado por acúmulo de papéis (08-buyer-persona.md). Ele já abandonou planilha, app de finanças e agenda — ferramentas que o puniram com frieza e exigência. A cor do Peppe precisa do oposto: acolher sem gelar, e organizar sem intimidar.
- O off-white dominante em vez do branco puro, e o cinza-escuro em vez do preto, são essa decisão feita superfície: um ambiente que recebe (atributo Acolhedor), não um painel clínico.
- A cor funcional aplicada cirurgicamente evita o pânico cromático do dashboard financeiro tradicional — vermelho por toda parte. A cor de estado só fala quando o sistema precisa avisar (atributo Prudência).
- O calor terroso pontual dá a temperatura humana que separa o Peppe do "assistente frio da ficção científica" (
MANIFESTO.md §2.2).
A diferenciação — contra o quê a paleta se define
A auditoria-mercado.md §3.2 registra a estética convergida do segmento: PFM = "dashboard neutro"; assistente conversacional = "chat puro + cards de confirmação + emoji funcional"; tom predominante "ferramenta séria". A categoria é cromaticamente plana e fria.
O par off-white calmo + acento terroso setentista é uma combinação que essa categoria não ocupa — é o que o teste de força proprietária do capítulo 19 (§19.8) já havia identificado como ativo de marca. Ressalva honesta: o benchmark não capturou as paletas dos concorrentes — identidade visual está marcada [A confirmar — exige wall of references] em auditoria-mercado.md. A diferenciação cromática do Peppe é, portanto, um argumento de registro (superfície quente e tátil contra superfície neutra e plana), não uma comparação medida cor a cor. Um levantamento das paletas concorrentes fica como pergunta aberta (fechamento).
22.2 — Brand colors — as cores da marca
Método, etapa 2. As cores principais que traduzem o núcleo da marca, com a intenção por trás de cada uma.
Aqui o método pede "as cores da marca". O Peppe exige uma resposta honesta antes dos valores: a marca do Peppe não tem uma cor única. Não há um "azul da marca" como Facebook ou um "vermelho" como Coca-Cola. A identidade cromática do Peppe é um sistema de dois polos calibrados — e isso não é lacuna, é a decisão (19-identidade-visual.md §19.1: "a identidade do Peppe não está em nenhum dos dois registros isolado — está na calibragem").
Os dois polos:
O polo de ambiente — off-white + tinta (V-A)
A cor que o usuário vê na maior parte do tempo. Não chama atenção — é o chão. É o registro V-A, Rigor Funcional.
surface/base—#F7F7F7— off-white. O ambiente de conteúdo.ink/primary—#171717— quase-preto. A tinta de leitura.
A intenção: um ambiente sóbrio, legível, calmo. O off-white não é branco e a tinta não é preto de propósito — a diferença é pequena no hex e grande na sensação: o produto pousa o olho em vez de ofuscá-lo. É o atributo Acolhedor aplicado à superfície dominante.
O polo de personalidade — o âmbar V-B
A cor que torna o Peppe reconhecível. Aparece em pontos — nunca como ambiente —, e é o ativo mais proprietário da paleta (19-identidade-visual.md §19.8). É o registro V-B, Retrofuturista, concentrado na tecla (a assinatura visual secundária da marca, formalizada em 21-simbolos-e-logotipo.md §21.7).
accent/amber-top—#F7692Beaccent/amber-bottom—#FA4C00— laranja-âmbar saturado (dois tokens distintos notokens.css; juntos formam o gradiente do cap da tecla em repouso). O calor da marca.accent/rim—#5F0000— borgonha escuro. A profundidade tátil que sustenta o âmbar.
A intenção: calor, energia contida, o "sabor do futuro que o passado imaginou". O âmbar é a temperatura humana do Peppe — o Bobo da Corte contido aparecendo em cor. O borgonha não é uma segunda cor de marca: é a sombra estrutural do âmbar, a lateral da tecla; existe sempre em função dele.
Sobre "psicologia da cor" — uma nota de método
O método pede "a psicologia por trás das sugestões". O Peppe não deriva sua paleta de uma tabela de psicologia da cor — uma ciência contestada e culturalmente instável. O significado das cores do Peppe vem de outro lugar, mais firme: do alinhamento com os atributos de marca já fixados nos capítulos 09–13. Off-white = Acolhedor. Cor funcional cirúrgica = Prudência. Recusa do gradiente-mágico = Honestidade. Âmbar terroso = o calor do arquétipo Bobo da Corte contido. A leitura de "intenção" desta seção é proposta de leitura ancorada nos atributos — não um fato de psicologia cromática; marcada no fechamento.
A régua dura — o que a cor de marca não faz
Princípio canônico (MANIFESTO.md §2.4, operado em visual-language.md §4.6):
- O âmbar nunca cobre superfície global — fundo de tela, shell do app, fundo de seção. Terroso como tapete é violação, não decisão de registro.
- Um elemento V-B no campo de visão é regra; dois é o limite; três é violação.
- O logotipo nunca recebe cor de acento V-B em repouso (
21-simbolos-e-logotipo.md §21.6): é monocromático, tinta sobre fundo. Exceção de estado interativo: quando o wordmark funciona como link (ex.: cabeçalho do Design System), o hover o leva aaccent/amber-bottom #FA4C00— a regra V-A predomina, V-B pontua aplicada ao próprio logo no instante da interação. Fora desse caso, o logo não recebe acento (ver §21.6 — Cor canônica). - Não há quarta paleta, e não há cor decorativa.
22.3 — Surface colors — as cores de superfície
Método, etapa 3. As cores de fundo, containers e superfícies que sustentam as cores principais.
As cores de superfície do Peppe não são um fundo passivo — elas constroem a tridimensionalidade da interface. O Peppe é 2D estrutural com profundidade percebida (19-identidade-visual.md §19.5): elementos pousam, afundam ou flutuam sob uma luz fixa vinda do canto superior esquerdo. Cada estado de profundidade tem sua superfície.
Todos os valores abaixo são DADO — tokens.css.
Superfícies — o sistema de profundidade
| Token | Valor | Papel |
|---|---|---|
surface/shell | #FFFFFF | Invólucro estrutural — sidebar, topbar. Branco puro, V-A. |
surface/base | #F7F7F7 | Ambiente de conteúdo — o fundo onde os cards pousam. |
surface/raised (gradiente) | #F7F7F7 → #FBFBFB | Elemento elevado — card, botão. Emerge suave da base. |
surface/floating | #FBFBFB | Modal, popover — flutua acima de tudo. |
surface/carved | #EFEFEF | Cavado — o sulco, a depressão. Mais escuro que a base. |
surface/divider | #ECECEC | Hairline de 1px — a linha separadora. |
A lógica: o shell branco e a base off-white criam um contraste mínimo mas suficiente para que os cards raised se destaquem sem precisar de sombra pesada — a profundidade nasce da própria luminância, não de um efeito (cor.html, §Princípio). É a honestidade da luz aplicada à hierarquia de superfície.
Bordas — o contorno da profundidade
A profundidade se completa com bordas direcionais: o topo de um elemento elevado pega luz, a base fica em sombra; num elemento cavado, a relação se inverte.
| Token | Valor | Papel |
|---|---|---|
border/base | #EBEBEB | Contorno sólido sutil da superfície base. |
border/raised-top | #FCFCFC | Borda do elevado — topo iluminado. |
border/raised-bottom | #F8F8F8 | Borda do elevado — base sombreada. |
border/carved-top | #E8E8E8 | Borda do cavado — topo em sombra. |
border/carved-bottom | #FFFFFF | Borda do cavado — base iluminada. |
Overlay e nav — superfícies de interação
| Token | Valor | Papel |
|---|---|---|
overlay | rgba(23,23,23,0.32) | Backdrop escuro de modal e drawer. |
nav/active | rgba(23,23,23,0.05) | Tint do item de navegação ativo. |
nav/hover | rgba(23,23,23,0.03) | Tint do hover de navegação. |
Os tints de nav são ink/primary em alfa muito baixo — reforço de uma borda-esquerda, nunca o sinal principal. Coerência: a superfície de interação deriva da tinta, não inventa cor nova.
22.4 — Refinamento e escala
Método, etapa 4. Os cinco passos: cor fundamental, cores secundárias, cores de superfície, escala, refinamento e acessibilidade.
Passo 1 — a cor fundamental (a protagonista)
O método pede "a protagonista". O Peppe obriga uma distinção, e ela é uma decisão de marca, não uma evasiva:
- A cor fundamental — a que cobre o produto, a que sustenta tudo — é
surface/base#F7F7F7, o off-white. É a protagonista por presença. - A cor de assinatura — a que torna a marca reconhecível — é o âmbar
#FA4C00. É a protagonista por memória.
As duas não são a mesma cor, e isso é o sistema funcionando. A regra estruturante V-A predomina, V-B pontua (MANIFESTO.md §2.3) proíbe que a cor de assinatura vire a cor fundamental — se o âmbar cobrisse a tela, deixaria de ser assinatura e viraria ornamento. A identidade mora exatamente nessa tensão calibrada (19-identidade-visual.md §19.1).
Passo 2 — as cores secundárias (apoio e contraste)
As cores que sustentam a protagonista, em dois eixos:
Tinta — a escala de leitura (V-A). O contraste sobre o off-white, em três níveis de presença.
| Token | Valor | Papel |
|---|---|---|
ink/primary | #171717 | Texto principal, títulos, valores de destaque. |
ink/primary-hover | #2A2A2A | Hover de superfície sólida (Button secondary). |
ink/primary-active | #000000 | Active de superfície sólida. |
ink/secondary | #6B6B6B | Texto de apoio, metadados, labels. |
ink/tertiary | #A1A1A1 | Caption, placeholder, desabilitado. |
ink/inverse | #F7F7F7 | Texto sobre fundo escuro. |
Apoio do âmbar — a profundidade da tecla (V-B). O borgonha e suas bordas, que dão volume ao acento.
| Token | Valor | Papel |
|---|---|---|
accent/rim | #5F0000 | Borgonha — lateral de profundidade da tecla. |
accent/rim-border-top | #FFFFFF | Borda do rim — topo iluminado. |
accent/rim-border-bottom | #CECECE | Borda do rim — base sombreada. |
Passo 3 — as cores de superfície (contexto)
Fixadas integralmente em §22.3 — superfícies, bordas, overlay e nav. O método pede esta etapa; o Peppe já a tem materializada e ela não se repete aqui.
Passo 4 — a escala cromática
Aqui o Peppe diverge do tutorial clássico de paleta — por decisão de marca. O método pressupõe uma escala de tons numerada (do tipo 50, 100, 200 … 900 — uma rampa de luminância por cor). O Peppe não usa rampa numérica. A escala do Peppe é semântica: cada token existe porque tem um trabalho — um papel de superfície, um nível de tinta, um estado de sistema. Token novo só nasce quando nenhum existente serve (visual-language.md §5, princípio de economia). É a virtude Lealdade — consistência por reuso, não por vocabulário inflado.
O sistema tem, isso sim, quatro mini-escalas funcionais:
- Escala de superfície (luminância).
shell #FFFFFF→base #F7F7F7→raised-bottom/floating #FBFBFB→carved #EFEFEF→divider #ECECEC. Cinco degraus de claro a quase-claro, cada um um estado de profundidade. - Escala de tinta (presença).
primary #171717→secondary #6B6B6B→tertiary #A1A1A1. Três degraus de hierarquia de leitura. - Tríade funcional (por cor de estado). Cada cor funcional existe em três variantes — o token (sinal sobre superfície clara), a variante
text-accessible(texto sobre o tint), e otint(fundo de chip). Ver Passo 5. - Máquina de estados do âmbar. O acento V-B não é uma cor, é um conjunto de estados da tecla: rest, hover, disabled, e suas bordas de bisel.
| Token (âmbar) | Valor | Estado |
|---|---|---|
accent/amber-top · amber-bottom | #F7692B · #FA4C00 | Cap, rest — gradiente do topo. |
accent/amber-border-top · border-bottom | #FF9567 · #FF4E00 | Bisel do cap, rest. |
accent/amber-hover-top · hover-bottom | #FF986B · #FF7135 | Cap, hover — topo mais claro. |
accent/amber-disabled-top · disabled-bottom | #C9C9C9 · #B8B8B8 | Cap, disabled — dessaturado para cinza. |
O estado disabled vira cinza — não um âmbar pálido. É coerente: sem função interativa, o acento V-B perde o direito à cor. A cor tem função, ou não aparece.
Nota — a textura V-B. O grafismo de apoio do registro V-B (o padrão de pontos,
pattern.svg) usa o cinza-claro#CECECE— o mesmo valor da borda inferior do rim. A textura é acento pontual, nunca tapete de fundo (19-identidade-visual.md §19.5). O detalhamento do grafismo é do capítulo 24.
Passo 5 — refinamento: acessibilidade e espaços de cor
Acessibilidade — DADO, validado. A paleta do Peppe foi validada em WCAG AA, não estimada (cor.html, §Contraste; Decisão #7 do Epic #282). Os pareamentos canônicos:
| Pareamento | Contraste | Veredito |
|---|---|---|
ink/primary sobre surface/base | 16,6:1 | AAA — pareamento principal. |
ink/primary sobre surface/floating | 17,3:1 | AAA — texto em modal/popover. |
ink/secondary sobre surface/base | 4,64:1 | AA — texto de apoio. |
ink/inverse sobre ink/primary | 16,6:1 | AAA — texto sobre sólido escuro. |
ink/tertiary sobre surface/base | 2,33:1 | Abaixo de AA — só decorativo/disabled. |
Duas decisões de refinamento que a validação obrigou:
- As variantes
text-accessible. As cores funcionais padrão (success #37A35A,alert #D4A017,error #C43D3D,info #3875B0) falham AA quando viram texto sobre seus próprios tints. A solução não foi abandoná-las — foi criar uma variante escurecida exclusiva para o foreground de texto:success #1F6B36(5,70:1),alert #7A5800(6,88:1),error #8A2828(6,87:1),info #244D77(7,21:1). O token padrão sinaliza; a variantetext-accessibleé lida. Ver §22.5. - Dois pareamentos ficam abaixo de AA, conscientemente.
ink/tertiarysobre a base (2,33:1) é restrito a texto decorativo ou desabilitado — nunca conteúdo informativo obrigatório. E o#FFFFFFsobre o cap âmbar da tecla (3,3:1) passa AA apenas para texto grande e bold, comtext-shadowcompensatório declarado no componente. Esse#FFFFFFestá hardcoded (issue #108 — tokenização pendente) — registrado como lacuna.
Espaços de cor — HEX é canônico. Toda a paleta vive em HEX/RGB, calibrada para tela. O Peppe é digital-first e pré-lançamento — não há, no corpus, demanda de material impresso. O HEX é o valor canônico (é o que o tokens.css carrega); o RGB é derivação mecânica do HEX. CMYK e Pantone não estão definidos, e não devem ser inventados: a conversão para impresso é trabalho de execução do capítulo 27 (Aplicações), quando houver uma peça impressa real — a régua de significado da cor não muda, apenas o espaço. Registrado como lacuna de horizonte.
22.5 — A paleta consolidada — entrega final
Método, etapa 5. O resumo da paleta com os códigos e a justificativa estratégica de cada escolha.
A cor do Peppe opera em três paletas com papéis estritamente separados — sistema fechado (MANIFESTO.md §2.4). Misturar papéis é violação.
Paleta 1 — Base V-A (off-white, cinzas, tinta)
O ambiente. Cobre qualquer superfície. É o atributo Acolhedor feito chão.
| Token | HEX | Papel |
|---|---|---|
surface/shell | #FFFFFF | Invólucro de navegação. |
surface/base | #F7F7F7 | Fundo de conteúdo — a cor fundamental. |
surface/raised | #F7F7F7→#FBFBFB | Elemento elevado (card, botão). |
surface/floating | #FBFBFB | Modal, popover. |
surface/carved | #EFEFEF | Sulco / depressão. |
surface/divider | #ECECEC | Hairline 1px. |
border/base · raised-top · raised-bottom | #EBEBEB · #FCFCFC · #F8F8F8 | Contorno da superfície elevada. |
border/carved-top · carved-bottom | #E8E8E8 · #FFFFFF | Contorno da superfície cavada. |
ink/primary | #171717 | Texto principal. |
ink/primary-hover · primary-active | #2A2A2A · #000000 | Estados de sólido escuro. |
ink/secondary | #6B6B6B | Texto de apoio. |
ink/tertiary | #A1A1A1 | Caption / disabled (abaixo de AA — uso restrito). |
ink/inverse | #F7F7F7 | Texto sobre fundo escuro. |
overlay | rgba(23,23,23,0.32) | Backdrop de modal/drawer. |
nav/active · nav/hover | rgba(23,23,23,0.05) · rgba(23,23,23,0.03) | Tints de navegação. |
Justificativa estratégica. O off-white em vez do branco e o quase-preto em vez do preto são a marca recusando a frieza clínica — acolhem o Acumulador de Jornadas em vez de gelá-lo. A profundidade construída por luminância (shell → base → raised → carved) é a luz honesta: o produto é físico porque a física é coerente, não porque um efeito a finge.
Paleta 2 — Funcional (sinal de sistema)
Quatro cores, um papel cada, nunca decorativas. É o atributo Prudência feito sinal.
| Estado | Token | Variante text-accessible | tint (fundo de chip) |
|---|---|---|---|
| Sucesso | #37A35A | #1F6B36 (5,70:1) | #E8F2EC |
| Alerta | #D4A017 | #7A5800 (6,88:1) | #F6EEDA |
| Erro | #C43D3D | #8A2828 (6,87:1) | #F3E2E1 |
| Informação | #3875B0 | #244D77 (7,21:1) | #E2EAF2 |
Justificativa estratégica. A semântica é universal (verde = ok, vermelho = erro) — aqui a marca não busca diferenciação, busca legibilidade imediata; inventar cor de estado seria capricho contra o usuário. A diferenciação está no uso: a cor funcional só aparece quando o sistema precisa avisar, nunca como decoração. A tríade token / text-accessible / tint existe porque o contraste sobre o tint foi resolvido, não estimado.
Paleta 3 — Acento V-B (terroso retrofuturista)
A personalidade. Só em elemento contido, nunca superfície global. É o calor do arquétipo Bobo da Corte contido.
| Token | HEX | Papel |
|---|---|---|
accent/amber-top | #F7692B | Cap da tecla, rest — topo do gradiente. |
accent/amber-bottom | #FA4C00 | Cap da tecla, rest — base do gradiente. |
accent/amber-border-top · border-bottom | #FF9567 · #FF4E00 | Bisel do cap, rest. |
accent/amber-hover-top · hover-bottom | #FF986B · #FF7135 | Cap, hover. |
accent/amber-disabled-top · disabled-bottom | #C9C9C9 · #B8B8B8 | Cap, disabled (dessaturado). |
accent/rim | #5F0000 | Borgonha — profundidade da tecla. |
accent/rim-border-top · rim-border-bottom | #FFFFFF · #CECECE | Bisel do rim. |
A faixa hover e o estado pressed (sombra interna
rgba(95,0,0,0.45)) compõem a máquina de estados completa da tecla; a especificação visual do objeto é do capítulo 24. A lista canônica de tokens é sempre otokens.css.
Justificativa estratégica. O âmbar é a cor mais proprietária do Peppe — o teste de força do capítulo 19 (§19.8) confirmou que é por ele que a marca se reconhece sem o logotipo. É o "sabor do futuro que o passado imaginou", a temperatura humana que afasta o Peppe do assistente frio da ficção. O borgonha existe só como sua sombra estrutural. A régua predomina/pontua é o que protege esse valor: usado em ponto, o âmbar é assinatura; espalhado, seria ornamento e a marca se diluiria.
O escopo da paleta V-B — o que o capítulo 19 pediu, e o que este capítulo pode entregar
O capítulo 19 (§19.4) delegou a este capítulo "a consolidação completa da paleta V-B — quantos terrosos, em que valores". É preciso ser honesto sobre o que essa consolidação pode e não pode ser — e a divisão entre valor e escopo governa a resposta.
O que está materializado — DADO. O tokens.css traz uma única família de acento V-B: o âmbar/borgonha da tecla (accent/amber-*, accent/rim-*). É o que está em produção, e é tudo o que pode ir ao ar hoje como cor V-B. Quanto a este valor, a fonte da verdade cravada para o capítulo (o Design System) é definitiva.
O que o canônico descreve — e ainda descreve. A régua de execução visual-language.md trata o registro V-B, de forma consistente, como uma família terrosa mais ampla — "ocre, terracota, mostarda, âmbar, ferrugem" (§0, §2.2) —, reserva a estrutura accent/earth-1..4 para ela (§7), e diz que "a paleta exata sai na extração de tokens" (§2.2). Não é texto legado esquecido: a sub-régua de data-viz §4.6, escrita em 2026-05-16, ainda cita os terrosos V-B "(ocre, âmbar, mostarda, ferrugem)" como família real. O âmbar é, hoje, uma fatia dessa família — a única extraída.
A divergência, nomeada — não resolvida aqui. Há um conflito entre a matéria (uma família âmbar/borgonha) e a régua canônica (uma família terrosa de cinco). A regra de fonte da verdade do usuário resolve o valor — o que vai ao ar hoje —, mas não resolve o escopo — se a família deve crescer. E prompt-inicial.md §7 é explícito: conflito com um canônico se aponta, não se resolve por conta própria. Logo:
- Este capítulo consolida o que existe: a paleta V-B vigente é o âmbar/borgonha — ver Paleta 3 acima. É o único valor V-B que o Design System autoriza hoje.
- Este capítulo não pode entregar a "paleta completa" que o 19 pediu — quantos terrosos, em que valores —, porque os valores não existem no corpus e
prompt-inicial.md §11proíbe inventá-los. Os nomesearth-1..4são estrutura reservada, sem valor; não são paleta vigente, mas também não são lixo a apagar enquanto a intenção da família ampla permanecer no canônico. - A pergunta de fundo — a paleta V-B fica definitivamente na família âmbar/borgonha, ou expande para a família terrosa que o canônico descreve? — é decisão de produto, do PO, e vai ao fechamento (decisão 1). Se a resposta for expandir, a extração dos terrosos faltantes é uma Story de tokens dedicada, não matéria deste capítulo.
O logotipo na paleta
Registro de coerência (decidido em 21-simbolos-e-logotipo.md §21.6, apenas refletido aqui): o logotipo não tem cor própria — é monocromático, herda o contexto. Resolve em ink/primary #171717 sobre claro e ink/inverse #F7F7F7 sobre escuro. Nunca recebe âmbar, cor funcional ou cor decorativa. Os .svg estáticos ainda carregam #262626 legado — reconciliação pendente (lacuna).
Para o usuário — fechamento
Este capítulo consolidou a paleta já materializada e em produção, tomando o Design System como fonte da verdade cromática. O que segue voltou para você.
Mapa de execução — o que os capítulos seguintes fecham
Este capítulo fixa os valores da cor. O capítulo 23 fecha o conjunto tipográfico; o 24 especifica os grafismos — incluindo a tecla, onde a paleta âmbar se aplica como objeto; o 25 define o tratamento de cor da imagem/fotografia; o 26 consolida a régua cromática operacional no manual visual; o 27 trata a conversão para impresso (CMYK/Pantone), se houver peça impressa.
Decisões a ratificar — propostas que o corpus não fechou
- O escopo da paleta de acento V-B (§22.5) — uma decisão de produto, não de consolidação. O Design System materializa só a família âmbar/borgonha da tecla; o canônico
visual-language.md(§0, §2.2, §7 e a sub-régua §4.6 escrita em 2026-05-16) descreve, de forma consistente, uma família terrosa de cinco — ocre, terracota, mostarda, âmbar, ferrugem. Decisão a tomar: (a) a paleta V-B fica definitivamente na família âmbar/borgonha — e aí ovisual-language.mddeve ser corrigido (removerearth-1..4, ajustar §0/§2.2/§4.6); ou (b) mantém-se a intenção da família terrosa ampla — e aí o âmbar é só a primeira fatia extraída, e os demais terrosos exigem uma Story dedicada de extração de tokens. Os valores não podem ser inventados neste capítulo (prompt-inicial.md §11). Enquanto a decisão não vier, vale o Design System: a única cor V-B que vai ao ar é o âmbar/borgonha. - A leitura de "intenção/significado" das cores (§22.2). Tratei o significado cromático como derivação dos atributos de marca (Acolhedor, Prudência, Honestidade, calor do Bobo da Corte), e não de uma tabela de psicologia da cor. Ratificar essa abordagem como o racional oficial de significado da paleta.
- Cor canônica do logotipo (§22.5). Já decidida em
21-simbolos-e-logotipo.md §21.6(#171717sobre claro,#F7F7F7sobre escuro); aqui apenas refletida. Reconciliar os arquivos.svgestáticos, hoje em#262626.
Lacunas — dependem de dado ou input do PO
- A paleta de categoria de data-viz. A régua
visual-language.md §4.6(adicionada em 2026-05-16, Epic [E32]) define regras para uma paleta funcional multi-matiz de visualização de dados — saturação ≤ 55%, luminância 33–55%, distinguibilidade mútua —, mas nenhum valor materializado. Não é uma 4ª paleta de marca (é sinal de dado, sub-régua da funcional), mas precisa de extração de tokens. Pendente. - Dark mode. A mesma régua de data-viz §4.6 referencia uma
surface/raisedescura (#222222) — mas otokens.cssnão tem paleta dark mode materializada. Confirmar se dark mode está no escopo da marca; se estiver, é um exercício de paleta dedicado. #FFFFFFhardcoded sobre o cap âmbar (issue #108). O label da tecla usa branco literal, não um token, com contraste 3,3:1 (passa AA só para texto grande bold). Tokenização e revisão do contraste pendentes.- Valores âmbar/borgonha como placeholder. O
tokens.cssmarca a faixa V-B como "placeholder declarado — valores serão cruzados com extração oficial do lote 3 V-B". Os valores estão em produção, mas formalmente aguardam ratificação da extração. Confirmar se podem ser cravados como definitivos. - Conversão para impresso (CMYK / Pantone). Não se aplica ao estágio pré-lançamento — lacuna de horizonte para o capítulo 27.
Perguntas abertas — do método, que o corpus não responde
- Diferenciação cromática medida contra concorrentes. O benchmark não capturou as paletas dos concorrentes (
auditoria-mercado.md— identidade visual marcada[A confirmar — exige wall of references]). A diferenciação cromática do Peppe é hoje um argumento de registro (quente/tátil vs. neutro/plano), não uma comparação cor a cor. Decidir se vale levantar as paletas dos concorrentes diretos para uma comparação de fato. - A paleta tem uma "cor de marca" comunicável? Para mídia e parceiros, marcas costumam ter uma cor citável ("o azul de X"). O Peppe, por construção, tem um sistema de dois polos — off-white de ambiente + âmbar de assinatura. Confirmar se, para fins de comunicação externa, o âmbar
#FA4C00pode ser nomeado como "a cor do Peppe", ou se a marca se comunica sempre pelo sistema, nunca por uma cor isolada.