USO PRIORITÁRIO
Logo horizontal
Assinatura principal para apresentações, site, propostas e comunicação institucional.
Onde aplicarEm áreas largas e títulos de materiais comerciais.
Design & Brand SystemUma marca
Uma marca
com estrutura.
Princípios, elementos gráficos e componentes para construir uma comunicação consistente em todos os pontos de contato da Trivion.
Execução comercial exige padrão.
PESSOAS / PROCESSOS / GESTÃO
Fundamentos
01 / 18Identidade em operação
A Trivion se apresenta como uma empresa de execução comercial. A identidade valoriza clareza, disciplina e capacidade de gestão.
PRINCÍPIO 01
Estrutura visível
Organização, alinhamento e hierarquia tornam a informação fácil de entender.
PRINCÍPIO 02
Presença concreta
Pessoas, rotinas, ferramentas e espaços reais representam a operação comercial.
PRINCÍPIO 03
Precisão
Dados, promessas e termos comerciais devem ser verificáveis, legíveis e consistentes.
Assinatura de posicionamento
Seu comercial em operação.
Seu negócio em foco.
Seu negócio em foco.
A Trivion estrutura e opera equipes comerciais dedicadas, em ambiente presencial, com liderança, processos, treinamento e acompanhamento contínuo.
Fundamentos
02 / 18Logotipo e assinaturas
O símbolo, o nome e suas proporções constituem o principal elemento de reconhecimento da Trivion. Escolha a composição de acordo com o espaço disponível, a legibilidade e o contexto de uso.
✓
Desenho original preservado. As três assinaturas e o símbolo derivam diretamente dos arquivos vetoriais da Trivion. Nenhum elemento, curva ou proporção foi redesenhado.
01 / ASSINATURAS
Escolha a composição adequada
O contexto define qual versão usar. Cada assinatura possui uma função e não deve ser deformada ou reconstruída.
INSTITUCIONAL
Logo institucional
Composição com separador vertical. Recomendada quando a marca precisa ter presença formal e assinatura destacada.
Onde aplicarEm materiais corporativos e documentos de maior formalidade.
FORMATO VERTICAL
Logo vertical
Composição centralizada para espaços mais altos, capas, peças especiais e sinalização.
Onde aplicarEm superfícies estreitas ou peças com eixo central.
USO COMPACTO
Símbolo isolado
Reconhecimento compacto em avatares, favicons e peças de apoio, sem substituir a assinatura completa na primeira apresentação.
Onde aplicarOnde o nome já esteja identificado no contexto.
i
Tamanhos e qualidade. Baixe SVG (vetorial sem limite de tamanho), PNG HD (alta definição) ou PNG 1080 (proporcional, fundo transparente, ideal para compor artes digitais). Para foto de perfil do Instagram, escolha Símbolo isolado e depois a versão quadrada 1080 × 1080, já com margem de segurança.
02 / USO DE COR
Uma marca. Diferentes contextos.
Veja como o desenho se comporta em superfícies claras e escuras. A versão original é a matriz aprovada. As alternativas cromáticas abaixo são propostas de extensão do sistema e dependem de homologação.
MATRIZ ORIGINAL
Original em superfície clara
Reprodução sem modificação. Priorize esta versão para as assinaturas recebidas.
PROPOSTA CROMÁTICA
Reversa sobre Obsidian
Lettering claro para recuperar legibilidade em fundos escuros, mantendo o símbolo em gradiente.
PROPOSTA CROMÁTICA
Monocromática clara
Para aplicações de uma cor, com contraste sobre Deep Olive ou Obsidian.
PROPOSTA CROMÁTICA
Verde ácido
Uso pontual como assinatura de destaque, sem competir com o conteúdo.
03 / TAMANHO MÍNIMO
Legibilidade em qualquer escala
Os limites abaixo são recomendações de uso digital da Trivion, considerando a proporção e o desenho dos arquivos originais. Os logotipos são mostrados em largura real de CSS para facilitar a comparação.
Logo horizontal
Visualização a 210 pxLargura mínima recomendada210 px
Largura preferencial280 px +
Aplicação principal em espaços amplos. O lettering e a palavra GRUPO precisam continuar legíveis.
Logo institucional
Visualização a 250 pxLargura mínima recomendada250 px
Largura preferencial330 px +
A linha divisória e a assinatura completa requerem mais largura para manter a leitura.
Logo vertical
Visualização a 115 pxLargura mínima recomendada115 px
Largura preferencial150 px +
Use em composições centradas e com altura suficiente para preservar o conjunto.
Símbolo isolado
Visualização a 32 pxLargura mínima recomendada32 px
Largura preferencial52 px +
Recomendado para espaços compactos, desde que a marca esteja identificada no contexto.
Como interpretar esses valores
As medidas indicam a largura da arte, não o tamanho do arquivo PNG baixado. Uma arte exportada com 1080 px pode ser exibida a 210 px sem problema, desde que não seja ampliada além de sua resolução nativa. Em telas pequenas, priorize legibilidade: se a assinatura completa ficar abaixo do recomendado, use o símbolo isolado quando o nome Trivion estiver presente no contexto. Os limites para impressão dependem do material e precisam de prova física.
04 / GUIA DE ESCOLHA
Qual versão usar em cada contexto?
A assinatura não deve ser escolhida apenas pela estética. Considere primeiro o objetivo, o espaço disponível, a legibilidade e o reconhecimento de marca.
| Aplicação | Versão recomendada | Critério de escolha |
|---|---|---|
| Cabeçalho do site | Logo horizontal | Reconhecimento completo, leitura na navegação e boa adaptação ao desktop. Preferencial a partir de 280 px |
| Perfil do Instagram | Símbolo isolado | O nome da empresa já aparece ao lado do avatar. Use o arquivo quadrado pronto. Avatar 1080 × 1080 px |
| Favicon e ícone de app | Símbolo isolado | A composição completa não permanece legível em dimensões reduzidas. SVG; raster 32/48 px conforme plataforma |
| Capa de apresentação | Logo vertical ou institucional | Vertical para composição central. Institucional para layouts horizontais. Respeitar o mínimo de cada versão |
| Propostas e contratos | Logo horizontal | Identificação completa no cabeçalho e consistência institucional. Preferencial a partir de 280 px |
| Rodapé de documentos | Logo horizontal | Usar quando houver largura e contraste adequados; evitar assinaturas ilegíveis. Mínimo 210 px |
| Materiais de redes sociais | Logo horizontal ou símbolo | Assinatura completa em cards informativos; símbolo em peças com marca já reconhecível. Verificar leitura no celular |
| Thumbnail e vídeo | Símbolo isolado | Funciona como identificação auxiliar sem disputar atenção com título e imagem. Dimensionar conforme composição |
| Brindes e uniformes | Institucional ou símbolo | Escolha conforme a área de reprodução e a técnica de produção. Prova física antes de fabricar |
| Assinatura de e-mail | Logo horizontal | Identifica a empresa sem ocupar largura excessiva. Preferencial a partir de 280 px |
Cor e fundo também influenciam a escolha
Os SVGs originais possuem lettering azul-escuro e devem ser priorizados sobre fundos claros, onde a leitura está garantida. Para superfícies escuras, consulte a seção Uso de cor. As variações reversa, branca e verde ácido continuam identificadas como propostas, sujeitas à aprovação cromática. Nunca altere as cores diretamente no editor.
05 / REGRAS DE APLICAÇÃO
Preservar é tão importante quanto aplicar
Uso correto
Respeitar proporções, respiro, contraste, integridade do símbolo e arquivos vetoriais originais.
Prefira SVG para digital e produção gráfica. PNG transparente é adequado para apresentações e peças rasterizadas.
Uso incorreto
Esticar, rotacionar, aplicar sombras arbitrárias, modificar curvas ou usar o lettering escuro sobre superfícies de baixo contraste.
Não aplicar efeitos 3D, contornos ou cores fora da paleta sem aprovação formal.
i
Controle de versões. “Original” corresponde ao arquivo fornecido pela Trivion. “Reversa”, “Branco” e “Verde ácido” são opções técnicas de aplicação criadas sem redesenhar as formas. Antes de tratá-las como versões oficiais da marca, é necessária a aprovação cromática.
Fundamentos
03 / 18Sistema de cores
A paleta combina presença institucional, contraste e acento energético. Cada cor possui uma função definida.
Obsidian
Deep Olive
Olive Acid
Trivion Acid
Mineral Gray
Stone
Neutros de suporte
Para áreas de leitura, interfaces e documentos podem ser utilizados Canvas #F4F4F0 e branco #FFFFFF. Eles funcionam como superfícies de apoio e não substituem as seis cores institucionais.
Distribuição de destaque
O verde ácido é um acento, não um fundo obrigatório. A composição deve privilegiar áreas neutras e reservar a cor de destaque para foco, ações e informação relevante.
BaseSuperfíciesAcento
Contraste aprovado para texto
Acid / Obsidian13,49:1 • AAA
Stone / Obsidian12,81:1 • AAA
Obsidian / Acid13,49:1 • AAA
Obsidian / Canvas18,33:1 • AAA
Combinações a evitar
Branco sobre Trivion Acid não oferece contraste adequado para textos. Olive Acid sobre fundo branco também não alcança 4,5:1 para corpo de texto.
Branco / Acid1,50:1 • Não usar
Olive / Branco3,83:1 • Só texto grande
Fundamentos
04 / 18Tipografia
Duas famílias complementares garantem personalidade, clareza de leitura e consistência em mídias digitais e impressas.
DISPLAYOperação comercial
48 / 50 • 600
H1Liderança presente
36 / 42 • 600
H2Gestão e performance
28 / 34 • 600
H3Rotina comercial
20 / 26 • 600
CORPOAcompanhar números é parte da execução. A informação deve apoiar decisões e deixar clara a responsabilidade de cada operação.
15 / 26 • 400
LEGENDAIndicadores, informações auxiliares e legendas.
12 / 18 • 500
Uso: evitar textos inteiramente em caixa alta, espaçamento entre letras excessivo e títulos comprimidos. Em peças de social media, respeitar sempre a leitura em tela pequena.
Fundamentos
05 / 18Grid e espaçamento
O sistema usa uma base de oito pontos, com incrementos de quatro pontos para ajustes finos.
Escala de espaçamento
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px
space-24
96px
Regras de composição
DESKTOP
Grid de 12 colunas, gutter de 24 px e largura de conteúdo limitada a 1200 px.
TABLET
Grid de 8 colunas, gutter de 16 a 20 px e margens externas de 24 px.
MOBILE
Grid de 4 colunas, gutter de 12 px e margens externas de 20 px.
Raio de borda prioritário: 8, 12 ou 16 px. Preferir linhas discretas a sombras exageradas.
Construção de uma página em doze colunas proporcionais.
Linguagem visual
06 / 18Elementos gráficos
Geometria, linhas e repetições estruturais devem apoiar o conteúdo. A identidade não depende de brilho, efeitos metálicos ou ambientação futurista.
Linhas de direção
Construção geométrica
Grid modular
Aplicação correta
Linhas finas, com propósito de organização
Grafismos derivados de ângulos do símbolo
Espaços negativos para dar respiro
Dados apresentados com escalas e rótulos claros
Aplicação incorreta
Objetos 3D genéricos de tecnologia
Neon, glow ou efeitos volumétricos sobre o logo
Texturas e grafismos que competem com a mensagem
Setas ou elementos sem função editorial
Linguagem visual
07 / 18Fotografia e presença humana
As imagens devem mostrar a operação como ela é. Registros documentais têm prioridade sobre composições artificiais.
Rotina de vendas
Equipes reais e interação com clientesLiderança próxima
Treinamentos, alinhamentos, gestãoAmbiente presencial
Estrutura física, cultura, processosDireção de fotografia
Luz natural ou controlada, contraste realista, pessoas em atividade, cenário organizado e expressão autêntica. A cor pode ser levemente neutralizada sem descaracterizar a cena.
Critérios de seleção
Exigir autorização de uso de imagem, contexto verdadeiro e consistência com a operação apresentada. Não retratar fotos conceituais como se fossem equipes ou instalações reais.
Os painéis acima definem enquadramento editorial. As fotografias finais devem ser selecionadas do acervo autorizado da Trivion.
Componentes
08 / 18Botões e ações
A interface deve deixar evidente o próximo passo. Os componentes seguem comportamento consistente em hover, foco, clique e indisponibilidade.
SUPERFÍCIE CLARA
Em operaçãoInstitucionalGestão comercial
SUPERFÍCIE ESCURA
Regras de componente
Altura: mínima de 44 px para alvo clicável confortável.
CTA principal: usar Trivion Acid e texto Obsidian.
Foco: contorno de 3 px, sempre visível na navegação por teclado.
Componentes
09 / 18Formulários
Campos, rótulos, estados e textos de apoio devem oferecer clareza, previsibilidade e facilidade de uso.
Exemplo de formulário
Converse com a Trivion
Padrão de interação
Rótulos sempre acima do campo
Validação com mensagem específica
Campo ativo com borda e halo de foco
Indicação clara de opcionalidade
Placeholder como único rótulo
Mensagem genérica de erro
Misturar diferentes estilos de campo
Formulários de produção devem incluir consentimentos e política de privacidade compatíveis com o tratamento de dados realizado.
Componentes
10 / 18Indicadores e relatórios
Dados comerciais fazem parte da experiência da marca. Rótulos, períodos, escalas e unidades devem ser informados com precisão.
Oportunidades recebidas
[total]
Período selecionado
Taxa de conversão
[taxa]
Definição do funil
Receita atribuída
[R$]
Critério de atribuição
Comparação por etapa
Etapa AEtapa BEtapa CEtapa DEtapa E
Exemplo gráfico de hierarquia de cores. Valores, períodos e etapas devem ser adicionados nos relatórios reais.
Regras de visualização
Informar período e fonte
Explicitar definição dos indicadores
Utilizar a mesma escala na comparação
Associar destaque a um dado relevante
Usar métricas fictícias em materiais públicos
Cortar eixos para exagerar resultados
Depender exclusivamente de cor para interpretar dados
Componentes
11 / 18Jornada de implantação
A metodologia comercial pode ser representada em etapas, linhas de progressão e quadros operacionais. O conteúdo acompanha as fases efetivas da entrega.
Implantação • 4 a 8 semanas
01–02Diagnóstico e arquitetura
Imersão, modelo e funil.
03–04Metas e CRM
Remuneração, tecnologia e indicadores.
05–06Playbook e equipe
Processos, recrutamento e seleção.
07Treinamento e certificação
Onboarding antes do início.
Operação contínua
Go Live, ramp-up, governança e performance.
Diagramas do método devem preservar a ordem dos processos, os nomes das etapas e a distinção entre implantação e acompanhamento contínuo.
Aplicações
12 / 18Site e landing pages
Páginas digitais devem explicar rapidamente a categoria do serviço, o modelo de execução e o próximo passo para o potencial cliente.
TRIVIONOperação comercial Solicitar apresentação ↗TERCEIRIZAÇÃO COMERCIAL
Seu comercial em operação. Seu negócio em foco.
Equipes dedicadas, gestão presencial e acompanhamento diário para executar a operação comercial contratada.
Pessoas.
Processos.
Gestão.
Processos.
Gestão.
Primeira dobra
Categoria clara, oferta em uma frase, benefício compreensível e ação principal.
Seções centrais
Modelo de operação, equipe, etapas, entregáveis, responsabilidades e perguntas frequentes.
Última dobra
Condições de aderência, transparência operacional e chamada para apresentação.
Aplicações
14 / 18Apresentações comerciais
Apresentações precisam organizar a narrativa, o escopo e a tomada de decisão. Cada slide deve cumprir uma função clara.
GRUPO TRIVION / OPERAÇÃO COMERCIAL
Uma estrutura comercial completa, dedicada ao seu negócio.
Apresentação institucional
Slide de abertura
Uma mensagem central e assinatura da Trivion.
Slide de processo
Etapas visuais, responsáveis e entregas da operação.
Slide de proposta
Escopo, premissas, investimento e condições de forma inequívoca.
Aplicações
15 / 18Propostas e documentos
Documentos comerciais usam a mesma tipografia e a mesma hierarquia visual, com especial atenção a escopo, responsabilidades e condições de contratação.
GRUPO TRIVION / PROPOSTA COMERCIAL
Operação comercial
terceirizada.
terceirizada.
Escopo de implantação e acompanhamento contínuo da operação de vendas.
EstruturaçãoProcessos, CRM e metas
EquipeSeleção e capacitação
GestãoRotina e acompanhamento
Escopo sujeito às condições contratuais.
Estrutura do documento
Identificação e contexto do cliente
Objetivo e modalidade contratada
Escopo e entregáveis
Prazos e responsabilidades
Investimento, condições e validade
Próximos passos
Materiais de venda e contratos não devem prometer resultados garantidos ou alterar responsabilidades definidas no instrumento contratual.
Governança
16 / 18Identidade verbal
A comunicação é objetiva, segura, profissional e centrada na execução. A escolha das palavras deve refletir o que a Trivion realmente entrega.
Evitar
“A solução revolucionária que vai explodir suas vendas.”
Usar
“Uma equipe comercial dedicada, com processos e gestão diária.”
Evitar
“Nós cuidamos de absolutamente tudo na sua empresa.”
Usar
“A Trivion lidera a operação comercial. As responsabilidades são definidas em contrato.”
Vocabulário prioritário
Operação comercial, liderança, gestão diária, equipe dedicada, processos, treinamento, rotina, indicadores, acompanhamento, vendas, desempenho e estrutura.
Estilo de escrita
Frases curtas, verbos concretos e títulos informativos. Evitar jargões desnecessários, excesso de pontuação, slogans vazios e repetições mecânicas de estrutura.
Governança
17 / 18Acessibilidade e consistência
Legibilidade e previsibilidade não são opcionais. O sistema deve funcionar para diferentes telas, leitores e formas de navegação.
01
Contraste
Mínimo de 4,5:1 para texto padrão e 3:1 para textos grandes e elementos essenciais.
02
Navegação
Controles alcançáveis pelo teclado, indicação de foco e textos de ação compreensíveis.
03
Responsividade
Reduzir o número de colunas, não o tamanho da informação essencial; preservar respiros e alvos clicáveis.
Como aplicar a marca em fundos claros?
Usar textos Obsidian, fundos Canvas ou Stone e o verde com parcimônia. A assinatura original utiliza lettering escuro e deve ser priorizada em superfícies claras, como Canvas ou Stone. Em fundos Obsidian, utilizar uma versão reversa somente após aprovação cromática.
Quando usar Trivion Acid?
Para chamadas principais, realces editoriais, indicadores selecionados, ícones e elementos de orientação. Evitar grandes blocos de texto branco sobre a cor.
Quando utilizar fotografia?
Quando a imagem ajuda a demonstrar operação, ambiente, equipe, treinamento, liderança e contexto real de vendas.
Governança
18 / 18Biblioteca e especificações
Arquivos oficiais devem ser distribuídos em formatos adequados para cada canal. As definições técnicas permanecem centralizadas.
Arquivos de implementação
Os arquivos abaixo acompanham esta edição do sistema e permitem iniciar a construção de layouts, páginas e componentes.
EXEMPLO DE TOKENS
:root {
--obsidian: #050705;
--deep-olive: #33362A;
--olive-acid: #788A32;
--trivion-acid: #C2E03A;
--mineral-gray: #8C8F7E;
--stone: #CDCFC3;
--font-display: 'Space Grotesk';
--font-body: 'Manrope';
}PRINCÍPIO DE CONSISTÊNCIA
Toda aplicação deve representar a mesma empresa.
Especializada em terceirização comercial, presente na execução, segura na gestão e clara na prestação de contas.
Conteúdo e mídia paga
A identidade precisa acomodar mensagens de aquisição, educação e prova da capacidade operacional, sem repetir uma única composição.
Quem lidera?
vendedores é só
o começo.