Slopless Design · reference render
Everything above this panel is the design
Design code sd1.hZTBDoIwEET_pWcwWowJV-NveCgEQaW2sRLk751pkWyM0fOW3WHn7fCh5XFBFcKHh4EDV5nO1KHcab1XeKj6xrQDTPNINIOquuCYPvDYrIqiQM8MHeNMEyZrkXSAFdrqK13hUjDuPc1jw7xSIpKEi2LlEORwq430y7_51nnZsegQOuQazhH57aA_EpD2Lx8h06c5y0jdbIl4Yc9PBgIYSQRHe0QdGdLndzeiJn2UM3zT1B3FVhQBP0WxM_0pD8ONHmF3_yX-FgA0RInwL2kZOKJMI0iOdAKGMsu4SZAmKo_R5YNXR3wq-dHrbTkz9AIHNL0 (Mid-Century Modern), 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
- complementary, light · bg #F3E9D6 · text #2B231B · accent #C9552A
- Type
- League Spartan / Jost · scale 1.333, base 17px
- Grid
- 12 columns, gutter 24px, max 1240px · section space 112px
- Shape
- radius 20px · border rule 2px · shadow none · motion expressive
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.midcentury-pill-bar Pill bar · nav, on every pageBoxed wordmark in 1–3, pill-shaped page links in 5–9, a primary CTA in 11–12.contact.midcentury-postcard Postcard · contactA ruled, rounded postcard: details on the left half (1–5), a vertical rule in 6–7, the form on 8–12, and an orange stamp square in the corner.faq.midcentury-two-up Two-up FAQ · faqTitle across 1–7, then questions in rounded surface panels, two per row across the full grid: bold question, answer under it.footer.midcentury-boomerang-band Mustard band · footer, on every pageA mustard band: wordmark 1–3, links stacked 5–6, an inline newsletter form 8–12, legal under the wordmark.
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.