Nanquim.
Zine impreso en risografía: papel crema, tinta china negra y dos colores (rosa fluorescente y azul) fuera de registro, con ilustraciones propias en SVG, grapas, marcas de corte y el proceso contado en tira cómica.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Bricolage Grotesque
- Texto
- Work Sans
ParaEditoriales, revistas, marcas pequeñas y lectores de zines que contratan o compran a un artista independiente
Secciones de la página01/08Topo e navegação
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.
Del DESIGN.md, que por ahora está en portugués.
ParaEditoriales, revistas, marcas pequeñas y lectores de zines que contratan o compran a un artista independiente
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Bricolage Grotesque en los títulos, Work Sans en el texto.
TítulosBricolage Grotesque
Aag!
Nanquim en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoWork Sans
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- artista solista con obra propia para mostrar
- quien vende impresos (zines, láminas, libros)
- marca con rosa o azul vivos
- público de ferias gráficas y cultura independiente
- abogacía, salud y finanzas
- marca corporativa sobria
- lujo minimalista
- quien no tiene arte propio para reemplazar las ilustraciones
Tono
Lo que lo hace Nanquim
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 01
Duas cores fora de registro:
.nanquim-duas(texto) e o componenteRiso(ilustração) põem a camada rosa deslocada 3–4px da azul; no hover ela escorrega para o outro lado. - 02
Ilustração própria em SVG com filtro de pincel (
#nq-pincel), retícula empattern(#nq-ret-azul,#nq-ret-rosa) e traço de espessura variável. - 03
Textura de impressão: grão no
::afterda raiz, falhas de tinta (.nanquim-falha) nos títulos grossos, marcas de corte (.nanquim-corte+<Cortes />) e cruz de registro. - 04
Galeria como espalhado de zine: duas páginas, dobra no meio, dois grampos, numeração
p. 04. - 05
Processo em tira: quadros com borda preta e sarjeta, legenda em caixa no canto e balão. Nunca três cards com ícone.
- 06
Tabela de zine para preços: linhas pontilhadas, número mono, preço com marca-texto rosa.
- 07
Colofão no rodapé com barra de cor (rosa, azul, cruzamento, preto, retícula).
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
Identidade
- Fundo papel
#f6f1e7; blocos alternados emsurface-2#ece3d1. Nunca branco puro. - Tinta
#16151apara texto, bordas grossas (2–3px) e sombras duras (6px 6px 0). - Rosa
#ff4f9a(primária) e azul#2f5bff(destaque). Só essas duas cores, sempre emmix-blend-mode: multiplyquando 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-sobena capa,data-revelaabaixo; 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-primarye--nq-azul/--d-accente as constantesROSA/AZULdoLanding.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.
Dos archivos.
Un prompt.
Nanquim se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Nanquim.
