All interface styles
Era & motif
Pro

Memphis / Postmodern

Clashing colour, scattered geometric confetti and deliberately unbalanced composition, held together by a strict underlying grid.

Also called: memphis, postmodern, 80s geometric, squiggle, terrazzo

Memphis / Postmodern specimen

The confetti sits on its own hidden decorative layer that ignores pointer events, so the controls behave normally underneath. Every shape is CSS geometry, and the underlying grid is what keeps the composition from being genuinely chaotic.

Every style in this collection renders the same markup — one navigation row, one headline and action, one labelled input, a selected and an unselected control, a card with a status and a data row, and a secondary action. Colour and type come from the active design kit; the style decides the rendering.

What you see

The perceptual fingerprint, in the order you notice it.

  • Squiggles, zigzags, circles and triangles scattered as loose confetti
  • Colour combinations chosen to clash rather than harmonise
  • Blocks rotated a few degrees off-axis on purpose
  • Patterned fills — terrazzo speckle, stripes, grids — inside flat shapes
  • Playful mixed type sizes that still sit on a shared baseline

Best for

  • Events, culture, education and youth-facing brands
  • Pages that need to feel energetic rather than reassuring
  • Kits with three or more strong hues that would look accidental elsewhere

Avoid when

  • Professional, financial or clinical contexts
  • Dense functional screens — confetti competes with real signals
  • Accessibility budget is thin; the decorative layer needs careful handling

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • Every decorative shape is `aria-hidden`, `pointer-events: none`, and outside the reading order. The confetti must never become a screen-reader event.
  • Rotated blocks must not rotate their text below 3 degrees of legibility, and the rotation must never affect a control's hit area.
  • Clashing colour is the point, but a text pair still has to clear 4.5:1 — clash the decoration, not the type.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

80s Memphis-Milano postmodernism — squiggles, confetti shapes, clashing pastels on black, geometric play.

Implementation bundle

Pro

What an agent needs in order to actually build Memphis / Postmodern on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Loading the implementation bundle…

Agent tags

The vocabulary a coding agent can match this style on.

  • geometric-confetti
  • clashing-colour
  • pattern-fill
  • off-axis
  • postmodern