Da referência à decisão

Entender o nome é o começo.
Escolher bem vem depois.

Guias práticos para conectar componentes, comportamento e acessibilidade às decisões do seu projeto.

01 / Sobreposições

Modal, drawer ou popover?

Escolha a superfície pela tarefa, pelo contexto e pelo quanto ela precisa interromper a navegação.

Ler o guia →
02 / Feedback

Toast, alerta, banner ou callout?

Nem toda mensagem precisa interromper. Relacione duração, urgência e alcance ao componente certo.

Ler o guia →
03 / Formulários

Checkbox, radio ou switch?

A diferença está no modelo de escolha e no momento em que a mudança é aplicada.

Ler o guia →
04 / Comportamento

Os estados que toda tela precisa considerar

O caminho feliz é só uma parte da experiência. Planeje vazio, espera, falha, sucesso e recuperação.

Ler o guia →
05 / Acessibilidade

Acessibilidade para quem está começando

Uma revisão prática de teclado, foco, rótulos, contraste e movimento — sem tratar uma lista como certificação.

Ler o guia →
06 / IA e design

Como pedir uma interface para uma IA

Transforme “faz uma telinha bonita” em um pedido com objetivo, estrutura, estados e critérios verificáveis.

Ler o guia →
07 / Layout

Responsivo vai além de empilhar colunas

Adapte conteúdo, navegação e controles ao espaço disponível, sem perder o objetivo da tarefa.

Ler o guia →
08 / Fundamentos

Componente, estilo ou sistema de design?

Entenda o que cada termo descreve para combinar referências sem misturar função, aparência e regras.

Ler o guia →
09 / Fundamentos

Glossário essencial: do hover ao breakpoint

As palavras que aparecem nas conversas de design e desenvolvimento, explicadas sem complicação.

Ler o guia →
10 / Dados

Tabela, cartão ou gráfico?

Escolha a representação que responde à pergunta da pessoa, em vez de começar pelo formato mais chamativo.

Ler o guia →
BIBLIOTECA UI / EXPLORAR