Slopless Design · reference render
Everything above this panel is the design
Design code sd1.fVRBDoIwEPwLZzACksBR_-GhEIxETEkxafy9M2231sT02tnubmZmh4Uhf6oZeXUvSrxc-u7ctgVqUukeyqwqlbo-NF1Z9_zhpkgjMl5Z5IK2gQhB1lndeJb0hN_0Z7g723Tv_x0jnwLvPFOjLbcUiiOGzH67BvRUIFzAbR55xfgKMBVBCsDq6GOJKjthBDJMrAl6v9xYiBRH6gXZgZMl7SAnu1KuqRNaoGkxE3aV6PN4dmNMH_x0-kQKnmqj45H2pBK2-q6NBPSM7MUVn1O_NMfTEDzzAQu_W7 (Organic Earth), 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
- analogous, light · bg #F3EBDD · text #2E2A22 · accent #BC572B
- Type
- Fraunces / Karla · scale 1.25, base 18px
- Grid
- 12 columns, gutter 28px, max 1280px · section space 128px
- Shape
- radius 28px · 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.organic-leaf-bar Leaf bar · nav, on every pageWordmark on 1–3, underlined links on 5–10, a small secondary pill button on 11–12; no rule under the bar.contact.organic-map-garden Map garden · contactA rounded map on 1–6; title, address, email, hours and a short form on 8–12.faq.organic-soft-pebbles Soft pebbles · faqTitle on 1–4; each question on 5–12 sits in its own soft, borderless, rounded pebble of the surface colour.footer.organic-earth-base Earth base · footer, on every pageOn a sage band: wordmark and line on 1–4, links 6–7, address and hours 8–9, an inline newsletter and legal on 10–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.