02 / DESIGN SYSTEM
Consistência
em cada detalhe.
Fundamentos e componentes reutilizáveis para site, produto e comunicação.
FUNDAMENTOS
Uma linguagem.
Muitas superfícies.
Os mesmos valores orientam interfaces densas e apresentações editoriais.
Base de 4 px
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96
Mais respiro entre ideias; proximidade entre elementos relacionados.
Estrutura discreta
4 px em ações, 12 px em superfícies, 20 px em indicadores.
Bordas finas. Sombras apenas para elevação e foco.
Hierarquia clara
Corpo de 16 px; rótulos de 14 px; notas de 12 px.
Linhas de até 66 caracteres e ampliação sem perda de conteúdo.
COMPONENTES VIVOS
Do convite
à confirmação.
Interaja com os exemplos. Os estados são parte do sistema, não um detalhe posterior.
Ações
Primário para a ação principal. Secundário para alternativas. Desabilitado apenas quando houver razão clara.
Indicadores
Cor acompanhada de texto. O significado permanece compreensível sem perceber a cor.
Revelação progressiva
O que aparece primeiro?
A informação necessária para a tarefa. Detalhes complementares ficam acessíveis sem competir com a ação principal.
Como tratar um estado vazio?
Explique o que poderá existir aqui e ofereça um primeiro passo concreto. Evite números e registros fictícios em produção.
ACESSIBILIDADE
A experiência
precisa incluir.
Regras de implementação para todas as novas telas.
| Elemento | Regra | Aplicação |
|---|---|---|
| Contraste | Texto normal: pelo menos 4,5:1 | Carvão/papel e branco/terracota nos pares principais. |
| Foco | Indicador visível de 3 px | Teclado acessa links, botões, campos e detalhes. |
| Toque | Alvos principais com 44 px ou mais | Botões com altura mínima de 50 px. |
| Responsividade | Uma coluna no celular | Conteúdo prioritário primeiro; tabelas com rolagem própria. |
| Movimento | Respeitar preferência do dispositivo | Desativar transições com redução de movimento. |
ESTADOS DE PRODUTO
Clareza também
quando algo falha.
Seu percurso começa aqui.
Escolha uma questão para iniciar sua primeira reflexão.
Organizando o diálogo…
Mantenha a opção de cancelar ou voltar. Não apresentar resposta incompleta como definitiva.
Não foi possível continuar.
Preservar o que foi escrito e oferecer nova tentativa com uma orientação clara.