Cor
Verde elétrico como protagonista único. Carbono como âncora. Uma paleta de duas vozes.
O protagonista
A cor de acento do BioActiv é um verde elétrico intenso — #07E70B. Não é a cor "da natureza" ou "da saúde" no sentido genérico: é a cor do sinal verde, do dado confirmado, do movimento que começou. No contexto atlético, é o apito que indica presença, não ausência.
A escolha deliberada foi: um único acento, usado com restrição. Verde elétrico em todos os lugares é barulho. Verde elétrico no lugar certo é instrução. O sistema usa esse acento para estados ativos, links, ícones de ação e o símbolo do logo — nunca como fundo de seção, nunca em blocos de texto corrido.
A combinação fundamental
Verde sobre carbono.
Este é o par que define o contraste máximo do sistema. O carbono (#1C1C1C) não é preto puro: é um grafite denso que mantém profundidade sem absorver tudo. O verde elétrico sobre ele é o único elemento que precisa de atenção — e recebe.
Por que não o pinheiro
Durante o desenvolvimento da paleta, uma alternativa ao carbono foi considerada: um verde-escuro profundo — o que chamaríamos de "pinheiro" —, aproximadamente #123828. Era elegante. Mas criava um problema estrutural.
Um fundo esverdeado compete diretamente com o acento elétrico. Quando o verde-escuro sustenta o layout e o verde-elétrico marca os pontos de ação, o olho precisa escolher qual dos dois é o protagonista — e vacila. A paleta deixa de ter hierarquia clara e passa a ter ambiguidade.
O carbono resolve esse problema porque é neutro na temperatura: não é quente, não é frio, não tem matiz. Ele recua completamente, e o verde elétrico pode avançar sem competição. A decisão foi: um protagonista por cena.
O carbono deixa o verde ser o único verde da história.
Como a paleta funciona
O sistema não usa a paleta de forma livre — cada cor tem uma função definida. Mudar essa distribuição quebra a hierarquia visual.
Verde elétrico — acento
Links, ícones de ação, estados ativos, o símbolo do logo. Nunca como fundo. Nunca em parágrafos de texto corrido. A restrição é o que dá ao verde seu peso.
Carbono — âncora escura
Superfície de alto contraste para seções de destaque e o fundo padrão do logo invertido. Usado com moderação — uma ou duas seções por página, nunca como fundo padrão do site.
Papel e creme — bases editoriais
As superfícies de descanso. Papel (--surface-paper) é o fundo padrão do sistema.
Creme (--surface-cream) aquece seções editoriais e de marca,
como esta que você está lendo agora.
Tinta — texto escuro
A cor do texto principal. Não é preto puro — um grafite ligeiramente suavizado que reduz a tensão em blocos longos de leitura.
Para a escala completa de verdes, neutros e tokens de papel, consulte Foundations / Color.
Contraste
Não existe “o verde”. Existem três, e cada um só funciona em certos fundos. Esta tabela decide qual usar — os valores são contraste WCAG, calculados, não impressão de olho.
| Verde | sobre branco | sobre carbon | sobre ink |
|---|---|---|---|
green-400 #07E70B | 1.7 ✗ | 10.1 ✓ | 10.3 ✓ |
green-600 #059412 | 4.0 △ | 4.3 ✓ | 4.4 ✓ |
green-700 #087114 | 6.2 ✓ | 2.7 ✗ | 2.8 ✗ |
✓ passa · △ só texto grande ou ícones · ✗ decorativo apenas
É daqui que sai a regra: o green-400 — o verde da marca — reprova
no claro (1.7). Ele é fill de botão, forma e o ponto, nunca texto
sobre branco. No claro, texto verde é green-700. No escuro, ele
inverte: o green-700 some (2.7) e quem lê é o green-400. O sistema
já faz essa troca sozinho — é o que o token --text-accent resolve
em cada superfície.