Sistema de Design

Quando Usar

Use esta habilidade quando precisar de invariantes de implementação mecânica para design de frontend: arquitetura de tokens, hierarquia tipográfica, ordem de carregamento, prevenção de FOUT, estabilidade de cromo, tempo de animação, semântica de cores. Use com design ao construir componentes, páginas ou sistemas de design. (A direção estética vive em...

Aplique com design ao implementar UI: componentes, páginas ou sistemas de design. Cada escolha de cor, tipo e animação deve rastrear de volta a estas regras.

Arquitetura de Tokens

Todas as cores mapeiam para um pequeno conjunto de primitivas. Sem valores hex aleatórios.

• Primeiro Plano: Hierarquia de texto (primário, secundário, atenuado).
• Fundo: Elevação da superfície (base, elevado, sobreposição).
• Borda: Hierarquia de separação (sutil, padrão, ênfase).
• Marca: Identidade e acento primário.
• Semântico: Destrutivo, aviso, sucesso (e informativo opcional).

Use tokens em código (variáveis CSS, objetos de tema); nunca codifique valores hex diretamente para UI.

Tipografia

• Hierarquia: Títulos — peso mais pesado, espaçamento entre letras mais apertado para presença. Corpo — peso confortável para legibilidade. Rótulos/UI — peso médio, funciona em tamanhos menores. Dados — monoespaçado, tabular-nums para alinhamento.
• Combine tamanho, peso e espaçamento entre letras para que a hierarquia seja clara de relance. Se você apertar os olhos e não conseguir distinguir o título do corpo, a hierarquia está muito fraca.
• Fontes: combine uma fonte de exibição com uma fonte de corpo; mantenha a hierarquia legível de relance. Quais fontes é direção, não mecânica — escolha do domínio e afaste-se do seu primeiro instinto/padrão (a média); veja design-espacial §2.
• Dados (apenas funcional): números reais alinhados, IDs, timestamps em monoespaçado com tabular-nums — monoespaçado ganha seu lugar quando os valores se alinham em uma coluna. NÃO espalhe monoespaçado em microtexto decorativo de sobrancelha/metadados ("35MM · DEVELOP · SCAN", legendas falsas de especificações) para um visual "técnico" — isso é a tendência atual de "lixo", não dados. Veja design-espacial §2.

Ordem de Carregamento — primeiro visto, primeiro carregado

A primeira viewport deve renderizar completa e correta, rapidamente. Ordene cada recurso pela ordem em que o usuário o vê primeiro; o resto espera.

• Priorize apenas o conjunto acima da dobra (texto principal, imagem/vídeo principal, marca). Pré-carregar tudo é o mesmo que não pré-carregar nada — os verdadeiros críticos perdem a corrida de largura de banda. Escolha as poucas coisas na primeira tela e priorize essas.
• Fontes: auto-hospede WOFF2. Converta OTF/TTF → WOFF2 (Brotli; ~metade dos bytes, glifos idênticos) e <link rel="preload" as="font" type="font/woff2" crossorigin> os pesos usados na primeira viewport. Nunca uma folha de estilo de fonte de terceiros que bloqueia a renderização — uma <link> do Google Fonts adiciona uma viagem de ida e volta de CSS mais DNS/TLS extra antes mesmo que a fonte comece a baixar; auto-hospede em vez disso.
• Imagem/vídeo LCP: fetchpriority="high" na imagem principal (ou no pôster do vídeo); <link rel="preload" as="image"> quando for referenciado por CSS (o parser não consegue ver url()s de CSS cedo). A caixa principal nunca deve estar vazia — envie um pôster/placeholder de baixa resolução para que não haja quadro em branco.
• Abaixo da dobra: loading="lazy" decoding="async" em imagens; preload="none" (ou "metadata") em vídeo; defer JS não crítico. Sempre reserve espaço (aspect-ratio, ou width+height) para que a mídia adiada não possa mudar o layout (CLS).
• Mantenha o head que bloqueia a renderização mínimo: CSS crítico inline, o resto adiado.

Nunca deixe fontes aparecerem (sem FOUT) — nunca

font-display: swap é o pop — ele renderiza uma fonte de fallback, depois troca para a webfont e refaz o layout. Não o use para nenhum texto que o usuário esteja observando carregar (títulos, logotipos, cópia principal). A regra é absoluta: o texto do título/exibição nunca deve piscar um fallback ou refazer o layout.

• Controle a visibilidade com a fonte real. Sincronamente em <head>, adicione uma classe fonts-pending a <html> que contém o texto da fonte de exibição em opacity: 0. Em document.fonts.ready — acione-o com document.fonts.load('<weight> 1em "Family"') para cada face crítica — troque para fonts-ready e fade in o texto (0.5s). Sempre inclua um timeout de segurança (2.5s) que revela independentemente, para que uma falha de fonte nunca possa deixar o texto permanentemente oculto.
• Combine isso com preload + WOFF2 (acima) para que a janela oculta seja de algumas centenas de milissegundos, não segundos — o fade soa intencional, não como uma pausa.

…