Design for AI

Stil Papier / Notizbuch: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für papier / notizbuch. Auch bekannt als Notizbuch-UI, liniertes Papierdesign, Skizzenbuch-Web, Sticky-Note-UI, Schreibwaren-Stil. 2010-2013 (Evernote, Paper by 53), Revival in Notiz- und Edtech-Apps ab 2020.

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
: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.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
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.

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

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.