FUNDAMENTOS · 01 · CORCor aqui não decora, ela informa. O teal identifica a marca e o dado, o laranja #F79633 aparece só onde existe decisão, e a escala de ink resolve todo o resto. Cada swatch abaixo declara a razão de contraste real medida contra paper e contra ink.
01.1 · MARCATeal é identidade e dado. Laranja é decisão, nunca ambiente. Os dois ghosts existem só como fundo de chip, realce de delta e estado selecionado.
AAA7:1 ou mais, corpo pequeno com folga
AA4,5:1 ou mais, piso do corpo de texto
AA grande3:1 ou mais, só a partir de 24px, ou 19px em bold, e grafismo
reprovaabaixo de 3:1, nunca em texto nem em borda de foco
Cor da marca. Link, ícone ativo, ring de foco, headline de 24px ou mais. Em corpo pequeno sobre claro, trocar por teal-deep.
Hover do teal, eyebrow, código de fase, texto teal acessível sobre claro, fase de execução (F6 e F7).
Só fundo: chip de fase, linha selecionada da planilha, hover de item de lista. Texto por cima em teal-deep dá 4,72:1, aprova AA.
Fundo de CTA primário, marco "você está aqui" no cronograma, delta do realizado contra o previsto. Texto por cima em #1A1205 dá 8,27:1. Um por dobra de tela.
Hover do CTA e cor do aviso. Em texto sobre paper fica em 3,00:1, então só vale a partir de 24px. Abaixo disso o texto vai em orange-text, e a cor fica no ícone e na borda.
Todo texto laranja abaixo de 24px: delta de tabela, rótulo de chip, nota de marco. Passa AA sobre paper, sobre mist e sobre o próprio orange-ghost. Sobre ink dá 3,42:1, então no escuro o laranja de texto volta a ser orange.
Fundo de aviso e realce da célula que estourou o orçamento. Nunca como cor de seção inteira, senão o laranja perde o significado.
01.2 · ESCALA DE INKUma escala fechada substitui os dez cinzas do site antigo. O piso do corpo de texto é ink-3: nada mais claro que isso carrega palavra lida.
Quase-preto esverdeado. Texto principal sobre claro e fundo das seções escuras. Nunca #000, que endurece a página.
Texto secundário: lead, corpo de card, descrição de serviço. Sobre mist cai para 8,70:1 e continua AAA.
Caption, unidade de medida, rótulo de eixo, meta de card. Sobre mist cai para 4,43:1, então em fundo mist a caption sobe para ink-2.
Fundo base do site. Branco quebrado, um passo abaixo do #FFF, para que o card branco tenha para onde subir.
Seção alternada, cabeçalho de tabela, fundo de campo desabilitado. É o rebaixado, não o elevado.
Hairline, borda de card, tick da régua, malha do blueprint. Borda decorativa pode ficar em 1,27:1; borda que comunica estado sobe para teal.
Superfície elevada: card sobre paper, dropdown, planilha. A elevação vem do branco mais a hairline, não de sombra pesada.
01.3 · SUPERFÍCIE ESCURAA seção escura roda com .dark no container, não no :root, para que a mesma página misture bloco claro e bloco escuro. Aqui a razão de referência é medida contra ink, que passa a ser o fundo.
Card sobre ink. A diferença contra o fundo é de propósito quase nula: quem separa é a hairline, não o valor.
Hairline e tick da régua sobre ink. Mesmo papel que line, do outro lado da escala.
Texto principal sobre escuro. Nunca #FFF puro sobre ink, que vibra e cansa na leitura longa.
Lead e texto secundário sobre escuro. É o par de ink-2 e mantém AAA nas duas superfícies escuras.
Caption sobre ink, no limite do piso. Dentro de card paper-dark cai para 4,30:1, então ali a caption sobe para ink-2-on-dark.
01.4 · SEMÂNTICOSSucesso herda teal-deep, aviso herda orange-deep. O sistema não ganha cor nova para dizer coisa que a paleta já diz. Existe exatamente um verde no projeto e ele só aparece no botão do WhatsApp.
"Medição aprovada", "orçamento dentro da verba". Alias de teal-deep, sem verde novo.
Desvio acima da tolerância, erro de validação, item bloqueado. Sobre danger-ghost dá 4,28:1, então em texto pequeno entra danger-text e a cor fica na borda e no ícone.
Texto de erro e rótulo de chip crítico abaixo de 24px, inclusive sobre o próprio danger-ghost, onde o danger puro parava em 4,28:1. Sobre ink fica em 2,91:1, então é token de superfície clara apenas.
Atenção antes do estouro: prazo apertado, insumo sem composição. Alias de orange-deep, e o único laranja que pode aparecer fora de decisão.
Nota neutra do sistema, tipo "base de preço atualizada em 07/2026". Alias de ink-2.
Único verde do sistema, reservado ao botão de WhatsApp, porque ali a cor é marca de terceiro. Não vira sucesso, não vira acento, não entra em gráfico.
// no chip semântico o fundo é ghost e o texto é ink-2, com a cor vivendo no anel de 1px. Assim o rótulo passa AA sem exceção.
01.5 · FASES DO CICLODo terreno à entrega, sete soluções. A cor não pinta cada fase de um tom diferente, porque a linha precisa ler como uma coisa só. Teal cobre orçamento e planejamento, teal-deep marca a execução, e o laranja aparece uma única vez: no marco de hoje.
F1Budget ParamétricotealF2Budget ExpresstealF3Levantamento QuantitativotealF4Budget Analyticsorange · agoraF5Planejamento de ObrastealF6Acompanhamento de Custosteal-deepF7Acompanhamento de Prazosteal-deep// o roxo #705989 do site antigo foi aposentado. Era cor órfã, sem papel no sistema.
01.6 · USO PROIBIDOCinco erros que reprovam a entrega. Cada par mostra o que não fazer e o que entra no lugar, com o número que condena.
Quantidades extraídas do projeto, item por item.
Três CTA laranja na mesma dobra e um card inteiro pintado de laranja. Se tudo é decisão, nada é urgente: o usuário perde a referência de onde clicar.
Quantidades extraídas do projeto, item por item.
Card em white com hairline, um CTA primário, o resto em ghost. O laranja
continua sendo o lugar onde a mão vai.
--celere-orange
Área privativa total de 30.539,79 m², distribuída em 4 torres residenciais e 1 lâmina comercial.
Valores sujeitos a revisão conforme medição mensal.
#9CA3A8 em paper · 2,46:1Cinza claro em caption é o vício do site antigo, que usava #727376 e reprovava AA por pouco. Caption é informação técnica, não sussurro.
Área privativa total de 30.539,79 m², distribuída em 4 torres residenciais e 1 lâmina comercial.
Valores sujeitos a revisão conforme medição mensal.
#5E7378 em paper · 4,82:1Mesmo texto em ink-3, que é o valor mais claro autorizado a carregar palavra
sobre paper.
--celere-ink-3
Três verdes inventados para dizer sucesso, mais um quarto verde real no botão de WhatsApp.
O site antigo tinha três verdes órfãos. Verde novo dilui o único verde com função e faz o usuário achar que existe uma segunda marca.
Sucesso em teal-deep, e o verde aparece uma única vez, no canal onde ele é
marca de terceiro.
--celere-success --ws-green
Fale com um especialista sobre o Budget Analytics da sua obra.
Resposta em até 1 dia útil.
#00AFAF em paper · 2,61:1Teal puro sobre claro só serve para grafismo, ícone e headline a partir de 24px. Em link de corpo, ele reprova por larga margem.
Fale com um especialista sobre o Budget Analytics da sua obra.
O corpo vai em teal-deep e o teal fica onde o tamanho compensa o contraste.
--celere-teal-deep
Roxo #705989 e companhia: cores sem papel definido, herdadas de página antiga.
Cada fase com um tom próprio quebra a leitura da linha do ciclo como um objeto único, e nenhuma dessas cores tem contraste auditado.
A fase é dita pelo código em mono, não por um tom inventado.
Quem diferencia a fase é o código, o F1 até F7, sempre em mono. A cor só separa orçamento de execução.