> ## Documentation Index
> Fetch the complete documentation index at: https://docs.growtify.me/llms.txt
> Use this file to discover all available pages before exploring further.
# Direção visual e temas
> Compare demonstrações reais e escolha a base visual com critérios.
Comparação ampliada em 08/09/2026. **Nenhum tema está escolhido, comprado ou homologado no Growtify.** O tema serve ao protótipo e ao Design System; sua adaptação ao CRM será própria. [Limites técnicos](/viabilidade).
## Recomendação técnica
**Primeiro candidato: TailAdmin na edição HTML.** É a opção mais direta para avaliar componentes sem obrigar um segundo framework dentro do GHL. **Alternativa: Metronic HTML**, se seus layouts agradarem mais e as diferenças de edição forem aceitas. **Berry React/MUI** permanece uma alternativa visual, com maior trabalho provável de tradução para CSS sobre o DOM nativo.
Essa ordem é uma avaliação de esforço e dependências, **não uma escolha estética, cotação de horas ou certificação de compatibilidade**. Nenhum deles é um tema nativo de instalação direta no HighLevel.
Primeiro candidato técnico. Avaliar navegação, formulários, chat, calendário e kanban da mesma edição.
Alternativa pela variedade de layouts. Recursos anunciados para React/Next não devem ser presumidos no HTML.
Alternativa visual. O acesso direto ao CRM redirecionou para login de demonstração; painel interno não foi homologado nesta revisão.
## Componentes que precisamos comparar
| Componente Growtify | TailAdmin HTML | Metronic HTML | Berry React |
| ------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------ |
| Sidebar, header e autenticação | Presentes na demo | Presentes na demo | Referência Material; login observado |
| Formulários, tabelas e modais | Links e exemplos publicados | Páginas de conta, tabelas e modais publicados | Fornecedor oferece componentes MUI |
| Conversas / chat | [Chat](https://demo.tailadmin.com/chat) | Catálogo anuncia AI Chat com HTML “Soon”; não contar como entregue | Chat anunciado; interior não testado |
| Calendário | [Calendário](https://demo.tailadmin.com/calendar) | App Calendar com HTML “Soon” no catálogo | Calendário anunciado; interior não testado |
| Kanban | [Task Kanban](https://demo.tailadmin.com/task-kanban) | Confirmar a edição e a página específica; não confundir grid de projetos com pipeline | Confirmar pacote e comportamento |
| Gráficos | Exemplos visuais; não transferem dados/interação do GHL automaticamente | Mesma restrição | Mesma restrição |
| Mobile / dark / light | Exige teste completo além do dashboard | Exige teste completo além do dashboard | Exige teste interno, não apenas login |
Presença de uma página não prova paridade com o Growtify. Kanban de tarefas não implementa pipeline, chat demonstrativo não implementa WhatsApp e gráfico do tema não substitui o gráfico nativo.
Fontes: [TailAdmin e edições](https://tailadmin.com/), [catálogo Metronic](https://keenthemes.com/metronic), [Berry / MUI Store](https://mui.com/store/items/berry-react-material-admin/).
### Links para revisar sem procurar
* **TailAdmin:** [login](https://demo.tailadmin.com/signin.html), [chat](https://demo.tailadmin.com/chat), [calendário](https://demo.tailadmin.com/calendar), [kanban](https://demo.tailadmin.com/task-kanban), [modais](https://demo.tailadmin.com/modals), [fornecedor e compra](https://tailadmin.com/).
* **Metronic:** [demo HTML](https://keenthemes.com/metronic/tailwind/demo1/), [catálogo com variantes](https://keenthemes.com/metronic), [licenças e compra](https://keenthemes.com/metronic/pricing).
* **Berry:** [preview oficial](https://mui.com/store/previews/berry-react-material-admin/), [pacote e compra](https://mui.com/store/items/berry-react-material-admin/), [licença](https://mui.com/store/license/).
## O que foi testado nas demos
| Candidato | Evidência desta revisão | Pendência / ressalva |
| -------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| TailAdmin HTML | Dashboard abriu em desktop e 390 px; carregamento mobile empilha cards e recolhe menu | Menu abriu; Escape não o fechou no teste. Botões do header sem nome acessível observado; revisar foco, rótulos e gráficos com rolagem interna |
| Metronic HTML Demo 1 | Dashboard abriu; carregamento direto a 390 px mediu documento ≈375 px | Ao redimensionar de desktop para mobile, houve largura ≈853 px; recarregar normalizou. Testar mudança de orientação e gráficos, não só abertura inicial |
| Berry | Página comercial e login cabem na largura observada de 390 px | Rota CRM exige login; nenhum resultado de QA do dashboard inferido a partir da landing page |
Não foram auditados todos os componentes, desempenho de pacote, contraste, leitores de tela ou Safari/iOS real. “Responsivo” no anúncio do fornecedor não substitui esses testes.
## Licença: atenção antes da compra
| Tema | O que o fornecedor informa | O que precisamos confirmar para a NOMMAD |
| ----------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| TailAdmin | Starter e Business não são válidas para SaaS; Extended menciona SaaS com redistribuição | Uso como adaptação white label sobre GHL, usuários pagantes, subcontas e demonstração no mesmo produto |
| Metronic | Diferencia Regular, Extended para SaaS e Developer para redistribuição/OEM | Se nosso modelo é um único produto SaaS ou demanda licença de redistribuição |
| Berry / MUI | Standard não permite produto vendido a usuários; Extended permite um produto pago e mantém restrições de redistribuição | Abrangência do uso em subcontas e distribuição do pacote adaptado, sem redistribuir fontes do tema |
Fontes: [TailAdmin License](https://tailadmin.com/license), [Metronic License](https://keenthemes.com/metronic/legal/license), [MUI Store License](https://mui.com/store/license/).
Essa é uma triagem dos termos publicados, não confirmação contratual do fornecedor. Antes de pagar, obter confirmação escrita para o uso específico. Conferir também licenças de gráficos, ícones, fontes e demais dependências; a licença do template não elimina automaticamente obrigações de terceiros. Nenhum fornecedor foi contatado e nenhuma condição foi aceita nesta etapa.
**Pergunta preparada ao fornecedor:** “Podemos usar a edição \[nome/versão] como protótipo e adaptar seus estilos para um único produto SaaS white label, Growtify, operado pela NOMMAD sobre GoHighLevel e usado por várias subcontas de clientes pagantes, sem entregar o código-fonte do tema para redistribuição? Qual licença cobre esse uso e as dependências incluídas?”
## O que instalar — e o que não instalar
Pacote aprovado, dados fictícios e navegação estática. A página do Design System compartilha os mesmos tokens com todas as telas. HTML/Tailwind ou React são escolhas de implementação do protótipo; Marcelo escolhe o visual, não precisa escolher a arquitetura.
CSS próprio por componente e ajustes mínimos de comportamento, preservando os controles originais. Não importar o app React, o reset global ou todas as classes do tema dentro do GHL. O [Preflight do Tailwind](https://tailwindcss.com/docs/preflight) altera estilos-base; deve permanecer fora do CRM nativo.
Excluir pacote que dependa de backend para demonstrar as telas, licença inadequada, arquivos ausentes, componente anunciado mas indisponível, navegação essencial inacessível no mobile ou necessidade de reconstruir o CRM por API.
## Direção de arte: critérios, não imposição
* **Identidade:** distância visual do GHL, hierarquia, tipografia e densidade confortável.
* **Uso diário:** ações claras, busca, filtros e estados; não só um dashboard vistoso.
* **Mobile:** painéis que se alternam, campos legíveis, toque, teclado e ausência de cortes.
* **Dark/light:** ambos desenhados; não inverter cores automaticamente.
* **Cores:** marca, seleção, alerta e sucesso com funções distintas. Referência: [tokens Atlassian](https://atlassian.design/foundations/color/).
* **Consistência:** [blocos shadcn/ui](https://ui.shadcn.com/blocks) são referência de padrões, não uma nova biblioteca escolhida.
Neon não é universalmente “ultrapassado”. Brilho, transparência e animações só fazem sentido se não prejudicarem leitura, contraste e desempenho. A escolha visual continua com Marcelo.
## Sequência para fechar a escolha
1. Concluir a prova temporária de adaptação sem tema, conforme [Viabilidade](/viabilidade).
2. Marcelo indica o visual preferido entre candidatos e variantes.
3. Conferir edição, versão, componentes, condições de licença e preço do pacote exato.
4. Marcelo aprova a compra e fornece o pacote.
5. Instalar o tema no protótipo, construir o Design System e recriar as telas reais.
Registrar **tema, edição, versão, link, licença, motivos e limitações**. Não comprar por número de componentes ou pela promessa de compatibilidade total.