Nancy Thame
Guia visual com duas linhas de identidade: Campanha, que segue a identidade verde do enxoval impresso, e Pré-Campanha, institucional. As cores estão ligadas às Variáveis Globais do Divi — mude uma no Gestor e ela muda aqui e nos módulos nativos do site.
Atenção. Em módulo Código quem manda é o
snippet: o Divi 5 só emite no :root as variáveis que a página
usa em módulos nativos. Fora dessas, var(--gcid-…, #hex)
renderiza o fallback — por isso todo fallback aqui é igual ao valor gravado
no Gestor. Os dois precisam ser mantidos iguais.
Linha 1 — Campanha
Paleta da identidade de 11/08/2026: cinco verdes e o branco gelo, sem nenhum azul. O Verde Profundo é a base, o Verde Bandeira é o fundo alternativo, e o lima e o Verde Folha vivem na tipografia e nos destaques. Os valores saem do conteúdo vetorial dos PDFs do enxoval — operadores de cor do PDF, não amostra de imagem.
Paleta oficial
A troca de 11/08 — um para um, na mesma variável
Cada azul saiu para o verde de luminância equivalente: Navy 0,0289 → Verde Profundo 0,0348; Azul Médio 0,1013 → Verde Bandeira 0,0997; Azul Intermediário 0,0571 → Verde Mata 0,0613. É por isso que nenhuma combinação de texto do site mudou de faixa de acessibilidade — o maior desvio em toda a página é de 0,9 ponto de razão de contraste. Nenhum nome de token mudou, então nada precisou ser refeito.
| Papel | Variável | Era | Passa a ser |
|---|---|---|---|
| Fundo principal | --gcid-p61rsh0bb3 |
Navy #2a2d4c | Verde Profundo #153C1E |
| Fundo alternativo | --gcid-rkvsemnveb |
Azul Médio #275c91 | Verde Bandeira #0A672F |
| Meio-tom / degradê | --gcid-sct3wh2qxh |
Azul Interm. #28446e | Verde Mata #0F5126 |
| Lima | --gcid-primary-color |
#a0c53c | #A1C63D |
| Verde Folha | --gcid-secondary-color |
#79b441 | #7AB542 |
| Faixa do hero | --gcid-7rxx8yklfs |
Accent Escuro #1f4a38 | Verde Bandeira #0A672F |
| Painel neutro | --gcid-4j6vuktadi |
#d2d5d7 | #D3D8D2 |
| Título | --gcid-heading-color |
#2a2d4c | #153C1E |
| Link | --gcid-link-color |
#275c91 | #0A672F |
| Corpo | --gcid-body-color |
#5f6771 | #5E6961 |
| Texto sobre lima | --nt-c-on-cta |
#1b1d33 | #0C2412 |
| Hover do lima | --nt-c-cta-hover |
#93b736 | #94B837 |
| Texto suave sobre escuro | --nt-c-dark-soft |
#cdd6ea | #D3E3CE |
Derivados sem variável no Gestor
#F1F1F1 branco gelo da identidade · #94B837 hover do lima · #0C2412 texto sobre lima · #D3E3CE texto suave sobre escuro · rgba(255,255,255,.14) divisores sobre escuro · #e7e3d8 e #4a4a44 papel e legenda dos recortes — estes dois não mudaram, porque são cor de papel de jornal, não cor de marca.
Aposentadas — não usar em peça de campanha
- Navy #2a2d4c
- Azul médio #275c91
- Azul intermediário #28446e
- Verde escuro de faixa #1f4a38
- Accent azul #2b3a54
- Lima antigo #8dbf43
- Verde médio #67963e
- Lima de JPG #b6dc65
- Amarelo #ffd85a
- Amarelo escuro #ffc73d
- Laranja #ef833a
Ritmo de fundo
A armadilha que a paleta verde traz. Antes, um erro de matiz saltava aos olhos: azul do lado de verde. Agora tudo é verde, e dois blocos vizinhos errados viram uma mancha só. Entre Profundo, Bandeira e Mata o contraste de bloco é de 1,3 a 1,8:1 — trate os três como quase a mesma cor. As duas regras antigas ficam mais importantes, não menos: não repita a mesma cor em blocos vizinhos, e duas seções escuras seguidas só funcionam com o lima, o branco gelo, uma foto ou uma borda entre elas.
O xadrez — o recurso da identidade para quebrar área verde
Quadros alternados de Verde Bandeira e Verde Folha, com o ícone de cada pauta dentro. É a alternativa correta quando uma seção escura precisa de textura — em vez de inventar um quarto verde.
Botões — um CTA lima por seção
Contraste — medido, com o alfa composto sobre o fundo
| Par | Razão | Veredito |
|---|---|---|
| branco sobre Verde Profundo | 12,37:1 | AA / AAA |
| lima sobre Verde Profundo | 6,28:1 | AA / AAA |
| Verde Folha sobre Verde Profundo | 5,02:1 | AA |
| #D3E3CE sobre Verde Profundo | 9,22:1 | AA / AAA |
| branco sobre Verde Bandeira | 7,01:1 | AA / AAA |
| #D3E3CE sobre Verde Bandeira | 5,23:1 | AA |
| branco sobre Verde Mata | 9,44:1 | AA / AAA |
| #0C2412 sobre lima | 8,35:1 | AA / AAA |
| #0C2412 sobre lima hover | 7,18:1 | AA / AAA |
| Verde Profundo sobre lima — cola de votação | 6,28:1 | AA / AAA |
| Verde Profundo sobre Verde Folha | 5,02:1 | AA |
| Verde Profundo sobre branco | 12,37:1 | AA / AAA |
| título sobre Fundo 1 | 11,60:1 | AA / AAA |
| título sobre Branco Gelo | 10,96:1 | AA / AAA |
| corpo #5E6961 sobre Fundo 1 | 5,37:1 | AA |
| corpo #5E6961 sobre Fundo 2 | 4,93:1 | AA |
| link Verde Bandeira sobre branco | 7,01:1 | AA / AAA |
| título sobre cinza painel | 8,56:1 | AA / AAA |
| legenda #4a4a44 sobre papel | 6,96:1 | AA / AAA |
| branco a .66 sobre Verde Profundo — linha legal | 6,33:1 | AA / AAA |
| lima sobre Verde Bandeira | 3,56:1 | só texto grande |
| corpo sobre cinza painel | 3,96:1 | o painel é para foto; texto usa o Verde Profundo |
| Verde Folha sobre Verde Bandeira | 2,84:1 | só decoração — os pontos da fita |
| branco sobre Verde Folha | 2,47:1 | não usar — nenhuma faixa Verde Folha com texto branco |
Hierarquia tipográfica — fluida em clamp()
H1 — Título principal
--nt-fs-h1 = clamp(2.25rem, 1.40rem + 3.80vw, 3.75rem)
H2 — Subtítulo
--nt-fs-h2 = clamp(1.75rem, 1.20rem + 2.40vw, 2.75rem)
H3 — Seção
--nt-fs-h3 = clamp(1.40rem, 1.10rem + 1.30vw, 2.00rem)
H4 — Bloco
--nt-fs-h4 = clamp(1.20rem, 1.05rem + 0.70vw, 1.50rem)
Parágrafo — corpo de texto, com um link de exemplo.
--nt-fs-body = clamp(1.00rem, 0.96rem + 0.25vw, 1.125rem)
Flood Std — só toque de marca
--nt-script · nunca em texto corrido
Armadilhas que já morderam
- clamp() exige espaço em volta do +.
clamp(1.4rem+3.6vw, …)é inválido e o navegador descarta a declaração inteira, em silêncio — já derrubou 21 declarações de uma vez. - Prefixe as regras de botão com .nt-style. A regra genérica
.nt-style atem especificidade (0,1,1) e vence.nt-btn--cta(0,1,0). - Todo <span> sobre fundo claro dentro de .nt-on-dark precisa de
color explícito. A regra global
.nt-on-dark span{color:#fff}mira o span direto e vence a cor herdada do pai. - Agora tudo é verde — a checagem de matiz não salva mais ninguém. Um bloco com o verde errado não “grita” como um azul gritava. A conferência passa a ser por luminância: se dois blocos vizinhos estão na mesma faixa, é erro.
- Texto se mede pela coluna, não pela janela. Onde uma frase
precisa caber numa coluna estreita, dimensione em
cqicom a coluna comocontainer-type: inline-size. - Nunca object-fit: cover em foto com pessoa. Corta cabeça. A
exceção segura é fixar
aspect-rationa caixa. - Foto de estúdio com recorte 3/4 nunca fica solta — precisa de apoio, faixa ou painel escondendo a borda reta.
- Nunca misture as duas paletas na mesma página. Esta página é a única exceção, porque documenta as duas.
Linha 2 — Pré-Campanha
Identidade institucional, herdada de nancythame.com.br: sóbria, focada em autoridade e histórico. Verde institucional como base, verde escuro de apoio e o azul #056EB3 como accent. Sem número e sem apelo eleitoral. Classe obrigatória no wrapper: .nt-line-pre — sem ela os botões caem na paleta de campanha.
Paleta — Pré-Campanha
⚠️ Pendência nova: as duas linhas ficaram parecidas
Título e corpo são slots compartilhados que o Divi
emite em toda página, e eles acompanham a campanha. Antes isso deixava a
pré-campanha com título navy — estranho, mas claramente “de outra linha”.
Agora deixa a pré-campanha com título Verde Profundo, quase
indistinguível do verde institucional #007f4a em módulo
nativo. Os módulos Código da pré-campanha continuam protegidos por
.nt-line-pre a{ color: var(--nt-p-link) }.
A decidir: a pré-campanha declara título próprio
(--nt-p-heading) nos blocos, ou se aceita a semelhança.
Derivados sem variável no Gestor
#2f6029 verde hover · #005f38 verde escuro hover · #045a93 azul hover · #e9efe0 hover de botão branco sobre escuro · #dfe6f0 kicker do hero.
Botões — no máximo um CTA azul por seção
Fundo branco
O que NÃO entra nesta linha
- Lima #A1C63D
- Verde Folha #7AB542
- Verde Profundo #153C1E
- Verde Bandeira #0A672F
- Verde Mata #0F5126
- Cinza painel #D3D8D2
Também não entram camiseta ou logo do Partido Verde, bandeira, o número 43 e “#BORA 43”. Na dúvida sobre uma foto, não use.
Tipografia e forma
Idênticas à linha de campanha: Montserrat em títulos e
corpo, escala fluida em clamp(), botões 999px,
cartões 16px, container 1120px. Flood Std é
praticamente ausente aqui — o registro institucional pede pouca
ornamentação.
Pendência: as variáveis de Fonte no Gestor do Divi
ainda estão em Open Sans. Corrigir para Montserrat antes de
usar variável de fonte em módulo nativo.