Slopless Design · reference render
Everything above this panel is the design
Design code sd1.hZTBDoIwEET_pedqhIAJRy_8hQcgNZioEGxD_Htn2q1uDIkXDnS73d15OwwUW-G0hTdjK2vatj4VrUGg6dA1FrLzF-DwbVfTUexrWxxtKQ9m9AmuDEM9E4kHr_hNOlLN6jxtGn2AJqMb-cn7mexG8n7CbpIjGXLeJW7jrZvT0rKLOG6VoA8LvsnQiJIWR78zOzeMuxXpCU6UZqMMOaeI6tShiJcfaXqxFegDJSIVKgqsPqd7cthYCHTPbQzBTwGKLW793wTSN-Q_EaPC6Ir0MM4ShOXkD_rwfAX-Z1zV3JSHqhF23g9Mxh (Maximalist Collage), 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
- triadic, light · bg #FDF9F4 · text #241E16 · accent #FF5A1F
- Type
- Abril Fatface / Syne · scale 1.5, base 16px
- Grid
- 12 columns, gutter 12px, max 1440px · section space 77px
- Shape
- radius 4px · border thick 3px · shadow hard · motion expressive
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.maximalist-sticker-nav Sticker nav · nav, on every pageOne busy row: boxed wordmark, pill links, a star sticker and a primary button, wrapping when it must.contact.maximalist-postcard Postcard · contactA postcard on the surface colour: a bordered 3:2 photo in 1–6, a vertical rule in 7, and in 8–12 a tilted square stamp, the title, mono address, email and the contact form.faq.collage-note-pile Note pile · faqA huge tilted title in 1–4; four to eight questions as surfaceAlt notes in a two-column masonry across 5–12, question as an h4 over the answer.footer.maximalist-giant-sign-off Giant sign-off · footer, on every pageA marquee band, pill links in 1–8 and the mono legal line in 9–12, then the site name at step 8 across the full grid.
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.