Slopless Design · reference render
Everything above this panel is the design
Design code sd1.fVS7DsIwDPyXzAlqqwx0Zeh_IAaoQCTKY-DvOTsBW5Xa2bEvPt8dPUxrDvd0jQ-ID8oxdrJmWfz5Mhi82tlYc61VMp786DHaYjBDy3SyASN0L3aS5AEMVMivpJi2h9T-Fu9_lN0OAZhnPYX5zy5iH9JYP8CGAoTYG1V9FTWjllBLyypanq8lZeQpYCpASHE4nZRwt0SpSdcAPT8xKHAKp1uIH4f4ZeccTm9ykGJG8xMLZwKYGwApRDO8vhwysnGz345-LZZp8HMXzBc3_ZN (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 home page (/), 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 Masthead · nav, on every pageA 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.hero.risograph-overprint-poster Overprint poster · heroA spot-colour circle fills 7–12, a landscape duotone photo in 2–8 overprints it, and the uppercase headline (step 6) overprints the circle below the photo across 1–12, tilted −2°. Subhead and CTA bottom-right in 9–12.list.risograph-contents-page Contents page · listAn 'In this issue' page: mono label, uppercase title in 1–8, then a ruled list with the big number in 1–2, title in 3–8, a line in 9–11 and the mono page number in 12.gallery.risograph-print-run Print run · galleryThree duotone prints on an uneven grid — a 3:4 in 1–5 over two rows, a 16:9 in 6–12, a 1:1 in 6–9 — with a spot-colour circle filling 10–12 beside the square.testimonial.risograph-cutout-quote Cut-out quote · testimonialThe quote sits on a solid spot-colour slab in 2–9; the attribution drops below it, offset to 9–12, under a printed rule.stats.risograph-ink-counts Ink counts · statsUppercase title across the grid, then three or four counts in a four-column row, each opened by a left rule: number at step 5 (every figure the same size) in the link colour, mono caption.cta.risograph-tear-off Tear-off flyer · ctaA flyer on surfaceAlt: uppercase headline in 1–9, line and button in 10–12, a dashed cut line, then a row of tear-off tabs with the contact detail repeated.footer.risograph-colophon-print Print colophon · footer, on every pageA 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.