Papercraft (Cut Paper) 纸艺拼贴（Papercraft 剪纸风）
Papercraft turns the interface into a layered cut-paper collage: every element is a flat construction-paper shape with crisp scissor-cut edges, stacked so the only depth is the soft shadow each sheet casts onto the layer beneath. Scalloped pinking-shear borders, torn strips, and paper grain sell the cardstock; a matte craft-store palette of coral, teal, and mustard on cream keeps it cheerful. It moved from children's-book illustration into indie games, apps, and sites that want to feel handmade.
纸艺拼贴把界面渲染成一幅多层剪纸拼贴画：每个元素都是一张扁平的彩色卡纸，边缘是利落的剪刀切口，层层叠放，唯一的纵深是每张纸投向下一层的柔和影子。花边剪裁出的锯齿边、手撕纸条和纸张纹理把「卡纸感」坐实，哑光的工艺店配色 —— 珊瑚红、青绿、芥末黄铺在奶油色底上 —— 保持明快。它从儿童绘本插画走进独立游戏、App 和想「像手做的」网站。
Scope: This entry covers the digital imitation of cut-paper collage — flat matte sheets, cut edges, cast shadows between layers. Folded paper (origami creases, pleated ribbons) is a different craft; Zine Collage covers the punk, photocopied, ransom-note branch of paper aesthetics; Material Design borrowed paper's layering physics but renders it as abstract digital surfaces, not visible cardstock.
范围：本条覆盖对剪纸拼贴的数字模仿 —— 扁平哑光纸张、剪切边缘、层与层之间的投影。折纸（origami 折痕、褶皱飘带）是另一门手艺；杂志拼贴（Zine Collage）覆盖纸张美学里朋克、复印、剪报字条的那一支；Material Design 借走了纸的分层物理，但把它渲染成抽象的数字表面，而不是可见的卡纸。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Flat sheets, stacked扁平纸张，层层叠放 layout defining定义特征
Every element is a zero-thickness sheet — one solid fill, no gradient, no inner shading — layered over other sheets like cutouts glued into a collage.
每个元素都是一张零厚度的纸 —— 单一纯色填充，没有渐变、没有内阴影 —— 像剪下来的纸片一样一层层粘进拼贴里。
-
Cast shadows between layers层间投射阴影 depth defining定义特征
Depth comes only from a realistic soft drop shadow each sheet throws onto the sheet directly beneath — offset 2–6px, blur 3–8px, alpha around .2–.3. Never inner shadows or bevels.
纵深只来自每张纸投向正下方那一层的柔和投影 —— 偏移 2–6px、模糊 3–8px、不透明度约 .2–.3。绝不用内阴影或斜面。
-
Crisp scissor-cut edges利落的剪刀切口 geometry defining定义特征
Contours are sharp and deliberate: straight guillotine cuts, perfect punched circles, or decorative scallops; corner radii stay near zero (0–4px) — nothing looks molded or inflated.
轮廓锋利而笃定：笔直的裁切、完美的圆形打孔，或刻意的装饰花边；圆角接近零（0–4px）—— 绝不显得被捏塑或充气。
-
Construction-paper palette彩色卡纸配色 color supporting辅助特征
Matte, saturated craft-store hues — coral #ff6b6b, teal #2ec4b6, mustard #ffb703, leaf green — laid on a cream #fff8e7 ground; fills stay flat, never gradient.
哑光的工艺店饱和色 —— 珊瑚红 #ff6b6b、青绿 #2ec4b6、芥末黄 #ffb703、叶绿 —— 铺在奶油色 #fff8e7 底上；填充保持扁平，不用渐变。
-
Scalloped and torn edge details花边与毛边细节 geometry supporting辅助特征
Decorative scissor work shows up at boundaries: scalloped pinking-shear borders, deckled or torn strips, zigzag fringe along hills, banners, and dividers.
边界处出现装饰性剪工：花边剪（pinking shear）锯齿边、手撕毛边纸条、之字形流苏，用在山坡、横幅和分隔线上。
-
Visible paper grain可见的纸张纹理 surface supporting辅助特征
A fine matte tooth — subtle speckle noise at roughly 8–15% opacity, multiply-blended — sits on every sheet, so surfaces read as cardstock rather than pixels.
每层纸上都覆着细腻的哑光纸纹 —— 约 8–15% 不透明度的细微噪点、multiply 混合 —— 让表面读起来是卡纸而不是像素。
-
Layered paper scenes分层纸雕场景 imagery supporting辅助特征
Heroes and album art are built as stacked paper dioramas: sun, clouds, and hills cut from tonal sheets and overlapped front to back, each layer shadowing the one behind.
主视觉和封面被搭成分层纸雕：太阳、云朵和山坡从同色系纸板上剪下，前后交叠，每层都给身后那层投下影子。
-
Inflated or glossy volume充气或高光体积感 depth avoid避免
Inner shadows, top-light gradients, puffy oversized radii, or glassy highlights model 3D volume — claymorphism and gloss territory — and instantly break the flat-sheet illusion.
内阴影、顶部受光渐变、蓬松大圆角或玻璃高光都在塑造 3D 体积 —— 那是黏土拟态和高光风格的地盘 —— 会立刻打破扁平纸片的幻觉。
Often confused with: Claymorphism最容易混淆：黏土拟态
Papercraft (Cut Paper)纸艺拼贴（Papercraft 剪纸风）
Claymorphism黏土拟态
This is Papercraft because every element is a FLAT sheet — one solid matte fill with a crisp cut edge — and the only depth in the scene is the soft shadow cast onto the layer beneath; nothing is inflated, glossy, or volumetric.
这是纸艺拼贴，因为每个元素都是一张扁平的纸 —— 单一哑光填充、利落的剪切边缘 —— 画面里唯一的纵深是投向下层纸面的柔和投影；没有任何东西是充气、发亮或有体积的。
It would become claymorphism if the flat sheets swelled into puffy 3D blobs — oversized rounded corners modeled with light and dark inner shadows plus a floating drop shadow — trading scissor-cut flatness for molded soft-toy volume.
如果扁平的纸片鼓起来变成蓬松的 3D 团块 —— 超大圆角配上明暗两条内阴影塑造体积，再加一条把物体浮起来的软投影 —— 用塑形的软陶体积感换掉剪刀裁出的扁平感，就变成黏土拟态了。
In code — optional starting points代码写法 —— 可选起点
The sheet recipe: one flat fill + one cast shadow, pressed flat on :active
.sheet {
background: #2ec4b6; /* one flat matte fill */
border-radius: 3px; /* crisp cut corner, not molded */
box-shadow: 0 3px 6px rgba(60,45,20,.28); /* the ONLY depth: cast shadow */
}
.sheet:active {
transform: translateY(2px); /* pressed flat onto the glue */
box-shadow: 0 1px 2px rgba(60,45,20,.28);
}Paper grain: inline SVG turbulence as a multiply overlay
.paper { position: relative; }
.paper::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
opacity: .12; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}Same construction as utilities
rounded-[3px] bg-[#ff6b6b] shadow-[0_3px_6px_rgba(60,45,20,.28)]
active:translate-y-[2px] active:shadow-[0_1px_2px_rgba(60,45,20,.28)]Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Build the surface as layered cut-paper collage (Papercraft). Canvas: a cream #fff8e7 sheet with a paper-grain noise overlay (8–15% opacity, multiply). Every element is a flat construction-paper cutout: one solid matte fill — coral #ff6b6b, teal #2ec4b6, mustard #ffb703, with tints/shades for depth — crisp scissor-cut edges (border-radius 0–4px; buttons are punched circles), and NO gradients, inner shadows, bevels, or gloss. Depth comes only from cast shadows: 0 3px 6px rgba(60,45,20,.25) per sheet, up to 6–10px offsets for higher layers. Edges get decorative scissor work: scallops (pinking-shear), torn strips, zigzag fringe. Imagery: layered paper dioramas — sun, clouds, hills in overlapped tonal sheets. Buttons are circular cutouts glued on: hover lifts one (shadow grows); active presses it flat onto its shadow (translateY(2px), shadow 0 1px 2px). Sheets may sit 1–2° askew, as if glued by hand. Type: rounded sans in dark warm ink #3b3226. Never inflate into 3D (claymorphism) or add hard black shadows and thick outlines (neobrutalism); keep everything flat, matte, and tactile.
把界面做成分层剪纸拼贴（Papercraft）。画布：一张奶油色 #fff8e7 的纸，覆一层纸纹噪点（8–15% 不透明度，multiply）。每个元素都是扁平的卡纸剪件：单一哑光纯色 —— 珊瑚红 #ff6b6b、青绿 #2ec4b6、芥末黄 #ffb703，纵深层用同色系深浅变化 —— 边缘是利落的剪刀切口（border-radius 0–4px；按钮是正圆打孔），不要渐变、内阴影、斜面或高光。纵深只来自投影：每层 0 3px 6px rgba(60,45,20,.25)，越高层的偏移越大（最大 6–10px）。边缘用装饰剪工：花边剪锯齿（pinking shear）、手撕纸条、之字形流苏。主视觉：分层纸雕 —— 太阳、云朵、山坡用同色系纸片交叠。按钮是粘上去的圆形剪纸：hover 掀起一片（阴影变大）；active 按平在影子上（translateY(2px)，阴影 0 1px 2px）。纸可以歪 1–2°，像手粘的。字体：圆润无衬线，深暖墨色 #3b3226。绝不要吹成 3D（黏土拟态），也不要加黑色硬阴影和粗描边（新粗野主义）；一切保持扁平、哑光、可触摸。
Accessibility & misuse可访问性与误用
Construction-paper brights are treacherous for text: white on mustard #ffb703 or teal #2ec4b6 fails 4.5:1 badly. Put dark warm ink (#3b3226 or darker) on the bright sheets, or reserve saturated paper for shapes and keep text on the cream ground; measure every paper-on-paper text combination.
彩色卡纸的亮色对文字很危险：芥末黄 #ffb703 或青绿 #2ec4b6 上放白字远远达不到 4.5:1。亮色纸张上统一用深暖墨色（#3b3226 或更深）的字，或者把饱和色纸留给图形、文字留在奶油色底上；每一组「纸叠纸」的文字组合都要实测对比度。
Grain overlays and busy scalloped borders hurt legibility when they sit under text: keep the grain subtle, keep body text on clean untextured sheets, and treat scallops and torn strips as decoration (aria-hidden) away from reading lanes. Many overlapping layers can also scramble perceived order — keep DOM order logical and give keyboard focus a visible offset outline that reads as a UI state, not another paper edge.
纸纹叠加层和忙碌的花边压在文字下面会损害可读性：纸纹保持清淡，正文放在干净无纹理的纸上，锯齿边和撕纸条只作装饰（aria-hidden）并远离阅读动线。大量交叠的图层也可能打乱感知顺序 —— DOM 顺序保持逻辑化，键盘焦点用明显区别于纸张边缘的偏移 outline 来表示。
Drifting clouds, spinning suns, and sheets that lift on hover are charming but vestibularly risky: gate all continuous motion behind prefers-reduced-motion, and never let pressed or hover states be conveyed by shadow movement alone — pair them with a color or label change.
漂移的云、旋转的太阳、hover 时掀起的纸片很迷人，但对前庭敏感用户有风险：所有持续运动都要用 prefers-reduced-motion 兜底，按下或 hover 状态不能只靠影子移动来传达 —— 要同时配上颜色或标签变化。
Origin起源
Cut-paper collage has a long pre-digital lineage — Henri Matisse's late cut-outs (the book Jazz, 1947) are the canonical example — and children's-book illustration kept the look alive for decades. On screens it surfaced through children's software, scrapbooking apps, and indie games (Nintendo's Paper Mario, 2000, built an entire world from flat paper layers), then crossed into web and app UI in the 2010s as part of the handmade, craft-room reaction to corporate flatness; Google's Material Design (2014) famously took 'paper and ink' as its metaphor, though it rendered the sheets as abstract digital surfaces rather than literal cardstock.
剪纸拼贴在数字时代之前渊源悠长 —— Henri Matisse 晚年的剪纸作品（画册《Jazz》，1947）是公认的经典 —— 儿童绘本插画在此后几十年里一直保持着这个面貌。在屏幕上，它先出现在儿童软件、剪贴簿应用和独立游戏里（任天堂的《纸片马力欧》，2000，用扁平纸张图层搭出一整个世界），随后在 2010 年代作为对企业化扁平设计的手工反击进入 Web 和 App UI；Google 的 Material Design（2014）著名地以「纸与墨」为隐喻，只不过它把纸渲染成了抽象的数字表面，而不是实实在在的卡纸。