website_designs

Gen Z Maximalism

Overview

Gen Z Maximalism is a colourful, cluttered aesthetic popularized by Gen Z via social media platforms like TikTok, Instagram, and Pinterest during the 2020s. It embraces a “more is more” philosophy that deliberately rejects millennial minimalism in favor of visual abundance, saturated color, pattern clashing, and expressive layering. Also known as Dopamine Decor in interior design contexts.

The core ethos is creative freedom through visual excess: “Playing with prints and colors and shapes is like creating art. It’s fun, and why shouldn’t we have fun?”

Visual Characteristics

Color Palette

The guiding principle is “all of them, but highly saturated.” There is no restrained palette; the goal is to use as many vivid colors as possible in contrasting and clashing combinations.

Primary Palette

Color Hex Usage
Hot Pink #FF69B4 Primary accent, headings, borders
Electric Yellow #FFF300 Highlights, backgrounds, badges
Vivid Blue #1E90FF Links, panels, geometric shapes
Neon Green #39FF14 Accents, hover states, glow effects
Bright Orange #FF6600 Buttons, call-to-actions, borders
Electric Purple #BF00FF Secondary accent, gradients

Secondary / Supporting Palette

Color Hex Usage
Candy Red #FF1744 Alerts, decorative shapes
Turquoise #00E5FF Panels, secondary backgrounds
Bubblegum Pink #FF80AB Softer accents, card backgrounds
Lime #C6FF00 Badges, tags, highlights
Coral #FF6E40 Warm accents, decorative borders
Lavender #B388FF Soft backgrounds, card fills

Background Options

Color Hex Usage
Bright White #FFFFFF Clean base for maximum color pop
Near Black #1A1A2E Dark mode base for neon glow effects
Soft Yellow #FFF9C4 Warm, playful background
Light Pink #FCE4EC Soft, youthful background
Light Blue #E1F5FE Cool, energetic background

Gradient Combinations

Typography

Font Weight(s) Usage Style Notes
Fredoka 400, 600, 700 Headings, display text Rounded, playful, bubbly
Bungee 400 Hero titles, banners Bold, blocky, impactful
Bungee Shade 400 Feature headings 3D shadow effect, maximalist
Rubik 400, 500, 700 Body text, UI elements Rounded geometric, friendly
Outfit 300, 400, 700 Body text, paragraphs Clean geometric, modern
Bangers 400 Callouts, badges, stickers Comic book style, loud
Permanent Marker 400 Handwritten accents, annotations Hand-drawn, DIY feel
Pacifico 400 Decorative labels, fun headings Script, casual, youthful
Press Start 2P 400 Retro/gaming accents Pixel font, nostalgic

Typography Principles

Layout Principles

Composition Rules

  1. Fill the frame: Avoid large areas of empty space; use decorative elements, patterns, or color fills
  2. Asymmetric grids: Reject rigid symmetry; use offset, overlapping, and staggered grid layouts
  3. Layered depth: Stack elements on top of each other with visible overlap (z-index layering)
  4. Mixed media collage: Combine photos, illustrations, geometric shapes, stickers, and text freely
  5. Broken grid: Elements should break out of their containers, overlapping borders and edges
  6. Scale contrast: Mix very large elements with clusters of small ones
  7. Organic flow: Content should feel hand-arranged, not machine-generated

Spacing and Rhythm

CSS Code Snippets

Neon Glow Text

.neon-heading {
  font-family: 'Bungee', cursive;
  font-size: 4rem;
  color: #FF69B4;
  text-shadow:
    0 0 7px #FF69B4,
    0 0 10px #FF69B4,
    0 0 21px #FF69B4,
    0 0 42px #BF00FF,
    0 0 82px #BF00FF;
  letter-spacing: 0.05em;
}

Sticker / Badge Element

.sticker {
  display: inline-block;
  padding: 0.4em 1em;
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  color: #1A1A2E;
  background: #FFF300;
  border: 3px solid #1A1A2E;
  border-radius: 20px;
  transform: rotate(-3deg);
  box-shadow: 4px 4px 0 #1A1A2E;
  transition: transform 0.2s ease;
}

.sticker:hover {
  transform: rotate(2deg) scale(1.1);
}

Color-Clash Gradient Background

.maximalist-bg {
  background: linear-gradient(
    135deg,
    #FF69B4 0%,
    #FFF300 25%,
    #39FF14 50%,
    #00E5FF 75%,
    #BF00FF 100%
  );
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Overlapping Card Grid

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 2rem;
}

.card {
  background: #FCE4EC;
  border: 3px solid #1A1A2E;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 6px 6px 0 #FF69B4;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:nth-child(even) {
  transform: rotate(2deg);
  background: #E1F5FE;
  box-shadow: 6px 6px 0 #1E90FF;
}

.card:nth-child(3n) {
  transform: rotate(-1.5deg);
  background: #FFF9C4;
  box-shadow: 6px 6px 0 #FF6600;
}

.card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  box-shadow: 8px 12px 0 #BF00FF;
  z-index: 10;
}

Memphis-Inspired Decorative Shapes

.memphis-shapes {
  position: relative;
  overflow: visible;
}

.memphis-shapes::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -30px;
  width: 60px;
  height: 60px;
  background: #FFF300;
  border: 3px solid #1A1A2E;
  border-radius: 50%;
  z-index: -1;
}

.memphis-shapes::after {
  content: '';
  position: absolute;
  bottom: -15px;
  right: -25px;
  width: 80px;
  height: 30px;
  background: #39FF14;
  border: 3px solid #1A1A2E;
  transform: rotate(15deg);
  z-index: -1;
}

Zigzag Divider (Memphis Motif)

.zigzag-divider {
  width: 100%;
  height: 20px;
  background:
    linear-gradient(135deg, #FF69B4 25%, transparent 25%) -10px 0,
    linear-gradient(225deg, #FF69B4 25%, transparent 25%) -10px 0,
    linear-gradient(315deg, #FF69B4 25%, transparent 25%),
    linear-gradient(45deg, #FF69B4 25%, transparent 25%);
  background-size: 20px 20px;
  background-color: #FFF300;
  margin: 2rem 0;
}

Squiggly Underline on Headings

.squiggly-heading {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #BF00FF;
  text-decoration: underline wavy #FF6600;
  text-underline-offset: 8px;
  text-decoration-thickness: 3px;
}

Playful Button

.max-button {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: #FFFFFF;
  background: #FF1744;
  border: 3px solid #1A1A2E;
  border-radius: 50px;
  padding: 0.8em 2em;
  cursor: pointer;
  box-shadow: 4px 4px 0 #1A1A2E;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.max-button:hover {
  background: #FF69B4;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #1A1A2E;
}

.max-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #1A1A2E;
}

Scattered Floating Decorations (CSS-only)

.decorated-section {
  position: relative;
  overflow: hidden;
}

.decorated-section .shape {
  position: absolute;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

.shape--circle {
  width: 40px;
  height: 40px;
  background: #FF69B4;
  border-radius: 50%;
  border: 2px solid #1A1A2E;
}

.shape--triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 45px solid #FFF300;
}

.shape--squiggle {
  width: 60px;
  height: 20px;
  border: 3px solid #39FF14;
  border-color: #39FF14 transparent transparent transparent;
  border-radius: 50% / 100% 100% 0 0;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-15px) rotate(5deg); }
  66%      { transform: translateY(10px) rotate(-3deg); }
}

Rainbow Scrollbar

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #1A1A2E;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #FF1744, #FF6600, #FFF300,
    #39FF14, #1E90FF, #BF00FF
  );
  border-radius: 6px;
  border: 2px solid #1A1A2E;
}

Motifs and Decorative Elements

Texture and Material Qualities

Aesthetic Relationship
Dopamine Shares the vibrant color philosophy; the interior design overlap is sometimes called “Dopamine Decor”
Kidcore Strongest overlap in fashion; shares primary-color palettes and toy/childhood motifs
Decora Maximalist accessory layering; Decora focuses more on fashion while Gen Z Maximalism spans graphic + interior design
Memphis Design Foundational visual language: bold geometry, zigzags, squiggles, saturated color on white
Scene Maximalist styling and accessories from the late 2000s
Avant Basic Adjacent Gen Z aesthetic with mainstream trend adoption
Kidcore Youthful, nostalgic, primary-color-driven maximalism
Cluttercore Shares the anti-minimalist, “fill every surface” philosophy
2020 TikTok Platform-native aesthetic where Gen Z Maximalism was popularized

Implementation Tips for Web Design

  1. Layer decorative SVG shapes behind and around content sections using absolute positioning
  2. Use CSS mix-blend-mode on overlapping colored elements for unexpected color interactions
  3. Apply border: 3px solid #1A1A2E as a unifying visual device across cards, buttons, and images (the bold outline ties maximalist chaos together)
  4. Rotate elements slightly with transform: rotate() to break rigid grid feeling
  5. Animate generously: Use hover transitions, floating animations, and gradient shifts to keep the page alive
  6. Use at least 3-4 background colors across different sections; never repeat the same background twice in a row
  7. Add a thick, colorful box-shadow offset (e.g., 6px 6px 0) for a sticker-like, pop-art depth effect
  8. Break the grid: Let elements overlap their containers with negative margins or absolute positioning
  9. Custom cursor: Replace the default cursor with a colorful, playful custom cursor
  10. Sound and motion: Consider micro-interactions with sound effects and bouncy easing functions (cubic-bezier(0.68, -0.55, 0.265, 1.55))
This site is open source. Improve this page.