Slopless Design · reference render
Everything above this panel is the design
Design code sd1.hZTBDoJADET_Zc9gFPDA0Qt_4QEMLptoNICa8PXO7LbLRmO80tJup6_DRLEmk1WZaZp9cygMoj8mXSFI2dhtyrJEwQzlfEMF17PthaMe0invHh2PB_dJOMKTNYY-zlofndBwneG7ZNRV_53dxdsBj9IvEyJrbHF2aa2cC-gS6TUMNc_9PLscrF4DqX4N8Vmhq_gc4-nOYta970-DzEfisLp16BE885K5DQilMGjCq33SBW4jT-Z_dzAQwwMMPJrixPp1qE9ANIsOSGmoHGj6rI1v5og_U0qKbVULKW8vk-K (Memphis), 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
- triadic, light · bg #FDF9F4 · text #241E16 · accent #FF5FA2
- Type
- Bricolage Grotesque / DM Sans · scale 1.333, base 17px
- Grid
- 12 columns, gutter 24px, max 1240px · section space 104px
- Shape
- radius 12px · border thick 3px · shadow hard · motion expressive
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.memphis-bubble-bar Bubble bar · nav, on every pageA small accent triangle and the boxed wordmark on the left, pill links with black outlines in the middle, a small primary button on the right.hero.collage-sticker Headline with stickers · heroA huge headline in 1–10 with stickers slapped on it: a tilted accent label overlapping its end (10–12), a star in 1–2 and a second tilted accent2 label in 9–11; subhead + CTA in 3–7.features.memphis-tilted-cards Tilted cards · featuresFeatures as outlined cards two per row, alternately tilted ±2° with alternating fills; each opens with a confetti shape, then the title and text.list.memphis-zigzag-steps Zig-zag steps · listSteps run down the page as a ladder: a giant accent numeral on 1–3 beside an outlined box on 4–9 whose fill cycles surfaceAlt → accent → accent2, with a small outlined shape on 11–12 cycling triangle, circle, square.gallery.memphis-confetti-frames Confetti frames · galleryImages in a 3-column masonry, each with a black outline and hard offset shadow and a tilted caption sticker; a star and a squiggle decorate the title row.stats.memphis-sticker-numbers Sticker numbers · statsA title tilted −2°, then three or four figures as outlined stickers filling one row across the grid, alternating fills and tilts; the number at step 6, heaviest weight, the label in bold uppercase.testimonial.memphis-speech-bubble Speech bubble · testimonialThe quote in a big outlined speech bubble on 1–9 with a triangle tail at column 3; author under the tail; a large accent2 circle on 10–12.cta.memphis-burst-band Burst band · ctaA full-bleed accent band: a big star (surfaceAlt) on 1–3, the headline in onAccent at step 6 tilted −2° with a secondary button on 4–10, a cross on 11–12.footer.memphis-squiggle-base Squiggle base · footer, on every pageA full-width squiggle, then the wordmark on 1–4, pill links on 5–9 and the legal line on 10–12, with confetti shapes in the margins.
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.