Design Vaultby Ravox
Landingclaroautoralinformaldivertido
NNanquim

Nanquim.

Zine impresso em risografia: papel creme, nanquim preto e duas cores (rosa fluorescente e azul) fora de registro, com ilustrações próprias em SVG, grampos, marcas de corte e processo contado em tirinha.

Tipo
Landing page
Tema
Claro
Títulos
Bricolage Grotesque
Texto
Work Sans

ParaEditoras, revistas, marcas pequenas e leitores de zine que contratam ou compram de um artista independente

Baixar .zip Você tem acesso aos arquivos
Abrir em tela cheia
/preview/nanquim

Seções da página01/08Topo e navegação

Todo o texto fica em content.ts e as cores em tokens.css.
Conceito

Zine impresso em risografia. Papel creme, nanquim preto e duas cores de tinta, rosa fluorescente e azul, que se cruzam em multiply e viram roxo. A página parece ter saído de uma gráfica de feira, não de um template.

ParaEditoras, revistas, marcas pequenas e leitores de zine que contratam ou compram de um artista independente

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Bricolage Grotesque nos títulos, Work Sans no texto.

TítulosBricolage Grotesque

Aag!

Nanquim em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoWork Sans

A fonte de leitura carrega parágrafos longos sem cansar.

Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.

0123456789 · R$ 1.234,56 · 25/09 às 19h30

Para quem serve

O que a skill /escolher-design compara com o cliente.

Combina com
  • artista solo com trabalho próprio para mostrar
  • quem vende impresso (zine, print, livro)
  • marca com rosa ou azul vivos
  • público de feira gráfica e cultura independente
Evitar para
  • advocacia, saúde e finanças
  • marca corporativa sóbria
  • luxo minimalista
  • quem não tem arte própria para pôr no lugar das ilustrações
Nichos
ilustraçãoquadrinhosportfólio de artistaeditora independentetatuagemestúdio de gravuralivraria de bairropapelaria autoralletteringeducação artística

Tom

autoralinformaldivertidoartesanalcultura independente

O que faz ser Nanquim

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

  1. 01

    Duas cores fora de registro: .nanquim-duas (texto) e o componente Riso (ilustração) põem a camada rosa deslocada 3–4px da azul; no hover ela escorrega para o outro lado.

  2. 02

    Ilustração própria em SVG com filtro de pincel (#nq-pincel), retícula em pattern (#nq-ret-azul, #nq-ret-rosa) e traço de espessura variável.

  3. 03

    Textura de impressão: grão no ::after da raiz, falhas de tinta (.nanquim-falha) nos títulos grossos, marcas de corte (.nanquim-corte + <Cortes />) e cruz de registro.

  4. 04

    Galeria como espalhado de zine: duas páginas, dobra no meio, dois grampos, numeração p. 04.

  5. 05

    Processo em tira: quadros com borda preta e sarjeta, legenda em caixa no canto e balão. Nunca três cards com ícone.

  6. 06

    Tabela de zine para preços: linhas pontilhadas, número mono, preço com marca-texto rosa.

  7. 07

    Colofão no rodapé com barra de cor (rosa, azul, cruzamento, preto, retícula).

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

  • Fundo papel #f6f1e7; blocos alternados em surface-2 #ece3d1. Nunca branco puro.
  • Tinta #16151a para texto, bordas grossas (2–3px) e sombras duras (6px 6px 0).
  • Rosa #ff4f9a (primária) e azul #2f5bff (destaque). Só essas duas cores, sempre em mix-blend-mode: multiply quando se sobrepõem. O roxo nunca é uma cor própria: sai do cruzamento.
  • Fontes: Bricolage Grotesque nos extremos (800 para o grosso, 200 para o contraste), Work Sans no texto, IBM Plex Mono em rótulos de página e dados, Caveat só em anotação à mão (legenda, nota).

Regras

  • Composição torta de propósito: rotações de 1–3° em capa, espalhados e zines. Nada centralizado e simétrico no topo.
  • Um botão de verdade por tela (.nanquim-botao, sombra azul dura); o resto é link sublinhado rosa.
  • Cantos quase retos (rounded-d = 2px). Nada de pílula, blur, vidro ou gradiente suave.
  • Animação: data-sobe na capa, data-revela abaixo; o rosa desliza no hover. Movimento reduzido desliga as transições.
  • Texto em primeira pessoa, informal e concreto (prazo, papel, formato). Sem frase de efeito.

Adaptar à marca do cliente

  • As duas cores podem virar outro par de tintas de riso (ex.: laranja + verde-azulado), desde que contrastem e o cruzamento em multiply dê uma terceira cor boa. Troque --nq-rosa/--d-primary e --nq-azul/--d-accent e as constantes ROSA/AZUL do Landing.tsx.
  • Mantenha papel creme e tinta preta. Com fundo escuro o multiply some e o design perde o sentido.
  • Cliente sem trabalho visual próprio? Esse design provavelmente não é o certo.
Como usar

Dois arquivos.
Um prompt.

O Nanquim vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.

Prompt para o agente

Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.

  1. 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
  2. 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
  3. 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
  4. 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.

Parecidos

Landings com tom ou nicho em comum com Nanquim.

Ver catálogo
LandingclaroVer design

Clipping

LandingescuroVer design

Revelação

LandingclaroVer design

Concreto

LandingclaroVer design

Caso