Como a Tecnomod se escreve, se desenha e fala.
Esta página não descreve o padrão visual: ela é o padrão rodando. Cada cor, cada tamanho de fonte e cada botão aqui usa exatamente o mesmo código do site — então não tem como ficar desatualizada.
O nome
A grafia correta é Tecnomod — uma palavra só, T maiúsculo, resto minúsculo.
Sobre a confusão que mais custa: existe no mercado uma “Tecnomódulo”, e ela já aparece misturada em busca. Nunca escreva “Tecnomódulo” ao se referir à Tecnomod, nem como variação, nem em legenda de foto, nem em nome de arquivo.
Em texto corrido não se usa símbolo de marca registrada. Em contrato e documento societário vale a razão social completa: Tecnomod do Brasil LTDA, CNPJ 43.286.437/0001-46.
O logotipo
Existem duas versões, e a escolha é só uma: fundo claro pede a preta, fundo escuro pede a branca. Não há versão colorida.
Preta sobre branco. A aplicação padrão.
Preta sobre banda clara. Também correta.
Branca sobre tinta. É a do rodapé do site.
Branca sobre azul escuro. Só a partir de --blue-800; azul claro não tem contraste.
Área de respiro
Nada encosta no logotipo. A margem livre mínima em todos os lados é a altura da letra T do próprio logotipo — a regra é relativa, então vale em qualquer tamanho, do favicon à fachada.
Tamanho mínimo
120 px de largura em tela e 25 mm em impresso. Abaixo disso a palavra deixa de ser legível e o certo é usar o símbolo do favicon.
O que não fazer
A paleta
Quatro famílias, e cada uma tem um papel só. A regra que mais se descumpre é a do ouro, então ela vem primeiro:
Ouro é credencial, nunca interação. Ele existe para marcar prova,
selo e destaque de credibilidade — como forma, não como texto. O
--gold-500 tem 2,29:1 sobre branco e o
--gold-600 tem 3,29:1: os dois reprovam para texto em
14 px. Onde é preciso destacar um link, o padrão é
texto em tinta com sublinhado dourado.
E a segunda: verde é exclusivo do WhatsApp. Não é a cor de sucesso da marca, não é cor de destaque e não aparece em nada que não seja aquele botão.
Cada amostra abaixo traz a razão de contraste medida nos dois fundos do site — branco e tinta. O critério é o WCAG 2.1 nível AA para texto normal: 4,5:1. Cor marcada como não é cor de texto existe para preencher, contornar ou sublinhar, e nunca para escrever — independentemente do fundo.
Tinta — a base
Azul — o acento de interação
Ouro — credencial, nunca interação
Verde — exclusivo do WhatsApp
Os valores foram calculados a partir do hex pela fórmula de luminância relativa do WCAG — o mesmo cálculo que roda no teste automático de acessibilidade do site.
A tipografia
Duas famílias, com divisão de trabalho clara:
- Poppins — geométrica, peso 700. Só em título. É o que dá a voz da marca.
- Manrope — peso 400 a 800. Todo o resto: corpo, tabela, botão, sobrancelha, legenda.
As duas são servidas pelo próprio domínio, em subconjunto latino. Nunca carregue de CDN de terceiro — isso quebraria o que a Política de Cookies afirma sobre não haver terceiro no site.
Título usa --tracking-hero (−0,01em) porque texto grande precisa de
aperto. Sobrancelha usa --tracking-eyebrow (+0,12em) porque caixa alta pequena
precisa do contrário.
Poppins 700
Estrutura pronta para operar
H1 da home e das páginas de solução
Poppins 700
Quatro coisas decidem a contratação
H2 de seção
Poppins 700
Estoque a pronta entrega
H3 de card e H2 de documento
Manrope 400
O módulo chega para ser posicionado, não construído.
Linha de apoio do hero
Manrope 400
É a medida em que o site inteiro é lido, e por isso a que mais importa acertar.
Corpo de texto padrão do site
Manrope 400
1 chuveiro para cada 10 trabalhadores ou fração
Tabela, ficha técnica e nota
Manrope 700, caixa alta, +0,12em
O QUE SUSTENTA A ENTREGA
Sobrancelha acima do título
Espaçamento e forma
Toda distância no site é múltiplo de 4. Não existe margem de 15 px nem padding de 22 px: se não está na régua, está errado.
Raios
--radius-md (8px) em caixa e campo, --radius-lg (12px) em
cartão e imagem, --radius-pill em botão e etiqueta. Canto reto só em tabela e
banda de largura total.
Largura
O conteúdo trava em --container-max (1100px). Texto corrido de documento
trava em 72 caracteres por linha — acima disso o olho perde a linha
ao voltar.
Botões
Quatro variantes, e a escolha não é estética: cada uma diz uma coisa diferente sobre o que vai acontecer.
- Escuro (
btn--dark) — a ação principal. Um por tela, no máximo. - Verde (
btn--green) — somente WhatsApp. Usar verde para outra coisa quebra a associação que o site inteiro construiu. - Claro (
btn--light) — ação sobre fundo escuro. - Contorno (
btn--outline) — ação secundária sobre fundo escuro.
Altura mínima de 44 px (--control-h), que é o alvo de
toque confortável no celular. Texto de botão é verbo: “Solicitar
orçamento”, não “Orçamento”.
Voz e tom
A marca fala como um técnico experiente explicando para um comprador com pressa. Não é institucional, não é publicitária e não é professoral. Cinco hábitos sustentam isso:
Resposta antes da explicação. Cada bloco de texto começa pelo que a pessoa quer saber, e só depois desenvolve. Vale para seção de página, resposta de FAQ e artigo. Quem lê está decidindo uma compra, não passando o tempo — e o mesmo hábito é o que permite que um trecho isolado seja citado fora de contexto sem virar mentira.
Número tem fonte ao lado. Toda medida, prazo ou proporção publicada vem com a origem: artigo de norma, dispositivo de lei, ficha técnica. Onde não houver fonte, o argumento fica qualitativo — e continua funcionando.
Frase curta, palavra comum. O leitor é engenheiro, comprador ou gestor de contrato. Ele conhece o assunto e não tem paciência com adjetivo. “Soluções inovadoras e sob medida” não diz nada; “chega, é posicionado e entra em uso” diz tudo.
Título é pergunta ou afirmação inteira. “A norma lista oito. Nós entregamos as oito.” “A lei já escreveu a palavra locação.” “Este site não usa cookies.” Rótulo de seção — “Nossos diferenciais” — não é título, é sumário.
Admitir o que falta. Quando existe uma lacuna, ela é dita. O Código de Ética declara que o canal de denúncia ainda não garante anonimato; a página ambiental lista o que a empresa não afirma. Isso não enfraquece: é o que torna o resto crível.
Teste rápido antes de publicar: se a frase pudesse aparecer no site de qualquer concorrente sem mudar uma palavra, ela não é da Tecnomod. Reescreva com um número, uma norma ou um caso concreto.
O que nunca publicamos
Oito regras. Nenhuma é de estilo: todas nasceram de uma decisão concreta, e cada uma existe porque romper com ela custa dinheiro ou credibilidade.
| Não publicamos | O que fazer no lugar | Por quê |
|---|---|---|
| Nome de cliente no texto | O carrossel de logotipos na home prova o atendimento. O texto descreve o setor — “grandes players de energia, óleo & gás e mineração” — e nunca nomeia contrato, obra ou contratante. | A logo prova; o texto não afirma. |
| Certificação não confirmada | O site publica conformidade com as normas regulamentadoras brasileiras. Certificação por sociedade classificadora só entra quando for vigente e comprovável, com número e validade. | Certificação errada num site é munição para concorrente e para fiscal. |
| Etapa de produção e detalhe construtivo | Nada de sequência de montagem, prancha executiva cotada, especificação de material ou processo de fábrica. O site diz o que o cliente escolhe, nunca como se faz. | O comprador quer saber se dá certo; quem quer saber como se faz é concorrente. |
| Número sem procedência | Nenhum dado entra por parecer verossímil. Número que aparece num prompt de imagem, numa prancha antiga ou numa apresentação não auditada não é fonte. | Uma medida errada publicada volta como pedido de desconto. |
| Promessa de estrutura que não existe | Nada de “verticalização total” ou “sem terceiro no meio”. Terceirizar às vezes é necessário, e a promessa não é o que faz o cliente confiar. | Promessa que a operação não sustenta cobra juros. |
| Legenda que denuncia render | As imagens de aplicação do site são renders. Elas não levam legenda dizendo isso, e também não são apresentadas como registro fotográfico de contrato específico — os Termos de Uso já declaram que são ilustrativas. | O cliente compra o produto, não a fotografia. |
| Preço | O site não publica preço e o assistente de orçamento não gera preço. O caminho é orçamento técnico: o valor muda com módulo, prazo, distância e customização. | Nenhum player local publica preço, e há um motivo. |
| “25 anos” como idade da empresa | São os anos de experiência dos gestores no ramo. O rótulo correto é “anos de experiência”, nunca “anos de mercado” nem “desde 2001”. | O ano de fundação ainda não foi confirmado. |
Estas regras valem para o site, para material comercial, para redes sociais e para qualquer pessoa ou agência que escreva em nome da Tecnomod.
Arquivos
O que existe hoje como acervo de marca:
| Arquivo | Formato | Usar em |
|---|---|---|
| Logotipo — matriz | SVG | Impressão, fachada, plotagem, bordado. Sem margem e sem cor fixa: assume a cor de onde for aplicado. É este que se manda para gráfica. |
| Logotipo preto | SVG | Fundo claro. Traz a margem de respiro já embutida. |
| Logotipo branco | SVG | Fundo escuro. Mesma margem. |
| Logotipo preto | PNG | Só para sistema que não aceita SVG. Fundo transparente, 250 px. |
| Logotipo branco | PNG | Idem, para fundo escuro. |
| Símbolo | SVG | Favicon, avatar de rede social e qualquer aplicação abaixo de 120 px. |
Como o vetor foi feito: o logotipo não é imagem vetorizada — ele foi remontado a partir dos contornos da própria fonte Heavitas, a fonte da marca. As curvas são as do arquivo da fonte, não um traçado aproximado por cima de um PNG. O texto vem convertido em contorno: o arquivo abre igual em qualquer máquina, sem depender da fonte instalada e sem redistribuir a fonte.
Espacejamento óptico: cada par de letras recebe o avanço que produz o mesmo vão de branco entre os contornos. Não é tracking uniforme — tracking uniforme soma a mesma quantidade a todos os pares, e como as letras têm formas diferentes o resultado são vãos desiguais. Não reespace a palavra à mão nem redigite o nome na fonte esperando o mesmo desenho: use o arquivo.
O que ainda não existe: construção geométrica com malha de proporção e as aplicações em papelaria, uniforme, frota e fachada.
Para pedir arquivo em outro formato ou tirar dúvida de aplicação, escreva para comercial@tecnomod.com.br.
Vai produzir algo em nome da Tecnomod?
Agência, fornecedor de conteúdo ou parceiro: mande a peça antes de publicar. Conferir leva minutos; refazer, não.