Nanquim.
Zine imprimé en risographie : papier crème, encre de Chine noire et deux couleurs (rose fluo et bleu) hors repérage, avec des illustrations originales en SVG, agrafes, traits de coupe et le processus raconté en bande dessinée.
- Type
- Landing page
- Thème
- Clair
- Titres
- Bricolage Grotesque
- Texte
- Work Sans
PourÉditeurs, magazines, petites marques et lecteurs de zines qui engagent ou achètent auprès d'un artiste indépendant
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourÉditeurs, magazines, petites marques et lecteurs de zines qui engagent ou achètent auprès d'un artiste indépendant
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Bricolage Grotesque pour les titres, Work Sans pour le texte.
TitresBricolage Grotesque
Aag!
Nanquim en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteWork Sans
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- artiste solo avec un travail personnel à montrer
- qui vend des imprimés (zines, tirages, livres)
- marque avec rose ou bleu vifs
- public des salons d'édition et de la culture indépendante
- droit, santé et finance
- marque corporate sobre
- luxe minimaliste
- qui n'a pas d'art personnel pour remplacer les illustrations
Ton
Ce qui fait Nanquim
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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).
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Nanquim devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Nanquim.