Slopless Design · reference render
Everything above this panel is the design
Design code sd1.hZXNDoIwEITfhbMYQUPkyIN4IMYA4VcLB316vy3tFo2JN8IO3e7szCBAH1yxy5mIWlRkxyI920dTNxOGa6R-rYXIFwtry3aJq3GuESMMbSWQ7NNdksmntrk7Fl8PFZYR1Tp-tPN9aUgS9jNYkt0UWlZ_e0SY7Pfhnmc9AQfiMnDkmpWkp14RpXn2PcHMOBPqlVv4tSlGvDZJUJl55AWY7eIC7PMurE9LpC0ChmMWAvX_77mK4Ysol5u2P1IIjWGi03A00iRfm4hQFNbd5jUfRFRh--WDEOaHxUzRhU-3ckkPp9xJ5g0fr4D (Japanese 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 #F4F1EA · text #2B2925 · accent #A63A28
- Type
- Shippori Mincho / Zen Kaku Gothic New · scale 1.2, base 16px
- Grid
- 12 columns, gutter 32px, max 1360px · section space 200px
- 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.japanese-quiet-corner Quiet corner · nav, on every pageWordmark in 1–3, page links in small type in 9–12. No rule, no button, no background.contact.japanese-letter Letter · contactA vertical title (step 7) in 11–12; the address, email and hours in body type in 1–4; the form (name, email, message) in 6–9 with bottom-hairline fields and a ghost submit.faq.japanese-margin-notes Margin notes · faqA Mincho title (step 5) in 1–4; questions in 6–12 as hairline-ruled rows on a seven-column sub-grid: the question (step 2, weight 400) in 1–3, the answer (loose leading) in 4–7. Every answer visible.footer.japanese-colophon-corner Colophon corner · footer, on every pageOne quiet line: wordmark 1–2, seal 3, page links 7–10, muted legal 11–12. Small type only, no rule.
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.