Slopless Design · reference render
Everything above this panel is the design
Design code sd1.hZTNDsIgEITfpWdrtOHSo_ocnhArhhYD1sS3d2YXmnrRKz_LsPPt8GDNqwZrzak_dObYbLAeBDEl6h6zu3oM8gKAGrPfmr1BJZ6XlwQ9yPIvgD6nHFObHBIwlJbwodaiGXDtPY5IQm9JiOqW3Yw24uZThnj9i1-1lx5LCQCH2W4fwJBya9tlD8ILNTWUCFtxQk6AGLhNW8UJWRt8QDxoXmFnbZh-CV2Ms73xGg2rlwCDTC8dQI--lGDWM8LAz6PE4p8H4bnqdxeIRSBl1uy1JkFQHXGy3qWBOshMWQxxmvinM66sMeh2pi8ofAAoaEX (Art Deco), 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, dark · bg #0E0D0B · text #E8E0CB · accent #C9A24B
- Type
- Limelight / Josefin Sans · scale 1.414, base 17px
- Grid
- 12 columns, gutter 24px, max 1320px · section space 136px
- Shape
- radius 0px · border double 3px · 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.deco-crest-symmetric Symmetric crest · nav, on every pageLinks on the left (1–5), a monogram crest at the exact centre (6–7), a ghost CTA on the right (10–12); a double hairline closes the bar.contact.deco-concierge Concierge desk · contactMirrored about the centre line: details right-aligned in 2–5 against a vertical rule in 6–7, the form left-aligned in 8–11.faq.deco-colonnade Colonnade FAQ · faqCentred header on 3–10, then questions as a ruled, centred column on 3–10: question in spaced capitals, answer under it, every answer visible.footer.deco-sunburst-base Sunburst base · footer, on every pageCentred stack: a large half-sun, the site name in spaced capitals at step 6 rising out of it, an ornament, the links on one line, the legal line.
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.