# Papier / Notizbuch

Auch bekannt als: Notizbuch-UI, liniertes Papierdesign, Skizzenbuch-Web, Sticky-Note-UI, Schreibwaren-Stil  
Ära: 2010-2013 (Evernote, Paper by 53), Revival in Notiz- und Edtech-Apps ab 2020  
Seite: https://designforai.dev/de/style/paper-notebook

## Merkmale

- linierte oder gepunktete Papierhintergründe (repeating-linear-gradient-Linien bei 28-32px)
- rote Randlinie links, Lochung, gerissene oder gewellte Kanten
- Haftnotizen in Gelb, Pink und Blau mit leichter Drehung und weichem Schatten
- Handschrift- oder Marker-Schriften für Überschriften, eine klare Sans oder Mono für Fließtext
- Büroklammern, Klebebandstreifen, Textmarker-Striche als Dekoration
- warmes Off-White-Papier, bleistiftgrauer Text, ein Tintenblau
- flache Tiefe: Papier auf Papier, kleine Schatten, kein Glanz

Palette: #fdfbf3 Papier, #cfe3f5 Linie, #e88a8a Randlinie, #3a3a3a Bleistifttext, #1f4bd8 Tintenblau, #fff59d Haftnotizgelb

Schrift: Caveat, Patrick Hand, Kalam oder Gloria Hallelujah für Überschriften und Notizen (24-40px); Nunito, Karla oder Courier Prime für Fließtext bei 16-17px

## Do

- zeichne die Linien mit CSS, damit die line-height des Fließtexts exakt zur Linierung passt
- drehe Haftnotizen um -3deg bis 3deg und gib jeder einen 2px dunkleren Streifen oben als Klebekante
- nutze einen Textmarker-Effekt (linear-gradient-Unterstreichung in #fff59d bei 40 % Höhe) statt Fett zur Hervorhebung

## Don't

- setze keinen langen Fließtext in einer Handschrift; nur für Überschriften und Anmerkungen
- füge keine realistischen 3D-Wellen oder schweren Schatten hinzu; halte es flach und papierdünn
- nutze kein grelles Weiß; Papier ist warm

Bekannt dafür: Evernote (früh), Paper by 53, Notability, Bear-Notes-Marketing, Goodnotes

## CSS-Seed

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

Baue die Seite als Papier-Notizbuch. Seitenhintergrund #fdfbf3 mit Linien: repeating-linear-gradient(transparent 0 31px, #cfe3f5 31px 32px) und einer vertikalen 2px #e88a8a Randlinie 64px vom linken Rand; Fließtext nutzt line-height 32px, damit die Zeilen auf der Linierung sitzen. Text #3a3a3a, Links und Tintenakzente #1f4bd8. Schriften: Caveat 700 für Überschriften bei 40/30px und für Randnotizen, Nunito 400 bei 17px für Fließtext. Karten sind Haftnotizen: #fff59d (auch Varianten #f8bbd0 und #bbdefb), 200px Quadrat, border-radius 2px, gedreht um -2deg oder 3deg, ein 12px dunklerer Streifen oben, box-shadow 0 2px 6px rgba(58,58,58,0.18). Ergänze kleine SVG-Büroklammern und ein Stück Klebeband (halbtransparentes #e0e0e0 Rechteck bei 45 %) auf dem Hero-Bild. Hervorhebung per Textmarker: background linear-gradient(transparent 60%, #fff59d 60%). Buttons sehen aus wie tintengestempelte Rechtecke: 2px #1f4bd8 Rand, transparente Füllung, Caveat 22px Text. Motion: Haftnotizen heben sich bei Hover 2px, 150ms; sonst nichts.