Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingLightauthorialinformalplayful
NNanquim

Nanquim.

A risograph-printed zine: cream paper, black India ink and two off-register colors (fluorescent pink and blue), custom SVG illustrations, staples, crop marks and the process told as a comic strip.

Type
Landing page
Theme
Light
Headings
Bricolage Grotesque
Body
Work Sans

ForPublishers, magazines, small brands and zine readers who hire or buy from an independent artist

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/nanquim

Page sections01/08Topo e navegação

All the copy lives in content.ts and the colors in tokens.css.
Concept

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.

From DESIGN.md, which is in Portuguese for now.

ForPublishers, magazines, small brands and zine readers who hire or buy from an independent artist

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Bricolage Grotesque for headings, Work Sans for body text.

HeadingsBricolage Grotesque

Aag!

Nanquim in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyWork Sans

The reading font carries long paragraphs without tiring the eye.

Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.

0123456789 · $1,234.56 · Sep 25, 7:30 PM

Who it's for

What the AI compares with your client to pick the design.

Great for
  • solo artist with their own work to show
  • anyone selling print (zines, prints, books)
  • brand with vivid pink or blue
  • audience from print fairs and independent culture
Avoid for
  • law, healthcare and finance
  • sober corporate brand
  • minimalist luxury
  • anyone without their own art to replace the illustrations
Niches
illustrationcomicsartist portfolioindependent publishertattooprintmaking studioneighborhood bookstoreindie stationeryletteringart education

Tone

authorialinformalplayfulhandmadeindependent culture

What makes it Nanquim

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  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).

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View 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.
How to use

Two files.
One prompt.

Nanquim becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.

Prompt for the agent Use with AI

Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.

  1. 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
  2. 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
  3. 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
  4. 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.

Similar

Landings that share a tone or niche with Nanquim.

Browse catalog
LandingLightView design

Clipping

LandingDarkView design

Revelação

LandingLightView design

Fermento

LandingLightView design

Assento