Manual de Identidade Visual
VERSÃO 1.0
MAIO 2026
CONFIDENCIAL · USO INTERNO
A Digital AI existe para transformar operações em inteligência — conectando empresas ao poder da IA de forma confiável, acessível e estratégica.
Não vendemos software. Entregamos resultados mensuráveis com tecnologia que trabalha para o negócio do cliente.
"Para decisores de PMEs e figuras públicas que precisam de escala com inteligência, a Digital AI é a parceira de AI-as-a-Service que entrega resultados reais e confiáveis — porque combina expertise técnica profunda com proximidade estratégica."
O Mago transforma o impossível em realidade. Faz com que processos complexos pareçam simples para o cliente. Domina ferramentas poderosas e conduz transformações reais — sem revelar a complexidade por trás.
| 1. | Confiável | Segurança e previsibilidade em cada entrega |
| 2. | Visionária | Sempre um passo à frente do mercado |
| 3. | Técnica | Domínio profundo, não superficial |
| 4. | Estratégica | Parceira, não fornecedora |
| 5. | Acessível | Complexidade oculta, clareza na comunicação |
A Digital AI comunica com confiança, precisão técnica e proximidade humana. Falamos como especialistas que se importam — não como burocratas ou vendedores.
| Dimensão | ✓ Soa como | ✕ Não soa como |
|---|---|---|
| Confiança | "Entregamos resultados mensuráveis em 30 dias" | "Talvez possamos ajudar com isso..." |
| Visão | "Enquanto o mercado experimenta, nós já operamos" | "Somos inovadores no uso de IA" |
| Técnico | "n8n + Claude + Supabase + Evolution API" | "Usamos tecnologia de ponta" |
| Humano | "Você foca no negócio. Nós cuidamos da tecnologia." | "Nossa solução escalável impacta o ROI de forma holística" |
✓ "Falar com especialista"
✓ "Ver demonstração"
✓ "Começar agora"
✕ "Clique aqui"
✕ "Saiba mais sobre nós"
✓ "Não conseguimos processar. Tente em 30s."
✕ "Erro #ERR_422 — request inválida"
✕ "Ocorreu um problema inesperado"
✓ "IA que entrega resultados"
✓ "Automatize. Escale. Cresça."
✕ "Soluções inovadoras para transformação digital"
O símbolo é a letra D desconstruída pela Metodologia Da Vinci. Uma barra vertical sólida (solidez e confiança) encontra um arco de inovação. No interior, um nó de inteligência representa o núcleo de IA que opera dentro dos processos do cliente.
| Parâmetro | Valor |
|---|---|
| Forma base | Retângulo + arco circular (letra D) |
| Ângulo de perspectiva | 202.989° |
| Unidade modular (x) | 8px |
| Proporção horizontal | 6x / 4x / 4x / 4x |
| Proporção vertical | 4x / 4x / 6x |
| Barra vertical | width: 10px, rx: 2.5px |
| Stroke do arco | 10px, stroke-linecap: round |
| Nó — halo externo | r: 8px, opacity: 0.18 |
| Nó — halo médio | r: 5px, opacity: 0.35 |
| Nó — núcleo | r: 3px, fill: branco |
| Barra Vertical | Estrutura, disciplina, confiabilidade | |
| Arco | Inovação, visão, movimento | |
| Nó de IA | Inteligência artificial, conexão, dados |
viewBox: 0 0 80 80
Área útil: 64×64px (margem: 8px)
Ponto central do nó: cx=52, cy=40
| Arquivo | Descrição | Fundo Recomendado | Uso Principal |
|---|---|---|---|
| svg/logo-primary.svg | Símbolo + wordmark, gradiente azul-índigo | Claro (branco, precisão-50) | Uso principal — website, apresentações |
| svg/logo-secondary.svg | Versão violeta (Visão) | Claro | Variação em materiais secundários |
| svg/logo-negative.svg | Versão clara (azul-gelo) | Escuro (precisão-950, gradiente) | Dark mode, fundos escuros |
| svg/logo-horizontal.svg | Layout horizontal compacto | Claro | Cabeçalho de email, barra lateral |
| svg/logo-vertical.svg | Layout vertical (símbolo acima) | Claro ou escuro | Post quadrado, cards |
| svg/symbol-only.svg | Símbolo "Nó Digital" isolado | Qualquer com contraste adequado | Avatar, favicon grande, ícone de app |
| svg/favicon-32.svg | Símbolo otimizado 32×32px | Escuro (embutido) | Favicon de browser |
| svg/favicon-16.svg | Símbolo mínimo 16×16px | Escuro (embutido) | Favicon compacto |
Importante: Usar sempre os arquivos SVG originais. Nunca recriar o logotipo manualmente, redimensionar pixels ou exportar a partir de screenshots. O SVG garante escalabilidade e fidelidade de cor em qualquer tamanho.
A área de proteção define o espaço mínimo ao redor do logotipo que deve ser mantido livre de quaisquer outros elementos visuais, texto ou bordas.
Margem mínima: x = 8px em todos os lados (unidade modular da marca).
| Digital — logotipo completo | 80px de largura |
| Símbolo isolado — digital | 16px × 16px |
| Print — logotipo completo | 2cm de largura |
| Print — símbolo isolado | 0.5cm × 0.5cm |
16px mín.
Ideal: 48px
Todas as cores são nomeadas por personalidade — nunca por matiz. Este princípio garante que as decisões de cor sejam sempre estratégicas, não arbitrárias.
Geradas com Culori (OKLCH perceptualmente uniforme). O stop 500 é sempre o valor-base.
O dark mode da Digital AI não é simples inversão de cores. É um sistema de elevação com 4 níveis de profundidade, refletindo a hierarquia de superfície com sutileza visual.
| Elemento | Família | Peso | Tamanho | Tracking |
|---|---|---|---|---|
| Hero Display | Syne | 800 | 50–67px | -1px |
| H1 | Syne | 700 | 38–50px | -0.5px |
| H2 | Syne | 700 | 28–38px | -0.3px |
| H3 | Syne | 600 | 21–28px | 0 |
| Body Large | DM Sans | 400 | 18–21px | 0 |
| Body Base | DM Sans | 400 | 16–18px | 0 |
| Caption | DM Sans | 400 | 14–16px | +0.2px |
| Label UI | DM Sans | 500 | 12–14px | +0.5px |
| Código | JetBrains | 400 | 14–16px | 0 |
/* Perfect Fourth — ratio 1.333 */ --text-xs: clamp(0.75rem, 0.70rem + 0.17vw, 0.875rem); --text-base: clamp(1rem, 0.90rem + 0.33vw, 1.125rem); --text-xl: clamp(1.333rem, 1.20rem + 0.67vw, 1.777rem); --text-display: clamp(3.157rem, 2.50rem + 2.50vw, 4.209rem);
A integridade da marca depende da aplicação consistente do logotipo. As regras abaixo protegem a identidade visual em todas as suas aparições.
Nunca esticar ou comprimir o logotipo horizontalmente ou verticalmente.
Nunca usar cores fora da paleta oficial (Profundidade, Visão, Impulso).
Nunca adicionar sombra, brilho, outline ou qualquer efeito ao logotipo.
Nunca rotacionar o símbolo ou o logotipo em qualquer ângulo.
Nunca recriar o wordmark com outra fonte. Somente Syne é permitida.
Nunca posicionar sobre fundo com contraste insuficiente (ratio mínimo 3:1).
Nunca separar o símbolo do wordmark exceto quando usar o símbolo isolado aprovado.
Nunca usar abaixo de 80px (digital) ou 2cm (print). O logotipo completo fica ilegível.
Os tokens seguem a especificação W3C Design Token Community Group. 3 camadas: Primitivos (escalas brutas), Semânticos (mapeamento contextual), Dark Mode (elevação).
<!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2? family=Syne:wght@400;500;600;700;800 &family=DM+Sans:ital,opsz,wght@... &family=JetBrains+Mono:wght@400;500 &display=swap" rel="stylesheet"> <!-- Design Tokens CSS --> <link rel="stylesheet" href="tokens/design-tokens.css">
{
"color": {
"profundidade-500": {
"$value": "#0042ab",
"$type": "color"
},
"visao-500": {
"$value": "#3a15be"
}
},
"spacing": {
"1x": { "$value": "8px" },
"6x": { "$value": "48px" }
}
}
{
"semantic": {
"color": {
"action": {
"$value": "{color.profundidade-500}"
},
"action-hover": {
"$value": "{color.profundidade-600}"
},
"bg-primary": {
"$value": "{color.profundidade-50}"
}
}
}
}
:root { /* Cores */ --color-profundidade-500: #0042ab; --color-visao-500: #3a15be; --color-action: var(--color-profundidade-500); /* Tipografia fluida */ --text-base: clamp(1rem, .9rem + .33vw, 1.125rem); /* Gradiente principal */ --grad-brand: linear-gradient(135deg, #0042ab 0%, #3a15be 100%); }
| Grid base | 24×24px |
| Escalas | 16px · 24px · 32px · 48px |
| Estilo | Outline — nunca misturar com filled |
| Stroke | 1.5px no grid 24px |
| Caps | stroke-linecap: round |
| Joins | stroke-linejoin: round |
| Cor | Monocromático — cor única |
| Formato | SVG com viewBox="0 0 24 24" |
| Fill | none (stroke-only) |
brain-circuit
message-bubble
data-flow
shield-check
stopwatch
ai (vago)
chat (vago)
data (vago)
security (vago)
speed (vago)
Todos os ícones devem seguir o estilo outline com stroke 1.5px. Localização: svg/icons/[nome].svg
| Cor | CMYK | Pantone |
|---|---|---|
| Profundidade | C100 M81 Y0 K11 | 2738 C |
| Visão | C90 M95 Y0 K0 | 2096 C |
| Impulso | C100 M40 Y0 K13 | 7687 C |
| Precisão | C0 M0 Y0 K57 | Cool Gray 9 C |
| Perfil de cor | FOGRA51 (offset europeu) |
| Resolução | 300 DPI mínimo |
| Arquivo master | SVG (vetorial) |
| Entrega | PDF/X-4 |
| Sangria | 3mm |
Todas as combinações de cores aprovadas garantem conformidade com WCAG 2.2 nível AA ou superior.
| Combinação | Ratio | Nível |
|---|---|---|
| Profundidade-500 em branco | 8.87:1 | AAA |
| Visão-500 em branco | 10.34:1 | AAA |
| Impulso-500 em branco | 4.96:1 | AA |
| Branco em Profundidade-500 | 8.87:1 | AAA |
| Profundidade-50 em Precisão-950 | 17.14:1 | AAA |
Recomendação: Para garantir conformidade AA, manter ratio mínimo de 4.5:1 para texto normal e 3:1 para texto grande e elementos de UI. Usar sempre as combinações aprovadas acima.
# Digital AI — Identidade Visual /cortex/files/identity-engine/digital-ai/ │ ├── svg/ # Logotipos vetoriais │ ├── logo-primary.svg # ← USO PRINCIPAL │ ├── logo-secondary.svg # Versão violeta │ ├── logo-negative.svg # ← FUNDO ESCURO │ ├── logo-profundidade.svg │ ├── logo-visao.svg │ ├── logo-horizontal.svg │ ├── logo-vertical.svg │ ├── symbol-only.svg # ← AVATAR │ ├── favicon-32.svg │ └── favicon-16.svg │ ├── icons/ # Set de ícones │ └── [nome-descritivo].svg │ ├── tokens/ # Design tokens │ ├── tokens-primitive.json # W3C DTCG L1 │ ├── tokens-semantic.json # W3C DTCG L2 │ ├── tokens-dark.json # Dark Mode │ ├── design-tokens.css # CSS pronto │ └── design-tokens.json # Flat JSON │ ├── html/ # Apresentações HTML │ ├── brand-presentation.html │ ├── brand-manual.html │ └── social-kit.html │ ├── social/ # Assets redes sociais │ ├── avatar-instagram.svg │ ├── cover-linkedin.svg │ └── story-template.svg │ └── brand-identity.md # ← SSOT / DESIGN.md
| Situação | Arquivo Correto |
|---|---|
| Site / App (fundo branco) | logo-primary.svg |
| Site / App (dark mode) | logo-negative.svg |
| Apresentação (claro) | logo-primary.svg |
| Apresentação (escuro) | logo-negative.svg |
| E-mail assinatura | logo-primary.svg (PNG) |
| Avatar Instagram/LinkedIn | symbol-only.svg |
| Favicon de browser | favicon-32.svg |
| Cabeçalho narrow | logo-horizontal.svg |
| Post quadrado / card | logo-vertical.svg |
| Cartão de visita (fundo grad.) | logo-negative.svg |
| Implementação CSS/tokens | design-tokens.css |
| Figma / ferramentas design | design-tokens.json |
brand-identity.md é a Fonte Única de Verdade (SSOT) — contém todos os valores oficiais: HEX, OKLCH, CMYK, Pantone, paths de arquivo e tokens. Sempre consultar antes de qualquer aplicação.
Arquétipo Mago: movimentos purposeful e controlled. Cada animação deve ter propósito narrativo — nunca decorativa. A transformação é o tema central.
| Token | Duração | Caso de Uso |
|---|---|---|
| --motion-xs | 100ms | Ripple, micro-feedback de botão |
| --motion-sm | 200ms | Tooltips, dropdowns, pills |
| --motion-md | 300ms | Cards, expansões, tabs |
| --motion-lg | 500ms | Page transitions, sidebars |
| --motion-xl | 700ms | Onboarding, hero animations |
| Default | cubic-bezier(0.4, 0, 0.2, 1) | Smooth, balanced |
| Entrada | cubic-bezier(0, 0, 0.2, 1) | Aceleração inicial |
| Spring | cubic-bezier(0.34, 1.56, 0.64, 1) | Feedback positivo |
Nó central pulsa: opacity 0.6 → 1.0 — 2s, ease-in-out, infinite. Movimento sutil que reforça a metáfora de "inteligência sempre ativa".
Regra de preferência por redução de movimento: Sempre respeitar prefers-reduced-motion. Em ambiente com essa preferência ativa, substituir animações por transições de opacity simples de 150ms.
| Website | Logo primary em fundo branco ou precisão-50 |
| App/Dashboard | Logo negative em sidebar precisão-950 |
| Dark mode | Logo negative com versão clara |
| Logo primary em PNG (fallback) | |
| Avatar | Symbol only em fundo gradiente |
| Favicon | favicon-32.svg / favicon-16.svg |
| Instagram perfil | Symbol only, fundo gradiente, 1:1 |
| IG post feed | Logo negative em fundo escuro ou gradiente |
| IG stories | Template 9:16 com logo negative |
| LinkedIn banner | Logo negative em fundo gradiente, 4:1 |
| LinkedIn post | Logo primary em fundo claro |
| Open Graph | Logo negative em fundo escuro, 1200×630 |
| Cartão de visita | Logo negative, fundo gradiente marca |
| Apresentação | Logo negative (escuro) ou primary (claro) |
| Banner | Logo vertical, negative, fundo gradiente |
| Papel timbrado | Logo primary, fundo branco, topo esquerdo |
| Co-branding | Versão "Profundidade" (azul sólido) |
| Merchandising | Symbol only em fundo sólido profundidade |
Em situações de co-branding, usar sempre a versão "Profundidade" (azul sólido). Manter a área de proteção completa mesmo em contextos de parceria. Nunca sobrepor o símbolo de outra marca ao símbolo Digital AI. Posicionar o logo Digital AI à direita em layouts lado a lado, separado por divider vertical sutil.
Este documento contém todos os padrões de identidade visual da Digital AI. Para dúvidas sobre aplicação, entre em contato com o time de design antes de qualquer uso não previsto neste manual.
Versão
1.0
Data
Mai 2026
Metodologia
Da Vinci
Tokens
W3C DTCG
digital-ai.tech · CONFIDENCIAL