ColoréMaximalisteLudique

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

Deliberate clutter: Every surface is filled; negative space is avoided or minimized
Pattern mixing: Clashing prints, textures, and motifs layered on top of each other
Color saturation: All colors are welcome, but they must be vivid and intense
Color blocking: Large areas of contrasting saturated color placed side by side
Sticker/collage layering: Overlapping decorative elements, stickers, badges, and graphic patches
Maximalist composition: Dense, busy layouts where the eye is constantly moving
High-luster finishes: Glossy surfaces, vibrant plastics, glass, and reflective materials
Playful geometry: Bold geometric shapes inspired by Memphis Design (zigzags, squiggles, circles, triangles)
Nostalgic motifs: Childhood imagery, cartoon characters, toys, candy, fruits
DIY/handmade quality: Arts-and-crafts elements, hand-drawn lettering, imperfect edges
Neon accents: Glowing, electric highlights that pop against already-bright backgrounds

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

Hot Pink to Electric Yellow (#FF69B4 to #FFF300)
Neon Green to Turquoise (#39FF14 to #00E5FF)
Electric Purple to Hot Pink (#BF00FF to #FF69B4)
Bright Orange to Candy Red (#FF6600 to #FF1744)
Vivid Blue to Electric Purple (#1E90FF to #BF00FF)

Typography

Recommended Google Fonts

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

Mix font families freely: Use 3-4 different fonts on a single page (break the "two font" rule)
Exaggerated scale contrast: Hero text at 4-8rem, body at 1rem -- extreme size differences
Colorful text: Apply bright, saturated colors directly to headings and accent text
Text shadows and outlines: Bold outlines, drop shadows, and glow effects on display text
Rotated and tilted text: Slight rotations (-3deg to 5deg) for a playful, handmade quality
Mixed case and decorative caps: ALL CAPS for emphasis, mixed styles within the same section

Layout Principles

Composition Rules

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

Spacing and Rhythm

Tight spacing between elements to create density and visual richness
Irregular margins: Vary padding and margins between sections for a non-uniform feel
Overlapping elements: Cards, images, and shapes should overlap by 10-30px
Rotated containers: Tilt cards and images by small amounts (-5deg to 5deg)

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

Geometric shapes: Circles, triangles, zigzag lines, squiggles (Memphis Design heritage)
Stars and sparkles: Five-pointed stars, asterisks, twinkle effects
Stickers and badges: Rounded pill shapes with bold borders and drop shadows
Hearts, smiley faces, and emojis: Playful, youthful iconography
Rainbow arcs and gradients: Multi-color transitions across every element
Checkerboard patterns: Black-and-white or colored check patterns as backgrounds
Polka dots: Scattered, irregular dot patterns in clashing colors
Squiggly and wavy lines: Hand-drawn quality dividers and borders
Collage cutouts: Irregular edges, torn-paper effects, overlapping images
Toy and candy imagery: Gummy bears, lollipops, building blocks, pixel art characters
Lisa Frank and Sanrio-inspired elements: Hyper-colorful, cute character art

Texture and Material Qualities

Glossy and reflective: High-shine surfaces, glass morphism with saturated color
Plastic and vinyl: Smooth, toy-like surface quality
Sticker/decal texture: Elements that look like they could be peeled off
Hand-drawn marks: Crayon, marker, or paint brush stroke textures
Tie-dye and marbled patterns: Organic swirled color backgrounds

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

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

← Zruck züe de Designs