Memphis

Applying a Memphis visual direction

You are being asked to apply a Memphis visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Memphis” means here

Memphis scatters flat geometric shapes across a composition in colors that were never meant to agree with each other. Circles, triangles, wavy lines, dots and dashes float at positions unrelated to the layout or to one another, each outlined heavily in black. A confetti or terrazzo pattern speckles the background. Nothing has depth, nothing casts a shadow, and nothing is arranged.

The feeling is deliberately weightless and cheerful — objects suspended rather than placed, colors clashing pleasantly rather than harmonizing. It is playful in a way that is genuinely hard to fake with a color palette alone; the scattering and the black outlines are doing at least as much work as the hues.

The practical constraint is simple and easy to get wrong. All that floating shape material must stay off the content. A squiggle passing behind a paragraph looks charming in a mockup and makes the paragraph unreadable in practice, because the text now sits on an unpredictable background. Shapes surround the content; they do not cross it.

Recommendations

• Scatter at least five independent shapes. Fewer than that reads as a few decorative accents rather than as a scattering.
• Include the characteristic pattern somewhere: squiggles, confetti dots, or terrazzo speckle. Without it the composition is just floating shapes.
• Pick four or more saturated colors that do not form a harmonious scheme. Yellow next to teal next to pink is right; a carefully balanced triad is not.
• Keep everything flat. No gradients, no shadows, no depth of any kind — the shapes are cut from colored paper, not rendered.
• Outline the shapes heavily in near-black. This is what holds an unharmonious palette together, and without it the composition falls apart into unrelated colored blobs.
• Distribute without alignment. Shapes should not line up with each other or with the content grid; regular spacing immediately reads as a pattern library rather than as scattering.
• Keep every shape clear of text. Route them around the content, into margins and empty regions.

Avoid

• Shapes overlapping paragraphs, labels, or any reading text.
• Gradients or shadows on the shapes, which give them a weight the style does not want.
• A harmonious, carefully balanced palette.
• Thin or absent outlines, which let the clashing colors separate into visual noise.
• Shapes aligned to a grid or evenly spaced.
• So many shapes that the content has to compete for attention with its own decoration.

How to check your own work

Before considering the result finished, look at it and ask:

• Does any shape touch or sit behind text? Move it. This is the only thing in this direction that can genuinely break the page.
• Do the shapes have black outlines? Without them, an unharmonious palette looks accidental instead of intentional.
• Is there a squiggle, confetti, or terrazzo pattern anywhere? That motif is the signature.
• Are the shapes aligned with each other in any way? If they are, the scattering is too orderly.
• Do the colors actually clash? A tasteful palette produces a pleasant page that is not this style.

Memphis — Specification

Definition

Memphis is a web-interface design style that scatters flat primitive shapes — circles, triangles, squiggles, confetti — across a composition in colors chosen not to harmonize, each outlined heavily in near-black, over a speckled or patterned ground. Nothing has depth and nothing is aligned. The scattered material surrounds the content and never crosses it.

Core principles

• Weightless scattering. Shapes float at positions unrelated to the layout or to each other.
• Deliberate disharmony. The palette clashes on purpose; a balanced scheme belongs to a different style.
• Flatness throughout. No gradient, no shadow, no implied depth anywhere.
• The outline binds it. Heavy black outlines hold an unharmonious palette together.
• Decoration yields to content. Shapes route around text rather than over it.

Visual characteristics

• Five or more independent flat shapes suspended around the layout.
• Squiggle, confetti, or terrazzo pattern on the background.
• Four or more saturated colors with no harmonic relationship.
• Thick near-black outlines on every decorative shape.
• Shapes positioned without alignment to the grid or to each other.
• Content areas kept clear of decorative material.

Rules

1. Scattered primitives. Enough shapes to read as scattering. Acceptance criterion: At least five independent geometric shapes are rendered as floating compositional elements.

2. Signature pattern present. The characteristic motif appears. Acceptance criterion: At least one squiggle, confetti, or terrazzo pattern is rendered on the page.

3. Disharmonious palette. Colors clash by design. Acceptance criterion: At least four saturated colors coexist with no documented harmonic relationship between them.

4. Total flatness. Nothing implies depth. Acceptance criterion: Every shape uses a flat fill; no gradient and no box-shadow appears anywhere on the page.

5. Heavy outlines. Shapes are bound by black. Acceptance criterion: Every decorative shape carries an outline of 2px or greater in a near-black color.

6. Unaligned distribution. Scattering is genuine. Acceptance criterion: Decorative shapes do not align with each other or with the content grid, and are not evenly spaced.

7. Decoration never touches content. Text stays on predictable ground. Acceptance criterion: No decorative shape overlaps any text element or reduces its measured contrast below 4.5:1.

Avoid

• Shapes overlapping paragraphs, labels, or any reading text.
• Gradients or shadows applied to shapes.
• A harmonious, balanced palette.
• Thin or absent outlines.
• Shapes aligned to a grid or evenly distributed.
• Decoration dense enough to compete with the content for attention.

Acceptance criteria

• Rule 1: At least five independent floating shapes are present.
• Rule 2: A squiggle, confetti, or terrazzo pattern is rendered.
• Rule 3: At least four saturated colors coexist without harmonic relation.
• Rule 4: All fills are flat, with no gradient or shadow anywhere.
• Rule 5: Every decorative shape has a 2px+ near-black outline.
• Rule 6: Shapes are neither aligned nor evenly spaced.
• Rule 7: No shape overlaps text or drops its contrast below 4.5:1.

Blocking failures

• A decorative shape sits behind reading text, placing it on an unpredictable background where no single text color remains legible across the block.
• A decorative shape overlaps an interactive control, obscuring its boundary or focus indicator.
• Decorative shapes are exposed to assistive technology as meaningful content, injecting nonsense into the reading order.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• Shape count (Rule 1) reduces at narrow viewports, since the margins that hold scattered decoration disappear first; three shapes is a reasonable floor before the scattering stops reading.
• Rule 7 is re-verified after every reflow without exception. A shape that sits in an empty margin at desktop width lands directly behind text once the layout collapses, which is the single most likely way this style breaks responsively.
• The background pattern (Rule 2) may reduce in scale or density but remains present at every breakpoint.
• Outlines (Rule 5) do not thin below 2px at any width.
• Where a narrow viewport leaves no clear region for decoration, shapes are removed rather than layered behind content.