GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

Memphis Design Patterns: 9 Bold Landing Sections

· Godrich · 9 items · 20 min read

Design trendsCSS onlyPage templateLanding pageHero sectionPricing

Memphis design patterns repeat dots, squiggles, zigzags, and bold geometry across bright color fields.

Most screens saved on Pinterest as "memphis pattern" are illustration exports. They weigh down the page and force a re-export every time a color changes. Here each pattern is a single line of gradient code, so changing one hex value repaints the whole pattern. Scroll the one-page demo below and try to spot where each texture begins.

Open the full page

The nine parts that build that page are laid out in the grid below. The order follows how the pattern seeps into a screen: the background becomes a sea of pattern, shapes pick their spots, the pattern starts flowing, cards carry it as a headband, stickers testify, prices wear it, a sawtooth cuts the boundary, a strip scrolls it away, and a wave pushes you over the edge. A memphis style pattern arrives before the layout does, which is why the background is the first part here rather than the last. The texture-first neighbor is the skeuomorphism landing kit and the light-first neighbor is the AI orb landing kit; overlapping the three kits settles whether a page should be dyed by pattern, texture, or glow.

Pattern-sea hero01 hero-memphis Shape-badge nav02 nav-memphis Repeating pattern band03 pattern-band-memphis Bold-outline card grid04 card-grid-memphis Sticker testimonial stack05 sticker-testimonial-memphis Pattern-banded pricing06 pricing-memphis Zigzag divider07 zigzag-divider-memphis Pattern marquee strip08 marquee-band-memphis Wavy CTA band09 cta-wave-memphis

Auto-plays · click a tile to jump to its section · all nine in one zip

01Pattern-sea hero

What you see

The stage itself is a field of concentric ripples drawn by one repeating-radial-gradient. The white message panel stays still while a half circle, a triangle, a cross, and a zigzag strip drift around it. Every shape shares the same 2s period; only the negative delays stagger their phases. Mixing periods would leave one shape mid-cycle when the 2s loop restarts, so the frame would jump.

Pattern-sea hero
Open in a new tab

01 · Pattern-sea hero — Measured area 2.806% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

repeating-radial-gradientclip-pathanimation-delay

Where to look in the code

Measurement: 2.806% cumulative area, 23 of 23 frames moving.

// Concentric ripples — one radial gradient, repeated from a single origin
.stage {
  background-image: repeating-radial-gradient(circle at 14px 14px, rgba(36, 31, 38, .1) 0 2.5px, transparent 3.5px 28px);
}
// Four shapes, one period, four phases
.herom__shape       { animation: shapeFloat 2s ease-out infinite; }
.herom__shape--half { animation-delay: -.5s; }
.herom__shape--tri  { animation-delay: -1s; }
@keyframes shapeFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-12px) rotate(4deg); }
}

02Shape-badge nav

How memphis design style patterns read in a nav

Three menu items wear circle, half-circle, and triangle badges, and they take turns being active. The swap uses steps(1, end) so it cuts in a single frame; a cross-fade would leave ghost frames where two tints overlap at half opacity. The only moving part is the badge, which pops upward on transform alone.

Shape-badge nav
Open in a new tab

02 · Shape-badge nav — Measured area 16.499% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

steps(1, end)translateY:focus-visible

How to read the code

The cut is why this demo logs only 9 of 23 frames with changes, while area and intensity stay comfortable.

.navm__tab {
  --on: #ff5c47;                     // each tab owns a color
  animation: tabFill 2s steps(1, end) infinite;
}
.navm__tab:nth-child(2) { animation-delay: -.6667s; }
.navm__tab:nth-child(3) { animation-delay: -1.3333s; }
@keyframes tabFill {
  0%, 33.32%   { background: var(--on); }   // hold the color through the active window
  33.33%, 100% { background: transparent; }
}
@keyframes badgePop {
  0%           { transform: translateY(0); }
  6%, 28%      { transform: translateY(-7px); }
  33.33%, 100% { transform: translateY(0); }
}

03Repeating pattern band

What moves

Dot, wave, and cross panels stand side by side while each panel's pattern floor slides sideways. The pattern layer is exactly ten 24px tiles wide (240px) and shifts by translateX(-120px) — five whole tiles. Because 120 is a multiple of 24, the floor at the end of the move is pixel-identical to the start, so no seam ever shows. The three panels lift 0.22s apart.

Repeating pattern band
Open in a new tab

03 · Repeating pattern band — Measured area 33.612% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

background-sizetranslateXanimation-delay

What to change

At 33.612% cumulative area this is the biggest mover of the nine.

.bandm__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 240px;                       // 24px tile x 10 — half of it is exactly 5 tiles
  animation: fillFlow 2s linear infinite;
}
// Wave ribbon — inside one 24x40 tile: the band (y 8-28) plus edge semicircles
.bandm__fill--wave {
  background-image:
    linear-gradient(to bottom, transparent 8px, #241f26 8px 28px, transparent 28px),
    radial-gradient(circle 10px at 12px 8px, #241f26 0 9.5px, transparent 10px),
    radial-gradient(circle 10px at 0 28px, #241f26 0 9.5px, transparent 10px);
  background-size: 24px 40px;
}
@keyframes fillFlow { from { transform: translateX(0); } to { transform: translateX(-120px); } }

04Bold-outline card grid

What you see

Each white card pairs a 3px ink border with a zero-blur shadow 0 6px 0. The pairing is close to neo-brutalism, but here the border is only the frame — the pattern headband is the subject. The three cards carry dot, cross, and sawtooth headbands and rise 0.22s apart, and while a card is up, its shadow grows from 6px to 10px.

Bold-outline card grid
Open in a new tab

04 · Bold-outline card grid — Measured area 24.256% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

box-shadowtranslateYrotate

Where to look in the code

Cumulative area 24.256%.

.gridm__card {
  border: 3px solid #241f26;
  box-shadow: 0 6px 0 #241f26;         // attached shadow = thickness
  animation: cardRise 2s cubic-bezier(.2, .8, .2, 1) infinite;
}
.gridm__card:nth-child(2) { animation-delay: -.22s; }
.gridm__card:nth-child(3) { animation-delay: -.44s; }
@keyframes cardRise {
  0%, 100% { transform: translateY(0) rotate(0);           box-shadow: 0 6px 0 #241f26; }
  45%      { transform: translateY(-12px) rotate(-1.5deg); box-shadow: 0 10px 0 #241f26; }
}

05Sticker testimonial stack

What happens on screen

Three testimonial stickers overlap at a tilt and take turns coming to the front. The card whose turn it is straightens to 0deg and rises 8px, then settles back to its own angle. The stacking order (z-index) stays fixed; coming forward is expressed only through lift and angle, because animating z-index makes the value jump in discrete steps and the cards flicker.

Sticker testimonial stack
Open in a new tab

05 · Sticker testimonial stack — Measured area 15.901% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotatetranslateYz-index

How to read the code

Frames with changes: 11 of 23.

.stickm__card {
  --tilt: -7deg;                       // resting angle
  animation: toFront 2s ease-out infinite;
}
.stickm__card--two   { animation-delay: -.6667s; }
.stickm__card--three { animation-delay: -1.3333s; }
@keyframes toFront {
  0%        { transform: rotate(var(--tilt)) translateY(0); }
  6%, 28%   { transform: rotate(0deg) translateY(-8px); }
  34%, 100% { transform: rotate(var(--tilt)) translateY(0); }
}

06Pattern-banded pricing

What moves

Only the middle plan wears the polka-dot headband and the badge. The plan floats 6px up and down while the badge pulses half a period out of phase: when the plan is highest, the badge is smallest, and when the plan settles, the badge swells. Counter-phase motion feels more alive than a single moving card.

Pattern-banded pricing
Open in a new tab

06 · Pattern-banded pricing — Measured area 5.376% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateYscaleradial-gradient

What to change

Cumulative area 5.376%, 23 of 23 frames.

.pricem__plan--best { animation: bestFloat 2s ease-out infinite; }
.pricem__badge {
  animation: badgePulse 2s ease-out infinite;
  animation-delay: -1s;                // half a period = counter-phase
}
@keyframes bestFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

07Zigzag divider

What you see

Two sawtooth strips run between sections in opposite directions and mesh like a zipper. Each tooth is a conic-gradient wedge: a downward tooth puts its apex on the bottom edge with from 315deg, an upward tooth puts it on the top edge with from 135deg plus a half-tile (8px) offset. The flow moves exactly two tiles (32px), and since the pattern is periodic, the wrap point is invisible.

Zigzag divider
Open in a new tab

07 · Zigzag divider — Measured area 3.781% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

conic-gradienttranslateXrepeat-x

Where to look in the code

Both strips must share the same 16px tile for the mesh to hold.

.zzm__teeth--down {
  height: 32px;
  background: conic-gradient(from 315deg at 50% 100%, #ffcf33 0 90deg, transparent 90deg 360deg);
  background-size: 16px 16px; background-repeat: repeat-x;
  animation: teethFlow 2s linear infinite;
}
.zzm__teeth--up {
  top: 16px;
  background: conic-gradient(from 135deg at 50% 0%, #2ec4a6 0 90deg, transparent 90deg 360deg);
  background-size: 16px 16px; background-repeat: repeat-x; background-position: 8px 0;
  animation: teethFlow 2s linear infinite reverse;   // opposite direction
}
@keyframes teethFlow { from { transform: translateX(0); } to { transform: translateX(-32px); } }

08Pattern marquee strip

What happens on screen

Five tokens — dot, squiggle, cross, half circle, triangle — form one set, laid down twice. The measured track is 460px wide and one set (five tokens plus five right margins) is exactly 230px, so translateX(-50%) equals a 230px push and the last frame matches the first.

Pattern marquee strip
Open in a new tab

08 · Pattern marquee strip — Measured area 7.698% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateX(-50%)margin-rightmax-content

How to read the code

Spacing between tokens uses margin-right, not flex gap: with 2N items, gap leaves only 2N−1 gaps, so -50% drifts 8px per loop.

.marqm__track {
  display: flex;
  width: max-content;          // measured 460px = one 230px set x 2
  animation: trackFlow 2s linear infinite;
}
.marqm__tok { margin-right: 16px; }   // gap leaves 2N-1 gaps across 2N items, breaking -50%
@keyframes trackFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

09Wavy CTA band

What moves

The coral band's top edge is a row of semicircle crests. Each crest is a 12px-radius circle seated on the top edge of a 24px tile, and the crest layer is twenty tiles wide (480px), so translateX(-24px) slides it exactly one tile. Inside, the button floats 8px and lands while its attached shadow shrinks from 13px to 5px.

Wavy CTA band
Open in a new tab

09 · Wavy CTA band — Measured area 5.55% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

radial-gradienttranslateXtranslateY

What to change

Cumulative area 5.550%.

.ctam__wave {
  width: 480px; height: 20px;   // 24px tile x 20
  background: radial-gradient(circle 12px at 12px 0, #ff5c47 0 11.5px, transparent 12px);
  background-size: 24px 24px; background-repeat: repeat-x;
  animation: waveDrift 2s linear infinite;
}
@keyframes waveDrift { from { transform: translateX(0); } to { transform: translateX(-24px); } }
@keyframes btnFloat {
  0%, 100% { transform: translateY(-8px); box-shadow: 0 13px 0 #241f26; }
  50%      { transform: translateY(0);    box-shadow: 0 5px 0 #241f26; }
}

Custom tailwind.config

What needs a single home in this trend is not the palette but the pattern tile and the thickness. If every part picks its own tile width, the seamless travel distance no longer adds up; if the shadow gains blur, the flat punch of Memphis dies.

theme: {
  extend: {
    colors: {
      base: "#fdf4ec", sheet: "#ffffff", ink: "#241f26", stone: "#5d5560",
      coral: "#ff5c47", lemon: "#ffcf33", sky: "#2fa3dd",
      mint: "#2ec4a6", pink: "#ff8fab",
    },
    borderRadius: { card: "16px", control: "12px", chip: "4px", pill: "999px" },
    boxShadow: {
      hard: "0 6px 0 #241f26",      // attached shadow = thickness
      "hard-sm": "0 4px 0 #241f26",
      lift: "0 10px 0 #241f26",     // thicker while lifted
    },
  },
},
Role Token When
Thickness shadow-hard Cards and bands resting on the floor
Lift shadow-lift Only while a card is up
Border border 3px ink Every shape and card — the two travel as a set

Vibe-Coding Prompt

Once the config is in place, the instruction below is all you hand to Claude Code or Cursor. Notice that pattern recipes come before the color list — that order matters. The full text and three variants live in prompt.md inside the zip.

Build every pattern as a CSS gradient tile. Do not use any images. Dots:
radial-gradient(circle at 12px 16px, #241f26 0 3px, transparent 3.5px) repeated on a
24px tile. Sawtooth: conic-gradient(from 315deg at 50% 100%, color 0 90deg,
transparent 90deg) repeated-x on a 24px tile. When a pattern flows, move it only by
whole multiples of the tile width, so the loop ends pixel-identical to where it
started. Give cards and shapes a 3px ink border together with a 0 6px 0 #241f26
shadow.

Rendering page/index.html from that instruction at 1280, 768, and 390px produced the shot below, with zero horizontal overflow measured at all three widths.

Result

Where it breaks (the trap)

The cross pattern cost the most time. Two stacked bars should make a plus, so I wrote linear-gradient(#241f26, #241f26) twice with background-size: 5px 17px — and the third panel rendered as a slab of solid ink instead of sky blue. A solid bar gradient repeats at its own bar width, every 5px, tiling the whole panel with vertical ink strips. A plus needs the 24px tile defined first, then the bar positioned inside it with transparent 9.5px, ink 9.5px 14.5px, transparent 14.5px. The same bug hid in a card headband, so both were fixed together.

The second trap was tooth direction. A conic gradient with its apex at at 50% 100% and from 135deg opens downward — outside the tile — so nothing paints. A tooth pointing down needs from 315deg so the wedge opens upward from the bottom apex. The mistake fails silently: no compile error, no console line, just an empty band on the first render. Third, before trusting the marquee, I measured the track with Playwright offsetWidth: 460px, exactly twice the 230px set. A no-paint failure that raises no error wears the same straight face in dark-mode inboxes, which is why the transactional email templates get proofed there twice. The parts tuned through all three traps, plus the whole one-page build, are in the zip that opens with the password yqayt28g.

Accessibility (accessibility)

None of the bright Memphis colors can carry white text. Computed with the WCAG 2.1 contrast formula, even the darkest accent — coral #ff5c47 — reaches only 3.06:1 against white, under the 4.5:1 body-text minimum. So this kit fixes the text color instead of choosing colors per surface: ink (#241f26) passes everywhere.

Foreground Background Measured ratio Body minimum
Ink #241f26 Sheet #ffffff 16.17:1 Pass
Ink #241f26 Base #fdf4ec 14.88:1 Pass
Ink #241f26 Lemon #ffcf33 10.95:1 Pass
Ink #241f26 Mint #2ec4a6 7.36:1 Pass
Ink #241f26 Sky #2fa3dd 5.7:1 Pass
Ink #241f26 Coral #ff5c47 5.29:1 Pass
White text Coral #ff5c47 3.06:1 Fails — never used

Text never sits directly on a pattern. A white panel goes down first, then ink on top, which locks the contrast regardless of which tile a letter lands on. Every one of the nine parts ships the MDN prefers-reduced-motion query; with reduced motion on, visitors see the finished static patterns, and the shape-badge nav keeps a static rule showing the second tab as active. A frozen marquee is not a bug — it is a finished strip of wallpaper.

If the style clicks for you, browse the design trend collection for neighboring styles, and the about page explains what this site hands out.

FAQ

How are memphis group patterns different from neo-brutalism?

Both use thick black outlines, but the star differs. Neo-brutalism is defined by the border and the offset shadow itself — two or three colors are enough. Memphis treats the border as a frame and puts pattern fills first: repeating dots, waves, zigzags, and geometric shapes. Remove the headband pattern from card 04 in this kit and it stops being Memphis — that is the test. Pattern bent toward an event announcement instead of a brand takes the shape you can see in event landing page templates.

Isn't a patterned background hard to read over?

Only if text sits directly on the pattern. Every paragraph in this kit is ink on a white panel, and patterns live outside the panels — on the stage, the headbands, and the boundaries. The numbers in the contrast table were measured under exactly that rule. Drop the panel and the ratio depends on whichever tile each letter happens to cover.

Is it too playful for a serious brand?

Cut the palette to ink and cream and the structure survives while the playfulness drains — that is the mono variant inside the zip. Shrinking the shapes and widening the tile gaps settles the pattern into background noise, so one or two bright accents can survive inside a corporate tone.

Enter the archive password

The password is inside this article. You will find it as you read.