Um sistema visual para parcerias que constroem o Brasil.
Este documento define a linguagem visual do site institucional do IDPE® — Instituto de Desenvolvimento de Parcerias Estratégicas. Sistema fiel ao manual oficial da marca (azul, branco, cinzas), com extensões digitais transparentemente sinalizadas. Combina o rigor de uma consultoria técnica com a leveza de uma identidade contemporânea.
Princípio editorial
Tipografia generosa, hierarquia clara, espaços brancos amplos. Lemos o site como um relatório técnico bem diagramado: do macro ao detalhe.
Rigor cromático
Azul institucional, branco puro e cinzas neutros — a paleta original do manual da marca. Cada cor tem uma função; nada decorativo.
Modernidade contida
Movimento sutil, contadores que animam, transições no scroll. Contemporâneo — sem ruído. O briefing pediu moderno; entregamos sem cair em modismo.
Do que isso serve.
Este design system é a fonte da verdade visual para qualquer pessoa construindo, escrevendo ou desenhando para o IDPE — desde o site institucional até relatórios técnicos, peças de licitação e materiais de prospecção a órgãos públicos.
Para quem fala.
O público primário é técnico: gestores públicos, secretários, engenheiros, advogados de licitação. O sistema prioriza credibilidade institucional sobre apelo emocional, sem cair no genérico de "site de governo".
Logo & marca.
A marca IDPE® é uma assinatura tipográfica conectada, com pequenos retângulos azuis como acentos estruturais nos extremos das hastes. O sistema oficial define três lockups — completo, horizontal e sigla — e duas construções — fechada e aberta. Esta seção documenta o que veio do manual da marca; não estende.
Os três lockups
01.1 / LockupsTrês formatos para três situações de uso. O completo é a apresentação oficial; o horizontal resolve faixas estreitas; a sigla existe para espaços pequenos onde só a marca cabe.
Completo · primário
Horizontal
Sigla · favicon & ícone
Anatomia da marca
01.2 / AnatomyCinco retângulos azuis ancoram a construção nas extremidades das hastes — três no topo (acentos das letras i, d e p) e dois na base (bússolas inferiores do d e p). Não são decoração: definem o ritmo construtivo do logo.
a
a
a
b
b
Letterforms conectadas
As quatro letras — i, d, p, e — são traçadas como uma única fita contínua de 1 unidade de espessura. Os retângulos azuis interrompem essa fita de forma calculada, criando os pontos de âncora visual da assinatura. A leitura permanece idpe em minúsculas — nunca capitalize.
Aplicações cromáticas oficiais
01.3 / Color applicationsO manual define seis combinações de tinta × fundo. A versão fechada mantém os acentos em azul institucional; a versão aberta substitui os acentos por preto, usada exclusivamente sobre o próprio azul para garantir contraste. Em qualquer aplicação, são os acentos que assinam a marca.
Cinza sobre branco · oficial
Aberta sobre azul
Fechada sobre pretoFechada sobre cinza grafiteMono cinza · papelaria
Sigla aberta · ícone azulQuando usar cada lockup
01.4 / Hierarchy of useApresentação institucional
Cabeçalho da home, capas de relatórios, peliças oficiais. Sigla acima + nome por extenso ao lado. Use quando há espaço e quando o público pode não conhecer o IDPE.
Topo de página & documentos
Headers de site internos, rodapé de e-mails, papelaria, assinaturas. Otimizada para faixas estreitas onde a versão empilhada não cabe com elegancia.
Ícone, favicon, app
Favicon, avatar de redes sociais, pin de mapa, qualquer espaço quadrado pequeno. Nunca use a sigla isolada quando há espaço para a versão horizontal.
Área de respiro & tamanho mínimo
01.5 / Clear spaceA área de respiro mínima ao redor da marca é igual à altura do retângulo de acento (representada por x). Tamanho mínimo de leitura: 24 px de altura em digital, 12 mm em impresso.
Mínimo impresso · 12 mm
Usos proibidos
01.6 / Don'ts
Não recolorir os acentos
Não rotacionar
Não distorcer
Não usar sobre fundos vibrantes
Não reduzir opacidade
Não aplicar sombras ou efeitos
Paleta de cores.
Três famílias oficiais do manual da marca: azul institucional, branco e a escala de cinzas neutros. Para uso digital, propomos duas extensões — cores semânticas (estados) e um acento editorial em latão — claramente identificadas como extensões do sistema, não como cores oficiais.
Cor primária — Azul IDPE
02.1 / Brand primaryA cor da
instituição.
Escala completa Azul IDPE
Branco e cinzas neutros
02.2 / Surfaces & inkO manual do IDPE usa branco puro como fundo institucional — timbrado, papelaria e uniformes confirmam. Para o digital, derivamos uma escala de cinzas frios e neutros para texto, réguas e separações — alinhada ao branco do manual, sem temperatura quente.
Latão — acento editorial Extensão digital
02.3 / Proposed extensionAviso: este acento não consta no manual oficial do IDPE. É uma proposta de extensão exclusiva para o digital — um único ponto cromático fora do azul para sinalizar níveis editoriais (numeração de capítulos, eyebrows, marcadores de citação, CTAs terciários). Usar com parcimônia ou desativar via Tweaks. Pode ser substituído por um tom escuro do próprio azul.
Cores semânticas Extensão digital
02.4 / StatusCores de feedback para formulários e estados de UI. Também fora do manual original; necessárias para o digital. Mantêm o registro sóbrio do brand — sem verdes neon nem vermelhos berrantes.
Tipografia.
Uma única família — Sora — em cinco pesos. Geométrica, levemente humanista, com um caráter contemporâneo que ecoa a forma do logotipo. Diagramada com generosidade: títulos em escala editorial, leitura em corpo confortável, hierarquia comunicada por peso e tracking, não por cor.
Família Sora
03.1 / FamilyEscala tipográfica
03.2 / Type scaleParcerias estratégicas.
Planejamento que entrega.
Consultoria em licitações públicas
O que fazemos por governos e empresas
Gestão de projetos PPP
Modalidades de contratação
O IDPE estrutura parcerias entre o setor público e o setor privado para acelerar a entrega de obras de infraestrutura, modernizar serviços e ampliar o acesso da população a equipamentos essenciais.
Atuamos junto a prefeituras, secretarias estaduais e órgãos federais no desenho de editais, na modelagem de concessões e na gestão de contratos de longo prazo.
Texto de apoio, legendas estendidas, metadados em listagens e tabelas. Use para informação secundária que precisa permanecer legível.
Edição 2026 / Relatório de Impacto
Hierarquia em uso
03.3 / SpecimenComo modelar uma PPP que ilumina 380 mil pontos em 14 cidades.
Quando a Prefeitura Metropolitana procurou o IDPE, o desafio era duplo: substituir um parque luminotécnico envelhecido e, ao mesmo tempo, criar um modelo financeiro sustentável de longo prazo. A resposta passou por uma concessão administrativa de 20 anos, com pagamentos vinculados a indicadores de desempenho.
A modelagem técnica foi estruturada em quatro frentes — cadastro do parque, projeto luminotécnico, plano de negócios e desenho do edital — em paralelo a um processo intensivo de consulta pública. O resultado foi um contrato com 17 indicadores de qualidade auditáveis em tempo real.
Grid & espaçamento.
Grid de 12 colunas com goteira de 24 px e contêiner máximo de 1280 px. Em telas estreitas, colapsa para 4 colunas. A escala de espaçamento é múltipla de 4 px — base de qualquer ritmo vertical.
Grid de 12 colunas
04.1 / GridEscala de espaçamento
04.2 / SpacingBase 4 px. Use os tokens — não inverte valores arbitrários. A consistência da escala é o que dá ritmo ao layout editorial.
Breakpoints
04.3 / Responsive| Token | Largura mínima | Colunas | Margem lateral |
|---|---|---|---|
| sm | 360 px | 4 | 24 px |
| md | 768 px | 8 | 40 px |
| lg | 1024 px | 12 | 64 px |
| xl | 1280 px | 12 | 80 px |
| 2xl | 1536 px | 12 | auto · contêiner fixo |
Iconografia.
Ícones lineares, contorno de 1.4 px, cantos arredondados, tamanho-base 24 px. Construídos sobre malha hexagonal — herança da identidade — mas sem ostentar. Ferramentas, não enfeite.
Biblioteca essencial
05.1 / LibraryEspecificação
05.2 / Specs1.4 px
Espessura constante. Não engrosse para "destacar" — use o ícone em tamanho maior, mantendo o stroke proporcional.
16 / 24 / 32
Três tamanhos canônicos. 24 px é o padrão para UI; 16 px para inline em texto; 32 px para destaques em cards de feature.
currentColor
Ícones herdam a cor do texto adjacente. Para destaque, use cobalto 800 ou latão. Evite ícones em cores semânticas fora de seu contexto.
Botões.
Quatro variantes — primário, secundário, fantasma, acento — em três tamanhos. Cantos suavemente arredondados (2 px), tipografia em maiúsculas com tracking generoso. O movimento é discreto: 1 px de elevação no hover, sem mais.
Variantes
06.1 / VariantsTamanhos
06.2 / SizesEstados
06.3 / StatesQuando usar cada variante
06.4 / HierarchyAção principal
Uma única vez por tela. "Solicitar proposta", "Enviar formulário". Cobalto sólido — autoridade institucional.
Ação alternativa
Convive com o primário. "Saber mais", "Ver projetos". Borda fina, sem fundo — discreto.
Ação inline
Dentro de cards e listas. "Ler caso →". Sem moldura, conduzido pela seta.
Destaque editorial
Latão. Reservado para CTAs de download de relatórios, dossiês e materiais premium. Use 1× por página, no máximo.
Formulários.
Campos limpos, com rótulo em maiúsculas (eyebrow) e baseline reforçada — herança do papel ofício institucional. Foco indica intenção com leve halo cobalto. Validação semântica seguindo a paleta de status.
Campos
07.1 / InputsValidação
07.2 / ValidationCards & containers.
Cards são unidades editoriais — cada um com numerador em latão, título sucinto e descrição em texto secundário. Quatro variantes: padrão, feature (régua superior), escuro e estatístico.
Anatomia
08.1 / AnatomyModelagem econômico-financeira
Estruturação de fluxo de caixa, TIR, plano de negócios e modelagem de risco para projetos de longo prazo.
Concessão de iluminação pública
Modelo de PPP que substituiu 380 mil pontos em 14 cidades, com indicadores de desempenho auditáveis.
Ler caso completoDesenho de editais
Redação técnica e jurídica de editais alinhados à Nova Lei de Licitações e à legislação de PPPs.
Cards estatísticos
08.2 / StatBadges
08.3 / BadgesHome institucional.
O sistema em uso, com foco em municípios de pequeno e médio porte e em investidores que estruturam operações de PPP.
Institucional.
Sobre o IDPE, princípios, trajetória e governança.
Soluções.
Quatro frentes integradas, do diagnóstico à fiscalização, e o pipeline para investidores qualificados.
IDPE em Números.
Mapa de atuação, contadores animados e distribuição setorial.
Transparência.
Repositório público de relatórios, demonstrações financeiras e canais de LAI.
Publicações.
Análises, casos e opiniões em formato editorial. Newsletter trimestral.