Maximalism

STYLEKIT_STYLE_REFERENCE
style_name: Maximalism
style_slug: maximalism
style_source: /styles/maximalism

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

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.”

---

# Maximalism Design System

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

## Design 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.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-4
Color: border-[#d4145a]
Radius: rounded-sm
```

### Shadow
```
sm: shadow-[3px_3px_0px_#ffbe0b]
md: shadow-[4px_4px_0px_#ffbe0b,8px_8px_0px_#3a86ff]
lg: shadow-[6px_6px_0px_#ffbe0b,12px_12px_0px_#3a86ff]
hover: hover:shadow-[2px_2px_0px_#ffbe0b,4px_4px_0px_#3a86ff]
focus: focus:shadow-[0_0_0_4px_rgba(212,20,90,0.3)]
```

### Interaction
```
Hover translate: hover:translate-x-[2px] hover:translate-y-[2px]
Hover scale: (none)
Hover opacity: (none)
Transition: transition-all duration-200
Active: active:translate-x-[4px] active:translate-y-[4px] active:shadow-none
```

### Typefaces
```
Heading: font-serif font-black uppercase tracking-widest
Body: font-sans
Mono: font-mono text-xs uppercase tracking-[0.3em]
```

### Type scale
```
Hero: text-6xl md:text-8xl lg:text-9xl
H1: text-4xl md:text-6xl
H2: text-3xl md:text-4xl
H3: text-2xl md:text-3xl
Body: text-sm md:text-base
Small: text-xs md:text-sm
```

### Spacing
```
Section: py-14 md:py-20 lg:py-28
Container: px-4 md:px-8 lg:px-12
Card: p-6 md:p-8
Gap sm: gap-3 md:gap-4
Gap md: gap-4 md:gap-6
Gap lg: gap-6 md:gap-10
```

### Color roles
```
Background primary: bg-[#1a0a2e]
Background secondary: bg-[#d4145a]
Background accent: bg-[#ffbe0b], bg-[#3a86ff], bg-[#8338ec], bg-[#06d6a0]
Text primary: text-white
Text secondary: text-[#ffbe0b]
Text muted: text-[#8338ec]/70
Button primary: bg-gradient-to-r from-[#d4145a] to-[#8338ec] text-white border-4 border-[#ffbe0b] shadow-[4px_4px_0px_#ffbe0b,8px_8px_0px_#3a86ff]
Button secondary: bg-transparent text-[#06d6a0] border-4 border-[#06d6a0] shadow-[4px_4px_0px_#06d6a0]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `bg-white`
- `bg-gray-50`
- `bg-gray-100`
- `text-gray-300`
- `text-gray-400`
- `text-gray-500`
- `border`
- `border-[1px]`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`

### Banned patterns
- matches `^bg-(?:white|gray-(?:50|100|200))$`
- matches `^text-gray-[2-5]`
- matches `^border$`
- matches `^border-\[1px\]$`
- matches `^shadow-(?:sm|md|lg|xl)$`

### Why they are banned
- `bg-white`: Maximalism uses deep navy #1a0a2e, never plain white backgrounds
- `text-gray-400`: Maximalism uses saturated accent colors, not muted grays
- `border`: Maximalism requires thick borders (border-4), never thin 1px
- `shadow-md`: Maximalism uses hard multi-layer offset shadows, not soft blur shadows

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-sm
font-black uppercase tracking-widest
border-4
transition-all duration-200
```

### Every card must include
```
rounded-sm
bg-[#1a0a2e]
border-4 border-[#d4145a]
```

### Every input must include
```
rounded-sm
border-4 border-[#8338ec]
bg-[#1a0a2e]
text-white
focus:outline-none
```

---

## [COMPARE] Maximalism wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-sm font-black uppercase tracking-widest border-4 transition-all duration-200 bg-gradient-to-r from-[#d4145a] to-[#8338ec] text-white border-4 border-[#ffbe0b] shadow-[4px_4px_0px_#ffbe0b,8px_8px_0px_#3a86ff]">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="rounded-sm bg-[#1a0a2e] border-4 border-[#d4145a] p-6 md:p-8">
  <h3 class="font-serif font-black uppercase tracking-widest text-2xl md:text-3xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="rounded-sm border-4 border-[#8338ec] bg-[#1a0a2e] text-white focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Maximalism page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#1a0a2e] text-white border-4 border-[#d4145a] px-4 md:px-8 lg:px-12">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
    <a href="/" class="font-serif font-black uppercase tracking-widest text-2xl md:text-3xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 md:gap-6 font-sans text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#ffbe0b] text-white py-14 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-serif font-black uppercase tracking-widest text-6xl md:text-8xl lg:text-9xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-sm font-black uppercase tracking-widest border-4 transition-all duration-200 bg-gradient-to-r from-[#d4145a] to-[#8338ec] text-white border-4 border-[#ffbe0b] shadow-[4px_4px_0px_#ffbe0b,8px_8px_0px_#3a86ff]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#1a0a2e] text-white py-14 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-serif font-black uppercase tracking-widest text-3xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
      <!-- Card template - repeat for each card -->
      <div class="rounded-sm bg-[#1a0a2e] border-4 border-[#d4145a] p-6 md:p-8">
        <h3 class="font-serif font-black uppercase tracking-widest text-2xl md:text-3xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-[#8338ec]/70">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="rounded-sm border-4 border-[#8338ec] bg-[#1a0a2e] text-white focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#d4145a] text-[#ffbe0b] py-14 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-10">
      <div>
        <span class="font-serif font-black uppercase tracking-widest text-2xl md:text-3xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-serif font-black uppercase tracking-widest text-2xl md:text-3xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Maximalism post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-sm font-black uppercase tracking-widest border-4 transition-all duration-200`
- [ ] Card includes: `rounded-sm bg-[#1a0a2e] border-4 border-[#d4145a]`
- [ ] Input includes: `rounded-sm border-4 border-[#8338ec] bg-[#1a0a2e] text-white focus:outline-none`

### Forbidden check
- [ ] Not using `bg-white`
- [ ] Not using `bg-gray-50`
- [ ] Not using `bg-gray-100`
- [ ] Not using `text-gray-300`
- [ ] Not using `text-gray-400`
- [ ] Not using `text-gray-500`
- [ ] Not using `border`
- [ ] Not using `border-[1px]`

### Style rule check
- [ ] 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]

### Style drift check
- [ ] Does not violate: Do not use grayscale neutral colors (gray-300, gray-400, gray-500) as primary colors
- [ ] Does not violate: Do not use excessive whitespace (gap-16 or larger spacing)
- [ ] Does not violate: Do not use a single font throughout the entire page
- [ ] Does not violate: Do not use 1px thin borders (border or border-[1px])
- [ ] Does not violate: Do not use low-saturation color palettes (opacity-30 or lower on primary colors)

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Maximalism

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

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

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] 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)