Sustentabilidade
Dez agroflorestas implantadas em Campos dos Goytacazes
A Unidade Demonstrativa de Produção Agroecológica se torna espaço pedagógico de multiplicação de práticas de produção de alimentos saudáveis nas comunidades atendidas.
Projeto Campo Cidade
Design System
Cores, estilos de texto e componentes base derivados do Manual de Identidade Visual PCAMC. As nove cores institucionais estão aqui exatas; o resto foi construído em volta delas para dar conta de estados de interface que um manual impresso não cobre.
SustentabilidadeGeração de RendaDireitos Humanos
Cores
Cinco famílias. Os degraus marcados com um ponto são as cores exatas do manual — os outros foram derivados em OKLCH a partir delas, mantendo a matiz e escalonando a luminosidade.
areia
Neutro quente. Substitui a escala de cinza — nada no site é cinza.
50
#fdf9f6
100
#f9f1ea
200
#f1e2d7
Powder Puff · 11-1404
300
#e4d2c6
400
#cdb9ad
500
#ad9a8f
600
#8d7c72
700
#6f6057
800
#52443e
900
#392d28
950
#251c18
verde
Mata, agrofloresta, sustentabilidade. Cor institucional principal.
50
#f5f8ef
100
#e9f0dc
200
#cddeaa
300
#a0c15b
Bright Lime Green · 14-0244
400
#88a255
500
#73864f
Grasshopper · 18-0332
600
#566d42
700
#445e39
800
#324e30
Douglas Fir · 19-0220
900
#1e361f
laranja
Terra revirada, calor, ação. Cor de destaque.
50
#fef3ee
100
#ffe7db
200
#ffcab3
300
#f8a27d
400
#eb7d4c
500
#da5e21
Puffin's Bill · 16-1363
600
#bb4e12
700
#994412
800
#7a3a15
Caramel Café · 18-1148
900
#5a2a0c
ocre
Colheita, sol, grão.
50
#fcf8f0
100
#f9efdb
200
#f3d9a8
300
#e3ab2b
Golden Rod · 14-0951
400
#d9952a
500
#cb8133
Desert Sun · 16-1149
600
#ae6b2c
700
#8f5428
800
#724022
900
#532c17
terracota
Tijolo, ruína, memória.
50
#fef3f0
100
#ffe7e0
200
#fecabe
300
#f39e8b
400
#df7b66
500
#ca5d47
Burnt Sienna · 17-1544
600
#ab4b3a
700
#8d3d2f
800
#723127
900
#53211a
Tokens semânticos
É o que se usa no código. A paleta crua fica reservada para grafismo e ilustração.
| Token | Valor | Uso |
|---|---|---|
| --brand | verde-800 | Ação primária, links de navegação |
| --accent | laranja-600 | Chamada de destaque, links no texto |
| --ink | areia-950 | Texto corrido |
| --ink-muted | areia-700 | Data, legenda, texto de apoio |
| --page | areia-50 | Fundo da página |
| --surface | white | Card, campo de formulário |
| --line | areia-300 | Divisória decorativa |
| --line-strong | areia-600 | Borda de campo (3:1 por WCAG) |
| --ring | laranja-500 | Anel de foco (cor exata do manual) |
Contraste verificado
80 pares auditados — 5 escopos de cor x 16 combinações — todos passando WCAG 2.1 AA. O laranja do manual é o caso difícil: dá 3.75:1 com branco e piora no escuro (2.47:1 sobre verde-800), então cada tom usa o degrau que passa. O #DA5E21 exato fica no anel de foco e no grafismo, onde 3:1 basta.
| Par | Cores | Razão |
|---|---|---|
| Texto sobre o fundo | areia-950 / areia-50 | 15.9:1 |
| Texto de apoio | areia-700 / areia-50 | 5.8:1 |
| Botão primário | branco / verde-800 | 9.3:1 |
| Botão de destaque | branco / laranja-600 | 5.0:1 |
| Destaque no tom areia | laranja-700 / areia-200 | 5.2:1 |
| Destaque no tom escuro | laranja-300 / verde-800 | 4.6:1 |
| Texto em seção escura | areia-50 / verde-900 | 12.5:1 |
| Anel de foco no claro | laranja-500 / areia-50 | 3.6:1 |
| Anel de foco no escuro | ocre-300 / verde-800 | 4.5:1 |
Tipografia
Rounded Mplus 1c Medium nos títulos e Montserrat na massa de texto, como pede o manual. A escala é fluida: interpola entre 375px e 1280px de viewport, então não há salto entre celular e desktop.
text-display
40 → 68px · Hero da home e da LP
Do campo à cidade, geração de renda
text-h1
32 → 48px · Título de página
Do campo à cidade, geração de renda
text-h2
26 → 36px · Título de seção
Do campo à cidade, geração de renda
text-h3
21 → 26px · Subtítulo, título de card grande
Do campo à cidade, geração de renda
text-h4
18px · Título de card
Do campo à cidade, geração de renda
text-lead
17 → 20px · Parágrafo de abertura
Do campo à cidade, geração de renda
text-body
16px · Texto corrido
Do campo à cidade, geração de renda
text-body-sm
15px · Rótulo, texto denso
Do campo à cidade, geração de renda
text-caption
13px · Data, crédito de foto
Do campo à cidade, geração de renda
text-eyebrow
12px · Rótulo acima do título
Do campo à cidade, geração de renda
Títulos
Rounded Mplus 1c
Peso 500 (Medium) por padrão, como especifica o manual. 700 só em rótulo curto.
AaBbCc ÁÉÍÓÚ Çãõ 0123
Texto
Montserrat
Fonte variável: light, regular, medium e bold saem do mesmo arquivo.
Light 300 — AaBbCc ÁÉÍÓÚ
Regular 400 — AaBbCc ÁÉÍÓÚ
Medium 500 — AaBbCc ÁÉÍÓÚ
Bold 700 — AaBbCc ÁÉÍÓÚ
Botões
Formato de pílula, acompanhando o arredondado do logotipo. Button renderiza <button>; ButtonLink renderiza um link do Next com o mesmo desenho — a maioria das chamadas do site é navegação, não ação.
| Variante | Exemplo | Quando usar |
|---|---|---|
| primary | A ação principal da tela. Uma por bloco. | |
| accent | Chamada de destaque: participar, doar, inscrever. | |
| outline | Ação secundária ao lado de uma primária. | |
| soft | Filtro, chip de categoria. | |
| ghost | Navegação, 'ver todas'. | |
| link | Parece link, mas dispara ação. |
Tamanhos
Estados
Tons de seção
Os mesmos componentes, sem prop extra
O tom da seção reescreve os tokens semânticos. Botão, badge, borda e anel de foco se adaptam sozinhos — nenhum filho precisa saber em que fundo está. No escuro o anel de foco troca para o dourado, porque o laranja não teria contraste suficiente sobre o verde.
Sustentabilidade
Memorial Cambahyba
Tom terra
Registro previsto para a LP do Memorial enquanto ela não tem manual próprio: a mesma paleta, com terra e tijolo no lugar do verde — o assunto é ditadura, memória e justiça, não colheita.
1964–1985
Badges
Fundo no degrau 100 e texto no 800 de cada família, o que garante 7:1. A cor cheia do manual entra no ponto, que é decorativo.
NotíciaSustentabilidadeGeração de RendaDireitos HumanosCartilhaCom pontoPublicadoRascunho
Cards
Base das listagens de Notícias, Artigos, Cartilhas e do Acervo. A proporção da imagem é fixa para o grid não dançar enquanto as fotos do Tina carregam.
Geração de Renda
Feira da Economia Solidária reúne 20 empreendedores
Ponto de comercialização direta entre agricultores familiares e consumidores finais, sem atravessadores.
Direitos Humanos
Cartilha: memória e justiça na Usina Cambahyba
Card sem foto e sem link no título, para Cartilhas e informativos: a ação fica no botão.
Formulário
Base da página de Contato. O Field amarra rótulo, texto de apoio e erro ao campo por aria-describedby, e a borda usa areia-600 porque contorno de controle precisa de 3:1 por WCAG 1.4.11.
Respondemos em até 5 dias úteis.
Estados
Digite um e-mail válido.
Onde o projeto atua hoje.
Texto longo
A classe .prose-campo formata o Markdown que vem do Tina — corpo de notícia, artigo e página de História.
A Usina Cambahyba
A região de Campos dos Goytacazes é nacionalmente reconhecida por abrigar as ruínas da falida Usina Cambahyba, que foi palco de graves agressões aos Direitos Humanos durante a ditadura civil-militar de 1964.
O projeto fortalece a visibilidade das ações em prol da criação do Memorial Cambahyba, para que não nos esqueçamos e para que nunca mais aconteça.
Para que não se esqueça, para que nunca mais aconteça.
Resultados esperados
- 10 agroflorestas implantadas
- 5 hectares de APP recuperados
- 90 pessoas capacitadas nos CEGEPs
Ao final dos três anos de execução, estimamos mais de 850 pessoas beneficiadas diretamente e outras 8.500 indiretamente.
Links
Link interno para a home, link externo para o Sistema Bússola Social(abre em nova aba) e contato por e-mail.
Fonte: Manual de Identidade Visual PCAMC, de Júlia Ambrozini S. Sant'Anna. Tokens em src/app/globals.css, componentes em src/components/ui/, decisões em docs/design-system.md.