Layered paper
Elements overlap like real cutouts, with soft shadows and rough or torn edges.
Pages that look assembled by hand. Photos, notes and ticket stubs are taped together with visible edges and slight tilts, so the layout feels personal instead of manufactured.
Open the kit Copy the promptScrapbook design turns a page into a collage. It uses the textures of paper and craft to make digital content feel collected and cared for.
Elements overlap like real cutouts, with soft shadows and rough or torn edges.
Washi tape, pins and round stickers hold things in place and add small bursts of color.
Cards and photos rotate one or two degrees in alternating directions. The mess is planned.
A marker for headlines, handwriting for notes, typewriter for labels and a calm serif for reading.
People have been gluing memories into books for centuries. The web version borrows the whole craft toolkit.
Readers paste clippings, letters and pressed flowers into blank books. The scrapbook becomes a household object.
Mark Twain patents a self-pasting scrapbook with gummed pages. It is one of his few commercial successes.
Photocopied fanzines cut and paste type and photos together, creating a raw collage language.
Scrapbooking becomes a major hobby with its own stores, papers and sticker industries.
Mood boards on Pinterest and collage layouts on brand sites bring tape, torn paper and handwriting to screens.
Scrapbook motion looks like someone placing pieces by hand. Each item drops in slightly tilted, settles, and stays put.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Photographers, bakers and makers use collage homepages to show personality and process.
Journaling apps let users pin photos and tickets into digital pages.
Fashion and music campaigns use mood-board layouts to tell a story in fragments.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Warm paper tones as the base, one strong red for action, tape yellow for highlights. Tap a swatch to copy its hex value.
:root{
--kraft: #EFE4CF;
--paper: #FFFDF6;
--tomato: #C8452F;
--tape-yellow: #F4D35E;
--sea-glass: #7FA6A0;
--ink-brown: #2B2118;
}Mix up to four faces, each with one job. Body text stays in a serif so reading never becomes the craft project.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Permanent Marker","Comic Sans MS",cursive;
--font-b: "Lora",Georgia,serif;
--font-m: "Special Elite","Courier New",monospace;
--fs-d: clamp(46px, 9vw, 96px);
--fs-1: 45.6px; --fs-2: 35.7px;
--fs-3: 27.9px; --fs-4: 21.8px;
--fs-body: 17px; --fs-sm: 13.3px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
line-height: 1.1;
}
/* fonts: Permanent Marker, Special Elite, Caveat and Lora */Start from a normal grid, then break it: tilt, overlap and offset cards. Keep reading order clear under the mess.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 30px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Tiny radius, soft paper shadows, and clip-paths for torn edges.
:root {
--radius: 2px;
--radius-sm: 2px;
--bw: 1px;
--shadow: 2px 4px 10px rgba(60,40,20,.25);
--shadow-sm: 1px 2px 5px rgba(60,40,20,.25);
--gap: 30px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Scrapbook kit · Anti-Boring */
:root{
--bg:#EFE4CF;
--surface:#FFFDF6;
--surface2:#E4D6BC;
--fg:#2B2118;
--muted:#64543F;
--accent:#C8452F;
--accent-fg:#FFFDF6;
--accent2:#F4D35E;
--accent2-fg:#2B2118;
--border:#2B2118;
--bw:1px;
--radius:2px;
--radius-sm:2px;
--shadow:2px 4px 10px rgba(60,40,20,.25);
--shadow-sm:1px 2px 5px rgba(60,40,20,.25);
--font-d:"Permanent Marker","Comic Sans MS",cursive;
--font-b:"Lora",Georgia,serif;
--font-m:"Special Elite","Courier New",monospace;
--h-weight:400;
--h-track:0;
--h-case:none;
--h-style:normal;
--h-lh:1.1;
--gap:30px;
--pad:24px;
--focus:rgba(200,69,47,.35);
--ok:#3B6B2E;
--warn:#8A5A00;
--danger:#A12A1A;
--info:#2F5C8A;
--field-bg:var(--surface);
--field-shadow:none;
--media:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 9px),linear-gradient(160deg,#7FA6A0,#3E6B67);
--code-bg:#2B2118;
--code-fg:#F6EBD3;
--btn-case:none;
--btn-track:0;
--btn-weight:400;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.3px;
--fs-body:17px;
--fs-4:21.8px;
--fs-3:27.9px;
--fs-2:35.7px;
--fs-1:45.6px;
--fs-d:clamp(46px, 9vw, 96px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{font-family:var(--font-m);border:0;border-radius:0;clip-path:polygon(0 8%,4% 0,96% 4%,100% 0,98% 92%,100% 100%,3% 96%,0 100%);box-shadow:none}
.btn:hover{transform:rotate(-1.5deg)}
.btn-ghost{text-decoration:underline wavy var(--accent);text-underline-offset:5px}
.card{transform:rotate(var(--tilt,-1deg))}
.card::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:26px;transform:translateX(-50%) rotate(-3deg);background:rgba(244,211,94,.75);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.card:nth-child(2n){--tilt:1.3deg}.card:nth-child(3n){--tilt:-.4deg}
.card-media{border:8px solid #fff;border-bottom-width:28px;box-shadow:var(--shadow-sm);border-radius:0}
.badge{font-family:"Caveat",cursive;font-size:1.1rem;border-radius:50%;padding:.4em .7em;transform:rotate(-8deg);background:var(--accent);color:#fff;border:2px dashed #fff;box-shadow:0 0 0 2px var(--accent)}
.input,.select,.textarea{background:transparent;border:0;border-bottom:1.5px solid var(--fg);border-radius:0;font-family:"Caveat",cursive;font-size:1.3rem;padding:.3em .2em}
.input:focus,.select:focus,.textarea:focus{box-shadow:none;border-bottom-color:var(--accent);background:rgba(244,211,94,.2)}
.textarea{background:repeating-linear-gradient(transparent 0 31px,rgba(43,33,24,.25) 31px 32px);line-height:32px}
.label{font-family:var(--font-m);font-weight:400;text-transform:lowercase}
.alert{border:0;border-left:0;background:#FFF7B0;box-shadow:var(--shadow-sm);transform:rotate(-.6deg);font-family:"Caveat",cursive;font-size:1.3rem}
.alert-ok{background:#D8EFC4}.alert-warn{background:#FFE0B0}.alert-danger{background:#F9C9C0}
.tab{font-family:var(--font-m);background:var(--surface2);border:1px solid var(--border);border-bottom:0;margin-right:2px;border-radius:6px 6px 0 0}
.tab[aria-selected="true"]{background:var(--surface);color:var(--fg)}
.table{font-family:var(--font-m)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#2A221B;
--surface:#3A3027;
--surface2:#332A22;
--fg:#F3E9D6;
--muted:#CDBFA6;
--border:#F3E9D6;
--code-bg:#1A140F;
}
html.alt .alert{color:#2B2118}html.alt .paper{color:#2B2118}html.alt .tab{background:#332A22}html.alt .tab[aria-selected="true"]{background:#3A3027}html.alt body{background-image:radial-gradient(rgba(255,240,220,.07) 1px,transparent 1px)}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a travel journal app for families in an authentic Scrapbook style.
Palette: Kraft #EFE4CF, Paper #FFFDF6, Tomato #C8452F, Tape yellow #F4D35E, Sea glass #7FA6A0, Ink brown #2B2118.
Typography: Permanent Marker for headlines, Caveat for handwritten notes, Special Elite for labels, Lora for body text.
Layout: A collage hero where a torn paper panel holds the headline, with a polaroid photo, a ticket stub and a handwritten note overlapping it. Content cards below sit on a grid but tilt alternately by 1 to 2 degrees.
Signature details: Washi tape strips on card tops, polaroid frames for images, torn edges via clip-path, a dotted paper background, sticker-style round badges.
Components: Buttons shaped like cut paper, text fields as ruled lines with handwriting font, sticky-note alerts, folder-tab navigation.
Motion: Pieces drop in with a slight overshoot and settle at a tilt, staggered by 0.5 seconds.
Avoid: perfect alignment everywhere, glossy gradients, neon, stock clip art, handwriting for long paragraphs.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Overlaps must never hide text. Check the page with CSS rotation turned off.
Script fonts are hard to read at length. Keep them for short notes.
Generic stickers look cheap. Use real textures or draw your own.
Many rotated elements moving at once feel wobbly. Keep animation to entrances.