0design / Library
Milan1981UI Style

Memphis Pop

Graphic joy.

Pattern-heavy, joyful, and unapologetically bold. Memphis design celebrates color blocking and playful geometry.

Interactive Playground

Live components rendered with Memphis Pop tokens.

Live Preview

Authentication

Secure your account with our new multi-factor authentication system.

Badges & Tags

NewFeaturedBetaPro

Type Scale

Display XL
H1 / 800 / 100%
Heading L
H2 / 600 / 80%

Typography

Primary / Headings

Aa

Secondary / Body

Aa

“The typography in Memphis Pop relies on geometric clarity.”

Use high contrast for headings. Maintain strict hierarchy and translate the font stack into design tokens so brands can extend the style without guesswork.

Color System

Background
Surface
Accent
Text

Usage Guidelines

When to Use Memphis Pop

Memphis Pop excels when you need pattern-heavy, joyful, and unapologetically bold. memphis design celebrates color blocking and playful geometry.. This style works best when you want to graphic joy..

Best Practices

  • •Maintain consistent spacing using the gap-5 grid system.
  • •Use font-display font-black tracking-tight for headings and font-sans text-[#1d1135] for body text.
  • •Apply rounded-3xl for rounded corners and shadow-[0_20px_35px_rgba(29,17,53,0.08)] for depth.

Style Playbook

Memphis design is maximalist joy: geometric shapes, confetti patterns, and off-kilter typography rooted in 1980s Italian postmodernism.

History

  • •Started by the Memphis Group (Ettore Sottsass) in 1981.
  • •Adopted by digital-first lifestyle and DTC brands to signal playfulness.

Layout Principles

  • •Layer geometric motifs behind content blocks.
  • •Use overlapping shapes to break strict grids while retaining alignment cues.

Color Guidelines

Playful palette

Primary colors mixed with pastel accents and bold black-and-white patterns.

Pattern usage

Use halftone dots, squiggles, or zebra stripes sparingly to avoid noise.

Typography

Display

Chunky slabs or wide grotesques with generous letter spacing.

Body

Keep body text neutral to counterbalance decorative surroundings.

Best For

  • Children’s products
  • Creative agencies
  • Event branding

Watch Outs

  • ⚠️Too many competing elements overwhelm CTAs.
  • ⚠️Pattern repetition can cause moiré on screens.

Notable Brands

Mailchimp legacy brandingDropbox Paper campaignsGlossier pop-ups

Execution Tips

  • →Create a pattern library with vector assets to keep file sizes small.
  • →Use animation to stagger pattern reveals instead of dumping everything at once.

AI Palette Generator

Describe a mood, scene, or style (e.g., "Cyberpunk Tokyo Rain" or "Scandinavian Morning"), and let our AI craft the perfect color system.