Slopless Design · reference render
Everything above this panel is the design
Design code sd1.dZTLDYRADEN74bxaLQwXritRBv23gR07kOFzQxOISex5fPEBJwPKw9qmefzHYx-vm2WXnI3f1hraf9A85A2wggHeNi9J8gnmwAYjo0FUzPtdR3rtGas9cBR0Cu-1eavlR8yZTVDFaKKnYYNODSqcVqdU6-BFJdhllQIyOoB19L8RMDxnflOE2zo8sJdTKRBe0slHii0SY0LcMUnK7SJNde_qt-GzmpHpNy_OyQ4BndC (Swiss International), 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 #E2271D
- Type
- Inter Tight / Hanken Grotesk · scale 1.333, base 17px
- Grid
- 12 columns, gutter 24px, max 1360px · section space 128px
- Shape
- radius 0px · 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.swiss-split-columns Split columns · nav, on every pageWordmark in columns 1–3, page links start exactly at column 7; a hairline closes the bar. No buttons, no logo icon.contact.swiss-form-grid Contact grid · contactTitle and address details stacked in 1–4; the form fills 6–12 with underlined fields and a square submit button.faq.swiss-split-index Split FAQ index · faqTitle block pinned in columns 1–4; questions run as a ruled list in 6–12, question in bold, answer directly under it. No accordions with chevrons.footer.swiss-colophon Colophon · footer, on every pageFour column zones under a 2px rule: wordmark 1–3, links stacked 5–6, address 7–9, legal 10–12. Small type only.
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.