22 · Paleta de cores

Vigente

22 · Paleta de Cores

Fontes: design-system/tokens/tokens.cssfonte 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 versionadadesign-system/tokens/tokens.css, espelhada no app prototype-chat.
  • Está documentada e navegável no Design System público (designsystem.peppeai.com, página fundamentos/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 o tokens.css, o tokens.css prevalece quanto ao valor.
  • A página cor.html é a documentação desse arquivo — reflete os tokens, não os define.
  • O MANIFESTO.md §2 continua 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.md declara uma estrutura de cor que o tokens.css não materializou (caso da família accent/earth-1..4 — ver §22.5 e fechamento), vale o tokens.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#F7692B e accent/amber-bottom#FA4C00 — laranja-âmbar saturado (dois tokens distintos no tokens.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 a accent/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 DADOtokens.css.

Superfícies — o sistema de profundidade

TokenValorPapel
surface/shell#FFFFFFInvólucro estrutural — sidebar, topbar. Branco puro, V-A.
surface/base#F7F7F7Ambiente de conteúdo — o fundo onde os cards pousam.
surface/raised (gradiente)#F7F7F7#FBFBFBElemento elevado — card, botão. Emerge suave da base.
surface/floating#FBFBFBModal, popover — flutua acima de tudo.
surface/carved#EFEFEFCavado — o sulco, a depressão. Mais escuro que a base.
surface/divider#ECECECHairline 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.

TokenValorPapel
border/base#EBEBEBContorno sólido sutil da superfície base.
border/raised-top#FCFCFCBorda do elevado — topo iluminado.
border/raised-bottom#F8F8F8Borda do elevado — base sombreada.
border/carved-top#E8E8E8Borda do cavado — topo em sombra.
border/carved-bottom#FFFFFFBorda do cavado — base iluminada.

Overlay e nav — superfícies de interação

TokenValorPapel
overlayrgba(23,23,23,0.32)Backdrop escuro de modal e drawer.
nav/activergba(23,23,23,0.05)Tint do item de navegação ativo.
nav/hoverrgba(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.

TokenValorPapel
ink/primary#171717Texto principal, títulos, valores de destaque.
ink/primary-hover#2A2A2AHover de superfície sólida (Button secondary).
ink/primary-active#000000Active de superfície sólida.
ink/secondary#6B6B6BTexto de apoio, metadados, labels.
ink/tertiary#A1A1A1Caption, placeholder, desabilitado.
ink/inverse#F7F7F7Texto sobre fundo escuro.

Apoio do âmbar — a profundidade da tecla (V-B). O borgonha e suas bordas, que dão volume ao acento.

TokenValorPapel
accent/rim#5F0000Borgonha — lateral de profundidade da tecla.
accent/rim-border-top#FFFFFFBorda do rim — topo iluminado.
accent/rim-border-bottom#CECECEBorda 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:

  1. Escala de superfície (luminância). shell #FFFFFFbase #F7F7F7raised-bottom/floating #FBFBFBcarved #EFEFEFdivider #ECECEC. Cinco degraus de claro a quase-claro, cada um um estado de profundidade.
  2. Escala de tinta (presença). primary #171717secondary #6B6B6Btertiary #A1A1A1. Três degraus de hierarquia de leitura.
  3. 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 o tint (fundo de chip). Ver Passo 5.
  4. 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)ValorEstado
accent/amber-top · amber-bottom#F7692B · #FA4C00Cap, rest — gradiente do topo.
accent/amber-border-top · border-bottom#FF9567 · #FF4E00Bisel do cap, rest.
accent/amber-hover-top · hover-bottom#FF986B · #FF7135Cap, hover — topo mais claro.
accent/amber-disabled-top · disabled-bottom#C9C9C9 · #B8B8B8Cap, 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:

PareamentoContrasteVeredito
ink/primary sobre surface/base16,6:1AAA — pareamento principal.
ink/primary sobre surface/floating17,3:1AAA — texto em modal/popover.
ink/secondary sobre surface/base4,64:1AA — texto de apoio.
ink/inverse sobre ink/primary16,6:1AAA — texto sobre sólido escuro.
ink/tertiary sobre surface/base2,33:1Abaixo 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 variante text-accessible é lida. Ver §22.5.
  • Dois pareamentos ficam abaixo de AA, conscientemente. ink/tertiary sobre a base (2,33:1) é restrito a texto decorativo ou desabilitado — nunca conteúdo informativo obrigatório. E o #FFFFFF sobre o cap âmbar da tecla (3,3:1) passa AA apenas para texto grande e bold, com text-shadow compensatório declarado no componente. Esse #FFFFFF está 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.

TokenHEXPapel
surface/shell#FFFFFFInvólucro de navegação.
surface/base#F7F7F7Fundo de conteúdo — a cor fundamental.
surface/raised#F7F7F7#FBFBFBElemento elevado (card, botão).
surface/floating#FBFBFBModal, popover.
surface/carved#EFEFEFSulco / depressão.
surface/divider#ECECECHairline 1px.
border/base · raised-top · raised-bottom#EBEBEB · #FCFCFC · #F8F8F8Contorno da superfície elevada.
border/carved-top · carved-bottom#E8E8E8 · #FFFFFFContorno da superfície cavada.
ink/primary#171717Texto principal.
ink/primary-hover · primary-active#2A2A2A · #000000Estados de sólido escuro.
ink/secondary#6B6B6BTexto de apoio.
ink/tertiary#A1A1A1Caption / disabled (abaixo de AA — uso restrito).
ink/inverse#F7F7F7Texto sobre fundo escuro.
overlayrgba(23,23,23,0.32)Backdrop de modal/drawer.
nav/active · nav/hoverrgba(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.

EstadoTokenVariante text-accessibletint (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.

TokenHEXPapel
accent/amber-top#F7692BCap da tecla, rest — topo do gradiente.
accent/amber-bottom#FA4C00Cap da tecla, rest — base do gradiente.
accent/amber-border-top · border-bottom#FF9567 · #FF4E00Bisel do cap, rest.
accent/amber-hover-top · hover-bottom#FF986B · #FF7135Cap, hover.
accent/amber-disabled-top · disabled-bottom#C9C9C9 · #B8B8B8Cap, disabled (dessaturado).
accent/rim#5F0000Borgonha — profundidade da tecla.
accent/rim-border-top · rim-border-bottom#FFFFFF · #CECECEBisel 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 o tokens.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 §11 proíbe inventá-los. Os nomes earth-1..4 sã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

  1. 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í o visual-language.md deve ser corrigido (remover earth-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.
  2. 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.
  3. Cor canônica do logotipo (§22.5). Já decidida em 21-simbolos-e-logotipo.md §21.6 (#171717 sobre claro, #F7F7F7 sobre escuro); aqui apenas refletida. Reconciliar os arquivos .svg estáticos, hoje em #262626.

Lacunas — dependem de dado ou input do PO

  1. 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.
  2. Dark mode. A mesma régua de data-viz §4.6 referencia uma surface/raised escura (#222222) — mas o tokens.css não tem paleta dark mode materializada. Confirmar se dark mode está no escopo da marca; se estiver, é um exercício de paleta dedicado.
  3. #FFFFFF hardcoded 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.
  4. Valores âmbar/borgonha como placeholder. O tokens.css marca 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.
  5. 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

  1. 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.
  2. 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 #FA4C00 pode ser nomeado como "a cor do Peppe", ou se a marca se comunica sempre pelo sistema, nunca por uma cor isolada.