Pop Art

STYLEKIT_STYLE_REFERENCE
style_name: Pop Art
style_slug: pop-art
style_source: /styles/pop-art

# 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

STYLE: Pop Art
TYPE: Bold comic-book inspired interface

MUST USE:
- Thick black borders: border-4 border-black
- Hard offset shadows: shadow-[4px_4px_0_#000]
- Bold flat colors: bg-[#ffdd00], bg-[#ff69b4], bg-[#00bfff]
- Heavy typography: font-black uppercase tracking-wider
- Ben-Day dot patterns as background texture
- White or bright color backgrounds
- Comic-style elements (speech bubbles, action words)

MUST AVOID:
- Gradients (use flat color fills only)
- Low saturation / muted colors
- Thin borders (border must be border-2+)
- Soft shadows (shadow-md, shadow-lg)
- Rounded-full shapes
- Minimal / clean design language

COLOR RULES:
- Primary: Yellow (#ffdd00)
- Secondary: Hot Pink (#ff69b4)
- Accent: Electric Blue (#00bfff)
- Borders: Black (#000000)
- Background: White (#ffffff) or bright colors
- Text: Black on light, White on dark colors

SPECIAL EFFECTS:
- Hard shadow offset increases on hover
- Translate shift on hover for depth effect
- Ben-Day dots overlay for pop art texture
- Active state presses shadow inward

## Animation & Interaction Rules

- Comic Pow!: Hover applies exaggerated scale + tilt: `hover:scale-110 hover:-rotate-3` — like a comic SFX panel bursting out of the frame. Never use `hover:translate-y` alone without `scale` and `rotate`.
- Ben-Day Dynamics: Use dual dot layers. Base black dots: `opacity-10 group-hover:opacity-30`. Secondary red dots offset by half a grid: `opacity-0 group-hover:opacity-20`. Together they simulate the Ben-Day color shift characteristic of Lichtenstein prints.
- Punchy Motion: All transitions `duration-100 ease-out` — rubber-stamp speed, not smooth. Never use `duration-200` or slower for hover/active states.
- Active Snap: `active:scale-95 active:rotate-2 active:translate-x-[4px] active:translate-y-[4px] active:shadow-[2px_2px_0_#000]` — the inward press pushes shadow back toward zero, creating a punchy click feel.

---

# Pop Art Design System

> Bold and vivid Pop Art style inspired by Andy Warhol and Roy Lichtenstein. Thick black outlines, halftone Ben-Day dots, comic-style speech bubbles, and highly saturated color blocks. Ideal for creative brands, pop culture, and art showcases.

## Design Philosophy

Pop Art style originates from the 1960s Pop Art movement, represented by Andy Warhol and Roy Lichtenstein, creating visual impact through bold color blocks, thick black outlines, and halftone Ben-Day dots.

Core principles:
- Thick black outlines: All elements use thick black borders to emphasize shapes
- Highly saturated color blocks: Yellow, pink, blue and other pure flat color fills
- Halftone Ben-Day dots: Ben-Day dots are the signature texture of Pop Art
- Comic style: Speech bubbles, action lines, and other comic elements integrated into the interface

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-4
Color: border-black
Radius: rounded-lg
```

### Shadow
```
sm: shadow-[2px_2px_0_#000]
md: shadow-[4px_4px_0_#000]
lg: shadow-[6px_6px_0_#000]
hover: shadow-[6px_6px_0_#000]
focus: shadow-[4px_4px_0_#ff69b4]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:-translate-x-0.5 hover:-translate-y-0.5
Hover opacity: (none)
Transition: transition-all duration-150
Active: active:scale-95
```

### Typefaces
```
Heading: font-black uppercase
Body: font-bold
Mono: font-mono
```

### Type scale
```
Hero: text-5xl md:text-7xl 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
```

### Spacing
```
Section: py-16 md:py-24
Container: px-4 md:px-8
Card: p-6
Gap sm: gap-4
Gap md: gap-6
Gap lg: gap-8
```

### Color roles
```
Background primary: bg-white
Background secondary: bg-[#ffdd00]
Background accent: bg-[#ff69b4], bg-[#00bfff], bg-black
Text primary: text-black
Text secondary: text-gray-800
Text muted: text-gray-500
Button primary: bg-[#ffdd00] text-black border-4 border-black
Button secondary: bg-[#ff69b4] text-white border-4 border-black
```

---

## [FORBIDDEN]

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

### Banned classes
- `bg-gradient-to-r`
- `bg-gradient-to-l`
- `bg-gradient-to-b`
- `bg-gradient-to-t`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `text-gray-300`
- `text-gray-200`
- `rounded-full`
- `border`

### Banned patterns
- matches `^bg-gradient`
- matches `^shadow-(?!\[)`
- matches `^rounded-full`
- matches `^border$`
- matches `^text-gray-[1-3]`

### Why they are banned
- `bg-gradient-to-r`: Pop Art uses flat color fills, not gradients
- `shadow-md`: Use hard offset shadows: shadow-[4px_4px_0_#000]
- `rounded-full`: Keep shapes angular (rounded-lg max)
- `border`: Borders must be thick: border-2 or border-4

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

---

## [REQUIRED]

### Every button must include
```
px-6 py-3
border-4 border-black
rounded-lg
font-black
uppercase tracking-wider
shadow-[4px_4px_0_#000]
transition-all duration-150
```

### Every card must include
```
bg-white
border-4 border-black
rounded-lg
shadow-[6px_6px_0_#000]
```

### Every input must include
```
bg-white
border-4 border-black
rounded-lg
text-black
font-bold
focus:border-[#ff69b4]
focus:shadow-[4px_4px_0_#ff69b4]
```

---

## [COMPARE] Pop Art 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="px-6 py-3 border-4 border-black rounded-lg font-black uppercase tracking-wider shadow-[4px_4px_0_#000] transition-all duration-150 bg-[#ffdd00] text-black border-4 border-black">
  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="bg-white border-4 border-black rounded-lg shadow-[6px_6px_0_#000] p-6">
  <h3 class="font-black uppercase 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="bg-white border-4 border-black rounded-lg text-black font-bold focus:border-[#ff69b4] focus:shadow-[4px_4px_0_#ff69b4]" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Pop Art page skeletons

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

### Navigation
```html
<nav class="bg-white text-black border-4 border-black px-4 md:px-8">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
    <a href="/" class="font-black uppercase text-2xl md:text-3xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-6 font-bold text-xs">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#ff69b4] text-black py-16 md:py-24 px-4 md:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-black uppercase text-5xl md:text-7xl lg:text-9xl">
      {HEADLINE}
    </h1>
    <p class="font-bold text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="px-6 py-3 border-4 border-black rounded-lg font-black uppercase tracking-wider shadow-[4px_4px_0_#000] transition-all duration-150 bg-[#ffdd00] text-black border-4 border-black">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-white text-black py-16 md:py-24 px-4 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-black uppercase text-3xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Card template - repeat for each card -->
      <div class="bg-white border-4 border-black rounded-lg shadow-[6px_6px_0_#000] p-6">
        <h3 class="font-black uppercase text-2xl md:text-3xl">{CARD_TITLE}</h3>
        <p class="font-bold text-sm md:text-base text-gray-500">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-white border-4 border-black rounded-lg text-black font-bold focus:border-[#ff69b4] focus:shadow-[4px_4px_0_#ff69b4]" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#ffdd00] text-gray-800 py-16 md:py-24 px-4 md:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-black uppercase text-2xl md:text-3xl">{LOGO_TEXT}</span>
        <p class="font-bold text-xs">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-black uppercase text-2xl md:text-3xl">{COLUMN_TITLE}</h4>
        <ul class="font-bold text-xs">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Pop Art post-generation self check

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

### Token check
- [ ] Button includes: `px-6 py-3 border-4 border-black rounded-lg font-black uppercase tracking-wider shadow-[4px_4px_0_#000] transition-all duration-150`
- [ ] Card includes: `bg-white border-4 border-black rounded-lg shadow-[6px_6px_0_#000]`
- [ ] Input includes: `bg-white border-4 border-black rounded-lg text-black font-bold focus:border-[#ff69b4] focus:shadow-[4px_4px_0_#ff69b4]`

### Forbidden check
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `bg-gradient-to-l`
- [ ] Not using `bg-gradient-to-b`
- [ ] Not using `bg-gradient-to-t`
- [ ] Not using `shadow-sm`
- [ ] Not using `shadow-md`
- [ ] Not using `shadow-lg`
- [ ] Not using `shadow-xl`

### Style rule check
- [ ] Use highly saturated solid backgrounds bg-[#ffdd00] or bg-white
- [ ] All elements use thick black borders border-4 border-black
- [ ] Use Ben-Day halftone dots as background texture
- [ ] Text uses bold font-black uppercase
- [ ] Buttons and cards use hard shadows shadow-[4px_4px_0_#000]

### Style drift check
- [ ] Does not violate: No gradient colors (must be flat solid fills)
- [ ] Does not violate: No low-saturation/gray-tone colors
- [ ] Does not violate: No thin borders (must be border-2 or above)
- [ ] Does not violate: No soft shadows shadow-md (must be hard shadows)
- [ ] Does not violate: No overly rounded corners rounded-full (keep rounded-none or rounded-lg)

### 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 Pop Art

## Absolute Bans (Match and Refuse)

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

- gradient colors (must be flat solid fills)
- low-saturation/gray-tone colors
- thin borders (must be border-2 or above)
- soft shadows shadow-md (must be hard shadows)
- overly rounded corners rounded-full (keep rounded-none or rounded-lg)
- minimalist/undecorated design language
- duration-200 or longer hover/active transitions (Pop Art demands duration-100 ease-out impact speed)
- single-layer Ben-Day texture (must use dual-layer overlay for color-shifting dot effect)

## 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
- [ ] no gradient colors (must be flat solid fills)
- [ ] no low-saturation/gray-tone colors
- [ ] no thin borders (must be border-2 or above)
- [ ] no soft shadows shadow-md (must be hard shadows)
- [ ] no overly rounded corners rounded-full (keep rounded-none or rounded-lg)