> ## 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.

# Design System

> Uma base visual compartilhada para manter todas as telas consistentes.

<Note>
  Especificação de trabalho. A biblioteca visual e sua página interativa serão construídas após a escolha do tema.
</Note>

## O que fica aqui e no protótipo

**Mintlify:** decisões, regras e critérios de aprovação.<br />**skin.growtify.me:** componentes funcionando e página interativa do Design System no mesmo projeto do protótipo.

Um acesso discreto no protótipo deverá abrir essa página sem ocupar a navegação do produto.

## Decisões aprovadas

| Elemento                 | Diretriz                                        |
| ------------------------ | ----------------------------------------------- |
| Tema padrão              | Dark                                            |
| Alternativa              | Light, escolhida pelo usuário                   |
| Marca                    | #00EE99, com aplicações legíveis nos dois temas |
| Cobertura                | Desktop, tablet e mobile                        |
| Conteúdo de demonstração | Dados fictícios                                 |
| Direção de arte          | Aprovação de Marcelo; ainda não definida        |

## Uma alteração, várias telas

```mermaid theme={"dark"}
flowchart TD
  A["Tokens: cor, fonte e espaço"] --> B["Componentes compartilhados"]
  B --> C["Login e formulários"]
  B --> D["Tabelas e oportunidades"]
  B --> E["Navegação e dashboards"]
```

Diagrama da organização pretendida, não um inventário de componentes já implementados. A adaptação ao GHL precisa preservar essa consistência dentro dos limites técnicos confirmados.

## Catálogo a construir

| Família      | Itens e estados                                                 |
| ------------ | --------------------------------------------------------------- |
| Fundação     | Cores semânticas, fonte, espaçamento, bordas, raios e sombras   |
| Navegação    | Sidebar, cabeçalho, abas e menu mobile                          |
| Entrada      | Botões, campos, seleção, filtros e validação                    |
| Conteúdo     | Cards, tabelas, modais e alertas                                |
| Visualização | Gráficos, indicadores, kanban e calendário conforme telas reais |
| Estados      | Carregando, vazio, erro, sucesso, desabilitado e foco           |

## Critérios visuais e de uso

* Texto legível e hierarquia reconhecível, sem depender somente de cor.
* Contraste, foco visível, navegação por teclado e controles utilizáveis no toque.
* Modais, tabelas e formulários funcionais nos três tamanhos.
* Gráficos compreensíveis nos dois temas, sem perder dados ou interações.
* Estados de erro e carregamento previstos, não apenas a tela ideal.
* Alterações compartilhadas sem estilos isolados contraditórios.

## Como evoluir a base

Alterar o token ou componente, conferir as telas afetadas, obter aprovação visual quando necessária e registrar a mudança. Não prometer que editar uma regra do protótipo altera automaticamente o GHL em produção.

[Aplicar estes critérios a cada tela](/pagina-a-pagina).