Para facilitar a aplicação de estilos e manter a consistência das telas do site da Estante Virtual com a nova central de ajuda, foi feito um guia de estilos com exemplos de cores, assinaturas de marca, elementos de interface e tipografia. Além de servir de referência para as telas finais, o guia de estilos permitiu identificar inconsistências presentes nas páginas internas, especialmente em botões.

Inconsistências

Os botões utilizados no site apresentaram inconsistências entre páginas diferentes, ou dentro da mesma página. Como exemplo, foi possível encontrar botões com rótulos em estilos tipográficos diferentes, com pesos e medidas de corpo de texto variadas, uso de maiúsculas e minúsculas e contornos em botões já preenchidos.

Outra inconsistência encontrada foi a da tipografia do portal e da central de ajuda. Enquanto as páginas de compra e venda de livros, acompanhamento de pedidos e outros utilizam a família tipográfica Source Sans Pro, a central de ajuda atual utiliza a Arial.

https://www.figma.com/file/Ds7uX4a38DxvWdrCOV6rSi/Style-guide-–-Estante-Virtual?node-id=0%3A1

Decisões

Para a questão de inconsistência tipográfica, foi decidido o uso da Source Sans Pro em todas as páginas da central de ajuda, mantendo coerência com o restante do portal e outros materiais de divulgação utilizados pela Estante Virtual em outros meios.

Os botões tiveram o estilo simplificado, optando-se por rótulos em sentence case, com peso negrito, sendo mais legíveis e fáceis de aplicar. Foram usadas três variações de botões:

Botão principal, que utiliza a cor primária da identidade visual como preenchimento, com rótulo de cor branca.
Botão secundário, que usa um contorno cinza para delimitar sua área, com rótulo de cor cinza.
Botão terciário, que usa contorno e rótulo em cor branca, utilizados apenas no rodapé e cabeçalho, que têm preenchimento colorido.

As cores encontradas no site foram mantidas, organizadas numa paleta contextual e utilizadas para a composição de elementos de interface, como cabeçalho, ícones e botões.