DOPAMINE DECOR • MORE IS MORE • 2020s

GEN Z MAXIMALISM "Why shouldn't we have fun?"

A colourful, cluttered aesthetic that embraces visual abundance, saturated color, pattern clashing, and expressive layering.

What Is It?

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.

"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

"All of them, but highly saturated."

Primary Palette

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

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

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 → Electric Yellow
Neon Green → Turquoise
Purple → Hot Pink
Orange → Candy Red
Blue → Purple

Typography

DISPLAY
Fredoka
Rounded, playful, bubbly. Perfect for headings and display text.
400 600 700
HERO
BUNGEE
Bold, blocky, impactful. Made for hero titles and banners.
400
3D DISPLAY
BUNGEE SHADE
3D shadow effect, maximalist impact for feature headings.
400
BODY
Rubik Sans
Rounded geometric, friendly. Great for body text and UI elements.
400 500 700
BODY
Outfit Modern
Clean geometric, modern. Ideal for body text and paragraphs.
300 400 700
CALLOUT
BANGERS!
Comic book style, loud. For callouts, badges, stickers.
400
HANDWRITTEN
Marker Time
Hand-drawn, DIY feel. For handwritten accents and annotations.
400
SCRIPT
Pacifico
Script, casual, youthful. For decorative labels and fun headings.
400
RETRO
PIXEL
Pixel font, nostalgic. Perfect for retro/gaming accents.
400

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 create drama.

Colorful Text

Apply bright, saturated colors directly to headings and accent text.

Text Shadows & Outlines

Bold outlines, drop shadows, and glow effects on display text.

Rotated & Tilted Text

Slight rotations (-3deg to 5deg) for a playful, handmade quality.

Mixed Case & Decorative Caps

ALL CAPS for emphasis, mixed styles within the same section.

Layout Principles

Composition Rules for Controlled Chaos

01

Fill the Frame

Avoid large areas of empty space; use decorative elements, patterns, or color fills.

02

Asymmetric Grids

Reject rigid symmetry; use offset, overlapping, and staggered grid layouts.

03

Layered Depth

Stack elements on top of each other with visible overlap (z-index layering).

04

Mixed Media Collage

Combine photos, illustrations, geometric shapes, stickers, and text freely.

05

Broken Grid

Elements should break out of their containers, overlapping borders and edges.

06

Scale Contrast

Mix very large elements with clusters of small ones for visual dynamism.

07

Organic Flow

Content should feel hand-arranged, not machine-generated.

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 Techniques

NEON GLOW TEXT
GLOW UP
STICKER / BADGE
HOVER ME!
ANIMATED GRADIENT
PLAYFUL BUTTON
SQUIGGLY UNDERLINE
Wavy Vibes
MEMPHIS SHAPES
ZIGZAG DIVIDER
ANIMATED CHECKERBOARD

Motifs & Decorative Elements

▲●▬ Geometric Shapes
Stars & Sparkles
🏷 Stickers & Badges
😊 Hearts, Smileys & Emojis
🌈 Rainbow Arcs & Gradients
Checkerboard Patterns
Polka Dots
Squiggly & Wavy Lines
📜 Collage Cutouts
🍬 Toy & Candy Imagery
🐱 Lisa Frank / Sanrio Vibes

Texture & Material Qualities

Glossy & Reflective

High-shine surfaces, glass morphism with saturated color.

🧹

Plastic & Vinyl

Smooth, toy-like surface quality.

📌

Sticker / Decal

Elements that look like they could be peeled off.

Hand-Drawn Marks

Crayon, marker, or paint brush stroke textures.

🌈

Tie-Dye & Marbled

Organic swirled color backgrounds.

Implementation Tips

1
Layer decorative SVG shapes behind and around content sections using position: absolute
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
4
Rotate elements slightly with transform: rotate() to break rigid grid feeling
5
Animate generously: hover transitions, floating animations, and gradient shifts keep the page alive
6
Use at least 3-4 background colors across sections; never repeat the same background twice in a row
7
Add a thick, colorful box-shadow offset (e.g., 6px 6px 0) for sticker-like, pop-art depth
8
Break the grid: let elements overlap their containers with negative margins or absolute positioning
9
Replace the default cursor with a colorful, playful custom cursor for extra personality
10
Consider micro-interactions with bouncy easing functions: cubic-bezier(0.68, -0.55, 0.265, 1.55)