Wordmark escuro e símbolo oficial colorido.
Venn360 / Design System v0.1
Um sistema visual.
Três frentes. Uma marca.
A linguagem visual que conecta soluções digitais, clareza de negócio e execução — do website ao painel administrativo.
01 / Marca
Preservar a marca. Criar um sistema ao redor dela.
A logomarca oficial não é redesenhada nem simplificada. A interface usa uma base predominantemente monocromática; as cores das frentes aparecem pontualmente para orientar e destacar.
Wordmark branco e símbolo oficial colorido.
Regra de marcaNão alterar proporções, cores, reflexos ou layout da arte oficial. Os SVGs disponibilizados são contêineres com PNG incorporada, não vetores puros por paths.
02 / Cores
Monocromático como base. Cor como sinal.
Preto, branco e neutros sustentam a experiência. Cada frente recebe sua família cromática; INT combina as três em elementos de integração.
TI
Consultoria e Auditoria de TI
Cor de ação · destaque · superfície contextual
MKT
Marketing de Performance
Cor de ação · destaque · superfície contextual
SIS
Arquitetura e Desenvolvimento de Sistemas
Cor de ação · destaque · superfície contextual
INT
Integração das frentes
Usar a fusão cromática em pontos de síntese, oferta integrada e elementos que representem a Venn360 como um todo.
Fundo
Superfície
Superfície elevada
Borda
03 / Tipografia
Hierarquia editorial, leitura sem esforço.
O modelo de referência utiliza títulos grandes, textos enxutos e labels compactos. A implementação Venn360 usa uma família sans-serif licenciada/disponível no projeto; a fonte embutida no site de referência não é redistribuída.
Display / H1Soluções digitais
Soluções digitais
para avançar.
H2Clareza para decidir.
Clareza para decidir.
Estrutura para executar.
Body / lead
Tecnologia, marketing e sistemas aplicados às prioridades reais do negócio.
Body
O conteúdo começa pelo desafio e pela transformação desejada. Os detalhes técnicos explicam a abordagem, o escopo e os resultados esperados.
Eyebrow / label
Consultoria · Estratégia · Execução
04 / Componentes
Elementos reutilizáveis, não páginas isoladas.
Botões, cards, pills, formulários, indicadores e painéis seguem padrões comuns. O contexto altera a ênfase — não a consistência do sistema.
Botões e açõesPrimário monocromático; cor de frente apenas quando contextual.
Cards por frenteElevação e borda sutil no hover; faixa de cor aponta a especialidade.
TI
Tecnologia sob controle
Entender riscos, organizar prioridades e fortalecer a base tecnológica.
MKT
Marketing mensurável
Relacionar aquisição, conversão e investimento aos objetivos comerciais.
SIS
Sistemas que evoluem
Desenvolver aplicações, integrações e automações alinhadas à operação.
INT
Visão integrada
Combinar frentes quando o desafio de negócio atravessa mais de uma área.
Status e feedbackStatus nunca deve depender apenas da cor; usar texto e contexto.
● Concluído● Em revisão● Requer atenção○ Rascunho
FormuláriosLabels sempre visíveis, mensagens próximas ao campo e estados claros.
Na Proposta Dinâmica, o pedido de pré-proposta e o consentimento para receber marketing são ações separadas.
Painel de dadosIndicadores com contexto, período e limites de interpretação.
Leads recebidos128+12% no período
Pré-propostas34Aguardando validação
Conversão—Exibir apenas com fonte e período definidos
Os números acima são dados fictícios de demonstração do design system, não indicadores da Venn360.
05 / Movimento e efeitos
Movimento que explica, não distrai.
A extração apresenta 69 keyframes e efeitos em múltiplas seções. A adaptação mantém as famílias de movimento úteis, agrupadas em padrões reutilizáveis e respeitando a preferência de movimento reduzido.
Entrada suave
Revelação curta de blocos à medida que entram na área visível.
vds-motion-inVarredura / scan
Usada em diagnósticos e visualizações técnicas, sem bloquear leitura.
vds-motion-scanArcos e órbitas
Motivo gráfico de apoio inspirado na integração das frentes.
vds-orbital-backdropAcessibilidadeAs animações são decorativas e não carregam informação exclusiva. O sistema desativa movimento não essencial quando
prefers-reduced-motion: reduce estiver ativo.06 / Princípios de uso
Uma marca consistente em cada contexto.
Resultado antes da tecnologia
O visitante entende a situação e a transformação antes de ver uma lista de ferramentas.
Uma base, dois contextos
Website e painel compartilham tokens e componentes, mas têm hierarquias diferentes.
Sem provas inventadas
Cases, parceiros, scores e dados só são publicados quando reais, contextualizados e autorizados.