A marca
Este é o sistema vivo — ele renderiza a partir dos mesmos design tokens que o site consome. Se um valor aqui está errado, o site está errado junto.
Versão 1.0.0 · 2026-07-24 · a história do nome
Logotipo
A fita é a ligadura contínua entre o v e o y: sai do v, mergulha sob a linha de base e volta como a descendente do y. É o elemento que não pode ser alterado.
- Área de respiro
- A altura do `v` em todos os quatro lados. No header do site, 1.5v para o logo não brigar com a navegação. Nunca abaixo de 8px absolutos em tela.
- Tamanho mínimo
- 120px / 28mm. Abaixo disso a ligadura `tt` fecha e a torção da fita some.
- Ícone mínimo
- 16px. Abaixo de 24px usar cor chapada — gradiente vira lama.
Cor
A magenta da logo não é a magenta do texto.
magenta-400 e magenta-500 são as cores que fazem a marca ser reconhecida — e reprovam em contraste sobre branco. magenta-600 e magenta-700 são as cores que fazem o texto ser lido. Marca vibra. Texto lê. No dark mode a relação inverte: ali as magentas claras é que passam.
Magenta
- magenta-50#FFF0F91.10 ✗sobre brancoApenas fundo tingido.
- magenta-100#FFE0F41.22 ✗sobre brancoChips, preenchimento de hover.
- magenta-200#FFC2E91.48 ✗sobre brancoBordas sobre tinta; corpo de texto no dark mode.
- magenta-300#FF8FD82.06 ✗sobre brancoLinks e títulos no dark mode. Nunca sobre branco.
- magenta-400#FF56C92.83 ✗sobre brancoRealce do logo. REPROVA até em texto grande sobre claro. Acento do dark mode.· cor do logotipo
- magenta-500#E5139A4.29 ✗sobre brancoCor do logo. Texto ≥24px apenas. Label branco sobre ela REPROVA em AA normal.· cor do logotipo
- magenta-550#D20E8A5.04 ✓sobre brancoNúcleo do logo. Preenchimento mais claro seguro para botão com label branco. Cor do shader Aura.· cor do logotipo
- magenta-600#B90A7C6.18 ✓sobre brancoPADRÃO para links e ícones informativos no tema claro.
- magenta-700#97026A8.29 ✓sobre brancoCorpo de texto AAA sobre branco. Hover de link. Variante sólida do logotipo.· cor do logotipo
- magenta-800#7A045010.71 ✓sobre brancoTítulos, fim escuro do gradiente, estado pressionado.· cor do logotipo
- magenta-900#5C0A3E13.39 ✓sobre branco
- magenta-950#3B082716.80 ✓sobre brancoBase do shader.
Neutros — Warm Plum Grey
- neutral-0#FFFFFFsobre branco
- neutral-25#FCFAFBsobre brancoCard sobre branco.
- neutral-50#F7F4F6sobre brancoSeções alternadas.
- neutral-100#EFEAEEsobre branco
- neutral-200#E0D8DE1.40 ✗sobre brancoBordas e divisores; corpo de texto no dark mode.
- neutral-300#C6BAC21.87 ✗sobre brancoTexto secundário no dark mode.
- neutral-400#9C8C973.18 ✗sobre brancoREPROVA para texto. Placeholder apenas.
- neutral-500#786A745.11 ✓sobre brancoMeta e legendas ≥14px.
- neutral-600#5B4E577.86 ✓sobre brancoTexto secundário.
- neutral-700#42383F11.24 ✓sobre branco
- neutral-800#2A222715.48 ✓sobre brancoPADRÃO para corpo de texto no tema claro (AAA).
- neutral-900#1A141818.15 ✓sobre brancoTítulos.
- neutral-950#0F0B0D19.55 ✓sobre brancoContraste máximo; logotipo monocromático.
Superfícies de marca, hero, capas. Nunca atrás de texto pequeno.
Preenchimento do botão primário. Pior ponto de contraste com label branco = 5.04 ✓. NUNCA iniciar em #E5139A — ali o branco cai para 4.29 e reprova.
Placeholder CSS do visualizador Aura e halo do hero.
Tipografia
Sora para display (geométrica, ecoa o wordmark minúsculo); Inter para interface e corpo (altura de x alta, legível em pt-BR com acentos densos). Ambas open source, servidas localmente via next/font — zero requisição a terceiros, o que também é postura de LGPD.
Inteligência que move resultados
Sora — display, títulos
Inter — corpo e interface. Escolhida pela altura de x alta, que sustenta a densidade de acentos do português: ação, saúde, tributário, é, ç, ã, õ.
Iconografia
Traço de 1,6, pontas e junções arredondadas, sem preenchimento, sempre em currentColor. Cada ícone contém a fita — um traço que volta sobre si mesmo. É o que faz oito ícones de negócios muito diferentes lerem como uma família.
- shield-heart
- hard-hat
- file-search
- chart-flow
- seal-link
- mobius-nodes
- receipt-check
- spark-people
- pulse-alert
- mail-shield
- newsletter
Movimento
A fita de Möbius é a metáfora: o movimento da Vyttech contorna, não pisca. Tudo é transform/opacity — nada que force layout. Toda animação decorativa some em prefers-reduced-motion.
Tom de voz
| Não escreva | Escreva |
|---|---|
| “Somos um universo de soluções integradas que revolucionam a gestão empresarial.” | “Cuidamos de benefícios, SST, auditoria e fiscal. Tudo em um contrato só.” |
| “Nossa solução de IA de última geração empodera sua jornada.” | “Nossos agentes rodam dentro do seu ERP e devolvem oito horas por semana ao seu time.” |
| “Reduza em 85% seus custos!” | “Nos processos que automatizamos, o tempo de execução caiu 85% em média.*” |
| “Entre em contato e solicite um orçamento sem compromisso.” | “Manda uma mensagem no WhatsApp. Em até 1 dia útil alguém que entende do assunto responde.” |
| “Compliance 360º end-to-end.” | “Da coleta do exame ao envio no eSocial.” |
| “Nossa equipe altamente qualificada de especialistas.” | “Quem vai atender você assina laudo há 15 anos.” |
Vocabulário preferido
operação · time · caixa · prazo · indicador · conferir · cuidar · resolver · medir · integrar · laudo · ciclo
Vocabulário proibido
revolucionar · disruptivo · empoderar · jornada · sinergia · holístico · robusto · “solução completa” · “líder de mercado” · “IA de ponta”
O livro completo — história, arquétipo, aplicações, governança da transição das marcas legadas e as 12 variantes de logotipo — está em docs/brand/BRAND_BOOK.md no repositório. Esta página é o extrato executável dele. Inteligência que move resultados.