Territórios12 jun 2026
Primeiro ecoponto entra em operação na Gamboa
Vinte e cinco agentes comunitários ambientais assumem a coleta seletiva no Território 1.
Ler notícia →
Design System · v1.0 · Julho 2026
Uma linguagem visual para o site institucional do Comum Viver
Este documento define os fundamentos e os componentes que sustentam a presença digital do projeto: marca, cor, tipografia, grafismo, grid e interface. Tudo derivado do manual de identidade visual — nada inventado fora dele.
O sistema serve a quatro públicos ao mesmo tempo: financiadores e parceiros institucionais, pessoas em situação de rua e agentes ambientais comunitários, voluntários e doadores, e empresas geradoras de resíduos. A hierarquia visual foi construída para que os quatro se reconheçam na mesma página.
O projeto em números
100agentes comunitários ambientais formados
4ecopontos nos territórios
1centro de reciclagem
1Universidade das Ruas
{{ fitasDivisor }}
01
Marca
A assinatura combina um logotipo em duas vozes — «comum» em fina serifada, «viver» em bold — e um símbolo de três fitas em movimento contínuo, que representa o ciclo da economia circular e das relações que o projeto costura no território.
Assinatura principal
Uso preferencial, sobre fundos claros e neutros. Largura mínima de 160 px em tela.
Versão negativa
Aplicação oficial sobre verde profundo: logotipo em limão, fita laranja preservada e o vazio interno na cor do fundo.
Símbolo isolado
Avatar de redes sociais, favicon, selos e aplicações onde o logotipo não caberia legível.
Monocromática verde
Sobre menta e limão, ou quando o material admite uma só cor de impressão.
Área de respiro
Margem livre equivalente à altura da palavra «viver» em todos os quatro lados.
O que não fazer
Não distorcer, inclinar ou aplicar sombra e contorno.
Não recolorir as fitas nem trocar a cor do logotipo por laranja ou limão.
Não aplicar a versão colorida sobre fotografia sem plano de fundo sólido.
Não separar o símbolo do logotipo dentro de uma mesma assinatura.
02
Cor
Base clara em toda a navegação; verde profundo reservado ao cabeçalho, ao rodapé e a seções-âncora. Laranja é cor de ação — nunca decorativa. Limão e menta constroem os planos de apoio.
Primária
Verde Profundo
#183028 · rgb(24 48 40)
Cabeçalho, rodapé, seções de imersão e todo o texto corrido sobre fundo claro. Contraste 14,1:1 sobre branco.
Primária
Verde Marca
#1A454A · rgb(26 69 74)
Cor do logotipo. Texto de apoio, links, ícones e bordas ativas. Contraste 10,5:1 sobre branco.
Ação
Laranja Fita
#EF9A2F
Botões primários, foco e destaques numéricos. Sempre com texto verde profundo por cima — nunca branco.
Apoio
Limão Fita
#B1D13F
Grafismo, marcadores, tags de categoria e a fita de progresso do rodapé.
Apoio
Menta
#B5E3D8
Planos de fundo de seção, cards de depoimento e texto secundário sobre verde profundo.
Combinações aprovadas
Todas as duplas abaixo passam AAA para texto corrido (7:1) exceto a de ação, que passa AA em 6,3:1 e é reservada a botões e títulos grandes.
Texto padrão
#183028 / #FFFFFF · 14,1:1
Texto em imersão
#B5E3D8 / #183028 · 10,0:1
Seção de apoio
#183028 / #B5E3D8 · 10,0:1
Ação
#183028 / #EF9A2F · 6,3:1
03
Tipografia
Duas famílias, papéis fixos. Forum carrega a voz institucional em títulos e números; Poppins em pesos leves conduz leitura, rótulos e interface. O manual usa Bely Display no logotipo — ela permanece exclusiva da marca e não é usada em texto.
Display
Forum · Regular 400
Aa Bb Cc
Economia circular que transforma vidas — trabalho digno, renda justa, futuro real.
Títulos de página e seção, números de impacto, citações. Nunca abaixo de 20 px, nunca em caixa alta, nunca em bloco de texto longo.
Texto e interface
Poppins · 200 / 300 / 400 / 500
Aa Bb Cc
Separe. Doe. Transforme. A rede solidária começa no seu prédio, na sua empresa, na sua rua.
Corpo de texto em 300, rótulos e botões em 500. ExtraLight (200) apenas em números grandes e frases curtas de abertura.
Escala tipográfica
D1 · 76/78 · Forum
Comum Viver
D2 · 44/48 · Forum
Histórias que inspiram
H3 · 28/34 · Forum
Universidade das Ruas
Lead · 20/32 · 300
Inclusão produtiva de pessoas em situação de rua.
Corpo · 17/28 · 300
Educação popular, trabalho socioambiental e reciclagem no centro do Rio.
Apoio · 14/22 · 300
Legendas de foto, notas de rodapé e metadados de notícia.
Rótulo · 12 · 500
Notícias · Territórios · Rede Solidária
04
Grafismo
As três fitas do símbolo saem do logotipo e viram sistema: divisores entre seções, máscaras orgânicas de fotografia e planos de fundo em escala ampliada. É o elemento que dá energia e movimento às páginas sem depender de ilustração.
Divisor de fitas
{{ fitasDivisorClaro }}Separa blocos de conteúdo de mesma hierarquia. Altura fixa de 96 px, largura total do container, sempre na ordem laranja–limão–verde de cima para baixo.
Máscara orgânica A. Retratos e cenas de formação. Uma por seção, no máximo.
Máscara orgânica B. Território, ecopontos e materiais. Alternar com a A ao longo da página.
Sem máscara. Fotografia documental, relatórios de impacto e imprensa. Canto de 24 px.
05
Grid e espaçamento
Grid de 12 colunas, container máximo de 1240 px, goteira de 24 px e margem lateral de 40 px no desktop — 20 px no mobile. A escala de espaçamento é múltipla de 4.
{{ colunasGrid }}
12 colunas · goteira 24 pxcontainer 1240 px
Escala de espaçamento
{{ escalaEspaco }}
Raio e elevação
8 px — inputs, tags, botões pequenos
14 px — cards internos, blocos de dado
24 px — cards de conteúdo e seções
Pílula — botões principais e filtros
Elevação única — 0 8px 24px rgba(24,48,40,.08), só em hover
06
Componentes
Cada componente traz seus estados documentados. A ação primária do site é uma só — «Cadastre-se na Rede Solidária» — e por isso o botão laranja aparece no máximo uma vez por dobra.
6.1 Botões e links
Primário
Laranja com texto verde. Uma ocorrência por dobra.
Secundário
Verde profundo sólido. Navegação de conteúdo.
Contorno
Ações institucionais e de parceria.
Alvo mínimo
48 px de altura, foco laranja de 3 px com 3 px de folga.
6.2 Cabeçalho e rodapé
6.3 Hero de página
6.4 Cards
Nome do agente
Território 2 · Centro e Lapa
Depoimento curto, em primeira pessoa, sobre o que mudou desde a formação.
Histórias que inspiram →
Universidade das Ruas
Espaço de formação educacional, profissional e cultural dedicado prioritariamente à população em situação de rua e a catadores.
Saiba mais →Três variações, um só raio de 24 px: notícia com imagem e tag, história em menta com citação em Forum, iniciativa com símbolo no lugar da foto. Elevação apenas em hover.
6.5 Bloco de indicadores
100agentes comunitários ambientais formados
4ecopontos de coleta e pesagem
1centro de reciclagem de resíduos sólidos
1Universidade das Ruas
6.6 Territórios
{{ territorios }}
Cada território reúne 25 agentes acompanhados por um agente mobilizador. O bloco é a base da futura página de ecopontos, onde ganha mapa interativo.
6.7 Formulários
Cadastre-se na Rede Solidária
Separe, doe, transforme. Moradores, condomínios e empresas dos bairros de incidência.
Receba o boletim
Relatórios de impacto, podcast e notícias do Hub.
Estados de campo
Padrão — borda #B2B2B2, 1 px.
Foco — borda #1A454A e contorno laranja de 3 px.
Erro — borda laranja de 2 px, rótulo laranja e mensagem em texto, nunca só cor.
Desabilitado — fundo #F2F2F2, texto #B2B2B2.
6.8 Metodologia em etapas
{{ etapas }}
6.9 Perguntas frequentes
{{ faq }}
6.10 Chamada de seção
07
Acessibilidade
O site fala com pessoas que acessam a internet por celulares simples, redes instáveis e telas pequenas. As regras abaixo são obrigatórias, não recomendações.
Contraste AAA por padrão
Texto corrido sempre em #183028 ou #1A454A sobre claro, ou #B5E3D8 sobre verde profundo — todos acima de 7:1. Laranja e limão nunca como cor de texto sobre fundo claro.
Cor nunca sozinha
Erro, sucesso, item ativo e categoria sempre acompanhados de texto, ícone ou espessura de borda. A fita limão do menu ativo vem com peso 500 no rótulo.
Alvos de 48 px
Botões, links de navegação e campos com no mínimo 48 px de altura e 8 px de separação. Corpo de texto nunca abaixo de 16 px no mobile.
Foco visível e ordem lógica
Contorno laranja de 3 px com 3 px de folga em todo elemento focável, link «pular para o conteúdo» no topo e hierarquia de títulos sem saltos.
Linguagem simples
Frases curtas, voz ativa, sem sigla sem explicação. Termos do projeto — ecoponto, agente ambiental comunitário, Rede Solidária — definidos na primeira aparição de cada página.
Imagem com descrição
Toda fotografia com texto alternativo que descreva a cena e as pessoas com dignidade. Fotos decorativas com alt vazio. Grafismo de fundo sempre decorativo.