Photos, quotes, badges, and giant numerals break the grid and overlap each other — composed like a designer's pinboard. Editorial energy.
A composition where the strict grid is broken on purpose: images are tilted, quote cards overlap photos, a giant badge sits above everything, a faint italic number anchors the corner. Each element has its own depth (z-index) and rotation. The result feels arranged by hand, like a designer's pinboard — used on portfolios, editorial pages, and boutique-brand sites that want to feel less corporate.
Start with a base layout (centered text, normal grid). Then add a handful of absolutely-positioned floating elements: each with its own top/left/right/bottom, slight transform: rotate(), distinct z-index so they overlap each other intentionally, and a soft box-shadow to make them feel "above" the page. Keep the count small — 3–5 floating elements is plenty. Too many makes it chaotic. On mobile, collapse them to a normal vertical stack.
Batch 12 shipping now. 240 numbered jackets, hand-cut waxed cotton, finished in Brooklyn over six weeks.
Browse the batch →The jacket is softer at month twelve than it was at month one. Real things age forward.
— Hannah K.Build a brand hero where elements are arranged like a designer's pinboard, breaking the grid on purpose. Base layout: a left-aligned text block with eyebrow, big italic-mix display headline, paragraph, dark pill CTA. Then, overlay 4-5 absolutely-positioned floating elements: (1) a portrait gradient "photo" card rotated +3deg in the top-right; (2) a smaller landscape gradient card rotated -5deg overlapping the bottom of the first; (3) a small white quote card rotated -2deg with a big red ❝ pulled out and an italic body + small uppercase cite; (4) a yellow circular badge rotated -12deg with hard offset shadow, sitting on top of the photo cards; (5) a faint italic-serif "04" or large number behind everything at opacity 0.12 as background ornament. Each element has its own z-index so the overlap order is intentional. Soft box-shadows make them feel like physical paper on a wall. On screens under 800px, collapse all absolutely-positioned elements back to position:relative with normal margin and no rotation.