# Fase 6 — Interface

Objetivo: definir o visual e as telas do app. Pessoa leiga não tem repertório de design — traga propostas prontas e bonitas, não perguntas abertas.

## Sumário
- Descobrir preferências sem sobrecarregar
- Design system padrão (Painel da Tata)
- Usar 21st para componentes bonitos
- Derivar as telas a partir das entidades
- Padrões de tela por tipo
- Saída desta fase

## Descobrir preferências (3 perguntas no máximo)

1. **"Você já tem identidade visual — logo, cores da marca?"** (se sim, peça os arquivos/códigos de cor)
2. **"Tem algum sistema/site que você acha bonito e queria parecido?"** (referência visual)
3. **"Prefere algo mais clean e claro, ou mais sério/escuro?"**

Se a pessoa não tiver opinião, **assuma o design system Painel da Tata** e siga.

## Design system padrão — Painel da Tata

Padrão do ecossistema (usar em todos os apps novos, salvo identidade própria):
- **Paleta:** creme + navy + púrpura (acento).
- **Tipografia:** Montserrat (texto/UI) + Cormorant (títulos/destaque).
- O documento oficial do design system está no Obsidian Vault — carregue-o quando for aplicar, pra pegar tokens exatos (cores, espaçamento, componentes).

## 21st para componentes bonitos

Use **21st** (Magic MCP) pra gerar componentes de UI de alto nível — em vez de escrever CSS na unha. Skills de apoio do ecossistema: `/ui-designer`, `/design-page-builder`, `/frontend-design`. Fluxo:
1. Descreva o componente desejado (ex.: "card de orçamento com foto do material, preço destacado e badge de status").
2. Gere com 21st, depois ajuste pros tokens do Painel da Tata.
3. Mantenha consistência: mesmos botões, inputs, cards em todas as telas.

## Derivar as telas a partir das entidades

Cada entidade da Fase 2 gera um conjunto padrão de telas:

| Entidade | Telas geradas |
|---|---|
| Catálogo (ex.: Materiais) | Lista (tabela) + Cadastro/Edição (formulário) |
| Trabalho (ex.: Orçamentos) | Lista com filtros + Formulário (com os campos calculados read-only e os selects dinâmicos da Fase 3) + Tela de detalhe |
| Relatório | Dashboard (cards de métrica + gráficos) |
| Config/Parâmetros | Tela de configurações |
| (transversal) | Login + menu de navegação + (se multi-usuário) gestão de usuários |

## Padrões de tela por tipo

- **Formulário:** campos na ordem da planilha; calculados aparecem read-only e atualizam ao vivo; selects que puxam de catálogo (regras de lookup da Fase 3); validações inline.
- **Lista:** busca + filtros pelos campos mais usados; badge de status (formatação condicional da Fase 3); ações (ver/editar/excluir conforme permissão).
- **Dashboard:** os totais/agregações da planilha (SOMA, CONT.SE) viram cards e gráficos.
- **Mobile:** assuma que será usado no celular — layout responsivo por padrão.

## Saída desta fase (para o BLUEPRINT.md)

```
## Fase 6 — Interface
**Identidade:** [própria / Painel da Tata]
**Tom visual:** [clean claro / sério escuro / ...]
**Telas:** [lista de telas por entidade]
**Componentes-chave:** [cards, tabelas, formulários específicos]
```

Feche com o **checkpoint**.
