Estilo Anthropic
Inspirado na AnthropicO caderno de pesquisa: pergaminho marfim, títulos e textos em serifa, e um terracota só na ação que importa.
A Anthropic escreve o site como uma publicação de pesquisa em papel antigo. No lugar dos cinzas frios de tecnologia, tons de marfim e aveia dão a cada fundo cara de papel, e uma serifa carrega a voz nos títulos e também no texto corrido, o que é raro em site de tecnologia. A letra sem serifa fica só nos menus, nos botões e nas etiquetas. Nada de sombra: os cartões se separam pelo tom do papel e por um fio fino. Um único terracota aparece no botão da ação mais importante, e o rodapé escuro é a única inversão da página.
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
- Argila
#d97757O único destaque: o botão da ação mais importante da página - Argila funda
#c6613fO mesmo botão ao passar o mouse ou apertar - Aveia
#e3daccOs painéis agrupados, um papel mais escuro para variar - Pedra
#cccbc8Os fios de 1 px entre seções e em volta dos cartões - Nuvem
#b0aea5Os textos de apoio e os itens inativos do menu
Tipografia
A Anthropic usa fontes próprias, a Anthropic Serif e a Anthropic Sans, que não podem ser distribuídas. Aqui e no arquivo vão a Source Serif 4 no lugar da serifa e a Inter no lugar da sem serifa.
- Título editorialSource Serif 4 · 400O que as abelhas sabem sobre o tempo
- Título declarativoInter · 700Ciência para quem cultiva.
- Título de cartãoInter · 600Relatório da safra de outono
- CorpoSource Serif 4 · 400Medimos a florada de duzentas colmeias por três anos e o padrão apareceu onde ninguém olhava.
- Menu e etiquetasInter · 500Pesquisa · Publicações · Sobre
- CódigoJetBrains Mono · 400colmeia_14.florada = 0,82
Componentes
Os botões, o campo e um cartão, desenhados no estilo da marca.
Regras
- Faça
- Fundo de papel marfim, nunca branco puro.
- Serifa nos títulos e no texto corrido; sem serifa só nos menus, botões e etiquetas.
- Cartões com cantos de 24 px, separados pelo tom do papel e por um fio fino.
- O terracota num botão só por página, o da ação que mais importa.
- Links sempre sublinhados, como num texto impresso.
- O botão cheio com só os cantos de baixo arredondados, como uma aba de fichário.
- Evite
- Nada de cinza frio, azul ou qualquer cor fora dos tons de terra.
- Nada de sombra: a profundidade vem do tom do papel.
- O terracota nunca em ícone, enfeite ou mais de um botão.
- Nada de texto corrido em letra sem serifa.
- Nada de gradiente, brilho ou fundo com cor lavada.
Movimento
- Tudo calmo: os textos aparecem num fade lento, sem deslizar.
- O sublinhado dos links engrossa de leve ao passar o mouse.
- O botão terracota escurece no hover, sem crescer nem pular.