Um manual para uma marca que se atualiza.
Este é o guia de identidade da Reload, o ecossistema de verdade para devs que querem elevar o nível, trocar experiência e crescer na carreira. Use como referência sempre que criar qualquer peça: site, capa de mentoria, post, apresentação ou camiseta.
Essência da marca
Carreira também fica em cache. A Reload existe para forçar a atualização: F5 na sua evolução como dev, com gente que já está onde você quer chegar.
- propósito
- Tirar devs da estagnação conectando quem está subindo com quem já subiu.
- missão
- Levar a experiência real de profissionais de empresas de tecnologia de sucesso para devs de todo o Brasil, em mentorias com espaço aberto para perguntas e num ecossistema com curadoria.
- visão
- Ser o lugar onde o dev brasileiro vai quando quer dar o próximo passo na carreira.
- posicionamento
- Um ecossistema de devs, com gente de verdade e curadoria. A Reload junta mentorias com quem já está onde você quer chegar e um Discord com curadoria para continuar a conversa, e o próximo passo fora da zona de conforto que sai daí. Convidados, conteúdos indicados, opiniões e informações que circulam lá dentro passam por curadoria: menos ruído e achismo, mais experiência real. Dois planos: anual por R$ 499,00 (um pagamento pelos 12 meses, em até 12x sem juros no cartão ou à vista no Pix) e mensal por R$ 49,90, cobrança mensal no cartão, cancele quando quiser. Quem entra agora mantém o preço. Não vendemos horas, trilhas, módulos nem certificado, e não prometemos frequência de conteúdo.
- headline do hero
- Sua carreira não precisa de mais conteúdo.
- promessa
- Mentorias com quem já chegou lá, para atualizar sua visão de carreira.
- tagline
- Dê um reload. Alternativas: "Sua carreira fora do cache." / "Dê um reload."
Experiência real
O que funciona dentro das empresas, e não o que parece bonito em thread.
Pergunta é bem-vinda
Nenhuma dúvida é básica demais. Quem pergunta, evolui.
Constância
Evolução vem de ciclos curtos, como deploys: um passo de cada vez.
Troca entre pares
Todo mundo ensina alguma coisa. O ecossistema é via de mão dupla.
Curadoria
Convidados, indicações e opiniões escolhidos com cuidado. Menos ruído, mais vivência.
Para quem falamos
Desenvolvedores de software brasileiros, de 20 a 40 anos, que já trabalham na área e querem crescer. Eles consomem conteúdo técnico todo dia, sabem identificar marketing vazio de longe e respeitam quem mostra experiência concreta.
Quem está começando a subir
Primeiro ou segundo emprego, aprende rápido, mas não sabe o que o separa do próximo nível.
- Dor: insegurança e falta de direção
- Busca: saber o que estudar e como ser visto no time
- Gatilho: "como você saiu de júnior?"
Quem sente o platô
Entrega bem há anos, mas está no mesmo cargo e na mesma stack.
- Dor: estagnação e salário parado
- Busca: system design, influência, entrevistas em empresas maiores
- Gatilho: "o que um sênior faz de diferente?"
Quem pensa no próximo passo
Técnico forte, avaliando entre staff engineer e gestão.
- Dor: decisões de carreira sem referência
- Busca: conversas com quem já fez essa escolha
- Gatilho: "IC ou gestão?"
Logo
O símbolo é um "R" construído com dois blocos arredondados: a haste com a curva e a perna diagonal. O logotipo junta o símbolo azul ao "Reload" em preto ou branco. É um desenho fechado: use sempre os arquivos oficiais, nunca recomponha com fonte. No projeto (Astro), eles ficam em public/assets/brand/ (svg/, png/ e tokens.css) e são servidos em /assets/brand/…; este manual fica em /branding.
reload-logo-light.svg
reload-logo-dark.svgreload-logo-blue.svg
Regras de uso
- Área de proteção: metade da altura do símbolo em volta de todo o logo. Nada entra nesse espaço.
- Tamanho mínimo: 20 px de altura. Abaixo disso, use só o símbolo.
- Versão certa para o fundo: light sobre branco e cinzas claros, dark sobre preto, blue sobre azul.
- Favicon e avatar: só o símbolo ou o ícone de app, nunca o logo completo.
- Escrita: "Reload" no texto corrido; "reload.dev" quando se referir ao site.
ReloadCores
A marca é azul, preto e branco. O branco é a base, o azul é a cor da marca e das ações, o preto dá peso a texto e seções escuras. Os cinzas e os azuis de apoio só complementam. Clique em um código para copiar.
--rl-blueMarca, ações, links, faixas de destaque--rl-blackTexto, wordmark, benefícios, rodapé--rl-whiteFundo principal, texto sobre azul e preto--rl-blue-50Fundo de seção, card do hero, selos--rl-blue-300Azul sobre preto: eyebrow, destaques e números--rl-blue-hoverSó no hover de botão azul--rl-gray-50Fundo de seção alternada--rl-gray-200Bordas e divisões no claro--rl-gray-400Texto secundário sobre preto--rl-gray-500Só labels pequenos, legendas e metadados--rl-gray-700Texto sobre cinza claro, quando o preto pesar--rl-gray-800Bordas sobre preto--rl-gray-900Cards dos benefícios, painéis sobre pretoO azul fica concentrado no card do hero (Azul 50), no CTA final, nos números grandes, na faixa e no seletor do plano e nas ações. Fora disso, ele é sinal de ação: não pinte texto corrido nem decoração de azul. O preto fica para a seção de benefícios, o terminal de "Por que a Reload" e o rodapé; sobre ele, o azul de destaque é o Azul 300. A seção de preço é clara (Cinza 50, texto preto) com o card do plano em azul.
Texto é preto
Títulos e parágrafos em preto (#000), também dentro de cards e em fundos Cinza 50 e Azul 50. O Cinza 500 (#5E6470) só entra em texto pequeno: labels, legendas e metadados. Sobre preto, o texto é branco e o secundário é Cinza 400.
Status só na plataforma
No site não há verde, vermelho, laranja ou amarelo. Sucesso, checks, o eyebrow e o + do diff são azuis; o que sai (−, ✕) é cinza. Vermelho, verde e âmbar existem só para dizer estado na plataforma (veja Plataforma).
| Combinação | Amostra | Contraste | Uso |
|---|---|---|---|
| Preto sobre branco | Aa | 21 : 1 AAA | Títulos e texto |
| Cinza 700 sobre branco | Aa | 10,6 : 1 AAA | Texto sobre cinza claro, quando o preto pesar |
| Cinza 500 sobre branco | Aa | 5,9 : 1 AA | Só labels, legendas e metadados |
| Branco sobre Azul | Aa | 5,6 : 1 AA | Botão primário |
| Azul sobre branco | Aa | 5,6 : 1 AA | Links, botão invertido na faixa azul |
| Azul sobre Azul 50 | Aa | 4,9 : 1 AA | Selos, ícones |
| Cinza 400 sobre preto | Aa | 8,9 : 1 AAA | Texto secundário no preto |
| Azul 300 sobre preto | Aa | 7,8 : 1 AAA | Eyebrow, destaques e números no preto |
| Azul sobre preto | Aa | 3,8 : 1 só texto grande | Títulos grandes, nunca texto pequeno |
| Cinza 400 sobre branco | Aa | 2,4 : 1 ✕ não use | Nada mais claro que Cinza 500 para texto no claro |
Tipografia
Duas famílias, cada uma com um papel. Plus Jakarta Sans faz tudo: títulos, texto, interface, labels e código; o destaque dentro do título é a própria Jakarta em itálico azul. DM Mono (400 e 500) entra só em números (números grandes, preço) e no eyebrow acima dos títulos. Nunca em título. Títulos em peso normal (400), com tracking fechado de −3% a −4%: quem dá a hierarquia é o tamanho, não o peso. Texto em 400, ênfase e botões em 500 ou 600. Negrito pesado (700 e 800) não entra.
ABCDEFGHIJKLM 0123456789 {}[]$
Plus Jakarta Sans 400–600
400 em todos os títulos (h1, h2, h3), nos nomes de mentor e no texto, com tracking de −3% a −4% nos títulos. 500 ou 600 para ênfase, botões e labels. Negrito pesado (700 e 800) não entra. Entrelinha 1,6 no texto.
2.000+ · R$ 499,00 · R$ 49,90
Ecossistema de devs
DM Mono 400 e 500
Só para números (400): números grandes, preço, números em mocks. E para o eyebrow (500, 13 px, caixa alta, +0,08em, azul). Nunca em título, parágrafo, botão ou no destaque <em>.
display (h1) · 64/1.08 · 400 · −4%Dê um reload.h2 · 54/1.1 · 400 · −3,5%Mentorias com quem já chegou lálead · 36/1.2 · 400 · −3%Gente de verdade, com curadoria.h3 · 22/1.25 · 400 · −3%Grupos de estudobody · 17/1.6 · 400Você leva a pergunta e quem já passou por isso responde, com a experiência de quem vive isso todo dia.ênfase · botões · 500–600Fazer parte →número grande · DM Mono 400R$ 499,00eyebrow · DM Mono 500 · 13 caixa alta · azulBenefícios que vão alémlabel · 13 caixa alta · 600mentorias · discordcódigo · 15/1.7 · 500$ reload --joinUse clamp() para títulos responsivos (no site, as classes text-display, text-title e text-lead). Destaque dentro de título com <em>: Plus Jakarta Sans em itálico azul, na mesma família e peso do título (o estilo base do site já faz isso). Números e eyebrows com a classe font-mono. Títulos e parágrafos em preto; cinza só em labels, legendas e metadados. Fallbacks: "Plus Jakarta Sans", system-ui, sans-serif e "DM Mono", ui-monospace, monospace.
Elementos gráficos
Vêm do ambiente do dev (terminal, diff), do próprio símbolo e da órbita do hero. Cada elemento tem uma função; não use como enfeite. No lugar de emoji, use os símbolos do terminal (✓ ▸ ●) ou ícones de traço em SVG. A grade de pontos virou o sistema de arte da marca: veja a Trama.
Eyebrow: rótulo de seção
Texto curto e real acima do título: DM Mono 500, 13 px, caixa alta, +0,08em, em azul (Azul 300 sobre preto, branco sobre azul). Diz do que a seção trata, sem código nem piada interna.
$ git log --oneline carreira a1f3c2e mesma stack há 3 anos $ reload --join ✓ mentorias com quem já chegou lá ✓ discord com curadoria ✓ pronto # carreira atualizada
Diff de mudanças
Para benefícios ou antes e depois. O + azul é o que entra; o − cinza é o que sai. Em comparações, os selos são "antes" (cinza) e "depois" (azul).
Pílulas de tema
Borda Cinza 200 ou preta, raio total, Plus Jakarta Sans 600.
Números grandes
DM Mono 400 azul, só com fatos verdadeiros: membros, preço, condições. Nada de métricas inventadas e nenhuma frequência de conteúdo. Aparecem no hero (mais de 2 mil devs) e no passe de membro (12x de R$ 41,58 sempre com "total R$ 499,00 · última parcela R$ 41,62"; R$ 49,90 no mensal). A âncora de parcelas nunca aparece sem o total e a última parcela.
Órbita
Fica no hero da home, ao lado do headline: os benefícios do ecossistema girando em volta da marca, numa cena 3D em WebGL (three.js, carregada só quando o hero aparece e o navegador está ocioso), centrada entre o texto e a borda do card. O protagonista é o símbolo grande, extrudado do SVG da marca sem distorção, sobre um pedestal branco; ele só balança de leve, nunca gira. Três anéis finos (azul translúcido), com raios, alturas e inclinações diferentes e um ponto azul correndo em cada um, cruzam-se sobre um chão de pontos em perspectiva e giram devagar, em velocidades e sentidos diferentes. As placas são ladrilhos 3D grossos com o ícone e o nome impressos na face, que viram de leve com o movimento para mostrar a espessura. Na primeira vez, o pedestal sobe, o símbolo assenta e as placas voltam às órbitas num "reload" de até 1,4 s. Com o mouse em cima, a órbita acelera até 5×, a cena inclina e a placa sob o mouse sobe. Sem WebGL ou sem JavaScript, fica a mesma órbita feita em CSS.
- No centro: o símbolo da Reload, azul, num círculo branco. Sem texto nem número.
- Nos anéis: só benefícios reais, em placas azuis ou pretas com raio pequeno e ícone de traço branco. Anel de fora: Vagas, Recrutadores, Descontos em eventos. Do meio: Networking, Mentorias, Discussões. De dentro: Descontos em cursos, Grupos de estudo.
- Sempre com nome: cada placa leva o nome do benefício embaixo, numa pílula branca.
- Sempre em pé: placas e nomes viajam pelo anel sem girar junto.
- Nunca: fotos de pessoas, números inventados ou logos de empresa sem autorização. Rostos ficam no hero, ao lado do número de membros, e em "Quem está por trás".
- Movimento reduzido: com
prefers-reduced-motion: reduce, a cena 3D não carrega e a órbita em CSS fica parada.
Fotos: retratos reais em preto e branco, recortados com raio grande, sobre placas pretas ou azuis levemente inclinadas. O símbolo branco pode pousar sobre a foto como selo.
Os dois blocos do "R" podem aparecer grandes e recortados pela borda. Nunca deforme o desenho do símbolo.
Quem está por trás: na home, três cards brancos lado a lado, com tudo visível de uma vez (sem abas): retrato grande em P&B sobre uma placa inclinada azul ou preta, com o símbolo branco num selo no canto (sem efeito de hover na foto), nome em Plus Jakarta Sans 400 com tracking fechado, cargo em cinza, um resumo real da carreira e os links como botões de ícone das redes. Rostos de verdade, sem pôster nem número de episódio.
Dê um reload.
Faixas azuis com pontos: grade de 18 px no CTA final, em Vagas e na entrada da plataforma. Os pontos brancos próximos ao mouse crescem e ficam mais opacos; movimentos rápidos e cliques os empurram, com retorno suave. Os pontos internos e da borda do R também reagem e voltam à posição, ao tamanho e à opacidade originais; em repouso, o símbolo mantém suas proporções e círculos inteiros. O redesenho F5 acontece uma única vez no CTA final. Sem JavaScript, com movimento reduzido ou em telas de toque, o padrão fica estático. A animação para ao estabilizar, fora da tela ou com a aba oculta. Sem brilho nem novas cores. Sobre o azul, o botão inverte (fundo branco, texto azul).
Forma
Cantos arredondados, nada de sombra decorativa. A profundidade vem de placas sólidas e do contraste entre seções.
8 px · --rl-radius-sm · selos
12 px · --rl-radius-md · botões, inputs
20 px · --rl-radius-lg · cards, fotos, painéis
32 px · rounded-hero · card do hero
Outline de 2 px azul com 3 px de afastamento. Sobre faixas azuis, o outline fica branco.
- LarguraConteúdo e header em
wrap(max-width: 1360px, respiro lateral de até 40 px). O card do hero usawrap-wide(até 1440 px), um pouco mais largo que o header. Parágrafos em ~60ch, FAQ em ~880 px. - HeaderFundo branco, logo à esquerda com 22 px de altura, menu centralizado com uma entrada por seção da home (Benefícios, Por que a Reload, Recrutadores, Quem somos, Preço, FAQ) e, depois de Recrutadores, "Vagas" (
/vagas), a primeira que leva a outra página, azul quando é a página atual; espaçamento simples, sem separadores, e o botão azul "Fazer parte" à direita. No celular, o menu vira um botão. - CTATodo botão de membro é "Fazer parte" e leva a
/entrar?como=membro&plano=anual|mensalna plataforma, com a origem da visita: no header, no hero e nos benefícios (Anual), "Fazer parte →" no passe de membro (o plano do seletor) e no CTA final ("Dê um reload."). Nunca "assinar" nem "assinatura" no site. - Ordem da homeHero com órbita → frase → Benefícios → Por que a Reload → Para recrutadores → Quem está por trás → Plano → FAQ → CTA final.
- HeroCard Azul 50 com raio de 32 px, logo abaixo do header: eyebrow "Ecossistema de devs", o headline "Sua carreira não precisa de mais conteúdo." em
text-display, o texto "Devs de verdade trocando experiência de verdade, com curadoria. Mentorias com quem já está onde você quer chegar e um ecossistema que continua a conversa no Discord, com menos ruído e mais vivência.", um botão só ("Fazer parte") e, embaixo, os avatares com "Junte-se a mais de 2 mil devs que já fazem parte do ecossistema." A órbita de benefícios fica ao lado. - FraseLogo abaixo do hero, centralizada: "Quem já chegou lá, quem está a caminho e curadoria em tudo que acontece."
- BenefíciosLogo depois da frase, é o destaque da página: faixa preta de ponta a ponta, eyebrow "Benefícios que vão além", título "O que muda na sua carreira quando você entra." com destaque em Azul 300, cards Cinza 900 com ícone de traço Azul 300 numa placa azul translúcida, título branco e texto Cinza 400, e o botão azul "Fazer parte".
- PlanoSeção Cinza 50, título "Doze meses pelo preço de dez." e o passe de membro: faixa azul com o símbolo, corpo branco com o seletor Anual/Mensal (grupo de rádio, Anual ao carregar, "2 meses grátis" no Anual), campos em DM Mono, odômetro de quatro rolos com a vírgula fixa e canhoto preto com o botão "Fazer parte →". Anual: "12x de R$ 41,58" sempre com "total R$ 499,00 · última parcela R$ 41,62"; Mensal: "R$ 49,90 /mês" com "cancele quando quiser". "Sem fidelidade" só no Mensal; Pix só "à vista".
- BotõesAltura mínima 48 px (44 px no header), Plus Jakarta Sans 600, raio 12 px. Primário azul com texto branco; secundário com borda 1.5px preta (branca sobre azul ou preto).
- SombrasNenhuma decorativa. Profundidade vem de placas sólidas.
- MovimentoEntrada com desfoque e crescimento: opacidade em 600 ms, blur de 4 px a 0 em 560 ms, translate de 20 px e scale de 0,92 a 1 em 900 ms, com
cubic-bezier(0.22, 1, 0.36, 1)e escalonamento de 50 a 70 ms entre itens. O card do plano entra só com blur, em 1 s. Logo e menu não têm entrada; a órbita tem a própria (o "reload" das placas). Comprefers-reduced-motion: reduce, tudo aparece parado.
Voz e tom
A Reload fala como um dev sênior gente boa conversando no café: direto, técnico quando precisa, com humor seco e sem arrogância. Usa "você", frases curtas e termos que devs usam de verdade.
| Atributo | Somos | Não somos |
|---|---|---|
| direta | Somos: "Quem já passou por isso responde. Traga sua dúvida." | Não somos: "Uma jornada transformadora de desenvolvimento profissional." |
| técnica | Somos: Referências a git, deploy e cache, quando fazem sentido. | Não somos: Piada interna forçada em toda frase. |
| parceira | Somos: "Todo sênior já foi júnior. Pergunta." | Não somos: "Se você não está em big tech, está ficando para trás." |
| honesta | Somos: Fala do que o ecossistema oferece de fato. | Não somos: Promete salário, vaga ou promoção garantida. |
Faça
- Escreva como se estivesse falando com um colega de time.
- Use termos em inglês que devs usam (deploy, code review, staff), sem traduzir à força.
- Nomeie mentores e empresas só com permissão; sem permissão, use campos entre colchetes ([Nome do mentor], [Empresa]).
- Termine chamadas com uma ação clara: "Fazer parte", "Quero fazer parte →". Nunca "assinar" nem "assinatura".
Evite
- Jargão de coach: "mindset", "desbloquear seu potencial".
- Gatilhos de escassez falsos e contadores inventados.
- Excesso de emoji. Prefira os símbolos do terminal (✓ ▸ ●).
- Diminuir quem está começando.
Aplicações
Modelos para as peças mais frequentes. Os textos entre colchetes são campos a preencher; nomes, empresas e títulos de mentoria entram só quando forem reais e autorizados.
BenefíciosQuem somosPreçoFAQFazer parteSua carreira não precisa de mais conteúdo.
Devs de verdade trocando experiência de verdade, com curadoria. Mentorias com quem já está onde você quer chegar e um ecossistema que continua a conversa no Discord, com menos ruído e mais vivência.
Junte-se a mais de 2 mil devs que já fazem parte do ecossistema.
Quem já chegou lá, quem está a caminho e curadoria em tudo que acontece.
O que muda na sua carreira quando você entra.
Sua carreira não precisa de mais conteúdo.
Fazer parteJunte-se a mais de 2 mil devs que já fazem parte do ecossistema.
[Título da mentoria]
com Rodrigo BranasCTO na Gennera · fundador da branas.io
Sua carreira não precisa de mais conteúdo.
capa de mentoria e post de frase · modelos do kit, com a arte da trama
Avatar e favicon
Só o símbolo ou o ícone de app, nunca o logo completo.
redes · discord · faviconRodapé de e-mail
Plataforma, no claro e no escuro
O site tem um tema só. A plataforma, onde o membro passa o dia, tem densidade de app e dois temas, claro e escuro, feitos só com os tokens da marca. A profundidade vem de degraus de preenchimento e de espaço, nunca de borda ou sombra.
@reload/ui@reload/uiEscada do escuro
Cinzas neutros, misturados do branco e do preto da marca (a porcentagem é o próprio hex), sem o azulado dos Cinzas 800 e 900. Cada superfície fica um degrau acima da que a contém. Texto secundário é branco 62 % (#9E9E9E) e a linha entre itens, branco 7 %.
--framebranco 21,0 · 62 % 7,8Azul 300 7,8--backgroundbranco 18,7 · 62 % 7,0Azul 300 6,9--cardbranco 17,0 · 62 % 6,4Azul 300 6,3--popoverbranco 16,1 · 62 % 6,0Azul 300 5,9--mutedbranco 15,1 · 62 % 5,6Azul 300 5,6--controlbranco 13,2 · 62 % 4,9Azul 300 4,9Escada do claro
A mesma escada, com os cards subindo para o branco: a página é Cinza 50, a moldura em volta dela um degrau mais funda e o bloco dentro de um card desce de novo para o cinza. Cerca de 1,1 : 1 entre degraus, como no escuro. Texto secundário continua Cinza 500, com 4,9 : 1 ou mais em todos.
| Degrau | Amostra | Receita | Hex | Preto · Cinza 500 · Azul |
|---|---|---|---|---|
moldura--frame | Aa | Cinza 50 + 70 % Cinza 200 | #E8EAEE | 17,4 · 4,9 · 4,6 |
página--background | Aa | Cinza 50 | #F5F6F8 | 19,4 · 5,5 · 5,1 |
card, popover--card | Aa | branco | #FFFFFF | 21,0 · 5,9 · 5,6 |
muted--muted | Aa | Cinza 50 + 30 % Cinza 200 | #EFF1F4 | 18,6 · 5,3 · 4,9 |
chip--chip | Aa | Cinza 50 + 70 % Cinza 200 | #E8EAEE | 17,4 · 4,9 · 4,6 |
controle--control | Aa | Cinza 50 no card, branco na página e no muted | — | — |
Cores de status
Só na plataforma, para dizer o estado de algo. O tom base vai no claro e o -300 no escuro, na mesma luminosidade do azul, para não competir com ele. Avisos e erros são uma superfície tingida (10 % no claro, 20 % no escuro) com ícone na cor; o texto na cor passa de 4,5 : 1 sobre a própria tinta, a página, o card e o controle.
| Status | Uso | Claro | Escuro | Tom sobre a tinta |
|---|---|---|---|---|
Vermelho--rl-red · --rl-red-300 | Erro, campo inválido, ação destrutiva | Rejeitada#B51D1C | Rejeitada#FFA69B | 5,6 · 5,9 |
Verde--rl-green · --rl-green-300 | Sucesso: aprovada, ativa, entregue | Aprovada#16713A | Aprovada#5FD68A | 5,3 · 6,0 |
Âmbar--rl-amber · --rl-amber-300 | Aviso: ajustes pedidos, suspensa, incerta | Ajustes pedidos#9A4D0F | Ajustes pedidos#F6AE6A | 5,3 · 5,9 |
Azul--rl-blue · --rl-blue-300 | Informação | Em revisão#0056FF | Em revisão#6B9BFF | 4,8 · 4,5 |
Selos Azul 50 ficam sobre cards brancos (1,13 : 1 do card, glifo azul a 4,9 : 1); no escuro, branco sobre azul, 5,6 : 1. No escuro, campo e checkbox ficam a ~1,3 : 1 do card: o estado é lido pelo azul do marcado, pelo rótulo e pelo foco.
- Onde valeNas telas de quem faz parte (início, vagas, membros, perfil, admin), feitas com
@reload/ui. O site e este manual continuam claros, com um tema só, sem botão de tema. - Dois temasClaro e escuro, escolhidos pelo membro no menu do próprio nome (começa seguindo o sistema). O escuro é a classe
.darkno<html>; a moldura segue o tema do conteúdo. - DensidadeDensidade de app (ADR-002): texto 15/1.6, h1 32, h2 24, botão grande com 40 px (36 px dentro de tabelas), contagens em DM Mono. O raio acompanha o tamanho da peça: 3 px em blocos de medidor e marcas de gráfico, 6 px em selos e deltas, 10 px em botões, campos e ícones, 14 px em poços, menus e blocos dentro do card, 20 px em cards e diálogos; o aninhado usa o raio de fora menos o padding.
- Sem bordasA hierarquia vem do preenchimento e do espaço: cada superfície fica um degrau fora da que a contém (no claro, o card sobe para o branco) e irmãos se separam por 16 a 24 px (40 a 56 px entre seções). Linha fina só entre linhas de tabela ou lista (Cinza 200 no claro, branco 7 % no escuro), no foco, nos selos de contorno (em análise, recruiter) e nos campos de texto no claro.
- Controles cheiosCampos, select, checkbox, radio, switch e chips são preenchidos um degrau fora do container (
--control): no claro, Cinza 50 dentro do card e branco sobre a página; no escuro, um degrau acima. No escuro, sem contorno: o preenchimento é o campo. Marcado é azul cheio; o botão outline do escuro vira preenchimento. - Selos de íconeÍcone de traço num quadrado de 8 px de raio (
--seal): Azul 50 com glifo azul no claro, sempre sobre card branco; azul sólido com glifo branco no escuro. - FocoAnel de 2 px: azul no claro, Azul 300 no escuro. Link pequeno no escuro também é Azul 300.
- SeleçãoSelecionado e hover são preenchimento, nunca anel ou contorno: no shell claro, o item ativo é branco sobre a moldura; no escuro, um degrau acima.
- Sem efeitosNenhuma sombra, nem vidro: diálogos abrem sobre um véu preto chapado (32 % no claro, 60 % no escuro), sem desfoque, e menus são sólidos no degrau popover.
- DadosContagens, metas e tempos usam o vocabulário de dados (abaixo): rampa azul para quantidade, hachura para o que ainda não conta, tracejado para pendente e comparação. Ali o tracejado e a linha fina entram porque querem dizer algo, sem virar borda de superfície.
- Cores de statusSó para estado: vermelho em erro, campo inválido e ação destrutiva (sempre com confirmação), verde em sucesso, âmbar em aviso; informação é azul. Nunca como decoração e nunca sozinha: todo estado tem ícone ou rótulo. O site não tem cores de status.
Vocabulário de dados
A plataforma mostra contagens, metas, filas e tempos. O dado lê antes do texto: um azul só, em rampa, para quantidade; cinza para o resto; hachura para o que ainda não conta e tracejado para o que está pendente. Tudo vem dos tokens da marca, nos dois temas. As peças ficam em @reload/ui e o protótipo dados mostra cada uma.
- Rampa azulQuantidade, do fraco ao forte (
--data-1a--data-5). O mais forte é a série em destaque; o resto é marca neutra. Partes de um todo descem a rampa e terminam no cinza. - HachuraO que ainda não conta: folga da escala, projeção, período anterior, valor desconhecido. Nunca decoração.
- TracejadoContorno tracejado é pendente, rascunho, vazio ou "+ Adicionar"; linha tracejada é comparação (período anterior, projeção, média, meta).
- NúmerosDM Mono; moeda e unidade em Jakarta, metade do tamanho, em texto secundário. Todo desenho imprime o número real ao lado.
- DeltaSelo com seta e sinal: verde quando o movimento é bom, vermelho quando é ruim (invertido em custo, espera e reembolso), neutro quando a direção não julga nada.
- PainelMoldura com título, descrição com " · " e ação; o dado fica num poço (branco no claro, branco 8 % no escuro); uma linha de leitura fecha com os números-chave.
Tokens para desenvolvimento
Copie direto para o projeto. É o conteúdo de /assets/brand/tokens.css (no repositório, public/assets/brand/tokens.css), com um tema só. No site, os mesmos valores viram o tema do Tailwind em src/styles/global.css; na plataforma, os temas claro e escuro de @reload/ui são feitos só com eles.
/* reload.dev · design tokens v2.9.0 */ :root { /* colors · brand */ --rl-blue: #0056ff; /* primary: brand, actions, links */ --rl-black: #000000; /* secondary: text, dark sections */ --rl-white: #ffffff; /* main background, text on blue and black */ /* colors · supporting */ --rl-blue-50: #ebf1ff; /* section background, seals */ --rl-blue-300: #6b9bff; /* blue for small text on black */ --rl-blue-hover: #0047d6; /* blue button hover */ --rl-gray-50: #f5f6f8; /* alternating section background */ --rl-gray-200: #e2e5ea; /* borders and dividers in light mode */ --rl-gray-400: #a3a9b4; /* secondary text on black */ --rl-gray-500: #5e6470; /* secondary text, captions */ --rl-gray-700: #3a3f48; /* text on light gray when black is too heavy */ --rl-gray-800: #2a2d33; /* borders on black */ --rl-gray-900: #16181d; /* panels on black */ /* colors · status (platform states only; the site stays blue, black and white) */ --rl-red: #b51d1c; /* error and destructive on light */ --rl-red-300: #ffa69b; /* error and destructive on dark */ --rl-green: #16713a; /* success on light */ --rl-green-300: #5fd68a; /* success on dark */ --rl-amber: #9a4d0f; /* warning on light */ --rl-amber-300: #f6ae6a; /* warning on dark */ /* typography */ --rl-font-display: "Plus Jakarta Sans", system-ui, sans-serif; --rl-font-body: "Plus Jakarta Sans", system-ui, sans-serif; --rl-font-mono: "DM Mono", ui-monospace, monospace; /* numbers and eyebrows only, never headings */ /* shape */ --rl-radius-sm: 8px; --rl-radius-md: 12px; --rl-radius-lg: 20px; /* * platform radius scale: the radius follows the size of the shape, so small pieces stay crisp * and a nested surface keeps its parent's curve (inner = outer − padding). The site keeps 8/12/20. */ --rl-radius-tick: 3px; /* meter ticks, swatches, chart marks, heat cells */ --rl-radius-chip: 6px; /* badges, deltas, kbd, small chips (≤ 28 px tall) */ --rl-radius-control: 10px; /* buttons, inputs, icon tiles, toggles, list rows */ --rl-radius-inner: 14px; /* wells, menus, popovers, blocks nested in a card */ }