Design for AI

Paper / notebook: UI design prompt

Palette, type rules and a pasteable prompt for paper / notebook. Also called notebook UI, ruled paper design, sketchbook web, sticky note UI, stationery style. 2010-2013 (Evernote, Paper by 53), revival in note-taking and edtech 2020 onward.

Traits

  • ruled or dotted paper backgrounds (repeating-linear-gradient lines at 28-32px)
  • red margin line on the left, punch holes, torn or curled edges
  • sticky notes in yellow, pink and blue with a slight rotation and a soft shadow
  • handwriting or marker fonts for headings, a clean sans or mono for body
  • paper clips, tape strips, highlighter marks as decoration
  • warm off-white paper, pencil grey text, one ink blue
  • flat depth: paper on paper, small shadows, no gloss

Palette

#fdfbf3 paper, #cfe3f5 ruled line, #e88a8a margin line, #3a3a3a pencil text, #1f4bd8 ink blue, #fff59d sticky yellow

Type

Caveat, Patrick Hand, Kalam or Gloria Hallelujah for headings and notes (24-40px); Nunito, Karla or Courier Prime for body at 16-17px

Do

  • draw the ruled lines with CSS so the line-height of body text matches the ruling exactly
  • rotate stickies by -3deg to 3deg and give each a 2px darker top strip for the glue edge
  • use a highlighter effect (linear-gradient underline in #fff59d at 40% height) instead of bold for emphasis

Don't

  • do not set long body copy in a handwriting font; use it for headings and annotations only
  • do not add realistic 3D curls or heavy shadows; keep it flat and paper-thin
  • do not use bright white; paper is warm

Known for it: Evernote (early), 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

Build the site as a paper notebook. Page background #fdfbf3 with ruled lines: repeating-linear-gradient(transparent 0 31px, #cfe3f5 31px 32px) and a vertical 2px #e88a8a margin line at 64px from the left; body text uses line-height 32px so lines sit on the ruling. Text #3a3a3a, links and ink accents #1f4bd8. Fonts: Caveat 700 for headings at 40/30px and for margin notes, Nunito 400 at 17px for body. Cards are sticky notes: #fff59d (also #f8bbd0 and #bbdefb variants), 200px square, border-radius 2px, rotated -2deg or 3deg, a 12px darker strip along the top, box-shadow 0 2px 6px rgba(58,58,58,0.18). Add small SVG paper clips and a piece of tape (semi-transparent #e0e0e0 rectangle at 45%) on the hero image. Emphasis uses a highlighter: background linear-gradient(transparent 60%, #fff59d 60%). Buttons look like ink-stamped rectangles: 2px #1f4bd8 border, transparent fill, Caveat 22px text. Motion: stickies lift 2px on hover, 150ms; nothing else.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site as a paper notebook. Page background #fdfbf3 with ruled lines: repeating-linear-gradient(transparent 0 31px, #cfe3f5 31px 32px) and a vertical 2px #e88a8a margin line at 64px from the left; body text uses line-height 32px so lines sit on the ruling. Text #3a3a3a, links and ink accents #1f4bd8. Fonts: Caveat 700 for headings at 40/30px and for margin notes, Nunito 400 at 17px for body. Cards are sticky notes: #fff59d (also #f8bbd0 and #bbdefb variants), 200px square, border-radius 2px, rotated -2deg or 3deg, a 12px darker strip along the top, box-shadow 0 2px 6px rgba(58,58,58,0.18). Add small SVG paper clips and a piece of tape (semi-transparent #e0e0e0 rectangle at 45%) on the hero image. Emphasis uses a highlighter: background linear-gradient(transparent 60%, #fff59d 60%). Buttons look like ink-stamped rectangles: 2px #1f4bd8 border, transparent fill, Caveat 22px text. Motion: stickies lift 2px on hover, 150ms; nothing else.

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

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.