High-saturation clashing hues straight from the 1980s Italian design scene. Every color fights for attention — and that is the point.
Memphis pattern library
Each component is thick-bordered, hard-shadowed, and ready to clash. Pop Swap color transitions on every hover state.
Primary — Toy Button Physics + Pop Swap
With geometric accents
Size variants
Hover and click each demo to feel the named interaction pattern. These four rules are the soul of Memphis interaction design.
group-hover:translate-x-4 group-hover:-translate-y-2
group-hover:-translate-x-2 group-hover:rotate-12
Each shape moves independently — no uniform direction.
Hover — watch the shapes escape
active:translate-x-[6px] active:translate-y-[6px]
active:shadow-none
Button fully bottoms out — like pressing a toy key.
Click and hold to feel the toy physics
hover:bg-pink-400
transition-colors duration-150
Instant color reversal — no gradients, just BOOM.
Hover to trigger the pop color swap
duration-150 ease-out
All animations — no exceptions.
Pop toy snap — vs slow/sluggish.
A mock creative studio project board — hard borders, pop colors, geometric cards. Playful Chaos on every card hover.
Three core ideas that define Memphis. Rebellion without chaos. Decoration without excess. Fun without apology.
More is more.
Memphis openly rejected the 'less is more' dogma. Every surface is an opportunity for decoration, geometry, and color. Empty space is wasted space.
Circles, triangles, diamonds.
The Memphis vocabulary is built from simple primitive shapes. Mix them, rotate them, clash them. Combine circle + triangle + square in the same component.
Color against color.
Harmonious color combinations are the enemy. Place red next to cyan, yellow on purple, pink on green. The tension IS the aesthetic.
border-4 border-black on every element. No exceptions. Thin borders are for minimalists.
shadow-[6px_6px_0px_#000] — offset, no blur, full black. Like the element was stamped on the page.
Yellow on pink on purple on green. Every combination that breaks the color wheel rule is a Memphis opportunity.
Circles, triangles, and diamonds scattered asymmetrically. Each one moves in its own direction on hover.
Buttons press down 6px and lose their shadow. The page becomes a tactile toy — every click has weight.
Dots, diagonal stripes, and wave lines fill every background. Empty surfaces are Memphis violations.