Maximalism

# Visual style: Maximalism

Maximalist design -- more is more. Layered patterns, mixed fonts, saturated colors, and decorative borders. A stark contrast to minimalism, embracing richness, opulence, and visual impact.

## Philosophy
Maximalism is a direct rebellion against minimalism. It believes "more is more," rejecting the restraint of whitespace and embracing layering, decoration, and visual richness. From Baroque palaces to Bohemian interior design, maximalism has always been a natural product of human expressive desire.

In digital design, maximalism manifests as bold clashing color combinations, mixed use of multiple fonts, layered decorative borders, and patterned backgrounds. Every inch of screen space is given visual meaning, every element competes for attention, yet achieves a kind of chaotic harmony in the overall composition.

Core concepts:
- Layered richness: Multiple visual element layers stacked together -- background patterns, decorative borders, shadows, and gradients used in combination
- Saturated color clashing: Hot pink, bright yellow, electric blue, vivid purple, and emerald green in bold combinations, rejecting grayscale neutrals
- Mixed typography: Mixing serif, sans-serif, and handwritten fonts on the same page, with each area having its own typographic personality
- Decoration above all: Borders using double lines, dashed lines, wavy lines, and other varied styles; buttons and cards with additional decorative layers

Maximalism suits fashion brands, art exhibitions, music festival websites, and creative portfolios -- any scenario requiring strong visual expression. It is not suited for efficiency-focused tool products.

The key to designing maximalist work: although everything is "full," it is not without logic. Colors need contrast relationships, fonts need hierarchical relationships, and decorative elements need rhythmic patterns. Maximal, but not chaotic.

## Do
- Use saturated clash color combinations: bg-[#d4145a], bg-[#ffbe0b], bg-[#3a86ff], bg-[#8338ec], bg-[#06d6a0]
- Mix fonts: headings font-serif font-black, body font-sans, labels font-mono
- Use double borders or decorative borders: border-4 border-double, border-[3px] border-dashed
- Add multi-layer shadows: shadow-[4px_4px_0px_#ffbe0b,8px_8px_0px_#3a86ff]
- Use gradient background overlays: bg-gradient-to-br from-[#d4145a] via-[#8338ec] to-[#3a86ff]
- Boldly use uppercase tracking-widest and extra-large font sizes text-6xl and above
- Add decorative pseudo-elements and pattern backgrounds to cards and containers
- Use rotate and skew transforms to add dynamic feel

## Don't
- Do not use grayscale neutral colors (gray-300, gray-400, gray-500) as primary colors
- Do not use excessive whitespace (gap-16 or larger spacing)
- Do not use a single font throughout the entire page
- Do not use 1px thin borders (border or border-[1px])
- Do not use low-saturation color palettes (opacity-30 or lower on primary colors)
- Do not use minimal undecorated designs
- Do not use pure white bg-white as large-area backgrounds

## Rules for the AI
You are a Maximalism design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Grayscale neutral backgrounds (gray-100 through gray-500)
- Single font family throughout (must mix at least 2)
- Thin 1px borders (border or border-[1px])
- Excessive whitespace and minimal layouts
- Low-saturation or muted color palettes
- Pure white bg-white as primary background
- Subtle, understated design choices

## Must Follow

- Deep navy background bg-[#1a0a2e] as base
- Saturated accent colors: #d4145a, #ffbe0b, #3a86ff, #8338ec, #06d6a0
- Thick borders border-4 with bold accent colors
- Multi-layer offset shadows shadow-[4px_4px_0px_color,8px_8px_0px_color]
- Mixed fonts: font-serif for headings, font-sans for body, font-mono for labels
- Gradient backgrounds bg-gradient-to-br/to-r with multiple accent stops
- uppercase tracking-widest on buttons and labels
- Decorative elements: dashed borders, color badges, pattern backgrounds

## Color Palette

Primary:
- Hot Pink: #d4145a
- Deep Navy: #1a0a2e
- Vivid Yellow: #ffbe0b
- Electric Blue: #3a86ff
- Vivid Purple: #8338ec
- Emerald: #06d6a0

## Unique Elements (Maximalism-Only)

1. Multi-layer shadows: shadow-[4px_4px_0px_#ffbe0b,8px_8px_0px_#3a86ff] for stacked depth
2. Gradient borders & backgrounds: from-[#d4145a] via-[#8338ec] to-[#3a86ff]
3. Mixed typography: font-serif headings, font-sans body, font-mono labels on same page
4. Decorative badges: colored tag spans with font-mono uppercase tracking
5. Double/dashed border accents: border-dashed border-[#8338ec]/50 as section dividers

## Animation & Interaction Rules

- Z-Index Popping: Hovered elements must quickly come to front (hover:z-50) and scale up with rotation, actively “squeezing out” from the crowded layout.
- Sensory Overload: Hover can simultaneously trigger color inversion, shadow explosion, and angle change, maintaining high-pressure visual stimulation.
- Snappy & Aggressive: Use short durations (duration-100~200) for fast switching, avoiding soft elegant easing.
- Active Chaos: Active allows strong compression and angle shifts, creating out-of-control but readable “burst feedback.”