# Papel / cuaderno

También llamado: UI de cuaderno, diseño de papel pautado, web de cuaderno de bocetos, UI de notas adhesivas, estilo papelería  
Época: 2010-2013 (Evernote, Paper by 53), revival en toma de notas y edtech de 2020 en adelante  
Página: https://designforai.dev/es/style/paper-notebook

## Rasgos

- fondos de papel pautado o punteado (líneas con repeating-linear-gradient a 28-32px)
- línea de margen roja a la izquierda, agujeros de perforación, bordes rasgados o curvados
- notas adhesivas en amarillo, rosa y azul con una ligera rotación y una sombra suave
- fuentes manuscritas o de rotulador para títulos, una sans limpia o una mono para el cuerpo
- clips, tiras de cinta adhesiva, marcas de subrayador como decoración
- papel blanco roto cálido, texto gris lápiz, un azul tinta
- profundidad plana: papel sobre papel, sombras pequeñas, sin brillo

Paleta: #fdfbf3 papel, #cfe3f5 línea pautada, #e88a8a línea de margen, #3a3a3a texto lápiz, #1f4bd8 azul tinta, #fff59d amarillo de nota adhesiva

Tipografía: Caveat, Patrick Hand, Kalam o Gloria Hallelujah para títulos y notas (24-40px); Nunito, Karla o Courier Prime para el cuerpo a 16-17px

## Haz

- dibuja las líneas pautadas con CSS para que el line-height del cuerpo coincida exactamente con el pautado
- rota las notas adhesivas entre -3deg y 3deg y dale a cada una una franja superior de 2px más oscura como borde de pegamento
- usa un efecto subrayador (subrayado con linear-gradient en #fff59d al 40% de altura) en vez de negrita para el énfasis

## Evita

- no compongas texto largo en una fuente manuscrita; úsala solo para títulos y anotaciones
- no añadas curvas 3D realistas ni sombras pesadas; mantenlo plano y fino como el papel
- no uses blanco puro; el papel es cálido

Conocido por: Evernote (primeras versiones), Paper by 53, Notability, marketing de Bear notes, Goodnotes

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

Construye el sitio como un cuaderno de papel. Fondo de página #fdfbf3 con líneas pautadas: repeating-linear-gradient(transparent 0 31px, #cfe3f5 31px 32px) y una línea de margen vertical de 2px #e88a8a a 64px del borde izquierdo; el texto del cuerpo usa line-height 32px para que las líneas se asienten sobre el pautado. Texto #3a3a3a, enlaces y acentos de tinta #1f4bd8. Fuentes: Caveat 700 para títulos a 40/30px y para notas al margen, Nunito 400 a 17px para el cuerpo. Las tarjetas son notas adhesivas: #fff59d (también variantes #f8bbd0 y #bbdefb), cuadradas de 200px, border-radius 2px, rotadas -2deg o 3deg, una franja de 12px más oscura en la parte superior, box-shadow 0 2px 6px rgba(58,58,58,0.18). Añade pequeños clips en SVG y un trozo de cinta adhesiva (rectángulo semitransparente #e0e0e0 al 45%) sobre la imagen del hero. El énfasis usa subrayador: background linear-gradient(transparent 60%, #fff59d 60%). Los botones parecen rectángulos estampados con tinta: borde 2px #1f4bd8, relleno transparente, texto en Caveat 22px. Movimiento: las notas adhesivas se elevan 2px en hover, 150ms; nada más.