# Memphis Design > Black squiggles, confetti triangles, terrazzo dots and striped shadows over clashing pastels — the 80s Memphis Group as UI. - Nickname: Squiggles & confetti - Also called: Memphis Group style, 80s Memphis, Memphis pattern - Category: Bold & Expressive - Moods: Playful, Nostalgic, Bold, Friendly - Industries: Creative & Portfolio, Kids & Family, Education, Media & Entertainment, E‑commerce - Style page: https://uilingo.dev/styles/memphis-design/ Memphis Design borrows from Ettore Sottsass’ Memphis Group: clashing candy pastels (pink, aqua, butter yellow, lavender) held together by confident black lines. Surfaces are flat rectangles and circles drawn with a 2.5px black stroke; their “shadows” are offset blocks of diagonal stripes or polka dots rather than solid fills. The background is scattered with squiggles, zigzags, little triangles and terrazzo specks, and headlines are a rounded geometric display face. Playful, decorative and unapologetically 80s. ## Best for - Creative studios, design events and festivals - Kids, toys and education brands - Fashion, beauty and lifestyle e-commerce campaigns - Playful onboarding and empty states ## Avoid for - Finance, legal and healthcare products - Data-heavy tools where pattern noise distracts - Minimal luxury brands ## Do - Keep every outline the same 2.5px black - Use patterned (striped or dotted) offset shadows instead of solid ones - Limit decoration to the background and edges — on phones too, keep pattern out of the content column; keep text on plain white or flat pastel - Mix exactly two shape families: rectangles and circles, plus small triangle confetti ## Don't - No smooth colour gradients, blur or realistic shadows (hard-stop stripe/dot patterns are the signature) - Don’t put body text over the squiggle pattern - Don’t use saturated neon — Memphis is candy pastel plus black - Don’t round card corners; save roundness for circles and pills ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Memphis Design" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Black squiggles, confetti triangles, terrazzo dots and striped shadows over clashing pastels — the 80s Memphis Group as UI. Design keywords: black squiggles, confetti triangles, terrazzo dots, striped offset shadow, clashing pastels with black, zigzag lines, circles and rectangles, 80s geometric display type. ## Visual language An 80s Milan-design party on a warm cream page: candy pastels — bubblegum pink, aqua, butter yellow, lilac — held together by confident 2.5px black lines. Surfaces are flat rectangles and perfect circles; instead of solid drop shadows they cast offset blocks of black diagonal stripes or polka dots over a pastel fill. There are no smooth colour fades anywhere: every gradient in the CSS is a hard-stop pattern. The page margins are scattered with squiggles, zigzags, outline triangles, little confetti triangles and terrazzo specks, while text always sits on clean white or flat pastel. Headlines are a rounded geometric display face with a yellow highlighter bar and a pink squiggle underline. ## Signature details (must be visible) - 2.5px solid #141414 outline on every card, input, button, badge, list and chart bar - Patterned offset shadows via ::after at inset 10px -10px -10px 10px, z-index:-1, with its own 2.5px outline: black 2px diagonal stripes on #FFD23F, black 1.7px dots on #FF5FA2, or the flat aqua variant = --shadow-md 7px 7px 0 #3CC6D6 — cycled across a grid. Stacking: the card is position:relative with no z-index; its section / main / screen wrapper gets position:relative; isolation:isolate, so the -1 layer sits above the section fill but below the card - No visible colour fades or blends. CSS linear/radial/repeating gradients are allowed ONLY as hard-stop patterns (stripes, dots, sawtooth, highlighter bar) - Background: an inline data:image/svg+xml tile (420px) of black squiggles, zigzags, outline circles and triangles, pink/aqua confetti triangles, lilac squares and terrazzo specks on .ui-bg::before, masked to the outer gutters (black 0–11%, fading out by 22%, back from 78%) on ≥1024px; below 1024px drop it to 30% opacity and keep it out of the content column (mask the centre 84%: linear-gradient(90deg,#000 0 8%,transparent 8% 92%,#000 92%)) - Righteous 400 display type; Thai in Mitr 500 for display and h1, Mitr 400 for h2–h4 (the Mitr weight list must include 500). Hero highlighter = linear-gradient(transparent 70%, #FFD23F 70%, #FFD23F 92%, transparent 92%) on an inline span with box-decoration-break: clone, so every wrapped line gets its own bar; wave underline = inline SVG data-URI, 5px stroke #FF5FA2, 230×22px, centred 18px under the headline - Section titles closed by a small black zigzag; alt sections are #FFE3EF (surface-2) with a 14px dot grid and 2.5px black rules top and bottom - Rotation: only small badges rotate (eyebrows -3°, icon squares 8°; buttons tilt -3° on hover only). Cards, buttons at rest and sections never rotate — that is Gen Z - Shape vocabulary: rectangles with 0 radius and perfect circles / pills only, plus half-domes and triangles for icons; zigzag 'sawtooth' strips (aqua on the footer, pink on the tab bar) made with two hard-stop 135°/225° linear-gradients ## Design tokens — use these exact values Colours (light mode): - background #FFF8EE - surface #FFFFFF - surface-2 #FFE3EF - text #141414 - text-muted #4A4650 - primary #FF5FA2 (text on it #141414) - secondary #3CC6D6 (text on it #141414) - accent #FFD23F - border #141414 - success #178A55 · warning #A35F00 · danger #D6324A - chart series #FF5FA2, #3CC6D6, #FFD23F, #9B8CFF, #141414 Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 999px Border width: 2.5px Shadows: sm `4px 4px 0 #3CC6D6`, md `7px 7px 0 #3CC6D6`, lg `10px 10px 0 #3CC6D6` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 200ms cubic-bezier(.34,1.56,.64,1) ## Typography (Latin + Thai) - Headings: Righteous 400 with Thai fallback Mitr 400/500 - Body: Karla 400/500/700 with Thai fallback Krub 400/500/700 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Righteous:wght@400&family=Karla:wght@400;500;700&family=Mitr:wght@400;500&family=Krub:wght@400;500;700&display=swap - CSS stacks: heading `"Righteous", "Mitr", system-ui, sans-serif`; body `"Karla", "Krub", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.8rem, 6.5vw, 5.4rem), heading weight 400, heading tracking 0 (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Mitr’s chunky, rounded geometric strokes echo Righteous’ 80s display curves, and Krub’s squared-off friendly forms match Karla’s quirky grotesque body. ## Components - Primary button: #FF5FA2 pill, 2.5px black border, 3px 3px 0 #141414 shadow — small controls (≤44px tall) may use a 3px solid ink offset; cards and panels never do. Hover rotate(-3deg); active translate(3px,3px) and shadow 0 - Secondary button: white pill with black outline, hover fill #FFD23F; accent button aqua - Card: white, 0 radius, 2.5px black border, striped, dotted or flat-aqua (--shadow-md) offset shadow; hover only pushes the shadow out to 14px - Card icons alternate shape: aqua circle, yellow square rotated 8°, pink dome (50% 50% 0 0), each with a black outline - Inputs: white, square, black outline; focus adds a 5px 5px 0 #FF5FA2 block shadow; error uses a #D6324A outline with a blush #FFB3C7 block shadow - Badges and chips: outlined pills in fixed pastel fills — mint #A8F0C6 (success), butter #FFD23F (warning, = accent), blush #FFB3C7 (danger), lavender #EDE8F5 (neutral); a checked radio card is pale butter #FFF1B8; active chip aqua #3CC6D6; solid badge black with yellow text. Alert tints are #DFF8EA / #FFF4C7 / #FFE3EA; lilac #9B8CFF is chart-4 and the CTA/avatar fill. These are the only off-token colours - Pullquote: yellow block with outline and an aqua striped offset shadow - Charts: 3.5px black and pink lines, outlined bars alternating square and dome tops, outlined pill heatmap cells in pink/aqua, donut on a thick black track - Mobile tab bar: white with a 2.5px black top rule and pink sawtooth edge; the active icon sits in a yellow circle (or aqua square) - Progress: outlined 14px bar filled with pink/yellow candy stripes ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: centred headline with the product visual below it. Navigation: pill style. Sections in order: hero → features → steps → showcase → stats → testimonials → pricing → faq → cta. Feature section as grid. Centered hero with a huge Righteous headline on a yellow highlighter, a pink squiggle underline, pink + white outlined pill CTAs and a product mock of outlined white cards with patterned shadows; a big yellow circle with a black offset and a striped aqua triangle float in the hero corners. Sections alternate cream and dotted-pink bands separated by black rules; features sit in a 3-up grid of outlined cards whose shadows cycle stripes / dots / aqua. Stats use big numbers with a 4px aqua or pink text-shadow. Dashboards use an icon rail with circular items, outlined KPI cards with patterned shadows and a lightly patterned canvas. ## Content Use realistic product copy (fictional brand) suited to: Creative studios, design events and festivals. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Keep every outline the same 2.5px black - Use patterned (striped or dotted) offset shadows instead of solid ones - Limit decoration to the background and edges — on phones too, keep pattern out of the content column; keep text on plain white or flat pastel - Mix exactly two shape families: rectangles and circles, plus small triangle confetti ## Don't - No smooth colour gradients, blur or realistic shadows (hard-stop stripe/dot patterns are the signature) - Don’t put body text over the squiggle pattern - Don’t use saturated neon — Memphis is candy pastel plus black - Don’t round card corners; save roundness for circles and pills - Solid black offset shadows on cards and panels — that is Neubrutalism; Memphis card shadows are patterned or flat aqua (only small controls ≤44px may use a 3px ink offset) - Neon, smooth colour fades, glows or glass blur (hard-stop stripe / dot gradients are fine) - Rounded-rectangle cards (8–16px radius): use square corners or full circles only - Squiggle pattern behind paragraphs, headings or form fields — on phones too - Full-bleed saturated colour slabs without outlines — that is Vibrant & Block-based - Rotating and overlapping whole cards like a messy collage — that is Gen Z chaos ## Stack notes One self-contained HTML file with a