Layered paper textures, offset shadows, and handmade edges. A UI that feels like it was crafted with scissors, glue, and coloured card stock.
Six colours inspired by coloured card stock — warm paper-white base, bold craft red, and three bright but never-fluorescent accent papers.
Paper colour combinations
Each component looks like it was cut from coloured paper — offset shadows that cast downward, slight rotations, and lift on hover.
Primary — paper snippet with offset shadow
Outline — cutout on paper
Size variants
Each rule defines how paper behaves physically. Hover, click, and focus to feel each one in action — these are the laws of Paper Craft UI.
hover: layers fan out in different directions
When you hover a stacked card, the paper layers peel apart — each one shifts in a unique direction, enlarging the layer-gap shadow to mimic real paper separating.
Hover the stack to trigger layer separation
focus: inset-shadow deepens — feels like a cutout in cardboard
Input fields use inset shadows that deepen on focus, mimicking a slot cut through thick paper board. The pressed-in feel confirms an active selection.
duration-200/300 + ease-out — no spring, no rubber bounce
Paper is stiff, not rubbery. Transitions use ease-out with no overshoot. Compare the paper-stiff ease-out against a spring — only the correct one feels like paper.
Notice the overshoot on spring — paper does not bounce like rubber.
translate + shadow grow proportionally — paper lifting off table
As a paper element lifts, its offset shadow grows in the same direction and proportion. The shadow offset equals the translate distance — physical consistency.
A mock dashboard for a craft studio — paper-layered project cards, a to-do list with paper-toggle checkboxes, and material inventory in paper snippet style.
Friday, Feb 21
The philosophy of Paper Craft UI in two columns — what gives the style its warmth and what destroys it.
Paper stacks have real thickness
Every UI element exists at a specific height above the paper surface. Shadows indicate elevation; closer to the surface means shorter offset shadows, further means taller.
Slight imperfection = authenticity
Subtle rotations of 0.5–2 degrees make elements feel placed by hand. Perfectly aligned digital grids kill the craft aesthetic — introduce deliberate, gentle tilt.
Not white — paper warm #fdf6ee
The background is never pure white or cold gray. It is a warm cream paper tone #fdf6ee that makes the whole surface feel like you are looking at a craft table.