Slopless Design · reference render
Everything above this panel is the design
Design code sd1.jZXNDoJADITfZc9oxKCRq4mP4YEQRBSJ_8_vN7tbRBN_TiS02zbTmakSo--5JEtcuprNlwtH1O0QjDgSPkMmpOMszXie8NiXjxUgL_6EAi5bDEVbEAgW9D-lSREijPn-TjQfjv2xruFoCWy72YChttyj_dp4X4mJhrjF6oprga7KERw9BIZ6-C0BWJF2NCqiw01ZTrAt71eajXVZRKelq71PtK2WAGLfZv_Vm71bsGzOJYXNCf-Zjf556C_eWIZ3WN9K4EGzHrfTrUAM3t_dmsdIsqu4TM1d7MeSj8VVN4jCT2JNJ1keyfUAOg-c (Bauhaus), 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 #0050CC
- Type
- Jost / Jost · scale 1.414, base 17px
- Grid
- 12 columns, gutter 24px, max 1360px · section space 112px
- Shape
- radius 0px · border thick 4px · shadow none · 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.bauhaus-shape-bar Shape bar · nav, on every pageThree small primary shapes (circle, square, triangle) precede the lowercase wordmark in 1–4; links start at column 7; a 4 px bar closes the nav.contact.bauhaus-form-block Form block · contactA solid accent block on 1–6 carries title, address, email and phone in onAccent; the form fills 7–12 on the page background.faq.bauhaus-square-index Square index · faqTitle (lowercase, step 5) and one accent2 square on 1–4; questions (step 2) on 5–12, each marked by a small accent circle in its own column.footer.bauhaus-primary-band Primary band · footer, on every pageThree equal colour blocks with no gap: wordmark on accent (1–4), links on yellow (5–8), address and legal on accent2 (9–12).
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.