Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
RétroMaximalisteColoréGéométrique
Vorschau

Memphis Lite Design Reference

Memphis Lite (c. 1986--1997, peak 1988--1993) is the corporatized, consumer-friendly evolution of Memphis Design. Where the original Memphis Group's furniture and objects were too radical for mainstream interiors, Memphis Lite distilled the movement's playful geometric abstraction, bold color, and irreverent pattern language into a commercially viable visual style suited to graphic design, consumer products, fashion, fast-food restaurants, shopping malls, and television. The result is a high-energy blend of pastel CMYK colors, squiggles and brushstrokes, geometric shapes, and stippled textures -- exuberant yet approachable, chaotic yet structured. Think: Jazz cup patterns, Saved by the Bell title cards, Taco Bell interiors, and Polly Pocket packaging.

Visual Characteristics

Core Motifs and Patterns

  • Squiggles and brushstrokes -- freehand scribble lines, swooping curves, and painterly brush marks (the "Jazz Cup" motif is the canonical example)
  • Irregular stippled patterns -- fields of dots, dashes, or tiny triangular shapes filling entire planes, often in contrasting colors
  • Illusory contours -- shapes defined not by outlines but by striped or stippled patterns that imply edges without drawing them
  • Stippled gradient effects -- dot density gradating from sparse to dense to suggest shading or depth
  • Asymmetrical shape assemblages -- groups of overlapping geometric shapes (triangles, circles, rectangles) that form distinct compositional units on subdued or flat backgrounds
  • Misaligned Googie-influenced borders -- wavy, Space-Age-derived edge treatments that refuse to sit straight
  • Solid drop shadows -- flat, colored shadows offset from shapes (not blurred, not transparent -- hard-edged offset fills)
  • Art Deco dot-circle-line combinations -- decorative elements borrowing the rhythmic repetition of Art Deco motifs reinterpreted in bright colors
  • Cubist decorative elements -- fragmented, multi-perspective geometric forms used as ornamental accents
  • Abstract expressionist frameworks -- statement pieces combining cubist structure with loose, gestural mark-making
  • Confetti and sprinkle scatter -- small geometric shapes (triangles, squares, circles, zigzags) scattered randomly across surfaces
  • Neon signage motifs -- glowing tube-like line art, referencing commercial neon signs of the era
  • Chrome and glass accents -- shiny, reflective surface treatments suggesting metallic and transparent materials

Design Principles

  • Playful asymmetry -- compositions are deliberately unbalanced, with shape groups floating independently rather than centering on a grid
  • Flat color fields with decorative density -- shapes are filled with solid, flat color, but patterns are busy and visually dense
  • Grouped autonomy -- each cluster of shapes operates as a self-contained unit; the page is a collection of independent visual episodes
  • Subdued background, active foreground -- backgrounds tend to be flat white, light gray, or pale pastel while the foreground bursts with colored shapes and patterns
  • Tension between chaos and composition -- the overall impression is energetic and almost random, but shape groups are carefully balanced
  • Consumer-friendly abstraction -- abstract enough to feel artistic, representational enough to feel accessible and fun
  • Color as structure -- color relationships (complementary, analogous, triadic) define visual hierarchy more than size or weight
  • Pattern as surface, not texture -- patterns read as flat decorative fills rather than implying 3D material texture

Color Palette

Primary Scheme

Role Colors
Background White, off-white, very light gray, or pale pastel wash
Primary shapes Bold flat primaries: red, blue, yellow
CMYK accents Teal/aqua, pink/magenta, purple
Pastel variants Soft pink, mint green, lavender, peach, baby blue
Neutral ground Light warm gray, cream, pale sand
Black accents Pure black for outlines, drop shadows, and squiggle lines

Detailed Palette

Color Hex Usage
White Ground #FFFFFF Primary background, negative space
Warm White #F5F0E8 Alternate warm background, card fills
Light Gray #E8E4E0 Section background variation, muted ground
Memphis Black #1A1A1A Outlines, squiggle lines, drop shadows
Memphis Red #E8333A Primary shape fill, bold accent
Memphis Blue #2B7FC3 Primary shape fill, geometric elements
Memphis Yellow #F5D623 Primary shape fill, highlight accents
Hot Magenta #E84690 CMYK accent, brushstroke motifs
Electric Teal #00B5AD CMYK accent, pattern fills
Bold Purple #7B4EA3 CMYK accent, secondary geometric shapes
Bright Orange #F28C28 Warm secondary accent, confetti shapes
Lime Green #A4D65E Cool secondary accent, scattered shapes
Pastel Pink #F8B4C8 Soft background wash, gentle fills
Pastel Mint #B8E8D0 Soft background wash, gentle fills
Pastel Lavender #C8B8E8 Soft background wash, gentle fills
Pastel Peach #FCDCC8 Soft background wash, gentle fills
Pastel Sky #B8D8F0 Soft background wash, gentle fills
Sand Neutral #D8C8B0 Neutral midtone, muted ground elements
Cool Gray #A0A0A8 Stipple patterns, secondary outlines

Suggested CSS Custom Properties

:root {
  /* Backgrounds */
  --memphis-white: #ffffff;
  --memphis-warm-white: #f5f0e8;
  --memphis-light-gray: #e8e4e0;

  /* Core structure */
  --memphis-black: #1a1a1a;
  --memphis-cool-gray: #a0a0a8;
  --memphis-sand: #d8c8b0;

  /* Bold primaries */
  --memphis-red: #e8333a;
  --memphis-blue: #2b7fc3;
  --memphis-yellow: #f5d623;

  /* CMYK accents */
  --memphis-magenta: #e84690;
  --memphis-teal: #00b5ad;
  --memphis-purple: #7b4ea3;

  /* Warm/cool secondaries */
  --memphis-orange: #f28c28;
  --memphis-lime: #a4d65e;

  /* Pastels */
  --memphis-pastel-pink: #f8b4c8;
  --memphis-pastel-mint: #b8e8d0;
  --memphis-pastel-lavender: #c8b8e8;
  --memphis-pastel-peach: #fcdcc8;
  --memphis-pastel-sky: #b8d8f0;

  /* Functional mappings */
  --memphis-bg-primary: var(--memphis-white);
  --memphis-bg-secondary: var(--memphis-warm-white);
  --memphis-bg-section: var(--memphis-light-gray);
  --memphis-text-primary: var(--memphis-black);
  --memphis-text-secondary: #444444;
  --memphis-text-muted: var(--memphis-cool-gray);
  --memphis-accent-1: var(--memphis-red);
  --memphis-accent-2: var(--memphis-teal);
  --memphis-accent-3: var(--memphis-magenta);
  --memphis-border: var(--memphis-black);
  --memphis-shadow: var(--memphis-black);
}

Palette Approaches

  • Bold palette variant -- flat primaries (red, blue, yellow) on white with black outlines; the most classic Memphis Lite look
  • CMYK palette variant -- teal/aqua, magenta/pink, and purple dominate; slightly more sophisticated, common in graphic design applications
  • Pastel palette variant -- soft mints, pinks, lavenders, and peaches with lighter outlines; gentler, more feminine-coded interpretation
  • High contrast always -- regardless of palette variant, Memphis Lite relies on strong value contrast between background and foreground shapes
  • Black as anchor -- black outlines, squiggle lines, and drop shadows unify all three palette variants and prevent the colors from feeling unmoored
  • No gradients on fills -- shapes are flat-filled; gradients appear only in stippled dot patterns that simulate shading through density rather than smooth blending

Typography

Typeface Characteristics

Memphis Lite typography combines playful irreverence with commercial readability:

  • Outlined, rough-edged script fonts -- hand-drawn, slightly imperfect lettering with visible stroke variation
  • Blocky, geometric sans-serifs -- heavy, squared-off display type as a counterpoint to the scripts
  • Grunge-like layered scripts -- script text with repeated, slightly offset layers suggesting imperfect printing
  • Loose brush-lettering -- casual, energetic brushstroke headlines
  • Mixed weight and style -- bold display type paired with lightweight body text; scripts paired with geometric sans
  • Irregular baselines -- characters that bounce or stagger along the baseline for a carefree feel
  • Decorative drop shadows on type -- hard-edged colored shadows behind letterforms, offset in a consistent direction

Named Typefaces from the Era

These are the typefaces historically associated with Memphis Lite and late-1980s / early-1990s graphic design (commercial/specialty fonts):

  • Brush Script -- classic casual brush lettering widely used in Memphis Lite applications
  • Futura -- the geometric sans-serif backbone of much Memphis-era graphic design
  • Kabel -- geometric sans-serif with Art Deco lineage, common in Memphis-adjacent design
  • VAG Rounded -- soft, rounded sans-serif seen in consumer product packaging
  • Zapf Dingbats -- geometric symbol set (stars, arrows, shapes) used as decorative confetti elements
Font Style Usage
Fredoka One Rounded, bubbly display Hero headlines, section titles -- captures the friendly, rounded Memphis Lite energy
Baloo 2 Rounded, playful sans Section headings, card titles -- warm and approachable
Righteous Geometric retro display Display titles, logo text -- evokes 1980s commercial lettering
Boogaloo Casual brush script Accent text, callouts, decorative labels -- loose, hand-lettered feel
Patrick Hand Casual handwriting Secondary headings, annotations -- natural, informal brushstroke quality
Nunito Rounded geometric sans Body text, UI elements -- clean and readable with soft terminals
Quicksand Geometric rounded sans Body text, navigation -- modern with Memphis-compatible roundness
Varela Round Rounded grotesque sans Body text, clean secondary type -- friendly, unobtrusive
Comfortaa Geometric rounded sans Labels, metadata, small text -- rounded, compact, geometric
Bangers Comic-book display Oversized display, emphasis text -- bold, energetic, attention-grabbing

Typography CSS Example

/* Import Memphis Lite-appropriate Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Boogaloo&family=Patrick+Hand&family=Nunito:wght@400;600;700&family=Quicksand:wght@400;500;700&family=Righteous&family=Bangers&family=Comfortaa:wght@400;700&display=swap');

/* Display / Hero text -- bubbly, rounded */
h1 {
  font-family: 'Fredoka One', 'Baloo 2', cursive;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--memphis-black);
  /* Hard-edged colored drop shadow -- signature Memphis Lite move */
  text-shadow: 4px 4px 0 var(--memphis-teal);
}

/* Section headings -- retro geometric */
h2 {
  font-family: 'Righteous', 'Fredoka One', cursive;
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.02em;
  color: var(--memphis-black);
  text-shadow: 3px 3px 0 var(--memphis-magenta);
}

/* Subheadings -- casual brush script */
h3 {
  font-family: 'Boogaloo', 'Patrick Hand', cursive;
  font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--memphis-purple);
  transform: rotate(-2deg);
}

/* Body text -- rounded, readable sans */
body {
  font-family: 'Nunito', 'Quicksand', 'Varela Round', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--memphis-text-primary);
}

/* Labels, metadata, small accents */
.memphis-label {
  font-family: 'Comfortaa', 'Quicksand', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--memphis-text-muted);
}

/* Oversized display stat / number */
.memphis-stat {
  font-family: 'Bangers', 'Fredoka One', cursive;
  font-size: clamp(3rem, 10vw, 9rem);
  color: var(--memphis-red);
  text-shadow:
    5px 5px 0 var(--memphis-yellow),
    10px 10px 0 var(--memphis-blue);
  line-height: 1;
}

Layout Principles

Grid and Structure

  • White space as canvas -- the background (usually white or very light) functions as a blank canvas; shapes and content float on it as independent visual events
  • Asymmetric composition -- avoid centered, symmetrical layouts; let groups of elements cluster in different zones of the page
  • Grouped shape clusters -- organize decorative elements into distinct clusters, each functioning as a self-contained unit separated by white space
  • Generous padding -- sections need ample breathing room; the white/light background between sections is as important as the content
  • Floating decoration -- geometric shapes, squiggles, and confetti scatter around content areas but do not contain them; decorative elements sit behind or beside content, never boxing it in
  • Layered overlapping -- shapes within a cluster overlap freely, creating depth through stacking order and colored drop shadows
  • Diagonal energy -- elements rotated 5--15 degrees suggest dynamic movement and playful instability
  • Modular, non-rigid grid -- avoid strict columnar grids; instead use a loose modular layout where blocks can be different sizes and alignments

Section Organization

  • Use bold colored bars or wavy dividers between sections -- not clean horizontal rules but thick, brightly colored bands or irregular wavy edges
  • Apply alternating background washes per section -- rotate between white, pale pastel tints, and light gray to create rhythm
  • Create hierarchy through color and scale -- more important elements get larger shapes, bolder colors, and bigger drop shadows; secondary elements use pastels and smaller forms
  • Employ floating geometric accents -- circles, triangles, and zigzag lines positioned absolutely around section content as decorative framing
  • Use cards with colored borders and offset shadows -- content containers have thick, brightly colored borders (2--4px) and hard-edged offset box shadows
  • Apply diagonal stripe backgrounds as section accents -- bold, wide-stripe patterns in contrasting colors behind content areas

CSS/Design Techniques

Solid Drop Shadow (Signature Technique)

/* The hard-edged offset shadow is the single most recognizable Memphis Lite CSS technique */
.memphis-shadow {
  box-shadow: 6px 6px 0 var(--memphis-black);
}

/* Colored shadow variant -- even more playful */
.memphis-shadow-color {
  box-shadow: 6px 6px 0 var(--memphis-teal);
}

/* Multi-layer colored shadow -- stacked offset for depth */
.memphis-shadow-stacked {
  box-shadow:
    4px 4px 0 var(--memphis-magenta),
    8px 8px 0 var(--memphis-teal),
    12px 12px 0 var(--memphis-yellow);
}

Squiggle / Wavy Line Decorations

/* Wavy line divider using SVG background */
.memphis-squiggle {
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10 T150 10 T200 10' stroke='%23E84690' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 200px 20px;
}

/* Thicker squiggle border on a container */
.memphis-squiggle-border {
  border: none;
  position: relative;
}

.memphis-squiggle-border::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10 T150 10 T200 10' stroke='%231A1A1A' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 200px 20px;
}

Stippled / Dot Pattern Fill

/* Dense stipple pattern (signature Memphis Lite texture) */
.memphis-stipple {
  background-image: radial-gradient(circle, var(--memphis-black) 1px, transparent 1px);
  background-size: 6px 6px;
}

/* Colored stipple variant */
.memphis-stipple-color {
  background-color: var(--memphis-pastel-pink);
  background-image: radial-gradient(circle, var(--memphis-magenta) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* Triangle stipple pattern using CSS */
.memphis-stipple-triangle {
  background-image:
    linear-gradient(60deg, var(--memphis-teal) 25%, transparent 25.5%),
    linear-gradient(-60deg, var(--memphis-teal) 25%, transparent 25.5%),
    linear-gradient(60deg, transparent 74.5%, var(--memphis-teal) 75%),
    linear-gradient(-60deg, transparent 74.5%, var(--memphis-teal) 75%);
  background-size: 20px 12px;
  background-position: 0 0, 0 0, 10px 6px, 10px 6px;
  opacity: 0.15;
}

Diagonal Stripe Background

/* Bold diagonal stripes -- used as section backgrounds or shape fills */
.memphis-stripes {
  background: repeating-linear-gradient(
    -45deg,
    var(--memphis-yellow),
    var(--memphis-yellow) 10px,
    var(--memphis-white) 10px,
    var(--memphis-white) 20px
  );
}

/* Thinner, subtler stripes for background accents */
.memphis-stripes-subtle {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(0, 181, 173, 0.08) 6px,
    rgba(0, 181, 173, 0.08) 12px
  );
}

Confetti / Scattered Shapes (CSS-only)

/* Confetti scatter using box-shadow on pseudo-elements */
.memphis-confetti {
  position: relative;
}

.memphis-confetti::before,
.memphis-confetti::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* Circles confetti */
.memphis-confetti::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 10%;
  left: 5%;
  background: var(--memphis-red);
  box-shadow:
    60px 30px 0 4px var(--memphis-blue),
    150px -20px 0 2px var(--memphis-yellow),
    280px 50px 0 5px var(--memphis-magenta),
    400px -10px 0 3px var(--memphis-teal),
    520px 40px 0 6px var(--memphis-orange),
    650px -30px 0 2px var(--memphis-purple),
    780px 20px 0 4px var(--memphis-lime);
}

/* Square/diamond confetti */
.memphis-confetti::after {
  width: 8px;
  height: 8px;
  top: 70%;
  left: 8%;
  background: var(--memphis-teal);
  transform: rotate(45deg);
  box-shadow:
    80px -40px 0 3px var(--memphis-magenta),
    200px 20px 0 2px var(--memphis-red),
    340px -30px 0 4px var(--memphis-yellow),
    470px 15px 0 3px var(--memphis-blue),
    600px -20px 0 2px var(--memphis-orange),
    720px 30px 0 5px var(--memphis-purple);
}

Memphis Card / Panel

.memphis-card {
  background: var(--memphis-white);
  border: 3px solid var(--memphis-black);
  padding: 2rem;
  position: relative;
  /* Hard-edged offset shadow -- the Memphis Lite signature */
  box-shadow: 6px 6px 0 var(--memphis-black);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.memphis-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--memphis-black);
}

/* Card with colored border and matching shadow */
.memphis-card--magenta {
  border-color: var(--memphis-magenta);
  box-shadow: 6px 6px 0 var(--memphis-magenta);
}

.memphis-card--teal {
  border-color: var(--memphis-teal);
  box-shadow: 6px 6px 0 var(--memphis-teal);
}

.memphis-card--purple {
  border-color: var(--memphis-purple);
  box-shadow: 6px 6px 0 var(--memphis-purple);
}

Floating Geometric Decorations (Positioned Accents)

/* Decorative circle accent */
.memphis-deco-circle {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--memphis-magenta);
  background: transparent;
  z-index: -1;
}

/* Decorative triangle accent */
.memphis-deco-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 52px solid var(--memphis-yellow);
  z-index: -1;
  transform: rotate(15deg);
}

/* Decorative zigzag / lightning bolt line */
.memphis-deco-zigzag {
  position: absolute;
  width: 100px;
  height: 30px;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpolyline points='0,15 12,5 24,25 36,5 48,25 60,5 72,25 84,5 100,15' stroke='%23E8333A' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Cross / plus sign accent */
.memphis-deco-cross {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: -1;
}

.memphis-deco-cross::before,
.memphis-deco-cross::after {
  content: '';
  position: absolute;
  background: var(--memphis-blue);
}

.memphis-deco-cross::before {
  width: 100%;
  height: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.memphis-deco-cross::after {
  width: 8px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

Memphis Button

.memphis-button {
  display: inline-block;
  padding: 0.8rem 2.2rem;
  font-family: 'Fredoka One', 'Nunito', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--memphis-white);
  background: var(--memphis-red);
  border: 3px solid var(--memphis-black);
  cursor: pointer;
  position: relative;
  box-shadow: 4px 4px 0 var(--memphis-black);
  transition: all 0.15s ease;
  text-decoration: none;
}

.memphis-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--memphis-black);
}

.memphis-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--memphis-black);
}

/* Color variants */
.memphis-button--teal {
  background: var(--memphis-teal);
}

.memphis-button--magenta {
  background: var(--memphis-magenta);
}

.memphis-button--yellow {
  background: var(--memphis-yellow);
  color: var(--memphis-black);
}

Wavy Section Divider

/* Wavy edge between sections using clip-path */
.memphis-wave-top {
  clip-path: polygon(
    0% 15%, 5% 8%, 10% 12%, 15% 5%, 20% 10%, 25% 3%,
    30% 8%, 35% 2%, 40% 10%, 45% 5%, 50% 12%, 55% 4%,
    60% 9%, 65% 3%, 70% 11%, 75% 6%, 80% 10%, 85% 4%,
    90% 8%, 95% 3%, 100% 10%,
    100% 100%, 0% 100%
  );
  padding-top: 4rem;
}

/* Bold colored divider bar */
.memphis-divider-bar {
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--memphis-red) 0%,
    var(--memphis-red) 20%,
    var(--memphis-yellow) 20%,
    var(--memphis-yellow) 40%,
    var(--memphis-teal) 40%,
    var(--memphis-teal) 60%,
    var(--memphis-magenta) 60%,
    var(--memphis-magenta) 80%,
    var(--memphis-blue) 80%,
    var(--memphis-blue) 100%
  );
}

Highlight / Emphasis Treatment

/* Thick colored underline (marker style) */
.memphis-highlight {
  display: inline;
  background-image: linear-gradient(
    transparent 60%,
    var(--memphis-yellow) 60%,
    var(--memphis-yellow) 90%,
    transparent 90%
  );
  padding: 0 0.1em;
}

/* Rotated accent label / badge */
.memphis-badge {
  display: inline-block;
  font-family: 'Comfortaa', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3em 0.8em;
  background: var(--memphis-magenta);
  color: var(--memphis-white);
  border: 2px solid var(--memphis-black);
  box-shadow: 3px 3px 0 var(--memphis-black);
  transform: rotate(-3deg);
}

Animated Floating Shapes (Decorative)

/* Gentle floating animation for decorative elements */
@keyframes memphis-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(3deg); }
  50% { transform: translateY(-4px) rotate(-2deg); }
  75% { transform: translateY(-10px) rotate(1deg); }
}

@keyframes memphis-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.memphis-float {
  animation: memphis-float 6s ease-in-out infinite;
}

.memphis-spin {
  animation: memphis-spin-slow 20s linear infinite;
}

Materials and Textures (Visual Metaphors for Web)

Physical Memphis Lite materials and their web equivalents:

Physical Material Web Equivalent
Laminate / Formica surfaces Flat, solid-color background-color with no texture or gradient; clean, glossy impression
Chrome and metallic accents Linear gradient simulating reflective sheen: linear-gradient(135deg, #e0e0e0, #b0b0b0, #e0e0e0)
Glass panels Semi-transparent overlays: background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px)
Terrazzo flooring Small scattered colored dots/shapes on a neutral ground using radial-gradient or SVG patterns
Neon tube signage Bright color + glow effect: text-shadow: 0 0 10px currentColor, 0 0 30px currentColor
Patterned upholstery fabric CSS repeating patterns (stripes, dots, triangles) as background fills on large surfaces
Painted MDF / particleboard Bold flat color fills with visible 2--3px black borders suggesting constructed, assembled objects
Ceramic tile Grid of colored squares using background-size and background-image repeating gradients
Spray-painted surfaces Solid color with slight radial gradient bloom suggesting uneven paint application
Plastic / injection-molded forms Rounded corners (border-radius: 12px--24px), smooth gradients, glossy highlights

Cultural References and Influences

The following define the Memphis Lite visual language and serve as design references:

  • Solo Jazz cup pattern (c. 1991) -- the teal-and-purple brushstroke design on disposable cups; the single most iconic Memphis Lite artifact
  • Saved by the Bell title sequence and set design (1989--1993) -- bright geometric shapes, bold primaries, confetti patterns on white backgrounds
  • Taco Bell restaurant interiors (1990s redesign) -- teal, magenta, and purple geometric shapes on white and light surfaces
  • Target Food Avenue -- retail food court design using Memphis Lite color and pattern language
  • Polly Pocket packaging and toy design -- pastel Memphis Lite applied to children's products
  • Portland International Airport carpet -- the iconic teal geometric pattern on a blue-purple ground
  • Shopping mall interiors (late 1980s--mid 1990s) -- food courts, directory kiosks, and signage using Memphis Lite shapes and colors
  • Car accent striping -- decorative pinstripe and graphic packages on vehicles using squiggle and geometric motifs

Television and Media

  • Saved by the Bell -- the canonical Memphis Lite television show
  • Mighty Morphin Power Rangers -- bold color blocking and geometric set design
  • Rocko's Modern Life -- Memphis-influenced background design
  • Doug (Nickelodeon) -- simplified Memphis Lite color palette in backgrounds
  • Jem and the Holograms -- bold color and geometric pattern language
  • Fox Kids programming block -- on-air graphics with Memphis Lite sensibility
  • VeggieTales -- simplified Memphis Lite in set design and packaging
Aesthetic Relationship to Memphis Lite
Memphis Design Parent aesthetic; the original Italian design movement (1981--1987) that Memphis Lite commercializes and softens for mass consumption
Wacky Pomo Sibling aesthetic; shares the postmodern playfulness but pushes further into absurdist, cartoonish territory
Factory Pomo Sibling aesthetic; the mass-manufactured, consumer-product expression of postmodern design, heavily overlapping with Memphis Lite
Rad Dog Shares the bold 1990s energy, neon colors, and extreme sports / youth culture tie-ins
Pacific Punk Wave Overlaps in pastel-meets-bold color palettes and geometric pattern language with a coastal spin
Laser Grid Shares the neon color palette and geometric line work; Laser Grid is more technological and less organic
Synthwave Modern retrowave aesthetic that borrows Memphis Lite's neon colors and geometric forms but applies them to a darker, nighttime palette
Vaporwave Nostalgic re-appropriation that samples Memphis Lite visual elements through a hazy, ironic, slowed-down lens
Frasurbane Contemporaneous upscale aesthetic; Frasurbane represents the refined, minimal side of 1990s design while Memphis Lite represents the exuberant, maximalist side
Global Village Coffeehouse Contemporaneous aesthetic; shares some earthy/warm tones but replaces Memphis Lite's geometry with organic, world-music-influenced textures
Corporate Grunge The anti-Memphis Lite; same era but opposite approach -- where Memphis Lite is bright and playful, Corporate Grunge is dark and raw
Diner Shares Art Deco and Googie influences but applies them to a mid-century Americana context rather than postmodern abstraction
Art Deco Grandparent influence; Memphis Design (and by extension Memphis Lite) borrowed Art Deco's rhythmic geometric patterns and bold color contrast
Googie Shared ancestor; Memphis Lite inherits Googie's Space-Age curves, misaligned borders, and exuberant geometry
Y2K Futurism Chronological successor; Y2K Futurism replaced Memphis Lite's flat geometry with glossy, translucent, bubbly 3D forms

Quick-Start: Minimal Memphis Lite Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Memphis Lite Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Boogaloo&family=Nunito:wght@400;600;700&family=Righteous&family=Comfortaa:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --memphis-white: #ffffff;
      --memphis-warm-white: #f5f0e8;
      --memphis-light-gray: #e8e4e0;
      --memphis-black: #1a1a1a;
      --memphis-red: #e8333a;
      --memphis-blue: #2b7fc3;
      --memphis-yellow: #f5d623;
      --memphis-magenta: #e84690;
      --memphis-teal: #00b5ad;
      --memphis-purple: #7b4ea3;
      --memphis-orange: #f28c28;
      --memphis-lime: #a4d65e;
      --memphis-pastel-pink: #f8b4c8;
      --memphis-pastel-mint: #b8e8d0;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--memphis-white);
      color: var(--memphis-black);
      font-family: 'Nunito', 'Quicksand', sans-serif;
      font-weight: 400;
      line-height: 1.7;
      overflow-x: hidden;
    }

    h1, h2, h3 {
      font-family: 'Fredoka One', cursive;
    }

    /* --- Hero Section --- */
    .hero {
      text-align: center;
      padding: 5rem 2rem 4rem;
      position: relative;
    }

    .hero h1 {
      font-size: clamp(2.8rem, 7vw, 5.5rem);
      line-height: 1.1;
      color: var(--memphis-black);
      text-shadow: 5px 5px 0 var(--memphis-teal);
      margin-bottom: 1rem;
    }

    .hero p {
      font-family: 'Comfortaa', sans-serif;
      font-size: 1.1rem;
      color: #666;
      max-width: 600px;
      margin: 0 auto;
    }

    /* Floating decorative shapes */
    .deco-circle {
      position: absolute;
      border-radius: 50%;
      border: 3px solid var(--memphis-magenta);
      z-index: -1;
    }

    .deco-circle--1 {
      width: 80px; height: 80px;
      top: 10%; left: 5%;
    }

    .deco-circle--2 {
      width: 40px; height: 40px;
      background: var(--memphis-yellow);
      border: none;
      top: 20%; right: 10%;
    }

    .deco-triangle {
      position: absolute;
      width: 0; height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 43px solid var(--memphis-teal);
      z-index: -1;
      transform: rotate(15deg);
      top: 60%; left: 8%;
    }

    .deco-cross {
      position: absolute;
      width: 24px; height: 24px;
      z-index: -1;
      top: 15%; right: 20%;
    }

    .deco-cross::before,
    .deco-cross::after {
      content: '';
      position: absolute;
      background: var(--memphis-red);
    }

    .deco-cross::before {
      width: 100%; height: 6px;
      top: 50%; transform: translateY(-50%);
    }

    .deco-cross::after {
      width: 6px; height: 100%;
      left: 50%; transform: translateX(-50%);
    }

    /* --- Color Bar Divider --- */
    .memphis-divider {
      height: 6px;
      background: linear-gradient(
        90deg,
        var(--memphis-red) 0%, var(--memphis-red) 20%,
        var(--memphis-yellow) 20%, var(--memphis-yellow) 40%,
        var(--memphis-teal) 40%, var(--memphis-teal) 60%,
        var(--memphis-magenta) 60%, var(--memphis-magenta) 80%,
        var(--memphis-blue) 80%, var(--memphis-blue) 100%
      );
    }

    /* --- Content Section --- */
    section {
      max-width: 900px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

    section h2 {
      font-family: 'Righteous', cursive;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      text-shadow: 3px 3px 0 var(--memphis-magenta);
      margin-bottom: 2rem;
    }

    /* --- Memphis Card --- */
    .memphis-card {
      background: var(--memphis-white);
      border: 3px solid var(--memphis-black);
      padding: 2rem;
      margin: 1.5rem 0;
      box-shadow: 6px 6px 0 var(--memphis-black);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .memphis-card:hover {
      transform: translate(-2px, -2px);
      box-shadow: 8px 8px 0 var(--memphis-black);
    }

    .memphis-card h3 {
      font-family: 'Boogaloo', cursive;
      font-size: 1.4rem;
      color: var(--memphis-purple);
      margin-bottom: 0.5rem;
    }

    /* --- Memphis Button --- */
    .memphis-button {
      display: inline-block;
      padding: 0.8rem 2rem;
      font-family: 'Fredoka One', cursive;
      font-size: 1rem;
      text-transform: uppercase;
      color: var(--memphis-white);
      background: var(--memphis-red);
      border: 3px solid var(--memphis-black);
      box-shadow: 4px 4px 0 var(--memphis-black);
      cursor: pointer;
      text-decoration: none;
      transition: all 0.15s ease;
    }

    .memphis-button:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--memphis-black);
    }

    .memphis-button:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 var(--memphis-black);
    }

    /* --- Stipple Pattern Section Background --- */
    .stipple-bg {
      background-color: var(--memphis-pastel-mint);
      background-image: radial-gradient(circle, var(--memphis-teal) 1px, transparent 1px);
      background-size: 8px 8px;
    }

    /* --- Badge / Label --- */
    .memphis-badge {
      display: inline-block;
      font-family: 'Comfortaa', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 0.3em 0.8em;
      background: var(--memphis-magenta);
      color: var(--memphis-white);
      border: 2px solid var(--memphis-black);
      box-shadow: 3px 3px 0 var(--memphis-black);
      transform: rotate(-3deg);
    }

    a {
      color: var(--memphis-blue);
      text-decoration: none;
      border-bottom: 2px solid var(--memphis-yellow);
      transition: all 0.15s;
    }

    a:hover {
      color: var(--memphis-magenta);
      border-bottom-color: var(--memphis-magenta);
    }
  </style>
</head>
<body>
  <div class="hero">
    <!-- Floating decorations -->
    <div class="deco-circle deco-circle--1"></div>
    <div class="deco-circle deco-circle--2"></div>
    <div class="deco-triangle"></div>
    <div class="deco-cross"></div>

    <h1>Title Here</h1>
    <p>A playful, colorful subheading with geometric energy</p>
  </div>

  <div class="memphis-divider"></div>

  <section>
    <h2>Section Heading</h2>
    <div class="memphis-card">
      <h3>Card Title</h3>
      <p>Content styled with the Memphis Lite aesthetic. Bold borders, flat colors, hard-edged shadows, and geometric playfulness.</p>
      <br>
      <span class="memphis-badge">Featured</span>
    </div>
    <div class="memphis-card">
      <h3>Another Card</h3>
      <p>Squiggles, confetti shapes, and bright primaries on a clean white background. Exuberant yet structured.</p>
      <br>
      <a href="#" class="memphis-button">Click Me</a>
    </div>
  </section>
</body>
</html>
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.