Agence WagnerAgence Wagner
FRENDEELS
Back to designs
RétroSombreMinimaliste
Preview

Mallsoft Design Reference

Mallsoft is a design aesthetic rooted in the atmosphere, architecture, and sensory experience of late 20th-century shopping malls -- particularly the American indoor mega-mall of the 1980s and 1990s. It captures two emotional poles simultaneously: the golden-era mall, bustling with shoppers under bright fluorescent lights, and the dead mall, a hauntingly vacant space of flickering lights, shuttered storefronts, and physical decay. The aesthetic is a subgenre of Vaporwave, inheriting its nostalgic, anti-capitalist, and liminal qualities but focusing them entirely on the commercial architecture of consumerism -- massive glass atriums, multi-level walkways, indoor fountains, potted palms, food courts, and neon signage. Visually, Mallsoft oscillates between warm pastel comfort and eerie, reverb-soaked emptiness, evoking the feeling of wandering an enclosed commercial world that exists outside of natural time.

Visual Characteristics

Core Motifs and Patterns

  • Massive glass atriums -- soaring ceilings with skylights, exposed structural steel, and cascading natural light filtered through tinted glass
  • Multi-level walkways and escalators -- tiered open-plan architecture with railings, balconies, and visible circulation paths
  • Indoor fountains and water features -- decorative pools, cascading waterfalls, coin-filled basins as central gathering points
  • Potted tropical plants -- large palms, ficus trees, and ferns in oversized planters lining corridors
  • Neon signage and light fixtures -- glowing tube neon in pink, teal, and purple; backlit acrylic signs; fluorescent tube lighting
  • Memphis Design elements -- bold geometric shapes, zigzag lines, squiggly patterns, terrazzo-inspired textures, playful postmodern ornamentation
  • Terrazzo flooring -- speckled composite surfaces in muted pinks, grays, and creams with irregular chip patterns
  • Food court imagery -- orange plastic seating, menu boards with backlit transparencies, branded fast-food typography
  • Low-fidelity visual filters -- VHS grain, washed-out color, soft focus, and slight chromatic aberration to evoke reconstructed or half-remembered spaces
  • Reflective surfaces -- polished marble, mirrored columns, chrome railings, and glass storefronts creating layered visual depth
  • Vacant storefronts and decay (dead mall variant) -- empty display windows, peeling signage, water stains on drop ceilings, flickering fluorescent tubes

Design Principles

  • Nostalgia as primary emotion -- every element should trigger a half-remembered sensory memory of being in a mall as a child
  • Liminality and transit -- the spaces depicted are not destinations but passages; corridors, escalators, walkways between stores
  • Comfort alongside unease -- warmth and familiarity coexist with a subtle sense of emptiness and abandonment
  • Enclosed artificiality -- no natural sky, no outside; the mall is a self-contained universe with its own climate and lighting
  • Hyper-consumerism made ambient -- brand logos, store signage, and product displays exist as environmental texture rather than active selling
  • Cavernous spatial acoustics -- visual design should suggest reverberant, echo-filled spaces; large open volumes with distant walls
  • Temporal displacement -- the era is deliberately vague, somewhere in 1985-2002, with no specific anchoring

Color Palette

Primary Scheme

Role Colors
Neon Accent / Primary Hot pink, magenta, neon rose
Cool Accent / Secondary Teal, cyan, mint green
Atmospheric / Tertiary Lavender, soft purple, mauve
Neutral / Background Off-white, warm cream, pale gray
Metallic / Structural Chrome silver, brushed steel
Warm Accent / Highlight Gold, amber, champagne

Detailed Palette

Color Hex (suggested) Usage
Neon Pink #FF6B9D, #FF3F8E Primary neon accents, signage glow, decorative elements
Hot Magenta #E91E8C, #D81B7F Bold headings, neon tubing effects, hover states
Soft Pink #F8BBD0, #F48FB1 Background tints, card surfaces, gentle highlights
Blush Cream #FDE4EC, #FCE4EC Soft background wash, section dividers
Mall Teal #26C6DA, #00BCD4 Secondary accent, water features, cool-tone neon
Mint Green #80CBC4, #A7FFEB Fresh accents, plant-life references, Memphis patterns
Deep Teal #00897B, #00796B Darker accent, contrast elements, footer areas
Lavender #CE93D8, #BA68C8 Atmospheric purple glow, ambient lighting effects
Soft Purple #E1BEE7, #F3E5F5 Light background tints, card overlays
Deep Purple #7B1FA2, #6A1B9A Deep accent, neon tubing, contrast text
Mall White #FAF9F7, #F5F0EB Primary background, warm off-white (not pure white)
Cream #FFF8E1, #FFFDE7 Warm neutral background, food-court warmth
Terrazzo Gray #E0DCD8, #D7CCC8 Flooring references, subtle backgrounds, dividers
Fluorescent White #F5F5F5, #FAFAFA Bright-lit areas, header backgrounds, clinical glow
Chrome Silver #CFD8DC, #B0BEC5 Metallic accents, railings, structural elements
Gold #FFD54F, #FFC107 Luxury accent, premium signage, decorative trim
Champagne #F5E6CC, #EFDBBD Warm metallic neutral, border accents
VHS Black #1A1A2E, #16213E Dark mode backgrounds, dead-mall variant, text
Neon Glow Pink rgba(255, 107, 157, 0.4) Neon glow effects, box shadows, ambient light
Neon Glow Teal rgba(38, 198, 218, 0.4) Teal neon glow, water-feature reflections
Neon Glow Purple rgba(186, 104, 200, 0.35) Purple atmospheric glow, ambient haze
Fluorescent Flicker rgba(255, 255, 255, 0.08) Subtle overlay flicker effect for dead-mall mood

Suggested CSS Custom Properties

:root {
  /* Neon pinks */
  --mall-pink: #ff6b9d;
  --mall-pink-hot: #ff3f8e;
  --mall-pink-soft: #f8bbd0;
  --mall-pink-blush: #fde4ec;
  --mall-magenta: #e91e8c;

  /* Teals and mints */
  --mall-teal: #26c6da;
  --mall-teal-deep: #00897b;
  --mall-mint: #80cbc4;
  --mall-mint-bright: #a7ffeb;
  --mall-cyan: #00bcd4;

  /* Purples */
  --mall-lavender: #ce93d8;
  --mall-purple: #ba68c8;
  --mall-purple-soft: #e1bee7;
  --mall-purple-deep: #7b1fa2;

  /* Warm neutrals */
  --mall-white: #faf9f7;
  --mall-cream: #fff8e1;
  --mall-champagne: #f5e6cc;
  --mall-gold: #ffd54f;
  --mall-gold-deep: #ffc107;

  /* Cool neutrals */
  --mall-gray: #e0dcd8;
  --mall-gray-cool: #cfd8dc;
  --mall-chrome: #b0bec5;
  --mall-fluorescent: #fafafa;

  /* Darks */
  --mall-dark: #1a1a2e;
  --mall-dark-blue: #16213e;
  --mall-text: #37343d;
  --mall-text-light: #6d6875;

  /* Neon glows (for box-shadow / text-shadow) */
  --mall-glow-pink: rgba(255, 107, 157, 0.4);
  --mall-glow-teal: rgba(38, 198, 218, 0.4);
  --mall-glow-purple: rgba(186, 104, 200, 0.35);
  --mall-glow-pink-strong: rgba(255, 63, 142, 0.6);
  --mall-glow-teal-strong: rgba(0, 188, 212, 0.5);

  /* Transparency / overlay */
  --mall-glass: rgba(255, 255, 255, 0.15);
  --mall-glass-warm: rgba(255, 248, 225, 0.2);
  --mall-glass-border: rgba(255, 255, 255, 0.25);
  --mall-shadow: rgba(0, 0, 0, 0.15);
  --mall-shadow-deep: rgba(0, 0, 0, 0.3);
  --mall-flicker: rgba(255, 255, 255, 0.08);

  /* Functional mappings */
  --mall-bg-primary: var(--mall-white);
  --mall-bg-secondary: var(--mall-cream);
  --mall-bg-surface: var(--mall-glass);
  --mall-text-primary: var(--mall-text);
  --mall-text-secondary: var(--mall-text-light);
  --mall-accent: var(--mall-pink);
  --mall-accent-secondary: var(--mall-teal);
  --mall-border: var(--mall-glass-border);
}

Approaches

  • Warm off-white base, never pure white -- the mall is lit by fluorescent tubes and skylights, giving surfaces a slightly warm, yellowish cast
  • Pink-teal-purple triad -- the three neon colors constantly interplay, with pink dominant, teal as contrast, and purple as atmospheric connector
  • Neon against neutral -- bright accent colors appear as glowing signage and decorative elements against vast expanses of cream, gray, and chrome
  • Pastel fields with neon punctuation -- large areas of soft pastel are interrupted by sharp neon accents
  • Terrazzo and speckle textures -- visual noise and granularity in backgrounds, referencing mall flooring
  • Gold for premium -- sparingly applied gold and champagne tones reference the aspirational, commercial nature of the mall

Typography

Typeface Characteristics

Mallsoft typography reflects 1980s-90s commercial signage, department store branding, and Memphis Design influence:

  • Geometric sans-serifs -- clean, structured letterforms associated with corporate retail signage (department stores, directories)
  • Extended and wide-set display faces -- stretched proportions for headings, evoking mall directory boards and storefront lettering
  • Bold to black weight for headlines -- commanding and commercial, like store signage viewed from across an atrium
  • Italic or oblique for decorative flair -- suggesting motion and the Memphis Design influence
  • Generous letter-spacing in uppercase -- spaced-out caps for a premium retail feel (think Nordstrom, Saks signage)
  • Rounded or soft geometric for body -- approachable and warm for readable text, like in-store promotional materials
  • Occasional script/cursive accents -- for a touch of 80s/90s elegance, like food court or boutique signage
  • Neon sign quality -- display text should feel like it could be rendered in tube neon

Recommended Web Fonts (Google Fonts / Free)

Font Style Usage
Josefin Sans Geometric, elegant, wide Headlines, display text -- captures the clean retail signage aesthetic
Poppins Geometric, clean, modern Headlines and body -- versatile with a commercial feel
Montserrat Geometric, extended options Headlines, navigation -- excellent for wide-spaced uppercase signage
Comfortaa Rounded, geometric Display text, decorative headings -- soft and inviting like mall branding
Quicksand Rounded, geometric Subheadings, labels -- playful Memphis-era friendliness
Space Grotesk Geometric, slightly technical Body text, UI -- clean with a hint of 80s futurism
DM Sans Clean geometric sans Body text -- highly legible, neutral retail feel
Righteous Retro display, slightly condensed Hero text, neon-sign headings -- bold 80s commercial energy
Lobster Two Script/cursive display Decorative accents -- sparingly, for boutique/food-court flair
Bungee Shade Layered, inline display Special headings -- captures the dimensional, colorful Memphis energy

Note: For maximum authenticity, Josefin Sans captures the geometric elegance of mall-era department store signage, while Comfortaa or Quicksand deliver the rounded friendliness of in-store promotional materials. Use Montserrat in wide-spaced uppercase for directory-board and wayfinding text.

Typography CSS Example

/* Headlines -- bold retail signage */
h1, h2, h3 {
  font-family: 'Josefin Sans', 'Poppins', 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mall-text);
}

/* Display / Hero text -- neon sign quality */
.mall-display {
  font-family: 'Josefin Sans', 'Righteous', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--mall-pink);
  text-shadow:
    0 0 10px var(--mall-glow-pink),
    0 0 40px var(--mall-glow-pink),
    0 2px 4px var(--mall-shadow);
}

/* Body text */
body {
  font-family: 'DM Sans', 'Space Grotesk', 'Poppins', sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: var(--mall-text-secondary);
  -webkit-font-smoothing: antialiased;
}

/* Wayfinding / directory text */
.mall-directory {
  font-family: 'Montserrat', 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mall-chrome);
}

/* Decorative / boutique accent */
.mall-script {
  font-family: 'Lobster Two', cursive;
  font-size: 1.4rem;
  font-weight: 400;
  font-style: italic;
  color: var(--mall-lavender);
}

/* Rounded friendly text -- promotions, callouts */
.mall-friendly {
  font-family: 'Comfortaa', 'Quicksand', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mall-teal);
}

/* Navigation labels */
.mall-label {
  font-family: 'Josefin Sans', 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mall-text-light);
}

Layout Principles

Grid and Structure

  • Wide, open compositions -- layouts should feel spacious and airy, like a mall atrium; generous whitespace represents the cavernous interior
  • Centered content corridors -- content flows down a central axis, like walking through a mall's main concourse
  • Multi-level visual hierarchy -- use layered elements (cards overlapping, elements at different z-depths) to evoke the tiered, multi-story architecture
  • Full-width hero sections -- panoramic header areas suggesting the experience of entering a mall's grand entrance
  • Grid-based card layouts -- 2-3 column grids of cards referencing storefront windows lining a corridor
  • Asymmetric Memphis-influenced compositions -- occasional off-center elements, diagonal lines, and unexpected placements inspired by Memphis Design

Section Organization

  • Use terrazzo-textured dividers or subtle speckle patterns between sections rather than clean lines
  • Apply frosted glass panels with warm tints for content grouping -- referencing skylight-filtered light through glass railings
  • Create neon-highlighted section headers -- text with glow effects marking major sections like mall directory categories
  • Employ card containers with soft shadows -- each card is a "storefront" in the layout, with its own identity
  • Use ambient gradient backgrounds -- soft transitions between cream, pale pink, and lavender across page sections
  • Add decorative geometric shapes -- Memphis-style triangles, circles, zigzags, and squiggles as background ornamentation
  • Incorporate subtle parallax or layered depth -- background elements moving at different rates to suggest spatial depth

Spatial Rhythm

  • Generous padding -- 3-5rem between sections; the mall has vast corridors, not cramped aisles
  • Soft rounded corners -- 12-20px border-radius on containers, referencing the curved architecture and rounded forms of 80s/90s interior design
  • Visible negative space -- empty areas are intentional, representing the open atrium floor
  • Anchored decorative elements -- potted plants (green accent blocks), fountain motifs (circular radial gradients), and railing lines (horizontal rules) as recurring structural elements

CSS/Design Techniques

Mall Atrium Background

/* Warm, fluorescent-lit mall interior background */
.mall-atrium-bg {
  background: linear-gradient(
    180deg,
    #faf9f7 0%,
    #fff8e1 30%,
    #fde4ec 70%,
    #f3e5f5 100%
  );
  min-height: 100vh;
}

/* Dead mall variant -- dim, blue-tinted, unsettling */
.mall-dead-bg {
  background: linear-gradient(
    180deg,
    #1a1a2e 0%,
    #16213e 40%,
    #0f3460 70%,
    #1a1a2e 100%
  );
  min-height: 100vh;
}

/* Skylight-from-above effect */
.mall-skylight-bg {
  background:
    radial-gradient(
      ellipse 60% 40% at 50% 0%,
      rgba(255, 248, 225, 0.6) 0%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #faf9f7 0%,
      #f5f0eb 100%
    );
}

Neon Sign Text Effect

/* Glowing neon text -- the signature Mallsoft typography treatment */
.mall-neon {
  color: var(--mall-pink);
  text-shadow:
    0 0 7px var(--mall-glow-pink),
    0 0 20px var(--mall-glow-pink),
    0 0 42px var(--mall-glow-pink-strong),
    0 0 82px var(--mall-glow-pink-strong);
}

/* Teal neon variant */
.mall-neon--teal {
  color: var(--mall-teal);
  text-shadow:
    0 0 7px var(--mall-glow-teal),
    0 0 20px var(--mall-glow-teal),
    0 0 42px var(--mall-glow-teal-strong),
    0 0 82px var(--mall-glow-teal-strong);
}

/* Purple neon variant */
.mall-neon--purple {
  color: var(--mall-lavender);
  text-shadow:
    0 0 7px var(--mall-glow-purple),
    0 0 20px var(--mall-glow-purple),
    0 0 42px rgba(186, 104, 200, 0.5),
    0 0 82px rgba(186, 104, 200, 0.5);
}

/* Flickering neon animation (dead mall variant) */
@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 7px var(--mall-glow-pink),
      0 0 20px var(--mall-glow-pink),
      0 0 42px var(--mall-glow-pink-strong);
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.6;
  }
}

.mall-neon--flicker {
  animation: neon-flicker 3s infinite;
}

Terrazzo Texture Background

/* Terrazzo flooring pattern using CSS -- speckled composite surface */
.mall-terrazzo {
  background-color: #f5f0eb;
  background-image:
    radial-gradient(circle 3px at 15% 25%, #f8bbd0 1.5px, transparent 2px),
    radial-gradient(circle 2px at 45% 60%, #b0bec5 1px, transparent 1.5px),
    radial-gradient(circle 4px at 70% 20%, #e1bee7 2px, transparent 3px),
    radial-gradient(circle 2.5px at 30% 80%, #80cbc4 1.2px, transparent 2px),
    radial-gradient(circle 3px at 85% 45%, #ffd54f 1.5px, transparent 2px),
    radial-gradient(circle 2px at 55% 35%, #d7ccc8 1px, transparent 1.5px),
    radial-gradient(circle 3.5px at 10% 70%, #f48fb1 1.8px, transparent 2.5px),
    radial-gradient(circle 2px at 90% 75%, #ce93d8 1px, transparent 1.5px),
    radial-gradient(circle 3px at 40% 10%, #cfd8dc 1.5px, transparent 2px),
    radial-gradient(circle 2.5px at 65% 85%, #80cbc4 1.2px, transparent 2px);
}

Glass Atrium Panel

/* Frosted glass panel -- mall railing / skylight divider feel */
.mall-glass-panel {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 2.5rem;
  position: relative;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Warm-tinted glass variant */
.mall-glass-panel--warm {
  background: rgba(255, 248, 225, 0.25);
  border-color: rgba(255, 215, 79, 0.15);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 60px rgba(255, 107, 157, 0.05);
}

Storefront Card

/* Content card styled like a mall storefront window */
.mall-storefront {
  background: linear-gradient(
    180deg,
    var(--mall-white) 0%,
    #f5f0eb 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Top accent strip -- like a neon storefront sign */
.mall-storefront::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--mall-pink) 0%,
    var(--mall-teal) 50%,
    var(--mall-lavender) 100%
  );
}

.mall-storefront:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.08),
    0 0 20px var(--mall-glow-pink);
}

Memphis Geometric Decorations

/* Memphis Design decorative elements */
.mall-memphis-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 52px solid var(--mall-pink-soft);
  opacity: 0.3;
  pointer-events: none;
  transform: rotate(15deg);
}

.mall-memphis-circle {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid var(--mall-teal);
  opacity: 0.2;
  pointer-events: none;
}

.mall-memphis-zigzag {
  position: absolute;
  width: 120px;
  height: 20px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 8px,
    var(--mall-lavender) 8px,
    var(--mall-lavender) 10px
  );
  opacity: 0.15;
  pointer-events: none;
  transform: rotate(-8deg);
}

/* Squiggly line (using SVG-in-CSS) */
.mall-memphis-squiggle {
  position: absolute;
  width: 100px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M0 15 Q12.5 0 25 15 Q37.5 30 50 15 Q62.5 0 75 15 Q87.5 30 100 15' fill='none' stroke='%23ce93d8' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat;
  background-size: contain;
  opacity: 0.2;
  pointer-events: none;
}

Neon Border Glow

/* Neon-glowing border for containers */
.mall-neon-border {
  border: 2px solid var(--mall-pink);
  border-radius: 14px;
  box-shadow:
    0 0 8px var(--mall-glow-pink),
    0 0 20px var(--mall-glow-pink),
    inset 0 0 8px var(--mall-glow-pink);
}

.mall-neon-border--teal {
  border-color: var(--mall-teal);
  box-shadow:
    0 0 8px var(--mall-glow-teal),
    0 0 20px var(--mall-glow-teal),
    inset 0 0 8px var(--mall-glow-teal);
}

Fluorescent Flicker Overlay (Dead Mall)

/* Subtle fluorescent light flicker overlay */
@keyframes fluorescent-flicker {
  0%, 92%, 94%, 96%, 100% {
    opacity: 0;
  }
  93% {
    opacity: 0.04;
  }
  95% {
    opacity: 0.08;
  }
}

.mall-flicker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mall-fluorescent);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  animation: fluorescent-flicker 4s ease-in-out infinite;
}

VHS / Low-Fidelity Filter

/* VHS grain and scan-line overlay for nostalgic warmth */
.mall-vhs-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 998;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.02) 0px,
      rgba(0, 0, 0, 0.02) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: multiply;
}

/* Slight color shift for VHS feel */
.mall-vhs-color {
  filter: saturate(0.88) contrast(1.05) brightness(1.02);
}

Fountain / Water Feature Decorative Element

/* Circular radial gradient suggesting a mall fountain viewed from above */
.mall-fountain {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(38, 198, 218, 0.15) 0%,
      rgba(38, 198, 218, 0.08) 30%,
      rgba(38, 198, 218, 0.03) 60%,
      transparent 80%
    );
  border: 2px solid rgba(38, 198, 218, 0.15);
  margin: 0 auto;
}

/* Concentric ripple rings */
.mall-fountain::before,
.mall-fountain::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(38, 198, 218, 0.1);
}

.mall-fountain::before {
  top: 20%;
  left: 20%;
  right: 20%;
  bottom: 20%;
}

.mall-fountain::after {
  top: 40%;
  left: 40%;
  right: 40%;
  bottom: 40%;
  border-color: rgba(38, 198, 218, 0.15);
}

@keyframes ripple {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 0; }
}

Mall Directory Button

/* Button styled after mall directory / wayfinding signage */
.mall-button {
  display: inline-block;
  padding: 0.8rem 2.2rem;
  border-radius: 8px;
  border: 2px solid var(--mall-pink);
  background: transparent;
  color: var(--mall-pink);
  font-family: 'Josefin Sans', 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.mall-button:hover {
  background: var(--mall-pink);
  color: var(--mall-white);
  box-shadow:
    0 0 12px var(--mall-glow-pink),
    0 0 30px var(--mall-glow-pink);
}

/* Filled neon variant */
.mall-button--filled {
  background: var(--mall-pink);
  color: var(--mall-white);
  border-color: var(--mall-pink);
  box-shadow: 0 4px 15px var(--mall-glow-pink);
}

.mall-button--filled:hover {
  background: var(--mall-pink-hot);
  border-color: var(--mall-pink-hot);
  box-shadow:
    0 4px 20px var(--mall-glow-pink-strong),
    0 0 40px var(--mall-glow-pink);
  transform: translateY(-2px);
}

/* Teal variant */
.mall-button--teal {
  border-color: var(--mall-teal);
  color: var(--mall-teal);
}

.mall-button--teal:hover {
  background: var(--mall-teal);
  color: var(--mall-white);
  box-shadow:
    0 0 12px var(--mall-glow-teal),
    0 0 30px var(--mall-glow-teal);
}

Section Divider (Neon Line)

/* Neon-glowing horizontal divider */
.mall-divider {
  width: 60%;
  margin: 3rem auto;
  border: none;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--mall-pink) 20%,
    var(--mall-teal) 50%,
    var(--mall-lavender) 80%,
    transparent
  );
  border-radius: 1px;
  box-shadow:
    0 0 8px var(--mall-glow-pink),
    0 0 16px var(--mall-glow-teal);
}

/* Subtle terrazzo-style divider for lighter sections */
.mall-divider--subtle {
  width: 40%;
  margin: 2rem auto;
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--mall-gray) 25%,
    var(--mall-gray) 75%,
    transparent
  );
  opacity: 0.6;
}

Materials and Textures (Visual Metaphors for Web)

Physical Mallsoft materials and their web equivalents:

Physical Material Web Equivalent
Terrazzo floor Speckled radial-gradient pattern in muted pinks, grays, mints on cream background
Neon tube signage text-shadow with multiple layered glows in pink/teal/purple; animated flicker for dead-mall variant
Frosted glass railing Semi-transparent white background + backdrop-filter: blur() + thin white border
Polished marble Light gradient from white to pale gray with subtle radial-gradient veining
Chrome railing / trim Tight linear gradient from #eceff1 through #b0bec5 to #78909c, simulating metallic reflection
Skylight / atrium glass Top-down radial-gradient with warm white center fading to transparent
Potted palm / fern Green accent block with border-radius, leaf-green gradient, placed at section edges
Fountain / water feature Concentric circle borders with teal tints, ripple animation using scale transforms
Drop ceiling tiles Subtle grid pattern using repeating-linear-gradient with hairline gray lines
VHS / surveillance footage Horizontal scan-line overlay via repeating-linear-gradient, saturate() filter, grain texture
Fluorescent lighting Bright white background sections with subtle warm tint; flicker animation for dead-mall mood
Escalator / moving walkway Diagonal hatched pattern using repeating-linear-gradient in chrome colors
Memphis Design tile Bold geometric shapes (triangles, circles, zigzags) as decorative overlays at low opacity

Associated Brands and References

The following brands, spaces, and cultural artifacts exemplify the Mallsoft aesthetic:

  • Kmart -- the archetypal Mallsoft retailer; fluorescent-lit aisles, blue light specials, in-store muzak
  • Sears -- department store grandeur with its own internal atmosphere
  • JCPenney -- warm, carpeted retail interiors with seasonal displays
  • The Gap -- clean, minimal 90s retail design with simple typography
  • Orange Julius / Sbarro / Panda Express -- food court staples with backlit menu boards
  • Victor Gruen -- architect who designed the first enclosed shopping mall (Southdale Center, 1956)
  • Dan Bell's "Dead Mall Series" -- YouTube documentary series that visually codified the dead-mall side of Mallsoft
  • Vaporwave Mall compilations -- YouTube ambient videos featuring mall footage with reverb-heavy music
  • Mall of America / West Edmonton Mall -- the ultimate physical embodiments of the mega-mall concept

Subgenres / Variants

Variant Description
Golden-Era Mall Bright, bustling, warm; neon signage glowing, fountains running, shoppers present; optimistic and nostalgic
Dead Mall Dark, vacant, decaying; flickering fluorescents, empty corridors, water-stained ceilings; liminal and eerie
Food Court Focused on the communal eating area; orange/red warm tones, backlit menus, plastic seating, branded typography
Mallwave The musical subgenre; visually manifests as VHS-filtered mall footage, washed-out pastel palettes, lo-fi grain
Aesthetic Relationship to Mallsoft
Vaporwave Parent aesthetic; Mallsoft is a specific sub-genre that focuses Vaporwave's nostalgia and anti-capitalism lens on commercial retail architecture
Liminal Space Shares the fascination with empty, transitional, between-purpose spaces; dead malls are quintessential liminal spaces
After Hours Shares the mood of being in a commercial space outside normal operating hours; empty, quiet, uncanny
Corporate Shares the fascination with commercial environments and institutional design; Mallsoft adds warmth and nostalgia where Corporate is cold
Memphis Design Direct visual influence; the geometric patterns, bold colors, and playful postmodern ornamentation of 80s mall interiors
Frasurbane Shares the late-80s/90s suburban commercial aesthetic and warm interior design sensibility
Retrowave Shares the 80s nostalgia and neon color palette, but Retrowave is more automotive/nightlife while Mallsoft is retail/daytime
Y2K Futurism Shares the late-90s commercial optimism; Y2K is more chrome and digital, Mallsoft is more pastel and architectural
Seapunk Shares aquatic motifs (mall fountains) and teal color emphasis
Cleancore Shares the emphasis on maintained, organized commercial interiors (golden-era variant)

Quick-Start: Minimal Mallsoft Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mallsoft Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=DM+Sans:wght@400;500;600&family=Comfortaa:wght@400;500;600&family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --mall-pink: #ff6b9d;
      --mall-pink-hot: #ff3f8e;
      --mall-pink-soft: #f8bbd0;
      --mall-pink-blush: #fde4ec;
      --mall-teal: #26c6da;
      --mall-teal-deep: #00897b;
      --mall-mint: #80cbc4;
      --mall-lavender: #ce93d8;
      --mall-purple-soft: #e1bee7;
      --mall-white: #faf9f7;
      --mall-cream: #fff8e1;
      --mall-gray: #e0dcd8;
      --mall-chrome: #b0bec5;
      --mall-gold: #ffd54f;
      --mall-dark: #1a1a2e;
      --mall-text: #37343d;
      --mall-text-light: #6d6875;
      --mall-glow-pink: rgba(255, 107, 157, 0.4);
      --mall-glow-teal: rgba(38, 198, 218, 0.4);
      --mall-glow-purple: rgba(186, 104, 200, 0.35);
      --mall-shadow: rgba(0, 0, 0, 0.12);
    }

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

    body {
      background: linear-gradient(
        180deg,
        #faf9f7 0%,
        #fff8e1 30%,
        #fde4ec 70%,
        #f3e5f5 100%
      );
      color: var(--mall-text);
      font-family: 'DM Sans', 'Poppins', sans-serif;
      font-weight: 400;
      letter-spacing: 0.01em;
      line-height: 1.7;
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 {
      font-family: 'Josefin Sans', 'Montserrat', sans-serif;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    /* VHS scan-line overlay */
    body::after {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.015) 0px,
        rgba(0, 0, 0, 0.015) 1px,
        transparent 1px,
        transparent 3px
      );
      pointer-events: none;
      z-index: 999;
    }

    /* Terrazzo floor texture background */
    .terrazzo-bg {
      background-color: #f5f0eb;
      background-image:
        radial-gradient(circle 3px at 15% 25%, #f8bbd0 1.5px, transparent 2px),
        radial-gradient(circle 2px at 45% 60%, #b0bec5 1px, transparent 1.5px),
        radial-gradient(circle 4px at 70% 20%, #e1bee7 2px, transparent 3px),
        radial-gradient(circle 2.5px at 30% 80%, #80cbc4 1.2px, transparent 2px),
        radial-gradient(circle 3px at 85% 45%, #ffd54f 1.5px, transparent 2px);
    }

    /* Hero -- mall entrance */
    .hero {
      text-align: center;
      padding: 7rem 2rem 4rem;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -20%;
      left: 30%;
      width: 40%;
      height: 60%;
      background: radial-gradient(
        ellipse at center,
        rgba(255, 248, 225, 0.5) 0%,
        transparent 70%
      );
      pointer-events: none;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 5rem);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--mall-pink);
      text-shadow:
        0 0 10px var(--mall-glow-pink),
        0 0 40px var(--mall-glow-pink),
        0 2px 4px var(--mall-shadow);
      position: relative;
      z-index: 1;
    }

    .hero p {
      margin-top: 1.5rem;
      font-family: 'Comfortaa', sans-serif;
      font-size: 1.15rem;
      color: var(--mall-text-light);
      position: relative;
      z-index: 1;
    }

    /* Neon divider */
    .neon-divider {
      width: 50%;
      margin: 2rem auto;
      border: none;
      height: 2px;
      background: linear-gradient(
        90deg,
        transparent,
        var(--mall-pink) 20%,
        var(--mall-teal) 50%,
        var(--mall-lavender) 80%,
        transparent
      );
      box-shadow:
        0 0 6px var(--mall-glow-pink),
        0 0 12px var(--mall-glow-teal);
      position: relative;
      z-index: 1;
    }

    section {
      max-width: 900px;
      margin: 0 auto;
      padding: 3rem 2rem;
      text-align: center;
    }

    /* Storefront card */
    .storefront-card {
      background: linear-gradient(180deg, var(--mall-white), #f5f0eb);
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 14px;
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .storefront-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(
        90deg,
        var(--mall-pink),
        var(--mall-teal),
        var(--mall-lavender)
      );
    }

    .storefront-card:hover {
      transform: translateY(-3px);
      box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08),
        0 0 20px var(--mall-glow-pink);
    }

    .storefront-card h2 {
      color: var(--mall-text);
      font-size: 1.5rem;
    }

    .storefront-card p {
      margin-top: 1rem;
      color: var(--mall-text-light);
    }

    /* Mall directory button */
    .mall-btn {
      display: inline-block;
      padding: 0.8rem 2.2rem;
      margin-top: 1.5rem;
      border-radius: 8px;
      border: 2px solid var(--mall-pink);
      background: transparent;
      color: var(--mall-pink);
      font-family: 'Josefin Sans', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .mall-btn:hover {
      background: var(--mall-pink);
      color: var(--mall-white);
      box-shadow:
        0 0 12px var(--mall-glow-pink),
        0 0 30px var(--mall-glow-pink);
    }

    /* Memphis decorations */
    .memphis-triangle {
      position: fixed;
      width: 0; height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 43px solid var(--mall-pink-soft);
      opacity: 0.2;
      pointer-events: none;
      z-index: 0;
    }

    .memphis-triangle--1 { top: 12%; left: 6%; transform: rotate(15deg); }
    .memphis-triangle--2 { top: 55%; right: 8%; transform: rotate(-25deg); border-bottom-color: var(--mall-mint); }

    .memphis-circle {
      position: fixed;
      width: 50px; height: 50px;
      border-radius: 50%;
      border: 3px solid var(--mall-lavender);
      opacity: 0.15;
      pointer-events: none;
      z-index: 0;
    }

    .memphis-circle--1 { top: 30%; right: 12%; }
    .memphis-circle--2 { bottom: 25%; left: 10%; border-color: var(--mall-teal); }
  </style>
</head>
<body>
  <!-- Memphis geometric decorations -->
  <div class="memphis-triangle memphis-triangle--1"></div>
  <div class="memphis-triangle memphis-triangle--2"></div>
  <div class="memphis-circle memphis-circle--1"></div>
  <div class="memphis-circle memphis-circle--2"></div>

  <div class="hero">
    <h1>Title Here</h1>
    <hr class="neon-divider">
    <p>Welcome to the atrium -- where the light hums and the fountains echo</p>
  </div>

  <section>
    <div class="storefront-card">
      <h2>Section Heading</h2>
      <p>Content displayed on a warm storefront card with a neon accent strip, floating Memphis shapes, and a soft terrazzo-tinted background, capturing the nostalgic warmth and gentle eeriness of the Mallsoft aesthetic.</p>
      <a href="#" class="mall-btn">Directory</a>
    </div>
  </section>
</body>
</html>
← Back to designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. All rights reserved.

Designs from chrislemke/website_designs, licensed under MIT.