📘 Manual de Marca — Dito e Feito¶

Este documento define a identidade visual do aplicativo Dito e Feito, garantindo consistência entre design, interface e comunicação.

🎨 Cores¶

A paleta de cores foi pensada para transmitir seriedade, confiança e eficiência, com alto contraste e baixa saturação.

🧱 Base da interface¶

Fundo principal: azul quase preto
Superfícies / cards: azul escuro levemente mais claro ou grafite
Texto principal: branco + cinza claro

🔵 Destaques¶

Destaque primário (ações principais, links, foco): azul petróleo
Destaque secundário (sucesso, confirmação, estados positivos): verde escuro
Alertas (erro, atenção, crítica): bordô discreto

🔤 Tipografia¶

A tipografia foi escolhida para priorizar legibilidade, clareza e profissionalismo, sem perder modernidade.

🧭 Hierarquia tipográfica¶

Títulos principais (H1): IBM Plex Sans Bold
Subtítulos (H2 / H3): IBM Plex Sans Medium
Texto geral: Inter Regular
Botões e ações: Inter SemiBold
Labels pequenos: Inter Medium / Regular
## 🧭 Hierarquia tipográfica
- Títulos principais (H1): IBM Plex Sans Bold
- Subtítulos (H2 / H3): IBM Plex Sans Medium
- Texto geral: Inter Regular
- Botões e ações: Inter SemiBold
- Labels pequenos: Inter Medium / Regular

🧠 Direção de estilo¶

A identidade do Dito e Feito é baseada em:

Execução clara e objetiva
Interface limpa e sem ruído visual
Sensação de confiabilidade e controle
Design corporativo moderno

⚙️ Princípios de design¶

Evitar excesso de cores ou saturação
Priorizar contraste e legibilidade
Usar cores de destaque com moderação
Manter consistência em toda a UI

🎨 Estudo de Identidade Visual: Sistema de Cores (Frontend)¶

Projeto: Dito e Feito - Monitoramento de Coerência entre Discursos e Votação Área: Frontend / UI Design Documento base: Manual de Marca — Dito e Feito

📌 Objetivo do Estudo¶

Definir e padronizar a paleta de cores exata (em códigos Hexadecimais) que será utilizada no desenvolvimento da interface do portal. O objetivo é garantir que o time de Frontend consiga aplicar os estilos no CSS de forma consistente, respeitando as diretrizes de design que exigem um visual corporativo, moderno e de alta legibilidade (Dark Mode focado em dados).

📖 Contexto: Diretrizes da Marca¶

De acordo com o Manual de Marca, o sistema "Dito e Feito" deve transmitir seriedade, confiança e eficiência. As regras de ouro para o design são: * Fundo: Temáticas escuras (Dark Mode), utilizando azuis profundos ou grafite. * Texto: Alto contraste para facilitar a leitura de documentos e discursos. * Destaques: Uso moderado de cores para não poluir os gráficos. Azul petróleo para ações, verde para coerência (positivo) e bordô para incoerências (alerta).

🧪 Propostas de Paletas Estudadas¶

atual paleta de cores¶

Tons baseados em ardósia (slate). É a paleta que melhor equilibra o aspecto "governamental sério" com a modernidade das startups de dados. As cores de alerta ganham destaque natural sem cansar a vista.

Elemento da Interface	Cor Hexadecimal	Referência Visual
Fundo Principal	`#0F172A`	⬛ (Azul quase preto)
Superfícies/Cards	`#1E293B`	🔲 (Azul escuro)
Texto Principal	`#F8FAFC`	⬜ (Branco Gelo)
Texto Secundário	`#94A3B8`	🌫️ (Cinza Azulado)
Destaque (Ações/Links)	`#0F766E`	🟦 (Azul Petróleo)
Positivo (Coerência)	`#166534`	🟩 (Verde Floresta)
Alerta/Erro (Incoerência)	`#831843`	🟫 (Bordô Profundo)