Everything above this panel is the design Design code sd1.fVS7DsIwDPyXzglqqwx0Zeh_VB2gApEoj4G_5-yk2ELQ2bEvvjsfPYxb8te4hBvMB-d0ZjTdPLvzpe_w6s_GmmvtkuHkBofRBoMZerdwWpfMtm_cCCruJtOZklHq96X2uez2NVnp11xmVTcz28kGPCRHNbq_FkZkPVHVGqgZJfuSazLRqqyNlJGegCkAIX9BKClBpUgZSdyDjF16BU5RtPrwsghbvpPD6VV8KSY037FwIoCpApAfNLHbwyIR2bgH7ejX1hh7NzV7vAER9WM (Risograph Print), drawn by the Slopless preview renderer with sample copy. Use it as a visual guide while building: design/DESIGN.md and design/tokens.json are the source of truth . Every section root carries data-pattern with its pattern id.
Viewport Without ?viewport= the render follows the window width once scripts run. Screenshot at 1440 px with ?viewport=desktop and at 375 px with ?viewport=phone.
Pages Tokens at a glance Palette complementary, light · bg #FDF9F4 · text #241E16 · accent #FF48B0 Type Bricolage Grotesque / Work Sans · scale 1.414, base 17px Grid 12 columns, gutter 20px, max 1320px · section space 112px Shape radius 0px · border rule 2px · shadow hard · motion subtle Sections on the contact page (/contact), top to bottom Each link shows that pattern alone with these tokens, beside its rule, grid areas, slots, notes and layout tree.
nav.risograph-masthead· nav, on every page A zine masthead: mono issue line on the left, the boxed wordmark in the middle, an underlined CTA flush right; slash-separated links on the next line and a 4 px ink rule under everything. contact.risograph-mail-order· contact Title at step 5, a lead line, the mono address and the email at step 2 in 1–5; a bordered order-form box in 6–12 with a mono label and the contact form. logos.risograph-stockists· logos Stockists: the label as a step-4 uppercase heading on 1–3, the names on 4–12 in three columns (six, nine or twelve) at step 2 uppercase, each under a 2 px top rule. footer.risograph-colophon-print· footer, on every page A 4 px ink rule, then boxed wordmark in 1–3, the mono print colophon in 4–8 and slash links on one line in 10–12; a marquee of the tagline closes the page. More To see the user's own copy, append the #b=… part of their picker link to this URL. It is read in the browser only and never sent to the server.