Troven · Identidade Visual

Sumário

A Troven cria sites, sistemas e automações. A marca mostra como a gente trabalha: peça por peça, com obsessão por detalhe, até tudo se encaixar.

01Conceito 02Logotipo 03Cores 04Tipografia 05Movimento 06Elementos 07Aplicações 08Uso correto 09Tom de voz 10Arquivos

01 · Conceito

01 / 04

Um bloco.

Cada bloco é uma parte do trabalho: código, design, estratégia. Quadrados de cantos suaves, todos do mesmo tamanho.

02 / 04

Três formam a base.

Lado a lado e um abaixo, os blocos desenham o T de Troven. Estrutura sólida, espaçamento exato.

03 / 04

A quarta peça ainda gira.

A última peça chega girando para encaixar. Software está sempre sendo construído; soluções que se completam.

04 / 04

Inclinada em 14°.

A peça fica congelada a 14°, o instante antes do encaixe. É a assinatura da marca, repetida em ícones, marcadores e detalhes.

02 · Logotipo

Uma marca, vários formatos.

O horizontal é a assinatura principal. O vertical serve para espaços quadrados ou altos. O símbolo sozinho entra onde o nome já aparece ou o espaço é pequeno. O nome usa Unbounded Bold convertida em curvas.

Formato

Fundo

Versão

Baixar

Ícone de app e favicon

Ícone cobalto

Ícone noite

Quadrado (lojas, avatar)

64 px

32 px

16 px

02 · Construção

Construído no grid.

O símbolo nasce de um módulo U: um quadrado de 24 unidades. Tudo se mede a partir dele, inclusive o respiro em volta da logo.

Medidas do símbolo

MóduloU = 24

Espaço entre blocos4 (U ÷ 6)

Raio dos cantos5

Rotação da peça14°

Elevação da peça−6

Área de respiro

Livre em volta: no mínimo a largura de um bloco do símbolo.

Tamanho mínimo

96 px · 25 mm

Símbolo · 24 px

03 · Cores

Cobalto, lima e noite.

Três cores principais e uma família de neutros quentes. Clique em qualquer cor para copiar o código.

Neutros de apoio

Proporção de uso

Papel 34%

Cobalto 30%

Noite 26%

Branco

Lima

A lima é o tempero: pequenas doses, sempre sobre cobalto ou noite.

Combinações e contraste (WCAG)

04 · Tipografia

Geométrica no título, neutra no texto.

Unbounded dá personalidade aos títulos, com espaçamento apertado. Inter cuida da leitura. As duas são gratuitas no Google Fonts.

Títulos

Unbounded

SemiBold 600 · Bold 700 (logo) · espaçamento −4,5%

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ãçéôú&?!

Texto

Inter

Regular 400 · Medium 500 · SemiBold 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ãçéôú&?!

Teste você mesmo · clique no texto para editar

Tamanho

Seu negócio merece o mesmo.

Escala tipográfica

DisplayUnbounded 600 · 96/0,95 · −6%

Nova identidade.

Título 1Unbounded 600 · 64/1,02 · −4,5%

Sites que vendem.

Título 2Unbounded 600 · 36/1,1 · −4%

Automação que não esfria o atendimento

SobretítuloInter 600 · 13 · caixa alta +16%

Troven 2026

TextoInter 400 · 18/1,55

A automação cuida do repetitivo. A conversa que importa continua com gente.

LegendaInter 500 · 13/1,5

@troven.dev · www.troven.com.br

05 · Movimento

A marca se monta.

3,5 segundos: os blocos nascem, a peça lima entra girando e encaixa, o símbolo desliza e o nome sobe letra por letra. O mesmo tempo no GSAP (SVG para sites) e no Lottie (JSON para apps, LottieFiles, Webflow e After Effects).

Formato

Fundo

Velocidade

0,00 s3,50 s

Princípios de movimento · passe o mouse ou toque para repetir

Encaixe

Peças chegam girando e assentam com um leve tranco. back.out(1.2) · 0,7 s

Construção

Um bloco de cada vez, em sequência curta. Nada aparece todo de uma vez. back.out(1.7) · intervalo 0,13 s

troven

Precisão

Textos sobem rápido e freiam suave, sem quicar. power4.out · 0,6 s

Tokens de movimento

0,2 sMicro: hover, foco, toggles

0,6 sPadrão: entradas de texto e cards

0,7 sEncaixe: peças e ícones

3,5 sAssinatura: entrada completa da marca

06 · Elementos gráficos

Peças que se repetem.

Pequenos recursos tirados do símbolo amarram todas as peças: o quadradinho inclinado, a barra de citação, os marcadores de progresso em blocos.

A ideiaSobretítulo com a peça a 14°

Nova identidadeEtiqueta com borda, caixa alta

Três peças no lugar e a quarta ainda girando para encaixar.

Citação com barra na cor da peça

02 / 05

Progresso em blocos (carrosséis)

Fale com a gente Ver cases

Botões: a peça gira no hover

Nova identidade.

Destaque: palavra final na cor de acento

Padrão de blocos · passe o mouse

07 · Aplicações

A marca no mundo.

Posts, stories, papelaria e web. Os posts abaixo são as peças reais já produzidas com a nova identidade.

troven.devSites, sistemas e automação

Troven · Software feito peça por peça.
💬 Manda um "oi" e conta sua ideia · troven.com.br

Seu Nome

Desenvolvimento · Automação

nome@troven.com.br
troven.com.br · @troven.dev

Cartão de visita 85 × 55 mm · clique para virar

Troven | Sites, sistemas e automação

https://www.troven.com.br

Fale com a gente

Seu NomeTroven · troven.com.br

Aba do navegador e assinatura de e-mail

08 · Uso correto

Faça assim, nunca assim.

A logo é um arquivo pronto: não redesenhe, não recolora, não deforme. Na dúvida, use o positivo em fundos claros e o negativo em cobalto ou noite.

✓

Positivo em fundo claroPapel ou branco, peça em cobalto.

✓

Negativo em cobaltoA combinação mais forte da marca.

✓

Negativo em noitePara materiais escuros e vídeo.

Não faça

Esticar ou achatarSempre redimensione proporcionalmente.

Girar a logoSó a peça tem 14°. A logo fica reta.

Aplicar degradêCores sempre chapadas.

Sombra ou brilhoNenhum efeito sobre a logo.

Só contornoA logo é sempre preenchida.

Trocar as coresBlocos e peça têm cores fixas.

Lima sobre brancoSem contraste. No claro, a peça é cobalto.

Fundo carregadoUse fundos lisos ou imagens calmas.

09 · Tom de voz

A gente fala como trabalha.

Português claro, frases curtas, sem jargão de agência. Falamos de resultado concreto e tratamos o cliente por "você".

Direto

Vamos ao ponto com uma pergunta ou um fato.

AssimQuanto tempo sua equipe passa respondendo as mesmas mensagens no WhatsApp?

Evite~~Soluções disruptivas para alavancar a sinergia do seu negócio.~~

Conversa de gente para gente, sem formalidade.

AssimManda um "oi" na DM e conta sua ideia.

Evite~~Entre em contato através de nossos canais oficiais de atendimento.~~

Preciso

Prometemos só o que entregamos, com detalhe.

AssimA automação cuida do repetitivo. A conversa que importa continua com gente.

Evite~~Automatizamos tudo para você nunca mais se preocupar com nada.~~

Assinatura

Quatro blocos. A última peça sempre encaixando.

Um bloco.

Três formam a base.

A quarta peça ainda gira.

Inclinada em 14°.

Uma marca, vários formatos.

Construído no grid.

Medidas do símbolo

Cobalto, lima e noite.

Geométrica no título, neutra no texto.

Unbounded

Inter

Role para montar a marca.

Os blocos nascem em sequência

A marca se monta.

Encaixe

Construção

Precisão

Peças que se repetem.

Nova identidade.

A marca no mundo.

Faça assim, nunca assim.

A gente fala como trabalha.

Direto

Próximo

Preciso

Seu negócio merece o mesmo.

Tudo pronto para usar.