Memphis Design

Also called: Memphis Group style, 80s Memphis, Memphis pattern

Black squiggles, confetti triangles, terrazzo dots and striped shadows over clashing pastels — the 80s Memphis Group as UI.

“Squiggles & confetti”Bold & ExpressiveEra: 1981–1987 Milan, revived 2016–nowPlayfulNostalgicBoldFriendly

Open full screen ↗

memphis-design / landingEN

memphis-design / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm0pxRadius md0pxRadius lg0pxRadius xl0pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

black squigglesconfetti trianglesterrazzo dotsstriped offset shadowclashing pastels with blackzigzag linescircles and rectangles80s geometric display type

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

Not to be confused with

Neubrutalism →Neubrutalism uses solid black offset shadows and plain backgrounds; Memphis uses striped or dotted shadows and fills the background with squiggles and confetti.Vibrant & Block-based →Vibrant & Block-based floods whole sections with solid saturated colour and has no outlines; Memphis keeps a light ground with small black-outlined pastel shapes everywhere.Gen Z Chaos / Maximalism →Gen Z chaos is a deliberately messy collage of stickers, emoji and clashing fonts; Memphis is a tidy grid decorated with a consistent geometric pattern vocabulary.

On mobile

Keep the confetti pattern on the app background and splash only; cards stay white with 2.5px black outlines and a short striped shadow (5px). The tab bar gets a zigzag top edge and a yellow circle behind the active icon.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinRighteous · 400

The quick brown fox

Heading · ThaiMitr · 400/500

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinKarla · 400/500/700

Clear words make shared decisions.

Body · ThaiKrub · 400/500/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Mitr’s chunky, rounded geometric strokes echo Righteous’ 80s display curves, and Krub’s squared-off friendly forms match Karla’s quirky grotesque body.

Colour palette

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 999px`
Border	`2.5px`
Shadow	`7px 7px 0 #3CC6D6`
Display	`clamp(2.8rem, 6.5vw, 5.4rem)`
Motion	`200ms cubic-bezier(.34,1.56,.64,1)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Memphis Design (memphis-design) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a light mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 0px;
  --background: #FFF8EE;
  --foreground: #141414;
  --card: #FFFFFF;
  --card-foreground: #141414;
  --popover: #FFFFFF;
  --popover-foreground: #141414;
  --primary: #FF5FA2;
  --primary-foreground: #141414;
  --secondary: #3CC6D6;
  --secondary-foreground: #141414;
  --muted: #FFE3EF;
  --muted-foreground: #4A4650;
  --accent: #FFE3EF;
  --accent-foreground: #141414;
  --destructive: #D6324A;
  --border: #141414;
  --input: #141414;
  --ring: #FF5FA2;
  --chart-1: #FF5FA2;
  --chart-2: #3CC6D6;
  --chart-3: #FFD23F;
  --chart-4: #9B8CFF;
  --chart-5: #141414;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #141414;
  --sidebar-primary: #FF5FA2;
  --sidebar-primary-foreground: #141414;
  --sidebar-accent: #FFE3EF;
  --sidebar-accent-foreground: #141414;
  --sidebar-border: #141414;
  --sidebar-ring: #FF5FA2;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Memphis Design (memphis-design) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a light mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #FFF8EE;
  --color-surface: #FFFFFF;
  --color-surface-2: #FFE3EF;
  --color-text: #141414;
  --color-text-muted: #4A4650;
  --color-primary: #FF5FA2;
  --color-on-primary: #141414;
  --color-secondary: #3CC6D6;
  --color-on-secondary: #141414;
  --color-accent: #FFD23F;
  --color-border: #141414;
  --color-success: #178A55;
  --color-warning: #A35F00;
  --color-danger: #D6324A;
  --color-chart-1: #FF5FA2;
  --color-chart-2: #3CC6D6;
  --color-chart-3: #FFD23F;
  --color-chart-4: #9B8CFF;
  --color-chart-5: #141414;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 999px;
  --shadow-sm: 4px 4px 0 #3CC6D6;
  --shadow-md: 7px 7px 0 #3CC6D6;
  --shadow-lg: 10px 10px 0 #3CC6D6;
  --font-heading: "Righteous", "Mitr", system-ui, sans-serif;
  --font-body: "Karla", "Krub", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Krub", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Memphis Design (memphis-design). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9725,
            0.9333
          ],
          "hex": "#fff8ee"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8902,
            0.9373
          ],
          "hex": "#ffe3ef"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0784,
            0.0784
          ],
          "hex": "#141414"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.2745,
            0.3137
          ],
          "hex": "#4a4650"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3725,
            0.6353
          ],
          "hex": "#ff5fa2"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0784,
            0.0784
          ],
          "hex": "#141414"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            0.7765,
            0.8392
          ],
          "hex": "#3cc6d6"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0784,
            0.0784
          ],
          "hex": "#141414"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8235,
            0.2471
          ],
          "hex": "#ffd23f"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0784,
            0.0784
          ],
          "hex": "#141414"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.5412,
            0.3333
          ],
          "hex": "#178a55"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.3725,
            0
          ],
          "hex": "#a35f00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.1961,
            0.2902
          ],
          "hex": "#d6324a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3725,
            0.6353
          ],
          "hex": "#ff5fa2"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            0.7765,
            0.8392
          ],
          "hex": "#3cc6d6"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8235,
            0.2471
          ],
          "hex": "#ffd23f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6078,
            0.549,
            1
          ],
          "hex": "#9b8cff"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0784,
            0.0784
          ],
          "hex": "#141414"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2.5,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.7765,
              0.8392
            ],
            "hex": "#3cc6d6"
          },
          "offsetX": {
            "value": 4,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.7765,
              0.8392
            ],
            "hex": "#3cc6d6"
          },
          "offsetX": {
            "value": 7,
            "unit": "px"
          },
          "offsetY": {
            "value": 7,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.7765,
              0.8392
            ],
            "hex": "#3cc6d6"
          },
          "offsetX": {
            "value": 10,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Righteous",
        "Mitr",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Karla",
        "Krub",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Krub",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 400
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.34,
      1.56,
      0.64,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!