Design System · Joe Reis
Uma identidade.
Todos os ecossistemas.
Site, post, proposta, apresentação, vídeo e sistemas próprios com a mesma cara e a mesma voz. Tudo nasce dos mesmos tokens, então nada começa do zero. Esta página é o guia vivo: o que você vê aqui é renderizado com os próprios arquivos do sistema.
01 · Princípios
Como a marca se comporta
Quatro decisões que valem para qualquer peça. Quando houver dúvida num projeto novo, volte aqui.
Preto, off-white, azul e limão. Um único destaque por tela: o limão é o holofote, não o cenário.
Ilustração em linha, personagem real, objetos do dia a dia (café, câmera, skate). A marca tem rosto e rotina.
Títulos geométricos (Space Grotesk) + informações em mono (Space Mono). Dá cara de estúdio que entende de código e de design.
Entradas suaves e hover que dá retorno. Nada pisca à toa. Tudo respeita “reduzir movimento”.
02 · Cores
Cores
Cinco cores oficiais. O resto é derivado delas para garantir leitura e profundidade. Nos componentes, use sempre o nome semântico (--color-bg, --color-accent), nunca o hex.
--ds-ink
Fundo escuro e texto no claro.
--ds-paper
Fundo claro e texto no escuro.
--ds-blue
Primário. Superfícies grandes e gráficos.
--ds-lime
Destaque. Texto sobre ele: sempre preto.
--ds-gray
Neutro. Bordas e itens desativados.
Texto/link azul no escuro.
Botão e link no claro (passa AA).
Cards no escuro.
Cards/realce no claro.
Silhuetas dos ícones de objetos.
| Par | Razão | Uso |
|---|---|---|
| Paper / Ink | 16.6 : 1 | AAA — texto corrido |
| Ink / Lime | 16.0 : 1 | AAA — texto sobre destaque |
| Blue 300 / Ink | 7.6 : 1 | AAA — links no escuro |
| Ink soft / Paper | 5.9 : 1 | AA — texto secundário no claro |
| Paper / Blue 600 | 5.3 : 1 | AA — botões e links no claro |
| Paper / Blue | 4.2 : 1 | Só texto grande (≥ 24px) ou ilustração |
| Blue / Ink | 3.9 : 1 | Só elementos gráficos e texto grande |
| Lime / Paper | 1.04 : 1 | Nunca como texto no claro — use como fundo |
Um destaque por vez
Limão em apenas um elemento por tela/slide/post: o número, a palavra ou o botão que importa.
Limão como fundo no claro
No tema claro, use marca-texto limão com texto preto. Nunca texto limão.
Azul + limão lado a lado
Vibram forte juntos (4:1). Separe com preto ou off-white.
Adicionar roxo ou laranja
Ficam só como inspiração de estilo (adesivos). Não entram na paleta.
03 · Tipografia
Tipografia
Três famílias, cada uma com um trabalho. Todas gratuitas no Google Fonts, então funcionam em site, Canva, Figma e vídeo.
Space Grotesk · 500 / 600 / 700
Títulos, chamadas e logo.
Inter · 400 / 500 / 600 / 700
Textos, menus, descrições e interface.
Space Mono · 400 / 700
Códigos, categorias, datas e informações técnicas.
04 · Espaço & forma
Espaçamento, raios e sombras
Tudo múltiplo de 4px. Cantos arredondados generosos e sombras baixas e longas, com um brilho azul quando algo é uma ação.
05 · Componentes
Componentes
Peças prontas em HTML + CSS puro (sem build). Copie o HTML, linke os dois CSS e funciona. Passe o mouse e use Tab para testar hover e foco.
Logo, paleta, tipografia e manual para a marca falar a mesma língua em todo lugar.
Páginas rápidas, claras e pensadas para o visitante virar contato.
Cortes, ritmo e motion para reels, institucionais e YouTube.
Entendo o objetivo e o público do projeto.
Você recebe escopo, valor e cronograma.
Quanto tempo leva um projeto?
Você atende projetos remotos?
Como funciona o pagamento?
Sites que convertem, marcas que ficam.
06 · Ilustração e ícones
Ilustração e ícones
O universo visual é desenhado em linha: personagem com a sua cara em cenas do dia a dia e uma biblioteca de 41 objetos do seu mundo (notebook, câmera, café, skate, claquete). Tudo está vetorizado em SVG: escala sem perder qualidade e cada ícone é um arquivo separado.
assets/ilustracoes/personagem-trio.svg · personagem-camera.svg
assets/icones/<nome>.svg · icones-sprite.svg (todos juntos, para uso inline) · icones.json (lista com nomes)
Traço preto, fundo off-white
Linha limpa em #111111, preenchimentos chapados, sem degradê. Fundo #F2F0EA.
Ícones em silhueta
Objetos em azul-marinho #10243C com recortes off-white para os detalhes. Mesmo peso visual em todos.
Sobre fundo escuro
Com <img>, use o painel .ds-illustration-panel (off-white). Para o traço ficar branco direto no escuro, coloque o SVG inline na página: ele lê --ds-line-color / --ds-icon-color.
Cor chapada fora da paleta
Preenchimentos só em azul ou limão quando for acento. O personagem fica preto e branco.
07 · Formatos de saída
Formatos de saída
Mesma identidade em cada canal. Os quadros abaixo mostram proporção e zona segura (tracejado). Posts, slides, proposta e vídeo já têm templates prontos.
Design que comunica
Arraste →Dica de UX em 30s
@joereis.designIdentidade visual para sua marca
Como criar um sistema
Thumbnail · 1280×720Proposta comercial
design.joereis@gmail.com8 modelos (capa, agenda, seção, conteúdo, pilares, números, processo e encerramento), em PNG e PDF.
Abrir slides →9 peças: 3 thumbnails, abertura, capítulo, tela final e 3 overlays transparentes (nome, tema, legenda).
Abrir vídeo →4 páginas (capa, escopo, processo e investimento), prontas para PDF.
Abrir proposta →Ink (principal) ou Paper. Azul só em peças de impacto.
Space Grotesk 700, tracking −2%. Uma palavra com marca-texto limão.
Dados em Space Mono maiúsculo (data, categoria, número da página).
08 · Movimento
Movimento
Uma curva de assinatura (cubic-bezier(0.16, 1, 0.3, 1)) para entradas e hovers: sai rápido e assenta suave. Para vídeo, use o mesmo ease “out expo”.
Botões, ícones, cor de borda.
Cards, elevação, sombras.
Revelação ao rolar, entrada de hero.
Sempre respeitar prefers-reduced-motion: os tokens de duração caem para ~0 automaticamente.