Design for AI

Estilo Papel / caderno: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de papel / caderno. Também chamado de UI de caderno, design de papel pautado, web de sketchbook, UI de post-it, estilo papelaria. 2010-2013 (Evernote, Paper by 53), revival em anotações e edtech de 2020 em diante.

Traços

  • fundos de papel pautado ou pontilhado (linhas repeating-linear-gradient a 28-32px)
  • linha de margem vermelha à esquerda, furos, bordas rasgadas ou curvadas
  • post-its em amarelo, rosa e azul com leve rotação e sombra suave
  • fontes manuscritas ou de marcador para títulos, uma sans limpa ou mono para o corpo
  • clipes de papel, tiras de fita, marcações de marca-texto como decoração
  • papel branco-quente, texto cinza lápis, um azul tinta
  • profundidade chapada: papel sobre papel, sombras pequenas, sem brilho

Paleta

#fdfbf3 papel, #cfe3f5 linha pautada, #e88a8a linha de margem, #3a3a3a texto lápis, #1f4bd8 azul tinta, #fff59d amarelo post-it

Tipografia

Caveat, Patrick Hand, Kalam ou Gloria Hallelujah para títulos e notas (24-40px); Nunito, Karla ou Courier Prime para o corpo a 16-17px

Faça

  • desenhe as linhas pautadas com CSS para o line-height do corpo bater exatamente com a pauta
  • rotacione os post-its de -3deg a 3deg e dê a cada um uma faixa superior 2px mais escura para a borda de cola
  • use um efeito de marca-texto (sublinhado linear-gradient em #fff59d a 40% de altura) em vez de bold para ênfase

Evite

  • não componha texto longo numa fonte manuscrita; use-a só em títulos e anotações
  • não adicione curvas 3D realistas nem sombras pesadas; mantenha chapado e fino como papel
  • não use branco brilhante; papel é quente

Conhecido por: Evernote (início), Paper by 53, Notability, marketing do Bear notes, Goodnotes

Semente CSS
:root {
  --bg: #fdfbf3;
   --rule: #cfe3f5;
   --margin: #e88a8a;
   --fg: #3a3a3a;
   --accent: #1f4bd8;
   --sticky: #fff59d;
   --radius: 2px;
   --shadow: 0 2px 6px rgba(58,58,58,0.18);
   --font: 'Nunito',sans-serif;
   --font-hand: 'Caveat',cursive
}
Prompt

Construa o site como um caderno de papel. Fundo da página #fdfbf3 com linhas pautadas: repeating-linear-gradient(transparent 0 31px, #cfe3f5 31px 32px) e uma linha de margem vertical de 2px #e88a8a a 64px da esquerda; o corpo de texto usa line-height 32px para as linhas assentarem na pauta. Texto #3a3a3a, links e acentos de tinta #1f4bd8. Fontes: Caveat 700 para títulos a 40/30px e para notas de margem, Nunito 400 a 17px para o corpo. Os cards são post-its: #fff59d (também variantes #f8bbd0 e #bbdefb), quadrados de 200px, border-radius 2px, rotacionados -2deg ou 3deg, uma faixa 12px mais escura ao longo do topo, box-shadow 0 2px 6px rgba(58,58,58,0.18). Adicione pequenos clipes de papel em SVG e um pedaço de fita (retângulo #e0e0e0 semitransparente a 45%) na imagem do hero. A ênfase usa marca-texto: background linear-gradient(transparent 60%, #fff59d 60%). Os botões parecem retângulos carimbados a tinta: borda 2px #1f4bd8, preenchimento transparente, texto Caveat 22px. Movimento: os post-its sobem 2px no hover, 150ms; nada mais.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site como um caderno de papel. Fundo da página #fdfbf3 com linhas pautadas: repeating-linear-gradient(transparent 0 31px, #cfe3f5 31px 32px) e uma linha de margem vertical de 2px #e88a8a a 64px da esquerda; o corpo de texto usa line-height 32px para as linhas assentarem na pauta. Texto #3a3a3a, links e acentos de tinta #1f4bd8. Fontes: Caveat 700 para títulos a 40/30px e para notas de margem, Nunito 400 a 17px para o corpo. Os cards são post-its: #fff59d (também variantes #f8bbd0 e #bbdefb), quadrados de 200px, border-radius 2px, rotacionados -2deg ou 3deg, uma faixa 12px mais escura ao longo do topo, box-shadow 0 2px 6px rgba(58,58,58,0.18). Adicione pequenos clipes de papel em SVG e um pedaço de fita (retângulo #e0e0e0 semitransparente a 45%) na imagem do hero. A ênfase usa marca-texto: background linear-gradient(transparent 60%, #fff59d 60%). Os botões parecem retângulos carimbados a tinta: borda 2px #1f4bd8, preenchimento transparente, texto Caveat 22px. Movimento: os post-its sobem 2px no hover, 150ms; nada mais.

## Tokens
:root { --bg:#fdfbf3; --rule:#cfe3f5; --margin:#e88a8a; --fg:#3a3a3a; --accent:#1f4bd8; --sticky:#fff59d; --radius:2px; --shadow:0 2px 6px rgba(58,58,58,0.18); --font:'Nunito',sans-serif; --font-hand:'Caveat',cursive }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.