Interfaces retrô falham quando copiam ruído. Funcionam quando as restrições se tornam hierarquia, ritmo e feedback. A linguagem visual do LookADev, com linhas de varredura CRT, janelas de terminal e tipografia âmbar sobre fundo escuro, existe porque restrições criam clareza, não porque nostalgia está na moda.
O design começa pela navegação: como facilitar a consulta de um portfólio com projetos diferentes? A metáfora de um sistema operacional retrô oferece convenções úteis. Cards podem lembrar cartuchos, o devlog pode funcionar como um diretório e a seção de stack pode agrupar ferramentas pela função.
Uma sobreposição de linhas de varredura pode usar um pseudoelemento CSS com repeating-linear-gradient e pointer-events: none. Mantenha o contraste baixo e verifique se a sobreposição não dificulta a leitura de textos pequenos. Confira o custo de renderização no celular em vez de assumir que um único elemento não custa nada para pintar.
A tipografia segue regras de design para transmissão. Os títulos usam uma fonte sem serifa condensada com peso alto. O corpo do texto usa uma fonte monoespaçada em tamanho confortável (16-18px). Rótulos acima dos títulos (tags de categoria, indicadores de status) usam uma fonte monoespaçada pequena em maiúsculas, com letter-spacing generoso. Esse sistema de três níveis cria uma hierarquia visual imediata sem depender apenas da cor.
A paleta de cores é restrita de propósito: fundo escuro (#0a0a0a), âmbar quente para o destaque primário (#f59e0b), ciano para o secundário (#06b6d4) e cinzas suaves para textos secundários. Cada cor tem uma função específica: âmbar significa 'ação ou ênfase', ciano significa 'sistema ou status', cinza significa 'informação de apoio'. Essa restrição evita o caos visual que acontece quando temas retrô usam cores neon demais.
Uma animação de inicialização não deve bloquear o acesso à página. Mantenha o conteúdo disponível enquanto a sequência decorativa roda, ofereça uma opção de movimento reduzido e teste o foco do teclado durante a transição. A animação pode apresentar o tema visual sem prender o visitante em uma tela de carregamento.
Referência: MDN: medir antes de usar will-change.