Arquitetura de Marca e Ecossistema
1.1 Hierarquia Corporativa e Modelo de Endosso (Endorsed Brand)
Entidade Corporativa (Empresa): OctADL
Atuação: Empresa de tecnologia, consultoria estratégica e desenvolvimento de software sob medida.
Plataforma Proprietária (Produto SaaS): Nexus by OctADL
Atuação: Suíte corporativa modular de soluções de gestão, automação e produtividade.
Módulos
Componentes da plataforma contratados de forma independente ou combinada, permitindo que o cliente pague apenas pelo que utilizar.
1.2 Taxonomia Semântica Obrigatória
Regras estritas de termos para evitar distorções de posicionamento.| Regra / Termo Analisado | Status | Termos Corretos | Motivo Institucional |
|---|---|---|---|
| HOLDING / SUBSIDIÁRIAS / EMPRESAS DO GRUPO | Termos proibidos. | Empresa / Módulos / Soluções / Verticais. | A OctADL é a empresa; o Nexus é o produto. Não existem subsidiárias ou pessoas jurídicas paralelas. |
| FERRAMENTA / APLICATIVO / APP / SISTEMA ISOLADO | Termos proibidos. | Módulo / Solução do ecossistema. | Manter a percepção de suíte corporativa integrada, evitando a desvalorização comercial. |
| NEXUS COMO EMPRESA | Proibido tratar o Nexus como pessoa jurídica independente. | Plataforma Nexus / Suíte Nexus by OctADL / Sistema Nexus. | Fortalecer o endosso institucional da OctADL. |
| USUÁRIO AVULSO / CONTA | Termos a evitar em contexto comercial/corporativo. | Workspace / Organização. | Padrão corporativo B2B multi-tenant. |
1.3 Portfólio Oficial de Módulos e Descritores (Demonstração em Cards do Hub - Seção 6.1)
Nomes simplificados e descritores funcionais diretos em SVG monocromático (currentColor).Atendimento multicanal, comunicação interna e externa unificada (WhatsApp, e-mail, chat), integrações e disparo de avisos em um só painel.
Folha de pagamento, controle de jornadas, espelho de ponto, recibos, comprovantes de pagamento e alinhamento jurídico-trabalhista.
Controle de fluxo de caixa, contas a pagar e receber, conciliação bancária, demonstrativos financeiros e relatórios de gestão orçamentária.
Recrutamento, seleção, avaliação de desempenho, clima organizacional e desenvolvimento de colaboradores.
Apresentação institucional interativa e compartilhamento instantâneo de dados por aproximação (NFC), leitura de QR Code, carteiras digitais (Apple Wallet / Google Wallet) e links compartilháveis.
Cursos internos, treinamentos operacionais, trilhas de integração (onboarding), avaliações e gestão do aprendizado.
1.4 Identidade Visual e Padrão Tripartite de Cabeçalhos (Headers)
- Formato Gráfico dos Módulos: Logotipos tipográficos integrados (símbolo + nome desenhados no mesmo vetor), formato SVG minimalista em preto e branco (monocromático / currentColor), sem efeitos complexos ou degradês pesados.
- Regra de Cabeçalho: Marca e identificador sempre CENTRALIZADOS. Extremidade esquerda reservada para navegação/menu e extremidade direita reservada para perfil, navegação secundária ou ações de conta.
1.5 Governança de Roteamento e Ambientes (DNS)
Institucional Corporativo da Empresa.
Portal Comercial da Plataforma SaaS.
Páginas Comerciais e LPs de Módulos.
Base Unificada de Ajuda e Wiki (e /ajuda/[modulo]/).
Console Central Autenticado (Hub).
Módulos Operacionais Autenticados.
Identidade Verbal e Copywriting
2.1 Pilares do Tom de Voz (Personalidade da Marca)
O tom de voz da OctADL e da plataforma Nexus traduz rigor institucional e aplicação prática.1. Transparente e Intelectualmente Íntegro
O que é: Focado na verdade dos fatos, na precisão técnica e na clareza dos dados.
O que evitar: Promessas milagrosas, meias-verdades de vendas ou exageros sobre capacidades técnicas.
2. Institucional, Seguro e Rastreável
O que é: Linguagem séria, madura e respaldada por conformidade legal e segurança jurídica.
O que evitar: Informalidade excessiva, gírias corporativas da moda ou tom excessivamente jurídico e inacessível.
3. Pragmático e Orientado à Eficiência
O que é: Foco no aumento real da rentabilidade, no controle operacional e na economia de tempo da operação do cliente.
O que evitar: Discursos abstratos, academicismo sem aplicabilidade ou foco excessivo na ferramenta em detrimento do resultado.
4. Claro e Parceiro Estratégico
O que é: Dedicado a transformar complexidades de processos em decisões simples, seguras e acionáveis.
O que evitar: Condescendência, linguagem punitiva ou tratamento desinteressado.
Matriz de Contrastes de Personalidade
- Somos diretos e objetivos, mas nunca rudes ou secos.
- Somos técnicos e precisos, mas nunca complicados ou pedantes.
- Somos institucionais e sólidos, mas nunca lentos, burocráticos ou arcaicos.
- Somos parceiros operacionais, mas sem prometer assumir a gestão manual no lugar do cliente.
2.2 Padrão Gramatical, Pronomes e Tratamento
- Perspectiva da Empresa: Primeira pessoa do plural ("Nossa equipe", "Desenvolvemos", "Nossa estrutura"). Reflete o coletivo de especialistas e a presença humana por trás da tecnologia.
- Tratamento ao Cliente: Foco no ecossistema e na entidade do cliente ("Sua empresa", "Sua operação", "Sua equipe", "Sua estrutura", "Seu negócio"). Trata o cliente como gestor de uma organização, independentemente do porte.
- Papel do Sistema: A plataforma Nexus é uma infraestrutura de automação, controle e produtividade, não um funcionário terceirizado.
✓ Correto: "O Nexus automatiza os lembretes de cobrança da sua empresa."
✗ Proibido: "O Nexus faz todo o trabalho financeiro para você descansar." - Voz Ativa e Firme: Priorizar sentenças onde o sujeito age diretamente.
✓ Correto: "Monitore o fluxo de caixa da sua operação em tempo real."
✗ Incorreto: "O fluxo de caixa da sua operação pode ser monitorado em tempo real."
2.3 Banco de Palavras: Oficial vs. Proibidos
Termos Proibidos e Jargões Eliminados
- Clichês de startup e hype: "Disruptivo", "Revolucionário", "Mágico", "De outro mundo", "Super fácil", "Sem esforço algum".
- Clichês corporativos vazios: "Sinergia", "Holístico", "Paradigma", "Mindset", "Empoderar".
- Infantilização e intimidade excessiva: "Opa!", "Prontinho!", "Ops!", "Eba!", emojis aleatórios em comunicações oficiais.
- Termos de dependência passiva: "Deixe tudo por nossa conta", "Esqueça a sua gestão".
Palavras e Conceitos Incentivados
Eficiência, controle operacional, rentabilidade, auditoria, previsibilidade, conformidade, rastreabilidade, padronização, segurança jurídica, rotina integrada, ganho de tempo, redução de perdas.
2.4 Diretrizes de UX Writing e Microcopy
Para atender do grande tomador de decisão ao microempreendedor autônomo (clínicas, estúdios, salões, consultórios):
- Princípio da Clareza Funcional: Não use jargão contábil/financeiro inacessível, nem simplificações tolas. A ação deve ser autoexplicativa. Exemplo: Preferir "Registrar Pagamento Recebido" a termos dúbios como "Baixar Título Aberto" ou "Marcar como Pago".
- Botões e Ações (CTAs): Verbo no infinitivo indicando ação direta e clara. Padrão:
[Ação Primária] + [Objeto Contextual]. Exemplos: "Salvar Alterações", "Exportar Relatório", "Emitir Recibo", "Conhecer Módulo", "Agendar Apresentação". - Mensagens de Erro: Tom construtivo, neutro e instrutivo. Jamais culpar o cliente ou usar exclamações acusatórias. Estrutura:
[O que ocorreu] + [Instrução direta para solucionar]. Exemplo: "Não foi possível emitir o recibo. Verifique se o CPF do cliente está preenchido corretamente." - Mensagens de Sucesso (Feedback / Toasts): Rápidas, confirmando o resultado da ação sem euforia. Exemplo: "Alterações salvas com sucesso." / "Relatório enviado para o e-mail cadastrado."
- Telas Vazias (Empty States): Devem instruir e motivar o primeiro passo, evidenciando o benefício. Exemplo: "Nenhum cliente cadastrado ainda. Cadastre o primeiro contato para centralizar o histórico de atendimentos da sua empresa."
2.7 Regras de Capitalização (Casing) e Pontuação
Regras de Caixa Alta e Baixa (Casing)
- Botões e Ações (CTAs): Title Case (Exemplo: "Salvar Alterações", "Adicionar Novo Colaborador", "Gerar Relatório").
- Mensagens de Feedback, Toasts e Alertas: Sentence case (Exemplo: "Os dados foram atualizados com sucesso.", "Ocorreu uma falha na conexão.").
- Títulos de Seção e Páginas: Title Case (Exemplo: "Controle de Fluxo de Caixa", "Gestão de Equipes").
- Subtítulos, Descrições e Parágrafos de Apoio: Sentence case.
Regras Rígidas de Pontuação
- Botões e CTAs: Estritamente NUNCA levam ponto final.
- Títulos e Rótulos de Campos isolados: NUNCA levam ponto final.
- Frases completas, toasts e descrições de cards: Obrigatório o uso de ponto final para delimitar a sentença.
2.5 Matriz de Variação de Tom por Canal e Ambiente
1. Portal Institucional OctADL
octadl.com.brFoco: Autoridade corporativa, engenharia de software sob medida, consultoria em dados e governança.
Tom: Executivo, analítico e de alto nível estratégico.
"Engenharia de precisão e inteligência em dados para operações que exigem controle estrito e crescimento sustentável."
2. Portal Comercial Nexus e LPs
nexus.octadl.com.brFoco: Demonstração clara de retorno sobre investimento (ROI), redução de custos e economia de tempo.
Tom: Pragmático, direto, comercial e focado em dores operacionais.
"Automatize rotinas repetitivas, elimine falhas operacionais e reduza custos pagando apenas pelos módulos que sua operação realmente utiliza."
3. Ambiente Interno / Hub
nexus.octadl.com.br/hub/Foco: Eficiência de execução, fluidez e zero distração.
Tom: Utilitário, limpo e direto ao ponto. Textos curtos e rótulos objetivos.
4. Central de Ajuda e Wiki
nexus.octadl.com.br/ajuda/Foco: Suporte didático e resolução imediata de dúvidas técnicas e procedimentais.
Tom: Instrutivo, paciente e estruturado em passos lógicos.
2.6 Central de Ajuda: O "Consultor Digital" e Arquitetura Dual de Conteúdo
Demonstração Interativa (Max-Width: 800px)A documentação da plataforma Nexus é personificada pelo "Consultor Digital" — a representação inteligente e instrucional do sistema. Todo artigo da central de ajuda opera obrigatoriamente com alternância entre dois modos:
Conciliação Bancária Automática via OFX
Público-alvo: Usuários experientes ou com pressa, que apenas precisam relembrar um nome, parâmetro ou atalho. Formato sintético em tópicos objetivos e caixa de caminho exato.
- Selecione a conta bancária vinculada ao CNPJ da sua organização.
- Faça o upload do arquivo
.OFXexportado pelo banco (limite de 10MB). - Clique em Vincular Lançamentos para aprovar as correspondências exatas de valor e data.
Tokens Visuais - Sistema de Cores e Tipografia
3.1 Diretriz de Uso e Acessibilidade
- Filosofia Visual: O ecossistema adota estética minimalista, limpa e funcional. A cor atua exclusivamente como guia de hierarquia, ação e contexto, sem excessos decorativos.
- Regra de Logotipos: Todos os logotipos de módulos permanecem estritamente em SVG monocromático (preto no tema claro, branco no tema escuro, ou currentColor). É proibido colorir os símbolos com cores da paleta.
- Acessibilidade WCAG 2.1: Todo texto corrido e rótulo funcional deve atingir contraste mínimo de 4.5:1 em relação à superfície em que está inserido.
3.2 Cores Estruturais do Sistema (Dinâmicas por Tema)
Use o botão no topo da página para alternar e visualizar os swatches mudando em tempo real.3.3 Textos de Contexto e Status em Linha
Cores aplicadas em textos menores, marcadores ou ícones contextuais sem preenchimento de fundo:
Confirmações textuais, indicadores de valor positivo e status de conclusão.
Pendências que exigem atenção, avisos de prazo e alertas moderados.
Mensagens de validação incorreta, dados inválidos e alertas críticos.
Dicas em linha, explicações complementares do Consultor Digital e badges neutros.
3.4 Cores de Estado Universais (Toasts e Badges)
Cores sólidas universais que mantêm o mesmo valor hexadecimal em ambos os temas:
3.5 Paleta Categórica para Gráficos e Data Visualization (10 Cores Sequenciais)
As 4 primeiras herdam a ação e estados principais; as demais são complementares.3.6 Sistema Tipográfico (Regra Estrita de Gap 200)
Salto obrigatório de 200 unidades entre peso base e destaque.Plus Jakarta Sans (500)
Impacto Comercial / KPI (700)
- Escopo: Títulos de páginas, cabeçalhos de seções, títulos de modais e nomes de métricas.
- Peso Padrão: 500 (Medium) - Imensa maioria dos títulos.
- Peso Destaque: 700 (Bold) - Chamadas em LPs e grandes indicadores numéricos.
- Proibição: Vetado o uso de pesos 400, 600 ou 800.
Inter Regular (400) para leitura corrida.
Inter Semi-Bold (600) para Labels e CTAs
- Escopo: Textos corridos, descrições de módulos, células de tabelas, menus e suporte.
- Peso Padrão: 400 (Regular) - Parágrafos e valores comuns.
- Peso Destaque: 600 (Semi-Bold) - Labels, ênfases em negrito e botões (CTAs).
- Proibição: Vetado o uso de pesos 300, 500 ou 700.
IBM Plex Mono (400): R$ 148.920,00
IBM Plex Mono (600): HTTP 200 OK
- Escopo: Títulos de toasts, códigos de erro, hashes, notas numeradas, chaves de API e logs (corpo do toast usa Inter).
- Peso Padrão: 400 (Regular) - Valores monetários e notas.
- Peso Destaque: 600 (Semi-Bold) - Títulos de toasts e status HTTP.
- Proibição: Vetado o uso de pesos 300 ou 500.
Geometria, Espaçamento, Elevação e Regras de Composição
4.1 Sistema de Grade e Escala de Espaçamento (Base 8px)
Grade modular com base em 8px e sub-módulo de 4px exclusivo para microajustes. É proibido o uso de valores arbitrários ou números ímpares.
4.2 Escala de Arredondamento (Border Radius)
Proibição Geométrica: Botões e inputs nunca devem usar radius-full (estilo cápsula). Devem respeitar estritamente 8px (radius-md).
4.3 Composição de Fundo e Gradientes & 4.4 Elevação
4.3 Uso Restrito de Gradientes
- Onde é permitido: Fundo da Sessão Hero (gradiente radial difuso com foco central usando cor de ação: #8FA0FF a 6% no Dark / #2438D0 a 4% no Light) e Divisores sutis com efeito fade-out nas extremidades.
- Onde é proibido: Textos e títulos, botões (sempre cor sólida), superfície de cards/tabelas/modais e ícones/logotipos vetoriais.
4.4 Elevação, Sombras e Profundidade (Demonstração Real)
Light: Sombra leve + borda #DDD9CF.
Dark: #121421 + borda #283149 (sem sombra).
Light: Sombra média.
Dark: #171A2B + borda #3E4B6E (sem sombra).
Light: Sombra profunda.
Dark: #1A1E30 + borda #5B6787 (sem sombra).
4.5 Ergonomia B2B & 4.6 Motion Tokens
4.5 Alturas de Componentes e Larguras de Containers
- Dashboard / Console do Hub: Max-width 1440px (padding lateral 32px).
- Landing Pages e Institucionais: Max-width 1200px centralizado.
- Leitura, Wiki e Documentação: Max-width 800px para o corpo do texto.
4.6 Microinterações e Padrão de Transição
duration-fast: 150ms(Hover de botões, abas e checkboxes).duration-normal: 200ms(Dropdowns, tooltips e estados de cards).duration-slow: 300ms(Abertura de modais centrais e drawers).- Curva Obrigatória:
cubic-bezier(0.16, 1, 0.3, 1)ouease-out. - Proibição: Vetado o uso de animações elásticas (bounce) ou rotações decorativas.
Data Visualization e Regras para Dashboards (Apache ECharts)
5.1 Diretrizes de Design, 5.2 Hierarquia Cromática e 5.3 Elementos de Suporte
5.1 Clareza Analítica e Proibições
- Tipografia de Dados: Todo número, valor monetário (R$), percentual (%) e data/hora nos gráficos usa obrigatoriamente IBM Plex Mono.
- Proibido: Gráficos pseudo-3D, extrusões ou sombras sob linhas.
- Proibido: Pizza/rosca com mais de 5 divisões (agrupar excedente em "Outros" na Cor 10).
- Proibido: Linhas de grade pesadas.
5.2 Regra Semântica para Finanças
- Cor 01: Entradas, faturamento e ação principal.
- Cor 02: Lucro líquido, superávit e indicadores positivos.
- Cor 03: Metas, custos operacionais e alertas de orçamento.
- Cor 04: Despesas, perdas e indicadores críticos.
- Cores 05 a 09: Comparativos multicategóricos neutros.
- Cor 10: Somatórios residuais ("Outros").
5.3 Eixos, Gridlines e Tooltips
- Eixos X e Y: Linha 1px na cor de divisor; rótulos em Inter 12px TEXT-SECONDARY.
- Gridlines: Apenas linhas horizontais tracejadas (
4 4) com 50% de opacidade. Sem linhas verticais. - Tooltips: Fundo SURFACE-CARD, borda 1px BORDER-STRONG, raio 8px. Linha 1: Inter 12px Regular; Linha 2: Ponto 8px + valor em IBM Plex Mono 14px Semi-Bold.
5.5 Catálogo Restrito de Gráficos Permitidos (6 Modelos Oficiais em Apache ECharts)
Passe o cursor sobre os gráficos para inspecionar os Tooltips customizados conforme a Seção 5.3.1. Gráfico de Linhas (Séries Temporais Contínuas)
Espessura 2px sólido. Dots ocultos por padrão e revelados no hover (raio 4px + anel externo 2px). Suavização sutil.
2. Gráfico de Colunas (Comparativos Categóricos)
Topo com raio de 4px (radius-sm) e base reta (0px). Largura máxima de 32px. Gap de 50% a 70%.
3. Gráfico de Dispersão + Tendência (Scatter Plot + Trendline)
Pontos sólidos de 6px com opacidade de 70%. Linha de regressão tracejada de 2px na cor de ação.
4. Explosão Solar (Sunburst / Hierarquia Concêntrica)
Anéis externos herdam o tom da categoria-mãe. Centro limpo com total em IBM Plex Mono. Separador de 2px na cor de fundo.
5. Histograma (Distribuição de Frequência)
Faixas salariais / tempo de resposta. Gap estrito de 2px entre barras para evidenciar continuidade + curva normal de 1.5px.
6. Gráfico de Área (Simples e Empilhada)
Linha superior sólida de 2px + preenchimento com opacidade reduzida (12-15% Dark / 8-10% Light) sem bloquear o grid.
5.4 Estados de Dados Insuficientes (Zero Data / Empty States em Gráficos)
Quando o módulo for recém-contratado ou não houver dados no período selecionado: é proibido deixar o espaço em branco. Renderiza-se a grade com linha tracejada na base zero e caixa informativa centralizada.
Nenhuma movimentação registrada no período selecionado.
Anatomia dos Componentes Centrais
6.2 Sistema de Botões (Call to Actions - CTAs)
Title Case estrito, sem ponto final, altura padrão de 40px e raio de 8px (radius-md). Tipografia: Inter, 14px, Semi-Bold (peso 600).
6.3 Campos de Formulário e Inputs de Entrada
Altura padrão de 40px, padding horizontal de 16px (space-2), raio de 8px (radius-md). Rótulo acima em Inter 14px Semi-Bold NUNCA utiliza ponto final.
6.4 Janelas Modais e Diálogos de Confirmação
- Backdrop: Cor #0A0D1A com 60% opacidade e
backdrop-filter: blur(4px). - Container Modal: Superfície #1A1E30 (Dark) / #FFFFFF (Light), borda 1px BORDER-STRONG, raio 16px (radius-xl).
- Largura Padrão: 480px para confirmação e 640px para formulários modais.
- Composição: Cabeçalho em Plus Jakarta Sans 18px Medium + botão Fechar (X). Corpo com padding de 32px (space-4). Rodapé alinhado à direita com botão "Cancelar" sempre à esquerda da ação principal.
6.5 Sistema de Notificações e Toasts
- Posicionamento e Dimensões: Canto superior direito, 24px abaixo do header, largura fixa de 360px, raio 8px, sombra Nível 3.
- Borda Lateral Esquerda: 4px preenchida com a Cor Universal de Estado.
- Tipografia: Título em IBM Plex Mono 12px Semi-Bold (Sentence case). Mensagem em Inter 13px Regular finalizada obrigatoriamente com ponto final.
- Duração: 5000ms (5 segundos), exceto erros críticos que exigem fechamento manual.