Título Principal (H1)
Este é o H1, o título de página (40px). A fonte para todos os títulos é Satoshi, com um peso de fonte (500) para um visual moderno. Este parágrafo, por outro lado, usa Poppins, a fonte padrão para todo o corpo de texto.
Título de Seção (H2)
O H2 (32px) é usado para dividir o conteúdo em seções principais. Os espaçamentos entre os elementos foram revisados para criar um ritmo vertical mais harmonioso.
Título de Sub-seção (H3)
O H3 (24px) organiza o conteúdo dentro de uma seção maior, mantendo a consistência da fonte Satoshi.
Título Menor (H4)
O H4 (20px) serve para agrupar elementos ou introduzir sub-tópicos de menor importância.
Título de Ênfase (H5)
O H5 (15px) agora usa Poppins, ideal para títulos de widgets ou notas que precisam de um destaque mais alinhado ao corpo do texto.
Título Utilitário (H6)
O H6 (14px) funciona como um subtítulo de categoria ou uma etiqueta em caixa alta, como visto aqui.
Layout e Elementos Interativos
Um Título em um Bloco com Fundo
Este bloco inteiro usa a classe .element-highlight-bg
. O espaçamento interno (padding) é controlado pelo CSS universal para garantir uniformidade.
Estilos do Corpo de Texto (Poppins)
Aqui testamos os elementos de texto. A fonte padrão é Poppins, 15px. Este parágrafo contém um link de exemplo para demonstrar o estilo padrão de links.
Este parágrafo demonstra o novo estilo de negrito (strong), que agora usa o peso 500 da Poppins para ser mais sutil e elegante, com uma leve ênfase na cor.
- Este é um item de lista não ordenada.
- Ele herda o estilo Poppins para manter a consistência.
- Os marcadores devem ter a cor de destaque verde.
- Este é um item de uma lista ordenada.
- Ideal para guias passo a passo ou rankings.
- A numeração também deve usar a cor verde.
Tabelas e Formulários
As tabelas agora possuem um estilo limpo, sem bordas verticais, e os formulários possuem rótulos (labels) e placeholders com estilo próprio.
Cabeçalho da Tabela (th) | Outro Cabeçalho |
---|---|
Célula de dados (td) | Todo o texto aqui deve corresponder ao padrão do corpo. |
Segunda linha de dados. | Consistência é fundamental. |