Slopless Design · reference render
Everything above this panel is the design
Design code sd1.jVVBDoIwEPyLZzFANJGz8RkeSi2lCdIECMbfO7Og1o0HbySd7rKzM1MCUYhM2inMwjwunY5FXp7lE3TFnoOboYt3sH8LkCWGRFhwTqWxYndA4W25Nv4Y6gpvR2GJzHz3zMbO1LQrtbJMoAC0Cz2dDvWrtvCq7kIKoQHBlMCLcQ0hl142KeSr4ybMLns4xAkETTLeG1VA2zoL5dQRsQBYulbd0XnDyGJPLlgdG49wo-u5uWVHIhwN632Stn__vghIgWge5uOarCMbV0tjqkyh6W0z2ZZcQJnqVPJniF4ep80FlVLplfm-WuX3BA78nn (Constructivist), 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
- monochrome, light · bg #EFE6D2 · text #16130F · accent #C8102E
- Type
- Anton / Barlow Semi Condensed · scale 1.5, base 17px
- Grid
- 12 columns, gutter 16px, max 1360px · section space 77px
- Shape
- radius 0px · border thick 4px · shadow none · 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.constructivist-slab-bar Slab bar · nav, on every pageA full-bleed black slab: boxed wordmark in 1–3 and slash-separated capital links across 5–12, in the paper colour.contact.constructivist-dispatch Dispatch · contactTwo touching blocks: a red block on 1–5 with the title and details in onAccent, and a thick-ruled block on 6–12 holding the form.faq.constructivist-interrogation Interrogation · faqTitle in capitals at step 5 on 1–8 over an 8px bar; questions as ruled rows: red number in 1, question in capitals 2–6, answer 7–12.footer.constructivist-red-base Red base · footer, on every pageA full-bleed red base opened by an 8 px rail (it reads as a cut from a red CTA above): the site name in capitals at step 7 across all 12 columns, tilted −4°, then slash links on 1–8 and legal on 9–12 in onAccent.
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.