TechnicalDIY zine collage design system for your website
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete DIY zine collage design system. Keep every page, route, component and line of content; change only the visual layer, through shared tokens in the current styling system. Read the existing styles first and tell me what you'll replace. Our brand colors are {{brand_colors}}: map them onto the roles below where they fit, and if they fight the style, keep one as the accent and use the pack's neutrals.
Type: Archivo Black for headlines; Courier Prime 400 and 700 for text at 17px, line height 1.6; Caveat 600 for a few handwritten margin notes only. Scale 1.333: 17, 23, 30, 40, 54, 72px.
Palette: paper #F2EEE3, surface #FFFFFF, photocopy black #141414, muted #4A4741, highlighter yellow #FFF04D and riso pink #FF48B0 as fills only, link blue #005A92.
Shape: radius 0; torn-paper edges on images with SVG masks; tape strips at corners; 2px rough black outlines; flat 3px black offset shadows on pasted elements only.
Grid: a 12-column grid at 1280px, 8 at 768px, 4 at 360px with 16px gutters, which pasted elements break on purpose; cards tilt between -2 and 2 degrees, body text never does; section padding 56px mobile, 112px desktop.
Imagery: high-contrast black-and-white photos with halftone dots, cut-outs, stamps, hand-drawn arrows and circles; photocopy grain at low opacity.
Motion: almost none. Stickers slap in once at 150ms with a small overshoot, or sit still with reduced motion.
Signature details: a cut-out headline in the hero; highlighter swipes behind key words; margin notes pointing at real things; a footer with an issue number and date.
Do: keep all text real and selectable; hide decorative layers from screen readers; keep reading order straight even when the layout looks loose.
Avoid: ransom-note letters for anything people must read, text as images, texture over body copy, chaos in forms and checkout.
Check: text contrast of at least 4.5:1, visible focus, 44px touch targets, no horizontal scroll at 360px, reduced motion respected. Finish with a short change list and the reason for each decision.