The brand
This is the living system — it renders from the same design tokens the site consumes. If a value here is wrong, the site is wrong with it.
Version 1.0.0 · 2026-07-24 · the story of the name
Logo
The ribbon is the continuous ligature between the v and the y. It is the element that must not be altered.
- Clear space
- 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.
- Minimum size
- 120px / 28mm. Abaixo disso a ligadura `tt` fecha e a torção da fita some.
- Mark minimum
- 16px. Abaixo de 24px usar cor chapada — gradiente vira lama.
Colour
The logo magenta is not the text magenta.
magenta-400 and magenta-500 make the brand recognizable — and fail contrast on white. magenta-600 and magenta-700 make text readable. Brand vibrates. Text reads. On dark this inverts: there the bright magentas are the accessible ones.
Magenta
- magenta-50#FFF0F91.10 ✗on whiteApenas fundo tingido.
- magenta-100#FFE0F41.22 ✗on whiteChips, preenchimento de hover.
- magenta-200#FFC2E91.48 ✗on whiteBordas sobre tinta; corpo de texto no dark mode.
- magenta-300#FF8FD82.06 ✗on whiteLinks e títulos no dark mode. Nunca sobre branco.
- magenta-400#FF56C92.83 ✗on whiteRealce do logo. REPROVA até em texto grande sobre claro. Acento do dark mode.· logo colour
- magenta-500#E5139A4.29 ✗on whiteCor do logo. Texto ≥24px apenas. Label branco sobre ela REPROVA em AA normal.· logo colour
- magenta-550#D20E8A5.04 ✓on whiteNúcleo do logo. Preenchimento mais claro seguro para botão com label branco. Cor do shader Aura.· logo colour
- magenta-600#B90A7C6.18 ✓on whitePADRÃO para links e ícones informativos no tema claro.
- magenta-700#97026A8.29 ✓on whiteCorpo de texto AAA sobre branco. Hover de link. Variante sólida do logotipo.· logo colour
- magenta-800#7A045010.71 ✓on whiteTítulos, fim escuro do gradiente, estado pressionado.· logo colour
- magenta-900#5C0A3E13.39 ✓on white
- magenta-950#3B082716.80 ✓on whiteBase do shader.
Neutrals — Warm Plum Grey
- neutral-0#FFFFFFon white
- neutral-25#FCFAFBon whiteCard sobre branco.
- neutral-50#F7F4F6on whiteSeções alternadas.
- neutral-100#EFEAEEon white
- neutral-200#E0D8DE1.40 ✗on whiteBordas e divisores; corpo de texto no dark mode.
- neutral-300#C6BAC21.87 ✗on whiteTexto secundário no dark mode.
- neutral-400#9C8C973.18 ✗on whiteREPROVA para texto. Placeholder apenas.
- neutral-500#786A745.11 ✓on whiteMeta e legendas ≥14px.
- neutral-600#5B4E577.86 ✓on whiteTexto secundário.
- neutral-700#42383F11.24 ✓on white
- neutral-800#2A222715.48 ✓on whitePADRÃO para corpo de texto no tema claro (AAA).
- neutral-900#1A141818.15 ✓on whiteTítulos.
- neutral-950#0F0B0D19.55 ✓on whiteContraste 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.
Typography
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, é, ç, ã, õ.
Iconography
A 1.6 stroke, round caps and joins, no fills, always currentColor. Every icon contains the ribbon — one stroke folding back on itself. That is what makes eight icons from very different businesses read as one family.
- shield-heart
- hard-hat
- file-search
- chart-flow
- seal-link
- mobius-nodes
- receipt-check
- spark-people
- pulse-alert
- mail-shield
- newsletter
Motion
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.
Tone of voice
| Don't write | Write |
|---|---|
| “A universe of integrated solutions revolutionizing management.” | “We handle benefits, safety, audit and tax. In one contract.” |
| “Our next-generation AI empowers your journey.” | “Our agents run inside your ERP and give your team eight hours a week back.” |
| “Cut your costs by 85%!” | “In the processes we automated, execution time fell 85% on average.*” |
Preferred vocabulary
operação · time · caixa · prazo · indicador · conferir · cuidar · resolver · medir · integrar · laudo · ciclo
Forbidden vocabulary
revolucionar · disruptivo · empoderar · jornada · sinergia · holístico · robusto · “solução completa” · “líder de mercado” · “IA de ponta”
The full book — story, archetype, applications, legacy-brand transition governance and the 12 logo variants — lives at docs/brand/BRAND_BOOK.md. This page is its executable extract. Intelligence that moves results.