> For the complete documentation index, see [llms.txt](https://lunarie.gitbook.io/lunarie-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lunarie.gitbook.io/lunarie-docs/experiencia-do-usuario/04-padroes-de-interface.md).

# Padrões de Interface

> **Última atualização:** 08/10/2026 Regras seguidas pelo app hoje, conferidas nos componentes. Os tokens estão em [Marca](/lunarie-docs/marca/01-marca.md), e os componentes em [Componentes](/lunarie-docs/experiencia-do-usuario/05-componentes.md).

## Estrutura das telas

* No layout logado, o cabeçalho tem o botão do menu, a frase da marca (visível a partir de telas pequenas) e a ação principal Adicionar livros.
* Cada página tem um título (`h1`) em Playfair Display e uma ação principal visualmente destacada.
* No mobile, a navegação é a barra inferior fixa, e o conteúdo reserva espaço para ela.

## Botões

| Variante                | Uso                                                                        |
| ----------------------- | -------------------------------------------------------------------------- |
| Primário (`default`)    | A ação principal da tela, uma por vez. Exemplos: Adicionar livros, Salvar. |
| `outline` e `secondary` | Ações complementares, como Baixar (.zip).                                  |
| `ghost` e `link`        | Ações discretas, como Concluir sem enviar.                                 |
| `destructive`           | Ações que apagam dados, como excluir a conta.                              |

O raio é de 4 px. A altura é de 44 px no mobile e 36 px no desktop (alvo de toque, RNF-06). Em diálogos, "Cancelar" e a ação de confirmar têm o mesmo tamanho.

## Formulários

* Usam os componentes compartilhados (`Input`, `Select`, `SearchableSelect`), sem campos crus.
* Pedem só o necessário e agrupam os campos por seção, como na ficha do livro.
* A senha mostra a força em tempo real (`PasswordStrength`) e recusa senhas vazadas.
* "Completar informações" preenche só campos vazios.

## Confirmações

* Ações que apagam dados usam o `ConfirmDialog` (`AlertDialog`), nunca `window.confirm`.
* A exclusão de conta fica na Zona de perigo do `/perfil`, com confirmação extra (ADR-043).
* Reenviar um livro já enviado ao Kindle também pede confirmação.

## Estados

| Estado               | Padrão                                                                                                                                  |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Carregando           | Skeleton para listas, barra de progresso para importação e spinner (`Loader2`) dentro do botão.                                         |
| Vazio                | Mensagem curta que indica o próximo passo.                                                                                              |
| Sucesso e informação | Toast (Sonner).                                                                                                                         |
| Erro                 | Mensagem que diz o que aconteceu e o que fazer, sem código cru. Erros inesperados caem no ErrorBoundary global, com "Tentar novamente". |
| Desabilitado         | Opacidade reduzida e cursor bloqueado.                                                                                                  |

## Mensagens

Curtas, sem termo técnico, nunca culpam a pessoa e seguem o [Tom de Voz](/lunarie-docs/marca/04-tom-de-voz.md).

## Listagens

* A Biblioteca tem três visões: grade de capas, lista e séries.
* Cada livro mostra capa, título e autor. Livros sem capa recebem a capa de reserva, com o título sobre o fundo da marca.
* A lista mostra o status de envio com selo (Badge). As Pendências mostram o ajuste e a ação na mesma linha.

## Raio

Controles e containers usam 4 px (ADR-033). Dialogs e cards usam o raio base (`--radius`), com valores maiores só em elementos de exceção.

## Documentos relacionados

* [Componentes](/lunarie-docs/experiencia-do-usuario/05-componentes.md)
* [Princípios de UX](/lunarie-docs/experiencia-do-usuario/01-principios-de-ux.md)
* [Acessibilidade](/lunarie-docs/experiencia-do-usuario/06-acessibilidade.md)