Hub
Paper Cut Layered Design

Layers of cut paper stacked with shadows creating depth. Like a popup book or paper collage art — each layer casts a real shadow on the layer below. Flat matte colors, no gradients within shapes.

Stacked Paper Layers — Hover to Separate
Layer 5 · Bottom
Layer 4
Layer 3
Layer 2
Layer 1 · Top
Paper Cut Landscape — Layered Depth Scene
3 Depth Layers + Foreground Elements
Pop-Up Cards — Hover to Lift
Aa
Flat Colors Only
No gradients within shapes. Each paper layer is a single solid color, just like real craft paper.
||
Shadow = Depth
Depth comes only from box-shadows. Each layer casts a hard-edged shadow on the layer below.
</>
Rough Edges
Torn paper edges created with CSS clip-path using irregular polygon points for authentic craft feel.
Layer Anatomy — 5 Depth Levels with Shadow & Z-Index
Layer 1 — White Paper z-index: 5 · shadow: 4px
Layer 2 — Peach Paper z-index: 4 · shadow: 5px
Layer 3 — Sage Green z-index: 3 · shadow: 6px
Layer 4 — Dusty Blue z-index: 2 · shadow: 7px
Layer 5 — Poppy Red z-index: 1 · shadow: 8px
Torn Paper Edge — CSS clip-path Irregular Polygon
Torn Edge Effect
Created using CSS clip-path with dozens of irregular polygon points. The bottom edge of this white paper and the top edge of the green paper below mirror each other to create the illusion of a tear.
Matching Tear Below
The complementary edge creates a seamless torn paper illusion between two different colored paper layers.
Paper Color Palette — Flat Swatches with Curled Corner
White Paper
#ffffff
Peach Paper
#f0c4a8
Sage Green
#7eb8a0
Dusty Blue
#5b7fa4
Poppy Red
#e85d4a
Craft Paper BG
#e8e0d4
Design Principles — Manila Folder Tabs
Depth
Shadow Stacking
Each layer gets a hard-edged box-shadow (4-8px offset, no blur). Higher layers get larger shadows for realistic parallax depth.
Color
Matte & Flat
Colors are solid and flat like real craft paper. No gradients within shapes. Depth is expressed through shadow, never through color transitions.
Edge
Cut & Torn
Use CSS clip-path with irregular polygon points for torn edges. Clean cuts use simple border-radius. Mix both for variety.
Motion
Lift & Float
On hover, cards lift with translateY and cast larger shadows. This mimics picking up a piece of paper from a desk surface.
CSS Origami Bird — Built from Triangles
CSS border triangles + drop-shadow filter

AI Request Prompt

Design a landing page in Paper Cut / Layered style — mimicking paper craft with stacked layers and hard-edged shadows.

COLOR TOKENS:
--bg: #e8e0d4 (warm craft paper background)
--layer-1: #ffffff (top white paper)
--layer-2: #f0c4a8 (peach/salmon paper)
--layer-3: #7eb8a0 (sage green paper)
--layer-4: #5b7fa4 (dusty blue paper)
--layer-5: #e85d4a (poppy red paper)
--text: #2d2a26 (dark brown ink)
--shadow: rgba(0,0,0,0.15) (layer shadow)
No other colors. All shape fills are flat/solid — no gradients within shapes.

TYPOGRAPHY:
Display: "Outfit" sans-serif, 700-900 weight, tracking -0.02em
Body: "Nunito" sans-serif, 400-600 weight
Scale: clamp(2.4rem, 7vw, 5.5rem) for hero, 1.1-1.3rem for cards
Body line-height: 1.7-1.8
Display line-height: 1.05

UI:
- Cards: solid flat backgrounds (no gradients), border-radius 14-18px
- Hard-edged box-shadow: 4-8px offset, 0 blur, rgba(0,0,0,0.15)
- Torn paper edges: CSS clip-path with irregular polygon points (20+ points for realistic tear)
- Curled corner on swatches: small triangle in corner using linear-gradient(135deg)
- Paper fold creases: subtle 1px linear-gradient lines
- Manila folder tabs: absolute-positioned elements above cards with matching colors
- Origami shapes built from CSS border triangles with drop-shadow filter

LAYOUT:
- Container: min(1080px, 92vw) centered
- Card grids: repeat(auto-fit, minmax(220px, 1fr)), gap 20px
- Layer anatomy: stacked divs with incremental margin-left for cascade effect
- Mountain landscape: overlapping clip-path shapes at different z-index levels

MOTION:
- Card hover: translateY(-6px) + shadow grows from 6px to 12px offset
- Stacked layers: spread apart on parent hover with translateX/Y
- Card entrance: translateY(16px) to 0, opacity 0 to 1, 0.6s ease, stagger 0.1s
- Origami bird wings: gentle flapping with CSS keyframe animation (rotate + translateY)
- All transitions: 0.3s ease

DEPTH TECHNIQUE:
- NO blur on shadows — hard-edged only (box-shadow: Xpx Ypx 0 color)
- Higher layers = larger shadow offset (simulates physical distance from surface)
- z-index corresponds to visual stacking order
- Hover lifts elements by reducing translateY AND increasing shadow offset simultaneously

RESPONSIVE:
- Below 768px: single column cards, reduced layer offsets, landscape height 220px
- Above 768px: auto-fit grids fill 2-3 columns

FORBIDDEN:
- No gradients within shape fills (flat paper colors only)
- No blur on box-shadows (hard paper shadow only)
- No glass/blur effects
- No dark mode — this is a light, crafty aesthetic
- No rounded/soft shadows — edges must be crisp

OUTPUT:
1. Single HTML file with inline CSS
2. Paper texture using subtle SVG noise in body::after
3. CSS custom properties in :root for all paper colors
4. Mountain landscape scene using clip-path layers
5. Interactive hover states showing paper lift effect
6. Origami bird from CSS triangles