Cores, tipografia, logotipo e padrões oficiais da TecTupi — referência para materiais, apresentações, redes sociais e parceiros.
Versões oficiais da marca — use sempre os arquivos aprovados, respeitando a margem de segurança e o tamanho mínimo.
Principal · fundo claro
Negativa · fundo de cor
Monocromática
Margem de segurança igual à metade da largura do símbolo em todos os lados — nenhum outro elemento entra nessa área.
24px em tela · 8mm em impressos
Assim a marca não deve aparecer:
Não distorça as proporções do símbolo ou do nome.
Não aplique cores fora da paleta oficial.
Não adicione sombras, contornos ou efeitos.
Não gire nem incline a marca.
Nove cores oficiais com nome, código e papel — use sempre as cores da paleta nos materiais da marca.
Primária da marca: botões, kickers e ícones. PANTONE 342C — floresta amazônica e sustentabilidade.
Topo da página (herói), gradientes e títulos institucionais. PANTONE 293C — confiança e credibilidade.
Acento dos sobretítulos (kickers), destaques e ao passar o mouse (hover). PANTONE 158C — energia e calor humano.
Acento escuro e detalhes. PANTONE 7533C — estabilidade e raízes.
Destaque de texto e ênfase em títulos.
Texto e apoio sobre os fundos azuis do herói.
Ao passar o mouse (hover) na cor primária e versão dela no modo escuro.
Destaques claros: selo (badge) de plano, acordeão e bordas de destaque.
Complemento do Azul Rio — detalhes secundários.
Como o logotipo pode (e deve) aparecer sobre cada fundo da marca.
Fundo claro (preferencial)
Fundo verde institucional
Fundo azul do herói
Versão monocromática
Preserve sempre o contraste: sobre fundos escuros use a versão negativa (branca); sobre claros, a versão colorida. Nunca reposicione os elementos.
Quatro famílias com papéis fixos: títulos, sobretítulos, corpo e botões.
Bold/ExtraBold 700–800 · títulos H1 a H4 e de cartão (card)
Regular/Bold · caixa alta com espaçamento de letras nos sobretítulos (kicker)
Regular 400 · 16px · entrelinha 1.7
Semi-Bold 600 · 15.5px · formato arredondado (pill)
Parágrafo de abertura da seção, em cinza de apoio.
clamp(1.05–1.27rem) · --mutedTexto corrido do site, em Open Sans com entrelinha confortável.
16px · 1.7 · --inkChamadas para ação (CTAs) da marca — sempre claras, com destino óbvio e bom contraste.
Botão principal — Verde Floresta #006633
Ação secundária — Laranja #E68A00
Menor peso — borda 1.5px, fundo transparente
Sobre o gradiente azul do herói
Contato direto — verde WhatsApp
Símbolos oficiais da marca — uso livre nos materiais TecTupi.
Como estruturar cartões, grades, textos e números — exemplos diagramáticos dos padrões do site.
Parágrafo curto com a explicação do cartão.
Ícone, título e parágrafo — a mesma estrutura usada em Soluções, Produtos e Sobre.
Conteúdo em colunas múltiplas de 2, 3 ou 4 — margens consistentes e cartões uniformes.
Abertura em cinza de apoio.
Corpo de texto em Open Sans, entrelinha confortável.
Sobretítulo, título, abertura e corpo — sempre nessa ordem, com contraste claro.
Estatísticas em destaque: número grande e rótulo curto — como "20+ anos de experiência".
Exemplos vivos dos componentes que aparecem nas páginas públicas.
Renderizado a partir dos campos preenchidos no painel administrativo.
Bloco de ícone, título e parágrafo — o mesmo usado nas seções de Soluções.
Como o card de plano aparece em /solucoes
Sim: mesmos componentes visuais, com conteúdo preenchido no painel.
No painel administrativo da TecTupi, na página correspondente.
Slogan, fórmulas e tom de voz da marca.
Marcas que caminham com a TecTupi — grade padrão para exibir parceiros e clientes.