Memphis
Bold asymmetric geometry, Bacterio squiggles and neon-with-pastel – the 1980s movement whose shapes vaporwave still borrows.
Read the entryAlso called: Memphis Design · Memphis Milano
Bold asymmetric geometry, Bacterio squiggles and neon-with-pastel – the 1980s movement whose shapes vaporwave still borrows.
Lineage: Italian design collective founded by Ettore Sottsass, active 1980-87 – born at a single Milan gathering on the evening of 6 December 1980.
Memphis
Bold asymmetric geometry, Bacterio squiggles and neon-with-pastel – the 1980s movement whose shapes vaporwave still borrows.
Read the entryA working sample – the controls are live (hover, press, focus, the toggle's two states) and everything inside the frame is painted by the token block shown in the recipe below. Nothing saves anything; "Advanced options" jumps to the recipe. The page around the frame stays in Atlas's own system.
#d6006c#1aab9b#ffc94d#fbf3e4#141414
Imagine furniture that refuses to behave: a bookcase in five clashing colours standing on a squiggle-patterned base, built from deliberately “cheap” laminate. That’s Memphis Milano – a movement that rejected both minimalism and the Bauhaus “form follows function” principle on purpose, embracing kitsch and arbitrary-feeling combinations as the statement itself.
Founded by Ettore Sottsass at a gathering of young designers and architects in Milan on the evening of 6 December 1980, active until 1987. (Medium confidence on the founding-date narrative – it’s corroborated across design-history sources and matches Wikipedia’s current article, but some secondary sources say 11 December; the discrepancy is documented in the source note’s verification log.) The Bacterio pattern predates the group – Sottsass designed the black squiggle motif in 1978 – and became its signature through pieces like the Carlton bookcase.
Almost never directly, and that’s the honest entry: this is a physical and industrial design movement, not natively a UI style. Its relevance to a screen-design catalogue is as an ancestor – reaching for pure Memphis Milano in a digital product reads as a deliberate, knowing historical citation rather than a mainstream choice.
Mainstream product UI, where the arbitrary-on-purpose composition fights every usability instinct the rest of this site teaches.
Vaporwave – the true heir: it explicitly borrows Memphis’s geometric shape vocabulary, a documented cross-pollination. Corporate Memphis – the trap: it shares the name only. The Alegria illustration style was nicknamed after this movement as a loose visual-cousin comparison (both use bold colour and simplified geometry), not as a direct lineage – the two entries sit side by side here precisely so the difference is visible on sight.
The actual scope from style-scopes.css – the CSS that painted the stage above.
/* ===== style: memphis ===== */
/* 1980-87 Milano: asymmetric circles and triangles, Bacterio squiggles,
neon with pastel, kitsch on purpose – the ancestor entry. */
[data-style='memphis'] {
--bg-page: #fbf3e4;
--bg-raised: #fffdf5;
--bg-active: #ffe9b8;
--border-default: #141414;
--border-hover: #141414;
--border-input: #141414;
--text-primary: #141414;
--text-secondary: #4b463c;
--accent-solid: #d6006c;
--accent-solid-hover: #a80055;
--accent-text: #ab0057;
--on-accent: #ffffff;
--radius-s: 0px;
--radius-m: 10px;
--radius-l: 24px;
--shadow-1: 5px 5px 0 #1aab9b;
--shadow-2: 7px 7px 0 #1aab9b;
--font-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
}
.sty-card[data-style='memphis'],
[data-style='memphis'] .sty-panel {
border-width: 2px;
border-radius: var(--radius-m) var(--radius-l) var(--radius-s) var(--radius-l);
}
[data-style='memphis'] .sty-name {
font-family: 'Archivo Black', system-ui, sans-serif;
font-weight: 400;
}
[data-style='memphis'] .sty-btn {
border: 2px solid #141414;
border-radius: var(--radius-l) var(--radius-s) var(--radius-l) var(--radius-s);
}
/* Vignette: Bacterio-style squiggles behind asymmetric circle-and-
triangle geometry – the shape vocabulary vaporwave inherited. */
[data-style='memphis'] .sty-art {
border-width: 2px;
background-color: #fffdf5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M2 10q5-9 11 0t11 0 11 0 11 0M2 32q5-9 11 0t11 0 11 0 11 0' stroke='%23141414' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-size: 44px 44px;
}
[data-style='memphis'] .sty-art > i {
opacity: 1;
border-radius: 0;
}
[data-style='memphis'] .sty-art .sty-art-a {
inset: 16px auto auto 18px;
width: 0;
height: 0;
background: transparent;
border-left: 26px solid transparent;
border-right: 26px solid transparent;
border-bottom: 44px solid #1aab9b;
}
[data-style='memphis'] .sty-art .sty-art-b {
inset: 40px auto auto 92px;
width: 44px;
height: 44px;
background: #d6006c;
border: 2px solid #141414;
border-radius: 999px;
}
[data-style='memphis'] .sty-art .sty-art-c {
inset: auto auto 14px 44px;
width: 58px;
height: 16px;
background: #ffc94d;
border: 2px solid #141414;
transform: rotate(-6deg);
}
/* Hover: the offset shadow swaps teal for magenta and the card tilts. */
.sty-card[data-style='memphis']:hover {
box-shadow: 5px 5px 0 #d6006c;
transform: rotate(-0.5deg);
}
/* ===== end memphis ===== */Meant to be copied, not paraphrased – anchors beat adjectives when briefing an agent.
Named links out – the vignettes above are reconstructions, never screenshots (ADR #006).