Análise de 30 sites em relação a um contrato de design de 40 verificações

A manchete

Classificamos 30 sites a partir do nosso ranking ao vivo — sistemas de design (Primer, Spectrum, Geist), SaaS (Vercel, Linear, Stripe), hardware (Apple), galerias de inspiração (CSS Design Awards, FWA) e mais.

Designesy realiza 40 verificações determinísticas contra qualquer URL — tokens, movimento, acessibilidade, cadência, takt, poise, identidade, interação, desempenho, responsividade, semântica, segurança, especificação e redação. Sem LLM, sem heurísticas. Cada verificação é reproduzível.

Os resultados foram piores do que esperávamos.

60% dos sites receberam nota D ou F. Nenhum site recebeu nota B. A diferença entre "parece bom" e "passa um contrato de design determinístico" é enorme.

O que significa "passar"

Em 30 sites × 40 verificações = 1.110 verificações totais:

Mais verificações avisam do que passam. Um "aviso" significa que a verificação detectou algo parcial — um arquivo de token existe, mas usa hexadecimais simples em vez de cores estruturadas, ou o movimento reduzido está presente, mas não é escalonado. A indústria está em um estado de adoção parcial: as equipes sabem que deveriam ter tokens de design, padrões de movimento e portões de acessibilidade, mas a maioria não terminou o trabalho.

Onde os sites falham mais

Tokens (média 40.8 — a pior dimensão)

11 dos 30 sites pontuam abaixo de 50 em conformidade com tokens. As falhas comuns:

• Cores hexadecimais simples em vez de tokens estruturados ($type: color com colorSpace + componentes)
• Sem ponteiro $schema — arquivos de token não declaram a qual especificação estão conformes
• Números mágicos em espaçamento/raio em vez de uma escala nomeada
• Sem tokens de superfície em modo escuro — sites que têm modo escuro, mas não estruturam suas superfícies como tokens escalonados por luminosidade

Essa é a lacuna do W3C DTCG 2025.10. A especificação se tornou estável em outubro de 2025, e 84% das equipes dizem que usam tokens de design — mas a maioria os utiliza de forma informal, não em um formato conforme.

Movimento (média 52.5 — segundo pior)

11 dos 30 sites pontuam abaixo de 50 em movimento. As falhas comuns:

• Sem caminho de movimento reduzido — prefers-reduced-motion está ausente ou é um interruptor que remove toda animação em vez de escalonar (Tier 1 remove / Tier 2 suaviza / Tier 3 mantém)
• Sem tokens de suavização — sites usam 15 diferentes cubic-beziers em vez de uma escala de suavização de 4 tokens
• Animação de layout — animando width, height, top, left em vez de transform/opacity
• Sem escala de duração — cada transição tem uma duração de número mágico diferente

As diretrizes de interface humana da Apple são a referência aqui — eles escalonam o movimento reduzido (remover completamente, suavizar ou manter) em vez de tratar a acessibilidade como um interruptor binário. Apenas 1 site em nossa amostra faz isso corretamente.

Interação (média 60.0 — 12 sites abaixo de 50)

12 dos 30 sites pontuam abaixo de 50 em interação. Esta é a dimensão com mais falhas evidentes:

• :focus remove o contorno sem substituição — o padrão de falha de acessibilidade mais comum
• Sem :focus-visible — foco de teclado e mouse são tratados de forma idêntica
• Sem feedback de pressão — sem scale(0.97) ou equivalente de feedback de pressão em elementos interativos

Os 5 melhores

Nenhum site recebeu nota B. A diferença entre C (melhor pontuação não autoavaliada: 77.7) e A (100) é de 22 pontos — essa é a diferença entre "tem tokens, mas usa hexadecimais simples" e "tem tokens estruturados conformes ao DTCG com um ponteiro $schema e colorSpace."

Os 5 piores

Os 5 piores contam uma história: os sites que premiam "bom design" falham em um contrato de design determinístico. CSS D