Guia de estilo do writing (post de exemplo)

Esse é um post de exemplo: ele não conta uma história de verdade, serve só pra mostrar como cada bloco de conteúdo aparece aqui no writing. Use ele como referência de tipografia e de quais componentes você pode usar ao escrever. O corpo do texto é composto na Nunito Sans.

Tipografia e ritmo de leitura

Os títulos usam a Space Grotesk em peso pesado, criando um contraste forte com a serifada do corpo — bem na pegada neobrutalista. O texto sustenta os recursos básicos de marcação: negrito, itálico, código inline e links que apontam pra fora. A medida de linha é estreita de propósito, pra manter o olho confortável do começo ao fim da linha.

Listas não-ordenadas ganham um marcador quadrado na cor de destaque:

• Programação, tecnologia e as ferramentas do dia a dia
• Livros e o que ando lendo
• Viagens e os lugares que valem registrar

E listas ordenadas mantêm a numeração em mono:

1. Primeiro a ideia
2. Depois o rascunho
3. Por último, a publicação

Citações

Uma citação simples de markdown vira um painel com a borda grossa à esquerda:

A melhor forma de prever o futuro é construí-lo — uma linha de código por vez.

E quando você quer dar destaque a uma frase, use o componente de pull-quote:

Callouts

Blocos de destaque coloridos pra notas, dicas e avisos:

Imagens

Imagens entram com o componente <Figure>, que aceita legenda e crédito:

Vídeos

Embeds de YouTube e Vimeo viram um player responsivo emoldurado; arquivos locais caem num <video> nativo:

Blocos de código

Blocos de código mostram a linguagem no topo e têm botão de copiar, com realce de sintaxe:

import { getBlogPosts } from "app/blog/utils"

export function LatestPost() {
  const [post] = getBlogPosts().sort((a, b) =>
    a.metadata.publishedAt > b.metadata.publishedAt ? -1 : 1,
  )

  return <article>{post.metadata.title}</article>
}

Tabelas

Tabelas seguem a mesma linguagem visual de blocos com borda e sombra:

Pra fechar

É isso — esse conjunto de blocos cobre quase tudo que um post precisa, sem sair do estilo do site. Bora escrever. ✍️