# Paper / notebook

Also called: notebook UI, ruled paper design, sketchbook web, sticky note UI, stationery style  
Era: 2010-2013 (Evernote, Paper by 53), revival in note-taking and edtech 2020 onward  
Page: https://designforai.dev/style/paper-notebook

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

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

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.