# Papel / caderno

Também chamado de: UI de caderno, design de papel pautado, web de sketchbook, UI de post-it, estilo papelaria  
Era: 2010-2013 (Evernote, Paper by 53), revival em anotações e edtech de 2020 em diante  
Página: https://designforai.dev/pt/style/paper-notebook

## 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

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