Poucas peças, sempre as mesmas.
A Reload se monta com um kit pequeno: as formas do R, placas sólidas, a trama de pontos, o terminal, ícones de traço e marcas de corte. Sem ilustração solta, sem efeito.
Seis formas, todas do R
O símbolo é feito de dois blocos arredondados. Eles e mais quatro formas simples formam a biblioteca: a peça é montada com elas, não com ilustração. Cada forma tem função; nenhuma é enfeite.
Bloco da haste
A haste e a curva do R. Placa grande, recorte de borda, selo.
Bloco da perna
A perna diagonal do R. Sozinho vira seta, ponteiro, divisor.
Quadrado arredondado
Selo de ícone, placa de foto, botão de ícone. Raio de 25% do lado.
Círculo
Avatar, ponto de status sem cor de status, nó de órbita.
Ponto de 18 px
Unidade da trama: em repouso, na figura ou no evento, sempre na grade. Nunca solto fora dela.
Anel
Trilha da órbita e foco. Traço fino, nunca preenchido.
Recortar o símbolo na borda
- O corte vem sempre da borda do canvas ou do card, nunca de uma máscara solta no meio da peça.
- Mantenha ao menos metade do símbolo visível: abaixo disso ele deixa de ser lido como o R.
- Um recorte por peça. O símbolo cortado não divide a cena com o logo completo.
- Cor: azul no claro, branco no azul, azul no preto. As três versões, nada além.
Nunca deforme
A foto fica reta, a placa gira
Retrato real em P&B sobre uma placa sólida levemente inclinada, azul ou preta. A placa dá profundidade sem sombra nem gradiente. É o jeito da Reload de pôr gente no centro.
Regras da placa
- Ângulo
- Entre 4° e 8°, para qualquer lado. Nunca 0°, nunca mais que 8°. A foto fica reta; só a placa gira.
- Cor
- Azul ou preta, sólidas. Em uma série, alterne. Duas placas na mesma peça têm cores diferentes.
- Tamanho
- Mesmo lado da foto (100%) e mesmo raio de card. A placa aparece em pelo menos dois lados.
- Deslocamento
- De 8% a 12% do lado da foto, no sentido contrário ao giro. A foto cobre a maior parte da placa.
- Selo
- Símbolo branco num quadrado azul no canto da foto, com 15% do lado dela.
- Foto
- Retrato real em P&B, de membro autorizado. Sem foto gerada, sem stock.
Retratos reais da equipe, usados com autorização. Peças com outros membros pedem consentimento por escrito antes de usar a foto.
A grade virou trama
A grade de 18 px continua aqui, só que agora ela desenha: o R, retratos, números e eventos saem da mesma trama. Passo, tamanhos, figuras, eventos e níveis de arte têm capítulo próprio.
Uma grade só, para tudo que a marca desenha.
Ver a trama →Passe o mouse: a faixa reage como as do site. Em peça impressa ou exportada, o ponto fica parado.
Terminal e diff como imagem
O terminal e o diff vêm do ambiente do dev e já são parte da marca. Em peça social, são o jeito de mostrar "antes e depois" ou uma lista curta sem ilustrar nada. Um painel por peça.
Anatomia
- Painel
- Preto, raio de card, dentro da margem de 7,4%, sobre fundo azul, branco ou cinza.
- Barra
- Três bolinhas em Cinza 800 e o caminho à direita em Cinza 400 (
~/carreira). Altura de 6,5% da largura. - Prompt
$em Azul 300. O comando em branco.- Diff
+e✓em Azul 300 para o que entra;−e a saída comentada em Cinza 400 para o que sai.- Selo final
- "✓ pronto" em azul com texto branco, uma vez, na última linha.
- Fonte
- DM Mono 400. Nunca em título nem em texto corrido da peça.
Medidas no canvas de 1080 px
- Linha de código
- 32 px · entrelinha 1,7
- Barra e caminho
- 26 px
- Máximo por linha
- 40 caracteres
- Máximo de linhas
- 8 em 1:1 e 4:5, 5 em 16:9
- Diff
- até 4 linhas − e 4 linhas +
Mais linhas que isso é texto: use um slide de carrossel.
Ícones de traço, nunca emoji
Um conjunto pequeno de ícones de 24 px, o mesmo da órbita do hero e dos benefícios. Traço de 1,8, pontas arredondadas, uma cor. O mesmo desenho serve em 16 e em 48.
- Grade. 24 × 24, com 2 unidades de respiro: o desenho vive em 20 × 20.
- Traço. 1,8 unidade, sem preenchimento, pontas e junções arredondadas.
- Cor. Uma só, a do texto ao lado: azul no claro, branco no azul, Azul 300 no preto.
- Tamanhos. 16, 24, 32 e 48 px. Abaixo de 16 px, use só texto.
- Selo. Quadrado arredondado azul ou preto com o ícone branco a 46% do lado.
O conjunto
- vagasjobs
- recrutadoresrecruiters
- descontosdiscounts
- networkingnetworking
- mentoriasmentoring
- discussõesdiscussions
- cursoscourses
- grupos de estudostudy
- curadoriacuration
- gentepeople
Tamanhos
Superfícies
Símbolos do terminal
- ✓Entrou, está incluso, feitolista de benefícios, selo "pronto"
- ▸Próximo passo, item de listasumário, sequência, atalho
- ●Marcador, ponto de ênfaselegenda, canal ativo; sem cor de status
Sem emoji
Sem emoji em nenhuma peça. No lugar, ícone de traço desta grade ou um dos símbolos do terminal.
Ícone novo? Proponha um desenho na grade acima antes de usar.
Marcas de corte e numeração
Marcas de canto e uma numeração em DM Mono dão ao carrossel o ar de ficha técnica: uma peça de engenharia, não de campanha. É a assinatura dos carrosséis "brand em público" e das fichas.
Como a gente desenhou o R.
Dois blocos arredondados.
Dê um reload.
Slides 01, 02 e 07 de um carrossel de 7. As três superfícies trocam; as marcas e a numeração ficam no mesmo lugar.
- modelo
- ig-post-claim
- canvas
- 1080 × 1350 · 4:5
- margem
- 80 px · 7,4%
- grade
- 4 colunas · calha 24
- logo
- 48 px de altura
- tira
- DM Mono 28 px
Regras
- Marcas de canto
- Quatro cantos em L, 2,4% da largura de comprimento e traço de 0,25%, a 3,2% da borda: entre a borda e a margem de 7,4%.
- Registro
- Um alvo (círculo com cruz) no meio das bordas laterais, no mesmo recuo. É assinatura de carrossel e de ficha técnica, não enfeite.
- Numeração
- DM Mono, formato
[01/07], dois dígitos, na tira do topo à direita. Aqui o colchete é numeração real, não campo a preencher. - Cor
- A mesma da tira mono da superfície, uma só para marcas e número.
- Onde não
- Em stories e reels, sem marcas de canto (a interface cobre a borda): fica só a numeração, dentro da área segura.