Slopless Design · reference render
Everything above this panel is the design
Design code sd1.hVQxEsIgEPwLtXE0Q5NSfYeFgzHiQHCCFP7e3QNiUji2HHcsu3vLizWvFM7UqTu0-qg2OHdiseyoR4j9zWKRZwNkYfZbvdeYxPvyEgc1EUSkqezpxRU2pGTAAwR7e48QtIbmyJDXjdzf5Qd-jJ2ZlTpsho1unjAfQVaypQa4xSs1imixwr_cgE-gMcUU_uVssA6hkFMKlaVM-TfgLiRzZxtlqk2wgOwseQczKyTY8IgIsMlLGP55EEpn_P0VYBFDkTO7PJPyZxxhNLafBuKgU8qhC-PIP53RokyKr-AbAwbDxGgTeF9HtDvdFVd8AAx_no (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 1200px · section space 136px
- Shape
- radius 0px · border double 3px · shadow none · motion subtle
Sections on the home page (/), 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.hero.deco-sunburst-portal Sunburst portal · heroEverything on the central axis: a half-sun rises over columns 4–9, the uppercase headline spans 2–11 centred, a diamond ornament and the subhead sit on 4–9.features.deco-framed-pairs Framed pairs · featuresA centred header with ornament on 3–10, then features in two columns across 2–11, each in a fully ruled frame with a diamond and centred text.content.deco-monument-statement Monument statement · contentAn inverted accent chevron on 6–7, the statement in spaced capitals across 2–11 at step 4, an ornament on 5–8 and a centred paragraph on 4–9.gallery.deco-arcade Arcade · galleryThree arched images side by side: a taller 4:5 arch in the centre (4–9) flanked by two 3:4 arches (1–3, 10–12), all bottom-aligned; caption centred under the middle arch.stats.deco-gilt-figures Gilt figures · statsA centred label, then three or four figures in one ruled row across 2–11: numeral at step 5 in the gold heading colour, caps label, small caption, vertical hairlines between.testimonial.deco-cartouche Cartouche · testimonialOne quote in a ruled cartouche on 3–10: ornament, centred quote at step 4, ornament, then the name in spaced capitals and the role.cta.deco-gilded-band Gilded band · ctaA full-bleed gold band: a diamond on 6–7, the uppercase headline centred on 2–11 at step 5, a line of copy and one button centred on 4–9, all in onAccent.footer.deco-sunburst-base Sunburst base · footer, on every pageCentred stack: a small half-sun, the wordmark, 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.