Applying a Memphis visual direction

You are applying Memphis to a page that needs the energy of a design exhibition or archive. Preserve the product’s purpose and information architecture, then make the interface feel like a field of authored objects: flat geometry, unexpected color, pattern, asymmetry, and strong labels.

What Memphis means here

Memphis uses a postmodern graphic grammar of symbolic primitive forms and deliberately surprising color combinations. Circles, wedges, bars, dots, stripes, and squiggles should feel like an exhibition’s object language rather than stickers added after layout. Keep the information architecture dependable: the archive title, captions, metadata, and controls need a clear lane through the expressive material.

The visual commitment is page-scale. Use a warm paper ground, dark ink, and several saturated accents that make a real field of color. Keep forms flat and graphic; the point is the relationship of shape, line, pattern, and type, not simulated depth. Vary scale, rotation, and position with intention. A little asymmetry makes the composition feel authored; random obstruction makes it fail.

Recommendations

• Open with a memorable object field or exhibition title, not a generic hero card.
• Use at least six independent marks in the initial composition, including angular, circular, and curved forms.
• Give the archive a repeatable dot, stripe, or terrazzo-like pattern so the page has a signature motif.
• Let three or more saturated accents occupy meaningful regions or object marks; do not hide the palette in tiny badges.
• Keep archive copy on stable dark/light surfaces. Route marks around text and controls.
• Give at least three objects distinct titles, descriptors, and states so the page demonstrates browsing.
• Recompose the object index at container breakpoints. Remove or reposition marks when margins disappear.
• Add one preview-only hover response, such as a small color or rotation shift. The still state must be complete and reduced motion must remove the transition.

Avoid

• A neutral page with a few colorful stickers.
• Gradients, blur, photorealistic shading, or heavy shadows on Memphis geometry.
• Identical icon-heading-copy cards or a tidy grid that erases asymmetry.
• Decoration behind text, captions, controls, or focus indicators.
• Invented period claims, real exhibition claims, or provenance not supplied by the project.
• Hiding the archive index on narrow screens or allowing horizontal overflow.

How to check your own work

Before considering the result finished, ask:

• Can the first viewport be remembered as an object field rather than only a mood?
• Do the shapes read as one authored system even though the colors clash?
• Is the pattern still visible after container reflow?
• Can every object title and caption be read without decoration touching it?
• Does the page remain complete before hover, and does reduced motion leave that still composition intact?

A working order

1. Establish the dark text lanes and the full-palette ground.
2. Compose the exhibition title and the focal geometric object.
3. Add the repeatable pattern and the asymmetrical marks around, never over, content.
4. Build the object index with distinct titles, descriptors, and states.
5. Recompose in narrow containers, then verify contrast, overflow, and reduced motion.

Memphis — Specification

Definition

Memphis is a postmodern interface language of symbolic, flat forms, unexpected color combinations, and playful pattern. It turns an exhibition or archive into a field of objects: circles, wedges, squiggles, stripes, and dots keep their graphic presence while content stays in a dependable reading lane. The visual world is intentionally anti-standardized, but its information hierarchy is not chaotic.

Core principles

• Symbolic geometry. Primitive shapes behave like authored marks and objects, not generic decoration.
• Deliberate disharmony. Saturated colors meet without being softened into a harmonious palette.
• Flat material logic. Color fields, paper-like blocks, and linework stay graphic rather than simulated with depth.
• Playful asymmetry. Rotation, scale, and position vary enough to feel composed by hand.
• Archive clarity. Labels, titles, and metadata remain aligned and legible inside the expressive field.
• Cultural quotation without nostalgia. The early-1980s postmodern vocabulary is a starting grammar, not a reason to imitate a period artifact.

Visual characteristics

• A high-energy field of flat circles, wedges, bars, dots, and squiggles.
• Three or more saturated accent colors held together by a dark ink and a warm paper ground.
• A visible pattern or repeated motif that reads as part of the archive’s visual system.
• Mixed scales and slight rotations, with intentional asymmetry rather than random noise.
• Strong display typography paired with compact archive metadata.
• Clear text lanes and object captions that are never placed on top of decorative shapes.
• A visible index or collection view where each object has a distinct title and state.

Rules

1. Primitive object language. Shapes carry the visual argument. Acceptance criterion: The first viewport contains at least six independently authored geometric marks, including one circle or dot system, one angular form, and one curved or squiggled line.

2. Full-palette commitment. Color is a page-scale material. Acceptance criterion: At least three saturated accent roles occupy meaningful regions or object marks, alongside a dark ink and a light ground; no accent is reduced to a token chip.

3. Patterned evidence. The archive has a repeatable motif. Acceptance criterion: A dot, stripe, or terrazzo-like pattern appears in a non-text region and remains visible at narrow widths.

4. Graphic flatness. Forms do not pretend to be 3D objects. Acceptance criterion: Decorative geometry uses solid fills and strokes only; no gradient, blur, or box shadow is used for the Memphis visual material.

5. Composed asymmetry. Variation is intentional and bounded. Acceptance criterion: At least four decorative marks use visibly different scale, rotation, or position, while the archive labels retain a consistent alignment system.

6. Object-first index. The style has something to browse. Acceptance criterion: The specimen presents at least three distinct archive objects with a title, a short descriptor, and a visible collection or state label.

7. Readable lanes. Expression yields to information. Acceptance criterion: Decorative marks do not overlap text, and all archive copy and controls retain at least 4.5:1 contrast against their actual background.

8. Responsive re-composition. The field adapts rather than shrinks blindly. Acceptance criterion: At the narrow container breakpoint, the object index becomes a single readable column and decorative marks are reduced or repositioned without causing horizontal overflow.

9. One authored response. Motion reinforces the object language. Acceptance criterion: A preview-only object state changes color or rotation on hover, while cards remain still at rest and reduced motion removes the transition.

Avoid

• Random decoration that obscures an archive title, caption, or control.
• A neutral page with isolated colorful stickers.
• Soft gradients, photorealistic shadows, or depth effects that turn flat marks into generic 3D UI.
• Equal-sized cards with identical icon-heading-copy anatomy.
• Nostalgic period-copy claims that are not part of the supplied content.
• A responsive collapse that hides the collection index or creates horizontal scrolling.

Acceptance criteria

• Rule 1: Six or more authored geometric marks cover the initial field.
• Rule 2: Three saturated accent roles carry page-scale or object-scale weight.
• Rule 3: A repeatable dot, stripe, or terrazzo motif remains present at every breakpoint.
• Rule 4: Memphis geometry uses solid fills/strokes without gradients, blur, or shadows.
• Rule 5: Marks vary in scale, rotation, or position while labels align consistently.
• Rule 6: Three or more archive objects expose title, descriptor, and state.
• Rule 7: Text remains unobscured and meets 4.5:1 contrast.
• Rule 8: Narrow containers recompose the index and avoid horizontal overflow.
• Rule 9: The authored hover response is still by default and suppressed by reduced motion.

Blocking failures

• Any mark sits behind archive copy or a control, making the reading background unpredictable.
• The palette or geometry is exposed as meaningful content to assistive technology inside the decorative specimen.
• The index becomes unreadable, disappears, or overflows horizontally at a narrow container.
• Motion is required to understand an object, or continues when reduced motion is requested.

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

Responsive adaptation guidance

• Keep the dark text lanes and archive metadata in the reading order; move marks into margins or remove them when the container cannot hold a safe margin.
• Reduce the decorative field from six or more marks to a smaller set only when needed for clear copy; preserve at least one curved line, one angular mark, and the signature pattern.
• Let the object index change from a multi-column field to a single column. Do not preserve desktop card widths by creating horizontal scroll.
• Scale display type with the container, but keep a clear step between the exhibition title and object metadata.
• Test at 200% zoom and after the grid reflow: contrast, focus boundaries outside the hidden specimen, and label order must remain intact.