Slopless Design · reference render
Everything above this panel is the design
Design code sd1.hZTNDoIwEITfpWdiFPDA0Qtv4QEMlib-BVATnt6Zdrc0GuK1u512d79ZJspqMlmZmbre14fcILpS6QJBysZuUxQFBDPI-QdFEwDfzt00uUC3tEWD7bOlh2BTMhJ-rjE856z10RH3llJWlWOXNWNyF78caFE_WrRcY7Ozc2PFPGBNBvEjDnKvgVs_lPg7WhaGC1uP8XSCMevRdadeyiR_GORS-wC66WvOBm1TNDTh3by4E-4DDfT_dRARwz3WeVyRI_WroE9cNIv7kK1h58DWtzbOzBE3U2bybVkJNx8p4qF (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.memphis-confetti-stage Confetti stage · heroConfetti shapes scattered in the corners (triangle 1–2, ring 11–12, cross 1, half-circle 10–12, squiggle 4–9); a tilted sticker eyebrow, a loud headline on 2–11 and an outlined accent2 box with the lead and CTA on 3–8.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 · statsTwo to four figures as outlined stickers in a row, alternating fills and tilts; the number at step 6, heaviest weight, the label in small uppercase.testimonial.memphis-speech-bubble Speech bubble · testimonialThe quote in a big outlined speech bubble on 2–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.