A especificação do sistema de design da Vercel é realmente um exemplo digno de livro-texto do que já vi.
Hoje, estudei a fundo o DESIGN.md deles. Com temas claro e escuro, ele descreve completamente cores, fontes, espaçamento, componentes, animação e regras de redação em uma metodologia de design executável.
Sinto que posso seguir esse caminho para o design.md de todos os meus produtos futuros.
Os detalhes estão aqui:
Alguns amigos podem não saber o que é DESIGN.md. Simplificando, é uma especificação de design para a IA ler. Quando a IA nos ajuda a escrever código, ela precisa saber quais cores usar, quais tamanhos de fonte aplicar e o espaçamento entre os elementos.
Sem esse arquivo, as interfaces que a IA produz parecem diferentes a cada vez, com um estilo inconsistente.
Depois de ler o DESIGN.md da Vercel, percebi que um bom DESIGN.md é muito mais do que apenas dizer à IA quais códigos hexadecimais ou tamanhos de fonte usar. Ele representa todo um conjunto de pensamento de design. Isso meio que subverteu minha percepção.
Hoje, vou detalhar por que esse arquivo é tão bom.
1
Primeiro, vamos falar sobre cor.
Quando comecei a escrever DESIGN.md, a seção de cores era muito simples. Eu listava alguns valores de cor, dizia à IA qual era a cor primária, secundária e de destaque, e era basicamente isso.
Mas escrevendo assim, a IA ainda não sabe como essas cores correspondem a diferentes estados de interação.
Por exemplo, para um botão, qual deve ser a cor do estado padrão? Quanto mais escuro deve ficar ao passar o mouse? Qual deve ser a cor no momento do clique? Se esses detalhes não forem definidos explicitamente, os resultados gerados pela IA podem diferir a cada vez.
A abordagem da Vercel resolve completamente esse problema.
No sistema de design deles, cada série de cores é dividida em 10 gradientes de 100 a 1000, e cada número corresponde a um estado de interface fixo.
100 é o fundo padrão dos elementos, 200 é o fundo ao passar o mouse e 300 é o fundo ao clicar. Subindo, 400 é a borda padrão, 500 é a borda ao passar o mouse e 600 é a borda ao clicar.
700 é usado para blocos de cor sólida, como tags ou o próprio botão; 800 é o estado de foco desses blocos. 900 é usado para texto secundário e ícones, e 1000 é usado para texto primário e ícones.
Parece apenas uma numeração, mas por trás dela existe uma lógica de interação completa.
100 a 300 gerenciam estados de fundo. 400 a 600 gerenciam estados de borda. 700 e 800 gerenciam estados de blocos de cor sólida. 900 e 1000 gerenciam a hierarquia da informação.
Em outras palavras, a Vercel está, na verdade, dizendo à IA que existem vários estados aqui. A cor é apenas a manifestação desses estados.
Os benefícios disso são muito diretos.
Quando a IA escreve código, ela não precisa adivinhar o quanto mais escuro um botão deve ficar ao passar o mouse, nem precisa adivinhar como a borda deve mudar. O estado padrão corresponde a 100, o foco a 200 e o clique a 300; as regras são pré-definidas.
Além disso, com base nisso, a Vercel fornece temas claro e escuro, mas usa exatamente os mesmos nomes de Token.
Por exemplo, gray-1000. No tema claro, é #171717, próximo ao preto puro. No tema escuro, torna-se #ededed, próximo ao branco puro.
Para um sistema de design, essas duas cores são, na verdade, a mesma coisa.
Ambas representam a informação mais importante na página. Desenvolvedores e IA, ao gerar interfaces, focam no significado semântico de gray-1000, e não no valor hexadecimal específico por trás dele. Quando o tema muda, o sistema mapeia automaticamente esse significado semântico para a cor correspondente.
2
Depois de resolver o problema das cores, outra restrição mais importante é o ritmo da página.
O sistema de espaçamento da Vercel é baseado em múltiplos de 4px, fornecendo apenas 9 valores no total: 4, 8, 12, 16, 24, 32, 40, 64, 96. Todo o espaçamento em todo o produto é escolhido a partir desses números.
Minha primeira reação foi que parecia um pouco limitado. E se eu precisar de 20px? E se eu precisar de 28px?
Perguntei a um amigo designer, e ele disse que para a grande maioria dos produtos, 9 estilos de espaçamento são basicamente suficientes.
Se houver muitas opções de espaçamento, o ritmo da página se perde. Muitos sites terríveis têm designs de espaçamento muito aleatórios. Isso é, na verdade, um grande tabu no design de produtos.
Sistemas de design excelentes não dão escolhas infinitas; eles limitam ativamente as escolhas.
A Vercel fornece diretamente um conjunto claro de sugestões de ritmo: mantenha 8px entre elementos dentro de um grupo, 16px entre grupos e 32 a 40px entre seções. Isso está, de fato, definindo o ritmo de respiração da página.
Os usuários podem não notar essas lacunas, mas sentirão naturalmente quais partes pertencem ao mesmo todo e onde uma nova área de conteúdo começa.
Muitas vezes, uma página parece confortável não porque o designer usou alguma técnica avançada, mas porque esse ritmo é mantido consistente em toda a página.
A tipografia segue a mesma lógica.
O sistema de fontes da Vercel é idêntico à lógica de cor e espaçamento.
Todo o texto é categorizado em algumas funções fixas: título, rótulo, corpo e botão.
Em cada função, são fornecidos Tokens de diferentes tamanhos, e cada Token tem fonte, tamanho, peso, altura da linha e espaçamento entre letras pré-definidos.
Anteriormente, ao lidar com um texto, um designer podia pensar se deveria usar 14px ou 15px e qual altura da linha seria apropriada.
Com um sistema de design, a forma de pensar muda. A IA primeiro determina qual função esse texto desempenha. É um título, texto do corpo ou informação secundária? Uma vez determinada a função, o estilo correspondente também é determinado.
Passar de uma mentalidade de tamanho de fonte para uma mentalidade baseada em função. Da tomada de decisão visual para a tomada de decisão semântica. É aí que reside o verdadeiro valor de um sistema de design. Brilhante.
Vendo isso, você percebe que, seja no espaçamento ou nas fontes, a Vercel está fazendo a mesma coisa: reduzir ao máximo o jogo livre durante a fase de execução, com regras determinadas antecipadamente, de modo que a execução exija apenas a escolha de uma função.
Isso é verdade para designers, para desenvolvedores e para a IA.
3
Além disso, a redação também é tratada como uma parte importante da especificação de design da Vercel. Esta é a parte que mais facilmente falta na maioria dos arquivos DESIGN.md.
A Vercel define esses detalhes de forma muito específica.
Por exemplo, o texto do botão deve ser uma ação mais um objeto. Como "Implantar Projeto" ou "Excluir Membro". Você não pode simplesmente escrever palavras vagas como "Implantar", "OK" ou "Excluir".
A razão é simples. Ao ver "Excluir", o usuário ainda precisa pensar sobre o que exatamente está sendo excluído. Com uma ação e um objeto, o usuário pode imediatamente formar um entendimento completo.
As mensagens de erro são semelhantes. As regras da Vercel são claras. Primeiro, diga ao usuário o que aconteceu. Depois, diga ao usuário o que fazer em seguida.
Por exemplo, se uma compilação falhar porque o arquivo de pacote excede o limite de tamanho, a solução é reduzir o tamanho ou ajustar o limite. Depois de ler três frases, o usuário sabe imediatamente onde está o problema e o que fazer a seguir.
Os prompts de erro em muitos produtos são "Operação falhou, tente novamente mais tarde". O conteúdo informativo de tal prompt é quase zero. A única informação que o usuário obtém após lê-lo é que falhou. Quanto ao porquê falhou e o que fazer a seguir, ele ainda precisa adivinhar.
As especificações de redação em um sistema de design estão, essencialmente, reduzindo essa adivinhação.
A Vercel também padronizou as mensagens de notificação após a conclusão de uma operação, que precisam apenas informar qual mudança ocorreu. Por exemplo, "Projeto excluído", não "Projeto excluído com sucesso".
Porque o fato de a caixa de prompt poder aparecer já indica que a operação está completa. A palavra "com sucesso" é informação redundante.
Em seguida, a animação.
Esta parte é particularmente interessante porque é exatamente o oposto da minha intuição. Eu pensaria que quanto mais animação, mais refinado o produto.
Então, adicionar um pouco de animação ao passar o mouse em um botão ou ao abrir um menu parece fazê-lo parecer sofisticado. Muitos produtos Vibe Coding agora parecem estar indo nessa direção.
Mas a atitude da Vercel é completamente diferente. Eles até escreveram explicitamente que, em muitos cenários de interação, 0 milissegundos é muitas vezes a melhor escolha. Em outras palavras, sem animação, concluído instantaneamente.
Se um botão muda de um estado padrão para um estado de foco, essa mudança já é clara o suficiente. O melhor feedback é que isso aconteça imediatamente; adicionar uma camada extra de animação fará com que a interface pareça lenta.
Claro, alguns cenários exigem animação.
Por exemplo, um pop-up aparecendo de repente. Se não houver transição alguma, as pessoas não saberão de onde ele veio. É aí que a animação tem valor.
A Vercel até especifica a duração para diferentes cenários. Mudanças de estado normais são cerca de 150 milissegundos, popovers cerca de 200 milissegundos e modais cerca de 300 milissegundos.
Quanto maior a mudança, mais tempo de reação é dado. Quanto menor a mudança, mais direto o feedback.
A lógica por trás é sempre a mesma: não mova se não for necessário, e quando for necessário mover, mantenha rápido, leve e contido.
A última parte que me deixou uma impressão profunda é a acessibilidade.
Para ser honesto, raramente prestava atenção especial a esta parte antes. Porque na maioria das vezes, desde que a interface de um produto pareça boa e as funções funcionem, parece suficiente. Mas a Vercel escreveu esta parte com muito seriedade.
Eles exigem contraste suficiente entre texto e fundo. As mudanças de estado não podem depender apenas da cor; devem ser acompanhadas de ícones ou descrições de texto.
Todos os elementos interativos devem ter um estado de foco claro e não podem ser removidos em prol da limpeza visual.
Essas regras significam que o sistema de design atende a todos, incluindo pessoas com baixa sensibilidade a cores, aquelas que navegam com o teclado e aquelas que olham para o celular sob luz forte.
Este DESIGN.md é muito profissional. Acho que quando todos criarem novos produtos no futuro, podem escrever seu próprio DESIGN.md com base nas ideias desses dois arquivos MD.
