Guia de Estilos

Este guia visa orientar os gestores de conteúdo do site a manter o mesmo padrão de identidade visual nas páginas publicadas no site da Receita Federal.

Ao criar uma página, aplique os estilos padrão para manter a uniformidade visual. Fazendo isso, os usuários terão uma navegação mais intuitiva por todas as páginas do site.

Estilos Básicos

Título

O estilo título é um tag <h2> e deve ser utilizado como título em seções de texto da sua página. As boas práticas de acessibilidade determinam que deve sempre haver um título antes de um subtítulo <h3>.

O primeiro título em uma página não possui margem superior. Nos demais, há uma margem que separa automaticamente o título do parágrafo que o antecede.

Subtítulo

O subtítulo é um tag <h3> e deve ser utilizado como subdivisão, sendo sempre precedido de um Título.

Os títulos e subtítulos são automaticamente âncoras e servem como referência para a "tabela de conteúdos". Essa tabela é um menu na forma de sumário automático, que pode ser adicionado no topo da página por meio da aba "Configurações". Mas fique atento! Esse menu fica mal diagramado em dispositivos móveis.

Identado

O estilo identado deve ser utilizado para dar destaque a um parágrafo. Ele é uma classe específica do tag <p> (parágrafo) que adiciona o fundo cinza e uma borda larga escura à esquerda, exatamente para chamar a atenção do usuário.

Não deve ser usado como título ou subtítulo!

Literal

O estilo literal é um tag <pre> e deve ser utilizado apenas para inserir trechos de código (html, css ou programação).

Citação: Mussum Ipsum, cacilds vidis litro abertis. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose.

A citação é um tag <blockquote> e deve ser utilizado para trazer uma citação com destaque no corpo de um texto longo. Ele fica sempre alinhado à direita da página, com fonte maior que o restante do texto.

Esse recurso é muito utilizado em jornais e revistas, mas deve ser aplicado com cuidado em páginas web, pois sua diagramação fica interessante somente quando o corpo do texto principal (da página toda) é longo.

 Discreto

O estilo discreto é uma classe específica de um tag <span> e deve ser utilizado para trechos acessórios em relação ao texto principal. Por usar em uma cor mais clara que o parágrafo comum, o trecho tem destaque reduzido, mas deixa claro para o usuário que aquela informação é "acessória". É interessante para descrições de itens, por exemplo.

Destacado

O estilo destacado é uma classe específica de um tag <span> e deve ser utilizado para realçar trechos do texto. Funciona basicamente como um marca-texto e, portanto, deve-se ter MUITO cuidado ao usar. Lembre-se da sensação de pegar um livro emprestado e ter páginas com várias marcações com caneta marca-texto. Normalmente esse excesso de destaque dificulta a leitura, ao invés de ajudar.

Quando tudo tem destaque, nada tem destaque.

Listas

Marcadores

Utilize marcadores sempre que desejar incluir uma lista não ordenada.

• Item A;
• Item B;
• Item C.

Numeração

Utilize numeração sempre que desejar incluir uma lista de itens ordenados.

1. Primeiro item;
2. Segundo item;
3. Terceiro item.

Lista de definição

Utilize uma lista de definição quando desejar incluir uma lista com descrições dos itens e sem marcações ou numerações.

Item A

Descrição do item A

Item B

Descrição do item B

Item C

Descrição do item B