Stacked layers
Shapes sit on top of each other, from light in the back to dark at the front.
Scenes built from layers of cut paper. Each layer casts a soft shadow on the one behind it, so flat shapes gain depth, like a pop-up book or a shadow box.
Open the kit Copy the promptPaper cut design stacks flat shapes into layers. Soft shadows between them make a simple colour palette feel handmade and three-dimensional.
Shapes sit on top of each other, from light in the back to dark at the front.
Each layer casts a short, soft shadow on the one below.
Curves look cut with scissors or a craft knife, never perfectly geometric.
Several shades of one or two colours create depth, with one warm accent.
Paper cutting is an ancient craft that designers rediscovered once screens could render soft shadows cheaply.
Paper cutting grows into a folk art in China and later spreads to many cultures.
Lotte Reiniger releases The Adventures of Prince Achmed, animated entirely with cut-out silhouettes.
Henri Matisse turns to painted paper cut-outs late in his career.
Illustrators use real and digital paper layers for editorial art and advertising.
drop-shadow filters and stacked SVG paths make paper-cut scenes easy to build on the web.
Paper cut motion works like a pop-up book. Layers rise from the bottom one after another and settle into place.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Charities and nature brands use layered scenes to tell a journey.
Book and education sites use paper textures for warmth.
Tourism sites layer mountains, hills and sea for depth.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Four shades of teal from pale to deep, one warm sun, all on warm paper. Tap a swatch to copy its hex value.
:root{
--paper: #F2E9D8;
--mint: #9ADBC5;
--teal: #3AA7A3;
--deep-teal: #1F6F78;
--night-teal: #0E3B43;
--sun: #F2A541;
}A soft, friendly serif for headlines and a round geometric sans for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Young Serif",Georgia,serif;
--font-b: "Outfit",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,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: -.01em;
text-transform: none;
line-height: 1.05;
}
/* fonts: Young Serif and Outfit */Simple layouts with rounded panels. Depth comes from layers, so keep the grid calm.
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: 24px;
}
.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; }
}No borders. Every surface has a paper layer behind it, offset and softly shadowed.
:root {
--radius: 18px;
--radius-sm: 12px;
--bw: 0px;
--shadow: 0 2px 0 rgba(14,59,67,.08), 0 6px 0 -2px #EADFCB, 0 8px 18px rgba(14,59,67,.22);
--shadow-sm: 0 3px 8px rgba(14,59,67,.22);
--gap: 24px;
--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.
/* Paper Cut kit · Anti-Boring */
:root{
--bg:#F2E9D8;
--surface:#FBF6EC;
--surface2:#EADFCB;
--fg:#0E3B43;
--muted:#3F6168;
--accent:#1F6F78;
--accent-fg:#FBF6EC;
--accent2:#F2A541;
--accent2-fg:#0E3B43;
--border:transparent;
--bw:0px;
--radius:18px;
--radius-sm:12px;
--shadow:0 2px 0 rgba(14,59,67,.08), 0 6px 0 -2px #EADFCB, 0 8px 18px rgba(14,59,67,.22);
--shadow-sm:0 3px 8px rgba(14,59,67,.22);
--font-d:"Young Serif",Georgia,serif;
--font-b:"Outfit",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:-.01em;
--h-case:none;
--h-style:normal;
--h-lh:1.05;
--gap:24px;
--pad:24px;
--focus:rgba(242,165,65,.5);
--ok:#2E7D5B;
--warn:#9A5A00;
--danger:#B23A2E;
--info:#1F6F78;
--field-bg:#FFFDF8;
--field-shadow:none;
--media:radial-gradient(circle at 72% 30%,#F2A541 0 12%,transparent 12.5%),linear-gradient(170deg,transparent 55%,#3AA7A3 55.5%),linear-gradient(175deg,transparent 70%,#1F6F78 70.5%),#9ADBC5;
--code-bg:#0E3B43;
--code-fg:#F2E9D8;
--btn-case:none;
--btn-track:0;
--btn-weight:600;
--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{border-radius:999px;box-shadow:0 4px 0 rgba(14,59,67,.35),0 6px 12px rgba(14,59,67,.2)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(14,59,67,.35)}
.card{overflow:visible}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;transform:translate(8px,8px);background:var(--surface2);z-index:-1;box-shadow:0 6px 14px rgba(14,59,67,.18)}
.card-media{box-shadow:inset 0 -18px 0 rgba(14,59,67,.18)}
.badge{border:0;background:#F2A541;color:#0E3B43;box-shadow:0 2px 4px rgba(14,59,67,.25)}
.input,.select,.textarea{box-shadow:0 2px 6px rgba(14,59,67,.15) inset;border:0}
.alert{border:0;border-left:0;box-shadow:var(--shadow-sm);background:var(--surface)}
.alert b{display:inline-block;padding:.1em .6em;border-radius:999px;background:color-mix(in srgb,var(--c) 18%,var(--surface))}
.switch{border:0;box-shadow:inset 0 2px 5px rgba(14,59,67,.25)}
.switch::before{background:#FBF6EC;box-shadow:0 2px 4px rgba(14,59,67,.35)}
.progress{border:0;box-shadow:inset 0 2px 4px rgba(14,59,67,.2)}
.tabs{border:0}
.tab{border-radius:12px 12px 0 0;border:0}
.tab[aria-selected="true"]{background:var(--surface);box-shadow:0 -3px 8px rgba(14,59,67,.12)}
.pager a{border:0;box-shadow:var(--shadow-sm);border-radius:50%}
.table-wrap{border:0;box-shadow:var(--shadow)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#0B2A30;
--surface:#12363D;
--surface2:#0E3037;
--fg:#F2E9D8;
--muted:#B9CFCB;
--accent:#F2A541;
--accent-fg:#0B2A30;
--accent2:#3AA7A3;
--accent2-fg:#0B2A30;
--field-bg:#0E3037;
--shadow:0 2px 0 rgba(0,0,0,.2), 0 6px 0 -2px #0E3037, 0 8px 18px rgba(0,0,0,.45);
--shadow-sm:0 3px 8px rgba(0,0,0,.45);
--code-bg:#061a1e;
}
html.alt .paper,html.alt .stage{background:linear-gradient(#123840,#0B2A30)}html.alt .btn{box-shadow:0 4px 0 rgba(0,0,0,.45)}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 nature travel company in an authentic Paper Cut style.
Palette: Paper #F2E9D8, Mint #9ADBC5, Teal #3AA7A3, Deep teal #1F6F78, Night teal #0E3B43, Sun #F2A541.
Typography: Young Serif for headlines, Outfit for body.
Layout: Two-column hero: headline and intro left, a rounded paper-cut landscape on the right made of four stacked SVG hill layers from pale mint to deep teal with a warm sun.
Signature details: drop-shadow on every layer, tonal teal palette on warm paper, no borders, cards with an offset paper layer behind them.
Components: Pill buttons that press down, cards with a second paper sheet behind, inset text fields, soft alerts with pill labels.
Motion: Layers rising one by one like a pop-up book, 0.25 second stagger.
Avoid: hard black outlines, gradients inside shapes, neon colours, too many shadow layers.
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.
Too many dark shadows make a scene muddy. Keep them short and light.
Beyond five or six layers the scene looks cluttered. Simplify.
Text on mid-tone paper can fail contrast. Put it on the lightest layer.
Many drop-shadow filters slow down phones. Keep large animated scenes small.