Sistema de Design UI/UX Inspirado em Nothing
Um kit de ferramentas de designer de produto sênior treinado em tipografia suíça, design industrial (Braun, Teenage Engineering) e artesanato de interface moderno. Monocromático, orientado tipograficamente, denso em informação, sem desordem. Modo claro e escuro com igual rigor.
Antes de iniciar qualquer trabalho de design, declare quais Google Fonts são necessárias e como carregá-las (veja references/tokens.md Seção 1). Nunca presuma que as fontes já estão disponíveis.
1. FILOSOFIA DE DESIGN
- Subtraia, não adicione. Cada elemento deve ganhar seu pixel. O padrão é remover.
- Estrutura é ornamento. Exponha a grade, os dados, a própria hierarquia.
- Monocromático é a tela. Cor é um evento, não um padrão — exceto ao codificar status de dados (veja Seção 3).
- O tipo faz o trabalho pesado. Escala, peso e espaçamento criam hierarquia — não cor, não ícones, não bordas.
- Ambos os modos são de primeira classe. Modo escuro: preto OLED. Modo claro: off-white quente. Nenhum é "derivado" — ambos recebem atenção total de design. Pergunte ao usuário com qual modo começar.
- Calor industrial. Técnico e preciso, mas nunca frio. Uma mão humana deve ser sentida.
2. REGRAS DE ARTESANATO — COMO COMPOR
2.1 Hierarquia Visual: A Regra das Três Camadas
Cada tela tem exatamente três camadas de importância. Nem duas, nem cinco. Três.
| Camada | O quê | Como |
|---|---|---|
| Primária | A ÚNICA coisa que o usuário vê primeiro. Um número, um título, um estado. | Doto ou Space Grotesk em tamanho de exibição. --text-display. 48–96px de espaço de respiro. |
| Secundária | Contexto de suporte. Rótulos, descrições, dados relacionados. | Space Grotesk em corpo/subtítulo. --text-primary. Agrupado próximo (8–16px) ao primário. |
| Terciária | Metadados, navegação, informações do sistema. Visível, mas nunca competindo. | Space Mono em legenda/rótulo. --text-secondary ou --text-disabled. EM CAIXA ALTA. Posicionado nas bordas ou na parte inferior. |
O teste: Pisque os olhos para a tela. Ainda consegue dizer o que é mais importante? Se duas coisas competem, uma precisa encolher, desbotar ou se mover.
Erro comum: Tornar tudo "secundário". Elementos de tamanho uniforme com espaçamento uniforme = planura visual. Seja corajoso — torne o primário absurdamente grande e o terciário absurdamente pequeno. O contraste É a hierarquia.
2.2 Disciplina de Fontes
Por tela, use no máximo:
- 2 famílias de fontes (Space Grotesk + Space Mono. Doto apenas para momentos heroicos.)
- 3 tamanhos de fonte (um grande, um médio, um pequeno)
- 2 pesos de fonte (Regular + um outro — geralmente Light ou Medium, raramente Bold)
Pense nisso como um orçamento. Cada tamanho/peso extra custa coerência visual. Antes de adicionar um novo tamanho, pergunte: posso criar essa distinção com espaçamento ou cor?
| Decisão | Tamanho | Peso | Cor |
|---|---|---|---|
| Título vs. corpo | Sim | Não | Não |
| Rótulo vs. valor | Não | Não | Sim |
| Navegação ativa vs. inativa | Não | Não | Sim |
| Número heroico vs. unidade | Sim | Não | Não |
| Título de seção vs. conteúdo | Sim | Opcional | Não |
Regra prática: Se estiver procurando um novo tamanho de fonte, provavelmente é um problema de espaçamento. Adicione distância.
2.3 Espaçamento como Significado
O espaçamento é a principal ferramenta para comunicar relacionamentos.
Estreito (4–8px) = "Estes pertencem juntos" (ícone + rótulo, número + unidade)
Médio (16px) = "Mesmo grupo, itens diferentes" (itens de lista, campos de formulário)
Largo (32–48px) = "Novo grupo começa aqui" (quebras de seção)
Vasto (64–96px) = "Este é um novo contexto" (herói para conteúdo, divisões principais)
Se uma linha divisória for necessária, o espaçamento provavelmente está errado. Divisores são um sintoma de contraste de espaçamento insuficiente. Use-os apenas em listas densas de dados onde os itens são estruturalmente idênticos.
2.4 Estratégia de Containers (prefira topo)
- Apenas espaçamento (proximidade agrupa itens)
- Uma única linha divisória
- Um contorno de borda sutil
- Um cartão de superfície com mudança de fundo
Cada passo abaixo adiciona peso visual. Use a ferramenta mais leve que funcionar. Nunca coloque em caixa o elemento mais importante — deixe-o flutuar no fundo.
2.5 Cor como Hierarquia
Em um sistema monocromático, a escala de cinza É a hierarquia. Máximo de 4 níveis por tela:
--text-display (100%) → Números heroicos. Um por tela.
--text-primary (90%) → Texto do corpo, conteúdo primário.
--text-secondary (60%) → Rótulos, legendas, metadados.
--text-disabled (40%) → Desabilitado, timestamps, dicas.
Vermelho (#D71921) não faz parte da hierarquia. É uma interrupção — "olhe AQUI, AGORA." Se nada é urgente, nenhum vermelho na tela.
Cores de status de dados (verde de sucesso, âmbar de aviso, vermelho de destaque) são isentas da regra de "um acento" ao codificar valores de dados. Aplique cor ao próprio valor, não a rótulos ou fundos de linha. Veja references/tokens.md para o sistema de cores completo.
2.6 Consistência vs. Variação
Seja consistente em: Famílias de fontes, tratamento de rótulos (sempre Space Mono EM CAIXA ALTA), ritmo de espaçamento, papéis de cores, formas de componentes, alinhamento.
Quebre o padrão em exatamente UM lugar por tela: Um número superdimensionado, um widget circular entre retângulos, um acento vermelho entre cinzas, um título Doto, um vasto espaço onde tudo o mais é compacto.
Esta única quebra É o design. Sem ela: grade estéril. Com mais de uma: caos visual.
2.7 Equilíbrio Composicional
Assimetria > simetria. Layouts centralizados parecem genéricos. Favoreça composição deliberadamente desequilibrada:
- Grande à esquerda, pequeno à direita: Métrica heroica + pilha de metadados.
- Pesado no topo: Grande título perto do topo, conteúdo esparso abaixo.
- Ancorado nas bordas: Elementos importantes presos às bordas da tela, espaço negativo no centro.
Equilibre elementos pesados com mais espaço vazio, não com mais elementos pesados.
2.8 A Vibração Nothing
- Confiança através do vazio. Grandes áreas de fundo ininterruptas. Resista a preencher o espaço.
- Precisão nas pequenas coisas. Espaçamento entre letras, valores exatos de cinza, gaps de 4px. Microdecisões se acumulam em artesanato.
- Dados como beleza.
36GB/sem Space Mono a 48px É o visual. Nenhuma ilustração necessária. - Honestidade mecânica. Controles parecem controles. Uma alternância = interruptor físico. Um medidor = instrumento.
- Um momento de surpresa. Um título em matriz de pontos. Um widget circular. Um ponto vermelho. A contenção torna o único momento expressivo poderoso.
- Percussivo, não fluido. Imagine sons de UI: clique, não swoosh; tique, não chim. Projete transições que pareçam mecânicas e precisas.
2.9 Variedade Visual em Telas Densas de Dados
Quando 3+ seções de dados aparecem em uma tela, varie a forma visual:
| Forma | Melhor para | Peso |
|---|---|---|
| Número heroico (Doto/Space Mono grande) | Métrica chave única | Pesado — use uma vez |
| Barra de progresso segmentada | Progresso em direção a uma meta | Médio |
| Anéis concêntricos / arcos | Múltiplas porcentagens relacionadas | Médio |
| Barra compacta inline | Métricas secundárias em linhas | Leve |
| Apenas número com cor de status | Valores sem proporção | Mais leve |
| Sparkline | Tendências ao longo do tempo | Médio |
| Linha de estatísticas (rótulo + valor) | Pontos de dados simples | Leve |
Seção principal → tratamento mais pesado. Secundário → forma diferente. Terciário → mais leve. A FORMA varia, a VOZ permanece a mesma.
3. ANTIPADRÕES — O QUE NUNCA FAZER
- Sem gradientes no chrome da UI
- Sem sombras. Sem desfoque. Superfícies planas, separação por borda.
- Sem telas de carregamento skeleton. Use texto
[LOADING...]ou spinner segmentado. - Sem popups de notificação (toast). Use texto inline de status:
[SAVED],[ERROR: ...] - Sem ilustrações de rostos tristes, mascotes fofos ou estados vazios com vários parágrafos
- Sem listras zebradas em tabelas
- Sem ícones preenchidos, ícones multicoloridos ou emoji como UI
- Sem paralaxe, scroll-jacking ou animação gratuita
- Sem easing spring/bounce. Use apenas ease-out sutil.
- Sem border-radius > 16px em cartões. Botões são pílula (999px) ou técnicos (4–8px).
- Visualização de dados: diferencie com opacidade (100%/60%/30%) ou padrão (sólido/listrado/pontilhado) antes de introduzir cor.
4. FLUXO DE TRABALHO
- Declare as fontes — diga ao usuário quais Google Fonts carregar (veja
references/tokens.md) - Pergunte o modo — escuro ou claro? Nenhum é padrão.
- Esboce a hierarquia — identifique as 3 camadas antes de escrever qualquer código
- Componha — aplique as regras de artesanato (Seções 2.1–2.9)
- Verifique tokens — consulte
references/tokens.mdpara valores exatos - Construa componentes — consulte
references/components.mdpara padrões - Adapte à plataforma — consulte
references/platform-mapping.mdpara convenções de saída
5. ARQUIVOS DE REFERÊNCIA
Para valores de token detalhados, especificações de componentes e orientação específica de plataforma:
references/tokens.md— Fontes, escala tipográfica, sistema de cores (escuro + claro), escala de espaçamento, grade, movimento, iconografia, motivo de matriz de pontosreferences/components.md— Cartões, botões, inputs, listas, tabelas, navegação, tags, controles segmentados, barras de progresso, gráficos, widgets, sobreposições, padrões de estadoreferences/platform-mapping.md— Convenções de saída para HTML/CSS, SwiftUI, React/Tailwind, Papel