Base compartilhada
Azul-marinho, azul primário, sucesso/erro, níveis de raio e espaçamento e indicadores de foco são coordenados — reconhecíveis no CRM e no site.
Marca · Produto · Site
Dois sistemas.
Dois sistemas.
Uma marca.
O AgenticUltimate utiliza uma base de marca compartilhada e dois sistemas de design construídos sobre ela: um para a interface do produto no complemento e outro para o AgenticUltimate.
Por que dois sistemas de design?
Produto e marketing têm funções diferentes. Uma base comum mantém a marca reconhecível; camadas separadas de tokens evitam que o CRM pareça uma página de campanha ou que o site pareça um painel administrativo.
Papéis separados
O complemento otimiza densidade e usabilidade. O site otimiza clareza, conversão e apresentação sofisticada — com destaques dosados.
Escalável
Novos módulos e páginas recorrem a tokens e componentes documentados — menos exceções visuais e implementação mais rápida.
AgenticUltimate UI 1.0
Sistema de design do produto (complemento)
Para a interface do SuiteCRM: formulários, tabelas, diálogos, assistentes e áreas de trabalho densas. Funcional, claro e adequado ao ambiente empresarial.
| Área | Conteúdo |
|---|---|
| Cores | Azul-marinho (#001631), primário (#165DCC), cores semânticas de status e superfícies para contextos de trabalho claros |
| Tipografia | Escala compacta da interface para rótulos, tabelas e formulários — legibilidade com alta densidade de informação |
| Espaçamento e raio | Base 4/8/12/16/24/32; raio sm–lg para campos, cartões e diálogos |
| Componentes | Botões, campos, seletores, diálogos, abas, tabelas, etapas de assistentes e indicadores de status |
| Densidade | Exibição compacta opcional para administração e listas |
O público-alvo são administradores e usuários avançados do CRM. Cada decisão responde à pergunta: isso ajuda a processar dados com mais rapidez e segurança?
AgenticUltimate Web 1.0
Sistema de design do site (marketing)
Para o AgenticUltimate: destaque principal, cartões de recursos, confiança, megamenu e modo escuro. Sofisticado, técnico e com ciano e violeta controlados.
Princípios
Clareza antes do efeito — no máximo 1–2 gradientes por área visível.
Uma cor dominante — a cor primária conduz; ciano e violeta apoiam.
Cartões comunicam benefícios — sombras suaves, bordas finas e efeito discreto ao passar o mouse.
Elementos de construção
Tipografia de destaque, etiquetas introdutórias, cartões de recursos, faixas de confiança, visuais do produto, chamadas finais para ação e megamenu. Modos claro e escuro a partir de uma única fonte de tokens.
| Família de tokens | Exemplos |
|---|---|
| Base da marca | --su-navy, --su-primary, --su-ink |
| Destaques | --su-cyan, --su-violet (com moderação) |
| Superfícies | Plana · Sobreposta · Elevada · Destaque |
| Sombras | --su-shadow-sm a --su-shadow-lg, efeito ao passar o mouse sem anel neon |
| Movimento | Transições curtas, respeitando prefers-reduced-motion |
Ponte com o produto
O que é compartilhado e o que permanece separado de propósito.
Compartilhado
Azul-marinho e azul primário · Sucesso/perigo · Raio sm–lg · Base de espaçamento · Anel de foco primário · Nome da marca e linguagem dos ícones
Apenas no site
Destaques e gradientes ciano/violeta · Fundos aurora · Títulos de destaque · Faixa deslizante e sombras de marketing · Vidro com moderação (cabeçalho)
Para equipes e implementação
Como usar os sistemas no dia a dia.
Desenvolver o produto
Use o AgenticUltimate UI 1.0 como referência para novas telas do complemento. Prefira componentes existentes antes de criar variantes.
Expandir o site
Use o AgenticUltimate Web 1.0 e os tokens em site.css. Oriente novas seções pelos padrões: destaque → confiança → recursos → chamada para ação.
Garantir a qualidade
Verifique contraste, operação por teclado e movimento reduzido. PageSpeed e acessibilidade continuam fazendo parte do padrão de entrega.
Explorar os sistemas de design ao vivo
O sistema interativo do site apresenta tokens, componentes e modo escuro. A interface do produto continua sendo a referência para o complemento no SuiteCRM.