> ## 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.
Nenhum tema está aprovado para compra. Os links abaixo são candidatos; o parecer inicial está em [Limites e mecanismo](/viabilidade), e a adaptação final depende de prova prática.
## Abra as demonstrações
Layouts administrativos com base Tailwind.
Componentes com linguagem Material UI.
Variações de layout e componentes administrativos.
## Por que avaliar cada opção
| Candidato | O que observar | Fornecedor |
| --------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| TailAdmin | Flexibilidade de layout, dark/light e opções HTML/React | [Pacotes e compra](https://tailadmin.com/) |
| Berry | Consistência de formulários, tabelas e personalização Material UI | [Pacote e licença](https://mui.com/store/items/berry-react-material-admin/) |
| Metronic | Variedade de layouts; confirmar o que está incluído e o que ainda é anunciado | [Catálogo e compra](https://keenthemes.com/metronic) |
Esses pontos orientam a comparação; não certificam desempenho, cobertura ou adequação da licença ao nosso produto. Conferir o pacote exato antes da compra.
## Como escolher a direção de arte
A decisão não será tomada só pelo dashboard da demonstração. Compare a experiência de trabalho:
* Distância visual do GHL atual.
* Tipografia, proporções, densidade e hierarquia.
* Aplicação da marca sem prejudicar a leitura.
* Clareza nos temas dark e light.
* Sidebar, busca, filtros e ações frequentes.
* Tabelas, formulários, modais e estados vazios.
* Conversas, kanban e calendário.
* Gráficos legíveis, com rótulos e contraste.
* Navegação com uma mão e alvos de toque.
* Leitura de tabelas sem perder ações essenciais.
* Modais, teclado virtual e formulários.
* Ausência de elementos sobrepostos ou cortados.
## Da referência à compra
1. A equipe técnica compara referências atuais e apresenta alternativas com links de telas.
2. Marcelo indica preferências e aprova a direção visual.
3. A equipe cruza a escolha com a viabilidade e verifica componentes, arquivos, licença e custo.
4. Marcelo aprova a compra e fornece o pacote completo.
5. A equipe instala a base e executa a prova técnica prevista no Roadmap.
## Referências atuais, sem impor uma estética
Pesquisa revisada em **08/09/2026**. Não há um estilo único que torne um CRM moderno. Os exemplos abaixo orientam a comparação; não são decisões visuais já aprovadas.
| Direção a avaliar | Referência navegável | Pergunta para o Growtify |
| ---------------------------------------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| Superfícies neutras, marca e estados separados | [Cores e tokens Atlassian](https://atlassian.design/foundations/color/) | O verde identifica a marca sem confundir sucesso, erro e seleção? |
| Navegação compacta e componentes consistentes | [Blocos oficiais shadcn/ui](https://ui.shadcn.com/blocks) | Menus, tabelas e busca aceleram o trabalho sem esconder funções? |
| Interface administrativa mais expressiva | [Berry: demonstração](https://mui.com/store/previews/berry-react-material-admin/) | Cores e cards ajudam a hierarquia ou aumentam o ruído? |
Usar cores por função e valores próprios para dark/light é uma prática documentada pela Atlassian. Os blocos shadcn mostram padrões de sidebar, autenticação e dashboard. São referências, não bibliotecas escolhidas para instalação.
**Neon não está “proibido” ou universalmente ultrapassado.** Brilho, transparência e animação devem ser julgados por leitura, contraste, desempenho e uso diário; a decisão estética continua aberta.
## Leitura técnica dos candidatos
* **TailAdmin:** o fornecedor oferece edições HTML e React, dark/light e elementos de dashboard. Vale comparar as duas edições; HTML não exige adotar React para o protótipo. [Fornecedor](https://tailadmin.com/).
* **Metronic:** o catálogo apresenta pacotes Tailwind e Bootstrap, com demos em diferentes tecnologias. É candidato pela variedade; validar a edição exata para não comprar contando com uma tela de outro pacote. [Fornecedor](https://keenthemes.com/metronic).
* **Berry:** usa React/Material UI, oferece formulários, tabelas e personalização visual; alguns arquivos dependem da licença. Pela estrutura React/CSS-in-JS, sua aparência exigirá adaptação própria para o DOM do GHL. Essa última avaliação é inferência técnica, não uma integração oferecida pelo fabricante. [Fornecedor](https://mui.com/store/items/berry-react-material-admin/).
**Preferência técnica para comparação, não escolha visual:** começar por pacotes com HTML/CSS ou tokens extraíveis pode reduzir o trabalho de adaptação. Não instalar Tailwind, Bootstrap ou estilos globais completos por cima do GHL.
### Antes de pagar
* Confirmar edição, versão, arquivos completos e paridade com a demo.
* Confirmar licença para o modelo SaaS/white label pretendido e número de aplicações; não presumir que a licença básica cobre todos os usos.
* Comparar login, sidebar, conversa, kanban, calendário, tabela, modal e gráficos; falta no tema deve virar item explícito de adaptação.
* Testar estados de erro/vazio, teclado, touch e dois temas — não só o dashboard bonito.
* Não adquirir auth, banco ou backend para o protótipo estático.
Preços e licença final serão conferidos no momento da compra. Nenhum pacote foi comprado, instalado ou adotado.
## Registro da escolha
A aprovação deve registrar **tema + edição + versão + link + licença + motivos + limitações conhecidas**. O pacote comprado deve corresponder à demonstração aprovada.
[Consultar decisões do Design System](/design-system).