Slopless Design · reference render
Everything above this panel is the design
Design code sd1.jZTBCsJADET_pWcr29Ieepf-h8hCCypKUX_fl2wKWW1pbwsbMpPMZKTQhVhpUVPwXfR9cwpBn5kmP9pUx7o9VK2UKZaaD2LjO3LtKeNsHx5pwCJiYLFHIu1_J0hcOQaa-TlWes9r9R0snSRvBGKWIAN5xEs5DTHqSKaFL_hwhBwMGaPWVV38__M1AmEpRoWX8X8aTTdhi54ZU65YN4FIyLE9zB4iOMQX3M83AUE8QLoEIuZZ0F4jV1aG45YEszb08X6qQ9OZp74wWwM (Neo-grotesk Minimal), 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 #FAFAFA · text #1F1F1F · accent #F95620
- Type
- Geist / Geist · scale 1.25, base 15px
- Grid
- 12 columns, gutter 20px, max 1360px · section space 140px
- Shape
- radius 2px · border hairline 1px · 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.neo-grotesk-hairline Hairline · nav, on every pageSmall wordmark on 1–2, a muted one-line descriptor on 4–6, small links on 9–12; one hairline beneath. Everything at body size or smaller.contact.neo-grotesk-minimal-form Minimal form · contactColumns 1–6: a tiny label, the email address at step 5 weight 500 (it is the main CTA), then phone and address muted. Columns 8–12: name, email and message fields with a 1 px bottom border only and a small solid button in the text colour.faq.neo-grotesk-hairline-list Hairline list · faqLabel and a title at step 4 on 1–4; on 5–12 four to ten rows separated by hairlines, each the question (weight 500) on 1–3 of an 8-column row and the answer (muted, max 52 ch) on 4–8. All answers open.footer.neo-grotesk-small-print Small print · footer, on every pageA hairline, then one line of small print: wordmark 1–2, links 5–8, legal 10–12 — all at step −1.
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.