Editorial · Reload Brandbook

01og.md◌ proposta

Imagem de link

É a primeira coisa que se vê de uma página da Reload quando alguém cola o link no LinkedIn, no X, no Discord ou no WhatsApp. Um modelo, uma ideia por imagem.

Ecossistema de devs

Sua carreira não precisa de mais conteúdo.

reload.dev

Imagem de link (OG) · 1200 × 630 · nível 2kit/og-card ↗

Tamanho: 1200 × 630 px (1,91:1). Exporte em PNG ou JPEG, abaixo de 300 KB. Conferir na plataforma antes de publicar: X, LinkedIn e WhatsApp cortam de formas diferentes.
Área segura: Eyebrow, título e logo dentro da margem de 6% nas laterais e 9,5% em cima e embaixo, na metade esquerda. A metade direita é arte: se um aplicativo cortar a imagem, o corte cai no R.
Conteúdo: Eyebrow, título com uma palavra em destaque (branco itálico sobre azul), logo e domínio. Uma ideia por imagem, 8 a 10 palavras no título.
Superfície: Azul por padrão, com o R em trama cortado pelas bordas da direita e de baixo. Preto ou branco quando a página já é azul. Sem foto de rosto como fundo do texto.
Metadados: Preencha og:title, og:description (até 160 caracteres) e og:image com URL absoluta. Texto alternativo em og:image:alt descreve a imagem, não repete o título.
Honestidade: Nada de preço promocional, contagem de membros ou promessa de vaga na imagem. Plano só com valores de plans.ts e a regra de parcela completa.

02artigo.md◌ proposta

Artigo e blog

Texto longo com medida confortável, hierarquia curta e blocos que respiram. A amostra ao lado é marcação real, na medida de 65ch.

Medida: Texto corrido entre 60 e 70 caracteres por linha (≈ 65ch). Figuras e código podem passar da medida, até 1,3× dela.
Corpo: Plus Jakarta Sans 17 px, entrelinha 1,6, preto. Link azul sublinhado; nada de negrito pesado, ênfase em 500 ou 600.
Títulos: Peso 400, tracking −3%. H1 em text-title com uma palavra em itálico azul; H2 em 32 px, H3 em 22 px. No máximo três níveis.
Código: Bloco preto com DM Mono 14/1.75, raio de card, rolagem horizontal, sem quebra. Código em linha em Jakarta 500, nunca em DM Mono.
Citação: Frase curta em 28 px, uma palavra em itálico azul e régua azul de 2 px à esquerda. Uma por artigo.
Imagens: Fotos em P&B (ver Fotografia), raio de card, proporção 3:2 ou 16:9, legenda de 14 px em Cinza 500 e alt em pt-BR.

Carreira

Seu código não está em cache. Sua carreira pode estar.

[00/00/0000] · [Nome do autor] · 6 min

Texto de exemplo para mostrar a medida, a hierarquia e os blocos do artigo. Os nomes e as datas são campos entre colchetes até haver permissão.

Cinco pessoas em volta de uma mesa com laptops, um homem de óculos gesticula — Mentoria em grupo pequeno. imagem gerada · referência de direção, não usar em peças

O que muda quando você pergunta

Um bom code review começa por uma pergunta. Na mentoria, a conversa funciona do mesmo jeito: você traz o problema, quem já passou por ele traz o contexto e a decisão fica mais barata de tomar.

Todo sênior já foi júnior. Pergunta.

Um exemplo curto

Para marcar o que mudou, o terminal da marca resolve em quatro linhas:

$ git diff carreira- const carreira = cache;+ const carreira = reload();

Continue em reload.dev.

03newsletter.md◌ proposta

Newsletter em texto primeiro

A newsletter abre com um cabeçalho de marca e segue como texto: curta, escaneável e legível mesmo com imagem bloqueada. O rodapé é o mesmo de qualquer e-mail da Reload, o dos fundamentos.

[00/00/0000]

Edição [000]

O que passou pela curadoria nesta edição

Cabeçalho de newsletter · 1200 × 480 · nível 1kit/newsletter-header ↗

Oi, [nome]. Esta edição tem três coisas: o que saiu das mentorias, um code review comentado e o próximo encontro.

▸ Primeira coisa, em uma linha.
▸ Segunda coisa, em uma linha.

[Seu nome][Cargo] · Reload
reload.dev

Você recebe este e-mail porque faz parte do ecossistema da Reload. Cancelar o recebimento.

Largura: Corpo de 600 px. O cabeçalho é exportado em 1200 × 480 px para telas de alta densidade e exibido a 600 px.
Texto primeiro: Escreva para funcionar em texto puro: título, parágrafos curtos, links com a URL visível quando for o ponto principal. Sempre envie versão texto.
Cabeçalho: Logo, data e número da edição em DM Mono, título com uma palavra em azul e F5 em letra de pontos à direita. Fundo branco sólido, nunca transparente: clientes com modo escuro invertem o resto.
Corpo: Jakarta 16 px com entrelinha 1,6, preto sobre branco; links em azul sublinhado; botão azul com texto branco e "Fazer parte" só quando houver uma ação de verdade.
Imagens: No máximo duas por edição, com alt. O e-mail precisa fazer sentido com imagens bloqueadas.
Assunto: Até 50 caracteres, direto, sem caixa alta e sem emoji. Pré-cabeçalho complementa; não repete o assunto.
Rodapé: Assinatura de e-mail da marca: símbolo, nome, cargo · Reload e reload.dev. Depois, uma linha com o motivo do envio e o link para cancelar.

04slides.md◌ proposta

Slides 16:9

Seis tipos de slide cobrem uma palestra, uma mentoria gravada ou uma apresentação para recrutadores. Os quatro primeiros abaixo são modelos do kit, com margens e zonas seguras; a arte de cada um vem da trama.

[00/00] · reload.dev

Mentoria

Como pensar em arquitetura sem diagrama bonito

[Nome do mentor] · [Cargo]

Slide de título · 1920 × 1080 · nível 3kit/slide-title ↗

Seção

Revisar com calma

reload.dev

Slide de seção · 1920 × 1080 · nível 3kit/slide-section ↗

Ponto de partida02

Três perguntas antes de abrir o editor.

01
O que muda para quem usa?
Comece pelo efeito, não pela tecnologia.
02
O que já existe no repo?
Reuse antes de criar uma peça nova.
03
Como eu desfaço isso?
Se não volta atrás com um revert, está grande demais.

reload.dev

Slide de conteúdo · 1920 × 1080 · nível 0kit/slide-content ↗

Código

Um diff conta a história

~/carreira

1$ git diff estagnacao reload
2- const carreira = cache;
3+ const carreira = reload();
4+ mentoria.perguntar();
5- esperar();

reload.dev

Slide de código · 1920 × 1080 · nível 1kit/slide-code ↗

Citação

Todo sênior já foi júnior. Pergunta.

[Nome do mentor] · [Cargo]

Citação · 1920 × 1080

Dê um reload.

reload.dev

Encerramento · 1920 × 1080

Título slide-title: Abertura: azul, o R com as órbitas à direita; eyebrow, título, quem fala e a data à esquerda.
Seção slide-section: Preto: o número da seção em letra de pontos dentro de um quadro de pontos e o nome da seção, com uma palavra em Azul 300.
Conteúdo slide-content: Branco e só texto, sem trama: título e três pontos (ou um diff). Mais de três pede outro slide.
Citação quote: Azul 50 com a onda da trama longe do texto: uma frase real, com nome e cargo entre colchetes até haver permissão.
Código slide-code: Preto: terminal ou diff em DM Mono, até 6 linhas, e o >_ em letra de pontos no canto.
Encerramento closing: Azul com o R da trama cortado pela borda: "Dê um reload." e o próximo passo; sem agradecimento genérico.

1920 × 1080 px (16:9). Margem de 5,4% nas laterais e 9,6% em cima e embaixo; o rodapé de slide mostra logo, número em DM Mono e reload.dev.
Texto mínimo de 28 px no canvas de 1920. Se não cabe, divida em dois slides.
Uma ideia por slide; no máximo 6 linhas de texto. Foto em P&B, raio de card, nunca de fundo atrás de texto.
Entre slides: corte seco. Animação só para mostrar etapas, com as curvas do manual de motion.

Sala escura com a plateia de costas e o slide de título da Reload projetado na tela — Slide num meetup, a partir de slide-title · mockup gerado com a arte do kit, para visualizar a aplicação

Fundo de chamada e papel de parede

Para a mentoria no Meet ou no Zoom e para a tela de quem apresenta. A arte fica longe de onde a pessoa senta e de onde o sistema desenha relógio, barra de menus e Dock.

Fundo de chamada · 1920 × 1080 · nível 2kit/call-background ↗

reload.dev

Papel de parede · desktop · 2560 × 1440 · nível 3kit/wallpaper-desktop ↗

Papel de parede · celular · 1179 × 2556 · nível 3kit/wallpaper-phone ↗

Chamada: 1920 × 1080 para Meet e Zoom. A pessoa senta no centro-esquerda, o R fica à direita e só o logo pequeno entra no alto à esquerda. Preto por padrão, azul em momento de marca. O aplicativo espelha só a sua própria imagem; os outros veem o logo do jeito certo.
Desktop: 2560 × 1440 (macOS a 2x). Barra de menus no topo (5%) e Dock na base (11%) livres; os ícones da mesa ficam no alto à direita, então logo e reload.dev vão embaixo à esquerda. Azul ou preto.
Celular: 1179 × 2556 (iPhone). Data, relógio e widgets ocupam o topo (31%); Dock, lanterna e câmera, a base (14%). O R e as ondas ficam no meio, sem texto. Azul ou preto.
Antes de usar: Confira na tela real: sistemas e aplicativos mudam a interface. Cada pessoa usa o arquivo exportado do kit, sem recorte à mão.

Mesa de trabalho com monitor mostrando o papel de parede azul com o R e os anéis em pontos — Papel de parede, a partir de wallpaper-desktop · mockup gerado com a arte do kit, para visualizar a aplicação

05codigo.md◌ proposta

Código em imagem

Código vira imagem quando precisa viajar por feed, slide ou capa. O painel segue o terminal da marca: preto, DM Mono, prompt em Azul 300 e poucas linhas.

Dica de dev

Antes do deploy, rode o diff.

~/deploy.sh

1$ git diff main --stat
2 src/api.ts | 12 ++--
3 src/auth.ts | 4 +-
5$ bun run verify
6✓ tipos
7✓ testes
8✓ build
10$ git push origin main

reload.dev

Post de código · 1080 × 1350 · nível 1kit/code-card ↗

Fonte: DM Mono 400, 14/1.75 no site e 28 px em peças de 1080 de largura.
Painel: Preto (ou Cinza 900 sobre preto), raio de card, barra com três bolinhas em Cinza 800 e o caminho do arquivo.
Cores: Texto em branco; prompt $ e destaques em Azul 300; + em Azul 300 e − em Cinza 400. Sem paleta de sintaxe colorida: o diff e o prompt bastam.
Linhas: Numeração em Cinza 500 e até 14 linhas por imagem. Passou disso, vira repositório ou gist com link.
Conteúdo: Código real e executável, sem segredo, token ou dado de cliente. Nome de variável em inglês, comentários no idioma do post.
Acessibilidade: O texto do código vai na legenda ou no corpo do post, não só na imagem, e o alt diz o que o código faz.

Capas de YouTube e gravações: o modelo e os tamanhos ficam na página de Social. Para vídeo com código, use o mesmo painel e as mesmas regras acima.