Guia de Estilo
Referência viva dos tokens e componentes usados no site. Os exemplos abaixo usam CSS real do site (mesmo <style> compilado desta página). Os exemplos de texto corrido (tipografia, blockquote, lista) usam "No meio do caminho", de Carlos Drummond de Andrade — Alguma Poesia, 1930 — em vez de lorem ipsum. Tabela, código, figura e formulário continuam usando conteúdo real extraído de posts publicados.
Cor
Definidas em src/scss/utilities/_variables.scss. Toda cor nova no site deve vir daqui — ver docs/design-system.md.
Tokens semânticos apontam para essas cores base: $color-header-bg/$color-footer-bg = $black, $color-link-hover = $accent, $border-subtle = rgba(0,0,0,.1), $bg-wash = #f5f5f5.
Tipografia
Escala em $text-xs–$text-6xl, renderizada com o CSS de verdade. Texto: "No meio do caminho", Carlos Drummond de Andrade (1928).
No meio do caminho
Tinha uma pedra no meio do caminho
No meio do caminho tinha uma pedra
Nunca me esquecerei desse acontecimento na vida de minhas retinas tão fatigadas. Nunca me esquecerei que no meio do caminho tinha uma pedra, tinha uma pedra no meio do caminho, no meio do caminho tinha uma pedra.
Espaçamento
Escala em $space-unit (1rem). Cada passo é um múltiplo fixo, não um valor arbitrário.
Radius, sombra e transição
| Token | Valor | Uso |
|---|---|---|
$radius-sm | 4px | elementos pequenos |
$radius-md | 8px | cards, exemplos deste guia |
$radius-lg | 20px | botão primário (pill) |
$radius-full | 999px | elementos totalmente arredondados |
$shadow-md | 0 10px 30px rgba(0,0,0,.15) | imagens e blocos de código em posts |
$transition-fast | 0.2s ease | hover de links no header/footer |
$transition-base | 0.3s ease | inputs, botão primário |
Blockquote
Estilo compartilhado via %prose (_prose.scss), usado por .post__body e .page__content.
Carlos Drummond de Andrade, "No meio do caminho" — Alguma Poesia (1930)
No meio do caminho tinha uma pedra
tinha uma pedra no meio do caminho
tinha uma pedra
no meio do caminho tinha uma pedra.
Lista
Carlos Drummond de Andrade, "No meio do caminho" — os dois versos do poema, um por item
O poema completo, verso a verso:
- No meio do caminho tinha uma pedra
- tinha uma pedra no meio do caminho
- tinha uma pedra
- no meio do caminho tinha uma pedra.
- Nunca me esquecerei desse acontecimento
- na vida de minhas retinas tão fatigadas.
- Nunca me esquecerei que no meio do caminho
- tinha uma pedra
- tinha uma pedra no meio do caminho
- no meio do caminho tinha uma pedra.
Tabela
Extraído de Notas #007 — Design e agentes
| O cliente diz | Natureza | O agente deve |
|---|---|---|
| “Meu apartamento vale uns R$ 1 milhão” | estimativa do proprietário | simular, marcando como estimativa |
| “O corretor acha que vale R$ 1 milhão” | estimativa de terceiro | simular, marcando como estimativa |
| “Tenho um laudo de ontem: R$ 1 milhão” | avaliação formal, não verificada | simular, solicitar o documento antes de prosseguir |
| “O banco avaliou em R$ 1 milhão em 2023” | avaliação formal, vencida | simular, sinalizar necessidade de reavaliação |
| “Anunciei por R$ 1 milhão” | preço pedido | simular, marcando que preço de anúncio não é avaliação |
Código
Extraído de Notas #007 — Design e agentes
A função é testável:
calculateCreditLimit(propertyValue: 1000000) → 600000Figura e legenda
Extraído de Notas #007 — Design e agentes
Formulário
Campos compartilhados via %form-label/%form-input (_forms.scss), usados em .contact e .newsletter. Cópia idêntica à do formulário real em /contato/ — sem action, não envia nada.
Botão
%btn-primary: fundo $black, pill de $radius-lg, hover com opacity: .8.
Nota: o link "Assine agora" da newsletter na home hoje não usa esse botão — o markup em newsletter.njk não aplica a classe .newsletter__button, então o CSS de %btn-primary existe mas fica sem efeito ali. Ver docs/design-system.md.