Design

Scrapbook JournalJournal Cards

You might say

I want it to feel like a personal collection journal: warm paper ground, serif display titles, cards tilted slightly as if pasted in by hand.

Scrapbook Journal brings the physicality of a personal collection into the web: paper-toned ground, serif display type, slightly rotated cards and tape-like accentsIt fits a catalog site's identity naturally — the whole site is a field notebook, so the surfaces should feel collected rather than manufactured: small rotations, uneven cards, one hand-made accent. The restraint rule: exactly one decorative vocabulary per page, or it slides from journal into sticker war.
Also calledscrapbookfield notespaper texture
Design Principles
  • Paper ground (#F5EFE2 range) instead of pure white, so white cards read as pasted-on sheets
  • Serif or rounded display type for titles; body stays sans for readability
  • Cards rotated ±1-2° with a 2px hard shadow — pasted down, not floating
  • One decorative vocabulary only: tape, paperclip or stamp — never together
  • Emphasis as sticky note: a partial yellow block behind key content, not a new brand color
  • Night-paper mode swaps material, not layout: paper turns black cardstock, tapes desaturate, the highlight shifts from cream to dark gold — tape and notes stay legible
Scrapbook Journal≠Editorial

Editorial builds order from strict grids and gutters; Journal deliberately breaks a little order (rotation, stagger) for human warmth. Opposite directions, both valid.

Scrapbook Journal≠Organic Design

Organic is earthy colors and soft shapes — 'nature'; Journal is about traces of hand-arrangement — paper, tape, stamps.

AI Prompt

Restyle this content site as a Scrapbook Journal: page ground #F5EFE2 paper tone, cards #FFFDF7 with 1px warm-brown hairline borders and a 2px hard shadow, odd/even cards rotated -1.2° / 0.8°; swap the display headline to a serif face with a hand-drawn underline block; favorite stars in amber; leave body text, buttons and all interactive demo layouts untouched — change surface materials only.Also provide the night-paper palette (ground #211D16, cards #2A251C, ink #ECE5D3, desaturated tapes); tilt angles and layout stay identical.

Typical use cases
Saved wall · tape and cards

Scroll sideways to explore the full example

My saves · page 122026.09
Figma logo
Lucide 图标
Icon library
★09.18
Linear logo
Linear 的克制
Issue tracker
★09.18
Buffer logo
Buffer 工作流
Social scheduler
★09.18
Fictional mockup · icons are real product logos
Reading view · highlighter and note

Scroll sideways to explore the full example

DESIGN STYLE
Scrapbook Journal
The UI reads like a journal page: cards tilted, taped down, key lines marked with a highlighter.
A good tool lets you slow is okay — and that is fine.
Buffer logoBufferFigma logoFigma
TODO: 8px radius on cards
Favorites · star sticker layer

Scroll sideways to explore the full example

Favorites · star layer4 starred · 2 archived
★
Cursor logoCursor
most used
★
Raycast logoRaycast
to explore
★
Appllama logoAppllama
PRO ref
★
Linear logoLinear
design ref
★
Buffer logoBuffer
archived
★
Serenona logoSerenona
wish-list
Day & night paper, same desk

Scroll sideways to explore the full example

Buffer logo
Buffer
Scheduler
Figma logo
Figma
Icon lib
Day paper · cream highlight
Buffer logo
Buffer
Scheduler
Figma logo
Figma
Icon lib
Night paper · dark-gold highlight
Material swaps, layout stays: paper #F4EEE1→black cardstock #211D16, tapes desaturate, highlight #FBE8B0→#6B5518 behind #FFE27A text
Further reading