M · 13 / 26

M — Memphis

Milan, 1981: pattern, colour and nerve.

The style

Loud on purpose, flat on principle.

Memphis began on a December evening in 1980, in Ettore Sottsass’s flat in Milan, with a Bob Dylan record stuck on “Stuck Inside of Mobile with the Memphis Blues Again”. The group took the name. In September 1981 it showed its first furniture: plastic laminate in candy colours, printed with squiggles and terrazzo, on shapes that refused to be tasteful. Sottsass’s Carlton bookcase stood like a totem with its shelves at angles.

Nathalie Du Pasquier and George Sowden drew the patterns, and those patterns are the language this page borrows. Critics hated it; everybody else copied it. By 1987 the group had closed, and the look lived on in eighties television, packaging and, thirty years later, on screens.

The rule under the noise: every shape is flat, outlined and sure of itself. Loud is a decision, not an accident.

In use

A mixtape, loud and working.

Rewind, an app for making tapes for friends. Side A of “Summer ’86, for Jo” is part-way through. Play it, skip, take songs off, pull more from the crate, and watch the 45 minutes run out.

rewind
Paused · Side A, 3 of 9Confetti HeartGina Volt
1:14−1:51
Side A length38:54 of 45:00

6:06 of tape left on this side.

  1. The tape keeps countA side holds 45 minutes. Add a song from the crate and the meter fills; go over and it turns coral and names the song that would be cut off.
  2. Hard shadows mean “press me”Everything that works casts a 4px shadow with no blur and sinks into it when pressed. Flat things, like rows and labels, cast none.
  3. Loud around the edgesSquiggles, dots and terrazzo live on the tape label, the cover and the frame. The track list itself is plain ink on cream, so it can be read at a glance.
Where the noise goes
  • Loud: the tape, its label, the phone’s frame, the crate.
  • Plain: the song list, the times, the meter’s words. Ink on cream.
  • Coral: only what has gone wrong. A side over 45:00 says which song it cuts.
The kit

Every part, outlined.

The parts that app is built from, each in one sure shape: pills press, squares hold, circles are people and reels. The rows of states hold still for comparison; everything else works.

Button

Shape: Pill
Shadow 4px, no blur; the press moves 4px into it
Focus: a 3px ring in the text colour, 7px out, clear of the shadow

Text field

Shape: Soft square
0 / 24It prints on the cassette label.

Select

Shape: Soft square

Switch, checkbox, radio

Shape: Pill · square · circle
Record speed

Slider

Shape: Pill
118bpm
Thumb: a square turned 45°, pink, 3px shadow

Progress

Shape: Pill · circle
Recording · 40%

Segments and tabs

Shape: Pill
12 mixes, 3 sent this month
Segments fill; tabs take a zigzag underline

List rows

Shape: Soft square
Icons at 16, 20 and 24, a 2.5px stroke

Card and loading

Shape: Square
Road trip, July14 songs · 61:20 · for Dae
Loading: striped skeleton, outlined

Toast

Shape: Square

Modal

Shape: Square

Steps

Shape: Circle
  1. Pick songs, done
  2. 2Order, now
  3. 3Label
  4. 4Send
Done teal, now pink with a shadow, next dashed

Badges and avatars

Shape: Pill · circle
NewSentOverC90Draft
JoMiDaKoMi3
Borders 3px on parts, 2px on chips inside them; avatars are circles
Signature

Make a pattern, take it home.

The patterns were the point of Memphis. Mix squiggles, confetti, terrazzo and shapes into a tile, shuffle it, drag any shape where you want it, and download the SVG. It repeats without a seam.

The tile wraps: drag a shape off one edge and it comes in at the other, so the file repeats without a seam.
Mix in
26 shapes
Ground
Click or drag a shape to pick it.seed 1981
Repeated

Tokens

The system, in numbers.

One ink, cream and five brights, each with its ratio. Two faces, four shapes, four levels of hard shadow, the motion and the spacing. Copy them as custom properties, with the button and the squiggle ground.

Colour
  • --ink #1b1b1bType, outlines, shadows
  • --cream #fff8ecThe page, 16.3:1
  • --card #ffffffPanels for reading, 17.2:1
  • --yellow #ffd23fPrimary actions, 11.9:1
  • --pink #ff6fb5Selected and new, 6.7:1
  • --teal #3ec1d3On, playing, done, 8.0:1
  • --coral #ff5b3aOver, errors, 5.6:1
  • --coral-ink #b8301aError type on cream, 5.7:1
  • --violet #8b6cffPattern and focus, 4.7:1
Type
  • Side ADisplay · Bagel Fat One · 40–120px · 0.95
  • Pink LaminateTitle · Bagel Fat One · 22px · 1.1
  • Forty-five minutes a side.Body · Bricolage Grotesque 500 · 16px · 1.55
  • NOW PLAYINGLabel · Bricolage Grotesque 800 · 12px · +0.12em
Shapes
  • Pill · 999pxButtons, tags, switches
  • Soft square · 14pxFields, rows, the phone
  • Square · 0Cards, panels, the tape
  • Circle · 50%Avatars, reels, the ring
Elevation · hard, no blur
  • noneRows, labels: flat
  • 4px 4px 0Buttons, fields, chips
  • 6px 6px 0Cards, the tape
  • 10px 10px 0Modals, the phone
Borders: 3px on every part, 2px on chips inside one.
Spacing
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 72
Motion
  • Press120msSinks into its shadow, 4px
  • Lift160msHover rises 2px, the shadow grows
  • Pop420msToasts and new rows, a little overshoot
  • Reels2.4s / turnOnly while playing; pauses with it
The pop: cubic-bezier(0.34, 1.56, 0.64, 1), a small overshoot. Only transform, shadow and clip move.
:root {
  /* One ink, cream, five brights */
  --ink: #1b1b1b;
  --cream: #fff8ec;
  --card: #ffffff;
  --yellow: #ffd23f;
  --pink: #ff6fb5;
  --teal: #3ec1d3;
  --coral: #ff5b3a;
  --coral-ink: #b8301a; /* error text */
  --violet: #8b6cff;

  /* Outline and hard shadow */
  --line: 3px solid var(--ink);
  --line-thin: 2px solid var(--ink);
  --lift-1: 4px 4px 0 var(--ink);
  --lift-2: 6px 6px 0 var(--ink);
  --lift-3: 10px 10px 0 var(--ink);

  /* Shapes */
  --pill: 999px;
  --soft: 14px;

  /* Motion */
  --press: 120ms;
  --pop: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.button {
  border: var(--line);
  border-radius: var(--pill);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: var(--lift-1);
  transition:
    transform var(--press) ease-out,
    box-shadow var(--press) ease-out;
}
.button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.button:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

/* Squiggle ground: an SVG tile, kept to frames and empty space */
.squiggle {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M0 12q6-10 12 0t12 0 12 0 12 0' fill='none' stroke='%231b1b1b' stroke-width='3'/%3E%3C/svg%3E")
    0 0 / 48px 24px,
    var(--yellow);
}

Do

  • Outline everything in one ink and cast hard shadows. The shapes stay flat; the outline and the offset do the depth.
  • Pick a handful of brights and let them argue: yellow, pink, teal, coral, violet against ink and cream. No gradients.
  • Keep the noise in the frame. Pattern goes on surfaces, edges and grounds, never behind a line of text.
  • Give each part one sure shape: a pill button, a square card, a round avatar. Mix shapes across the page, not inside one part.

Don’t

  • Don’t set words on pattern

    A squiggle behind a paragraph breaks every word it crosses. Put text on a flat panel and let the pattern frame it.

  • Don’t soften it

    Blurred shadows and gradients turn Memphis to mush. The style is flat colour, a hard outline and a shadow with an edge.

  • Don’t set colour on colour

    Pink type on yellow is 1.8:1, and nobody can read it. Bright grounds carry ink; brights only sit on cream or ink.

In the wild

Where the style shows up outside this page.

  1. Carlton room divider

    Ettore Sottsass · 1981Laminate shelves at odd angles in clashing colours, a figure as much as a bookcase.

  2. Patterns for Memphis

    Nathalie Du Pasquier · from 1981Squiggles, grids and confetti printed on laminate and cloth.

  3. Saved by the Bell titles

    NBC · 1989The style gone to television: squiggles and shapes flying round the cast.

  4. Building murals

    Camille Walala · 2010sWhole fronts in bold pattern and primary colour, Memphis at street scale.