Estilo Vercel
Inspirado na VercelO terminal impresso em papel: preto, branco e cinza, títulos grandes e leves e etiquetas pequenas em letra de terminal.
A Vercel é quase toda em preto e branco: um fundo branco gelo, o texto quase preto e bordas tão finas que só se notam de perto. Os títulos são grandes mas leves, com as letras e as linhas bem juntas, e as etiquetas pequenas vêm em caixa alta numa letra de terminal, como um carimbo. Não há foto nem ilustração: a profundidade vem dos tons de cinza e de um fio fino em volta dos cartões, e a única cor é um verde discreto no "✓" das confirmações.
A ProfitizeBuild não tem relação com as marcas citadas. Os nomes e os logos só identificam a inspiração.
Fundos
Cada seção do site num destes, com o texto e o acento que vão sobre ele.
Acentos e detalhes
- Obsidiana
#171717Os títulos e o botão cheio; nunca o preto puro no texto - Grafite
#4d4d4dO texto corrido e o botão secundário - Fio
#ebebebAs bordas de 1 px em volta dos cartões e dos botões - Fumaça
#a8a8a8O texto de exemplo nos campos e os ícones apagados - Verde terminal
#297a3aSó no "✓" das confirmações e em palavras curtas
Tipografia
A Vercel usa a Geist, a fonte dela, e a Geist Mono nas etiquetas. As duas são gratuitas e de licença aberta, então aqui e no arquivo vão elas mesmas.
- Título do topoGeist · 450Seu site no ar em um clique.
- Título de seçãoGeist · 400Feito para quem publica toda semana.
- CorpoGeist · 400Conecte o projeto, aperte publicar e receba o endereço em segundos.
- EtiquetaGeist Mono · 400Para lojas e agências
- TerminalGeist Mono · 400$ publicar ✓ no ar em 4 s
Componentes
Os botões, o campo e um cartão, desenhados no estilo da marca.
Regras
- Faça
- Texto e botão principal no quase preto, nunca no preto puro.
- Cantos de 6 px em cartões e botões; a pílula só nos botões pequenos do menu.
- Títulos leves, grandes e com as letras bem juntas.
- Etiquetas e detalhes sempre na letra de terminal, pequenas e em caixa alta.
- Cartões separados por um fio fino de 1 px, sem sombra.
- Mostre o produto funcionando: uma janelinha de terminal vale mais que uma foto.
- Evite
- Nenhuma cor além do verde das confirmações.
- Nada de títulos em negrito.
- Nada de sombra para dar profundidade.
- Nada de foto, ilustração ou 3D.
- Nada de cantos grandes e arredondados nos cartões.
Movimento
- Trocas rápidas e discretas, sem pulo nem mola.
- O texto do terminal aparece linha a linha, como se estivesse rodando.