01Valor
Liberdade
Tá no nosso nome. Tá na nossa alma. Liberdade pra trabalhar, pra dialogar, pra sugerir sem medo de errar e pra voltar atrás quando preciso.
Identidade Visual · Agência Uhuru · v1.0
Design System
Uhuru
Guia visual para criação de materiais, apresentações e experiências digitais. Uma referência prática para a equipe e para qualquer projeto construído sobre a marca Uhuru.
Cor de marca
#0591A1
Acento
#FF6027
Tipografia
Gotham
Versão
2026 · UHURU
01 / Essência
Valores que guiam tudo
A identidade visual da Uhuru nasce dos sete valores da casa. Cada decisão de cor, tipografia e composição traduz essa essência em forma.
02Valor
Respeito
O limite que até a liberdade precisa. Respeito aos clientes, aos compromissos no papel e na palavra, ao tempo e ao investimento confiados a nós.
03Valor
Criatividade
Pensar no problema, agir com propósito, discutir soluções e chegar numa saída viável. Desligar o piloto automático e voar pra longe da mesmice.
04Valor
Proatividade
Ficar desconfortável na zona de conforto. Aqui ninguém espera: pede ajuda, oferece apoio, dá ideias, compartilha novidades e segue aprendendo.
05Valor
Engajamento
Envolvimento pessoal com espírito de equipe. Curtir e compartilhar desafios entendendo que todos podem contribuir — e que envolvimento encoraja.
06Valor
Transparência
Clareza nos combinados, nas expectativas e nas atitudes. Ser ético e verdadeiro com o outro e com a gente mesmo, sem dar espaço pra desconfiança.
07Valor
Diversidade
Um santo remédio contra a ignorância. Promover diversidade nas relações e projetos abre olhos, ensina o que não sabemos e cria novas possibilidades.
02 / Logo
Aplicação da marca
A marca Uhuru é construída a partir do símbolo U e da tagline. Use as variações abaixo conforme o suporte, garantindo sempre área de respiro mínima equivalente à altura do U. Clique em qualquer aplicação para ampliar.
Aplicações principais
Variações e símbolo
Versão monocromática
Clique para ampliar. Use apenas quando não houver cor disponível: impressões one-color, gravações, assinaturas em PDFs jurídicos.
Não faça
- · Não recolorir, distorcer, rotacionar ou aplicar efeitos
- · Não aplicar sobre fotos sem contraste suficiente
- · Não recriar a logo manualmente — use sempre o SVG oficial
- · Não usar a versão sem tagline quando a marca aparece pela primeira vez no material
- · Não reduzir abaixo de 24px de altura na versão horizontal
03 / Cores
Paleta cromática
Turquesa é a voz. Preto e branco dão o ritmo editorial. Laranja entra como pontuação curta — nunca como protagonista.
Turquesa Uhuru
#0591A1primaryCor de marca, destaques principais, CTAs
Turquesa Claro
#1DB9BCprimaryPadrão gráfico, detalhes e camadas sobre o turquesa
Turquesa Profundo
#03707DprimaryHover, contraste sobre turquesa
Preto Uhuru
#0A0A0AprimaryFundos institucionais, tipografia
Branco
#FFFFFFprimaryRespiro, fundos editoriais, base
Laranja Uhuru
#FF6027accentAcento — use com parcimônia
Gray 100
#F4F4F4neutralSuperfícies sutis, blocos de fundo
Gray 300
#CFCFCFneutralBordas, divisores, estados desabilitados
Gray 700
#3D3D3DneutralTexto secundário, captions
Gradiente Turquesa
linear-gradient(135deg, #4FB8C2, #0591A1, #03707D)
Gradiente Laranja
linear-gradient(135deg, #FFB47A, #FF6027, #B83A12)
Exemplos de contraste
Aa Bb Cc
Preto + Branco
Aa Bb Cc
Turquesa + Branco
Aa Bb Cc
Branco + Preto
Aa Bb Cc
Laranja + Branco
04 / Tipografia
Sistema tipográfico
Gotham é a única família tipográfica da Uhuru. Para ambientes onde a Gotham não está disponível (Google Workspace, Office, web pública sem licença), use Montserrat como substituta — o desenho é próximo e mantém o tom editorial.
Display · Gotham Black
Liberdade
criativa.
criativa.
H2 · Section title · Gotham Bold
Tudo respira
Eyebrow · Gotham Medium · caixa alta
Análise de Target · Mídia
Corpo · Gotham Book · 16/24
Texto corrido em Gotham Book, com altura de linha confortável. Ideal para parágrafos longos em apresentações, propostas e materiais internos da Uhuru.
Texto longo · Gotham Light
Use o peso Light em blocos editoriais extensos, citações e introduções, quando o objetivo é leveza visual e leitura calma.
Família oficial
Gotham
Usada em toda a comunicação Uhuru: capas, títulos, corpo, identificação institucional. Pesos servidos via web em formato.woff2.
font-family: "Gotham", "Montserrat", Arial, sans-serif;
Fallback · Montserrat
Substituta gratuita da Gotham, distribuída pelo Google Fonts. Use em ambientes sem licença Gotham (sites públicos, apresentações compartilhadas, e-mails marketing) mantendo a mesma hierarquia de pesos.
font-family: "Montserrat", Arial, sans-serif;
Sistema · Office & G-Suite
Arial
Último fallback para documentos editáveis (.docx, .pptx, planilhas) onde Gotham e Montserrat não estão instaladas.
Pesos da Gotham · uso recomendado
300LightA diversidade ensina o que a gente não sabe.
400BookA diversidade ensina o que a gente não sabe.
500MediumA diversidade ensina o que a gente não sabe.
700BoldA diversidade ensina o que a gente não sabe.
900BlackA diversidade ensina o que a gente não sabe.
900Ultra · displayA diversidade ensina o que a gente não sabe.
05 / Elementos gráficos
Padrão e ícones
O padrão gráfico oficial é formado pela repetição do símbolo Uhuru. Combine com tarjas turquesa, blocos verticais e o set de ícones para construir composições com identidade.
BLOCO
Bloco vertical turquesa
Recurso recorrente nas capas: barra de cor + área editorial.
TARJA TURQUESA
Tarja horizontal
Usada para destacar títulos e divisões fortes.
Linhas finas / divisores
Pesos discretos para organizar listas, índices e rodapés.
Set de ícones oficial
107 pictogramas em traço fino, todos no turquesa institucional. Mantenha o stroke uniforme e nunca preencha as áreas internas — o ícone perde a leveza característica da marca.
06 / Componentes
Componentes digitais
Padrões prontos para uso em produtos, sites e dashboards. Mantém o contraste forte e o uso comedido do laranja.
Botões
Badges
Em andamentoAtençãoNovoRascunho
Alerta de insight
i
Insight da semana
O engajamento aumenta 32% quando o conteúdo é publicado entre quinta e sexta. Considere reorganizar a agenda editorial.
Planejamento
Estrutura mínima de conteúdo: título, descrição e CTA. Use para listas de projetos, serviços ou recursos.
Mídia
Variação em turquesa para chamar atenção em listas longas. Use uma única vez por seção para preservar o destaque.
Benchmark
Use sobre fundo escuro para análises, dados ou momentos institucionais.
Matriz · análise de target
Overview de canais
| Canal | Audiência | Engajamento | Status |
|---|---|---|---|
| 128 mil | 4.8% | Ativo | |
| TikTok | 62 mil | 7.2% | Em alta |
| 31 mil | 2.1% | Em revisão | |
| YouTube | 18 mil | 3.4% | Ativo |
Imagem + Texto
Blocos editoriais 50/50
Estrutura recorrente em capas e slides de seção. Alterne lados, cores e densidades para criar ritmo ao longo do material.
07 / Templates
Layouts de apresentação
Composições inspiradas no template oficial de PPT da Uhuru, adaptadas para web. Use como base para slides, propostas e páginas internas.
Capa escura16:9
Capa turquesa16:9
Capa clara16:9
Imagem + bloco turquesa16:9
Página de índice16:9
Overview em colunas16:9
08 / Boas práticas
Como aplicar com consistência
Princípios curtos pra manter a marca coerente em apresentações, páginas web, materiais internos e projetos gerados com IA.
✓ Faça
Use turquesa como cor de identidade em CTAs, destaques e blocos institucionais.
✕ Evite
Não use turquesa em parágrafos longos ou textos contínuos — perde força.
✓ Faça
Aplique fundo preto para capas, seções de impacto e materiais institucionais.
✕ Evite
Não combine preto com laranja em áreas grandes — vibra e cansa a leitura.
✓ Faça
Use caixa alta + letter-spacing em títulos curtos e eyebrows.
✕ Evite
Não aplique caixa alta em parágrafos: prejudica a leitura.
✓ Faça
Repita o padrão gráfico em áreas decorativas com baixa opacidade.
✕ Evite
Não use o padrão atrás de textos — comprometeria o contraste.
✓ Faça
Mantenha cantos arredondados moderados (8–16px) em cards e botões.
✕ Evite
Não misture raios muito diferentes na mesma tela.
✓ Faça
Garanta contraste mínimo AA entre fundo e texto em qualquer aplicação.
✕ Evite
Não use cinza claro sobre branco para textos importantes.
09 / Tokens
Design tokens em CSS
Todos os tokens vivem em :root e podem ser usados em qualquer projeto. Copie o bloco abaixo para iniciar novos projetos com a base Uhuru.
:root {
/* Cores */
--uhuru-turquoise: #0591A1;
--uhuru-turquoise-dark: #03707D;
--uhuru-turquoise-light:#4FB8C2;
--uhuru-orange: #FF6027;
--uhuru-black: #0A0A0A;
--uhuru-white: #FFFFFF;
--uhuru-gray-100: #F4F4F4;
--uhuru-gray-300: #CFCFCF;
--uhuru-gray-700: #3D3D3D;
/* Gradientes */
--uhuru-gradient-turquoise:
linear-gradient(135deg,#4FB8C2,#0591A1,#03707D);
--uhuru-gradient-orange:
linear-gradient(135deg,#FFB47A,#FF6027,#B83A12);
/* Tipografia — Gotham é a única família oficial.
Montserrat (Google Fonts) é o fallback gratuito. */
--font-display: "Gotham Ultra","Gotham","Montserrat",Arial,sans-serif;
--font-sans: "Gotham","Montserrat",Arial,sans-serif;
/* Raios */
--radius-xs: 4px; --radius-sm: 8px;
--radius-md: 14px; --radius-lg: 22px;
/* Sombras */
--shadow-md: 0 10px 30px -12px rgba(0,0,0,.18);
--shadow-glow: 0 20px 60px -20px rgba(5,145,161,.6);
/* Espaçamentos */
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 24px; --space-6: 32px;
--space-7: 48px; --space-8: 64px; --space-9: 96px;
}Raios
xs
sm
md
lg
pill
Sombras
sm
md
glow
Breakpoints sugeridos
sm≥ 640px
md≥ 768px
lg≥ 1024px
xl≥ 1280px