Style Guide
Referência visual do design system deste site: cores, tipografia, componentes e padrões de interface.
Cores
Accent
--accent
Accent soft
--accent-soft
Card
--bg-card
Hero
--bg-hero
Texto principal
--text-primary
Texto secundário
--text-secondary
Borda
--border-subtle
Tipografia
Heading 1 — Inter 700
Heading 2 — Inter 600
Heading 3 — Inter 600
Heading 4 — uppercase 600
Parágrafo padrão em Inter regular. Linha de exemplo para demonstrar o ritmo tipográfico, espaçamento entre linhas e largura máxima de 70 caracteres para leitura confortável.
Negrito, itálico, link com sublinhado e código inline.
Listas
Lista não ordenada
- Primeiro item da lista
- Segundo item com mais texto para ver o wrap
- Terceiro item
Lista ordenada
- Primeiro passo do processo
- Segundo passo com detalhe
- Terceiro passo final
Citação e código
Um texto em destaque, uma citação ou observação importante que merece atenção especial do leitor.
// Exemplo de bloco de código
const site = "Margem Viva";
console.log(`Bem-vindo ao ${site}`);Badges de status
Pills e tags
Cards
Exemplo de entry card
Texto de preview do conteúdo. Aparece nas listagens da home e coleções.
Card estático
Usado quando o card não é clicável ou é apenas informativo.
Ícones das coleções
Author card
Rodapé de posts. Foto + nome + pronomes + localização + bio curta.
Resume link cards
Grade de links com ícone + label. Usado em /about/ e /card/.
Badges de status
Cores via --badge-*. Suporte a tema claro/escuro.
Variáveis CSS
Hero
--bg-hero
Hero text
--hero-text
Hero muted
--hero-text-muted
Overlay
--overlay-bg
Overlay heavy
--overlay-bg-heavy
Badge done
--badge-done-bg
Badge want
--badge-want-bg
Badge playing
--badge-playing-bg
Última atualização: