TechnicalCollectible prompt

DIY zine collage design system for your website

Cut-paper headlines, halftone photos, tape and highlighter, with every word still real, readable text.

Lovablev0Bolt

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

DIY 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.
Technicalnvoka.com/library/nvoka-diy-zine-collage-design-system-for-your-websiteScan to open
Technical

DIY zine collage design system for your website

Cut-paper headlines, halftone photos, tape and highlighter, with every word still real, readable text.

Nvoka logo

Curated by Nvoka

Lovablev0BoltClaude Code
Add to my library

Make it yours

Fill in the blanks and change any word. Only your copy changes, never the card.

Fill in the blanks

0 of 3 filled

Your prompt

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.
See all