Collage Art

STYLEKIT_STYLE_REFERENCE
style_name: Collage Art
style_slug: collage-art
style_source: /styles/collage-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

You are a Collage Art design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Smooth gradients (bg-gradient-to-*)
- Soft rounded corners (rounded-lg, rounded-xl, rounded-2xl, rounded-full)
- Backdrop blur effects (backdrop-blur)
- Soft blur shadows (shadow-[0_Npx_Npx])
- Uniform, perfectly aligned layouts
- Single font family throughout
- NEVER mix style={{ transform: "rotate(Ndeg)" }} with Tailwind hover/group-hover transform classes -- this causes transform conflicts where the inline style overrides Tailwind's CSS variables. Always use rotate-[Ndeg] Tailwind arbitrary class instead.

## Must Follow

- Aged paper background bg-[#f5f0e8]
- Dark charcoal #2d2d2d for borders and text
- Hard offset shadows shadow-[Npx_Npx_0px_#color]
- Sharp corners rounded-sm or rounded-none
- Random rotation via Tailwind arbitrary class rotate-[0.5deg] to rotate-[2deg] (NOT inline style when hover transforms are also applied)
- Mix font families: font-serif, font-sans, font-mono across sections
- Thick borders border-2 border-[#2d2d2d]
- Wrap interactive cards in group div so washi tape can respond via group-hover

## Color Palette

Primary:
- Dark Charcoal: #2d2d2d
- Aged Paper: #f5f0e8
- Cut Red: #e74c3c
- Magazine Blue: #3498db
- Paste Yellow: #f39c12
- Scrap Purple: #9b59b6

## Animation & Interaction Rules

- Paper Lift: On hover, elements should feel physically raised. Use hover:scale-[1.02] combined with a rotation change (e.g., from rotate-[1.5deg] to group-hover:-rotate-[1deg]) and shadow expansion (shadow-[5px_5px] → shadow-[12px_12px]). This simulates a piece of paper being pinched up off a surface.
- Tape Parallax: The washi tape decoration on a card should react slightly differently from the card itself. Wrap the whole component in a group div. The tape div has group-hover:-translate-y-1 group-hover:rotate-[6deg], while the card has group-hover:-translate-y-2 group-hover:-rotate-[1deg]. The tape appears to shift independently, reinforcing the multi-layer physical illusion.
- Desk Press: On :active, the shadow must sharply collapse (shadow-[12px_12px] → shadow-[2px_2px]) and the element shifts slightly down (active:translate-y-1), simulating pressing a paper scrap firmly onto a corkboard.
- Snappy Easing: Use duration-200 ease-out or duration-300 ease-out for all paper interactions. Paper is light and snaps quickly.
- Transform Rules: ALWAYS use Tailwind rotate-[Xdeg] arbitrary class for initial rotation. NEVER use style={{ transform: "rotate(Xdeg)" }} on elements that also use Tailwind hover/group-hover transforms -- they will conflict.

## Unique Elements (Collage-Only)

1. Random rotation: rotate-[0.7deg], -rotate-[1.5deg], rotate-[2deg] etc. (Tailwind arbitrary, not inline style)
2. Washi tape: repeating-linear-gradient(90deg, color 0px, color 3px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 6px) strips in a group-hover reactive div
3. Mixed typography: alternate font-serif, font-sans, font-mono across headings, labels, body text
4. Torn paper edges: polygon clip-path with irregular jagged points
5. Dashed borders: border-dashed for stamp/cut-line effects

## Self-Check

After generating code:
1. All initial rotations use rotate-[Xdeg] Tailwind class, not inline style (when hover transforms present)
2. Interactive cards wrapped in group div for tape parallax
3. hover state: scale-105 + rotation change + shadow expansion
4. active state: shadow collapses + slight downward shift
5. Duration 200-300ms ease-out

---

# Collage Art Design System

> Magazine collage and mixed-media aesthetics with paper cutouts, multi-layer stacking, torn paper edges, and mixed typography, creating a visually impactful handcrafted creative experience.

## Design Philosophy

Collage Art style originates from the mixed-media traditions of Dadaism and Pop Art, emphasizing the collision and fusion of different materials, fonts, and images.

Core principles:
- Random rotation: Each element has subtle rotate transforms (0.5-2deg), simulating the imprecision of hand-pasting
- Washi tape decoration: repeating-linear-gradient striped pseudo-elements simulate semi-transparent washi tape
- Mixed typography: Alternating font-serif, font-sans, font-mono on the same page creates a magazine clipping feel
- Torn paper edges: polygon clip-path creates irregular jagged torn paper edges
- Hard offset shadows: shadow-[Npx_Npx_0px] solid offset shadows create physical depth of layered paper scraps
- Paper physicality: On hover, paper scraps lift up (scale-105 + rotation adjustment); on active, pressed down onto the desk (shadow collapses)

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#2d2d2d]
Radius: rounded-none
```

### Shadow
```
sm: shadow-[3px_3px_0px_#2d2d2d]
md: shadow-[5px_5px_0px_#2d2d2d]
lg: shadow-[7px_7px_0px_#2d2d2d]
hover: hover:shadow-[7px_7px_0px_#2d2d2d]
focus: focus:shadow-[3px_3px_0px_#2d2d2d]
```

### Interaction
```
Hover translate: hover:translate-x-[1px] hover:translate-y-[1px]
Hover scale: (none)
Hover opacity: (none)
Transition: transition-all duration-200 ease-in-out
Active: active:translate-x-[3px] active:translate-y-[3px] active:shadow-none
```

### Typefaces
```
Heading: font-serif font-bold uppercase tracking-wider
Body: font-sans
Mono: font-mono text-xs uppercase tracking-[0.2em]
```

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

### Spacing
```
Section: py-12 md:py-20 lg:py-28
Container: px-4 md:px-8 lg:px-12
Card: p-5 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-[#f5f0e8]
Background secondary: bg-[#ebe4d8]
Background accent: bg-[#e74c3c], bg-[#3498db], bg-[#f39c12], bg-[#9b59b6]
Text primary: text-[#2d2d2d]
Text secondary: text-[#e74c3c]
Text muted: text-[#2d2d2d]/50
Button primary: bg-[#e74c3c] text-white border-2 border-[#2d2d2d] shadow-[4px_4px_0px_#2d2d2d]
Button secondary: bg-[#3498db] text-white border-2 border-[#2d2d2d] shadow-[4px_4px_0px_#2d2d2d]
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `bg-gradient-to-r`
- `bg-gradient-to-b`
- `bg-gradient-to-br`
- `backdrop-blur`
- `backdrop-blur-sm`
- `backdrop-blur-md`
- `shadow-[0_`

### Banned patterns
- matches `^rounded-(?:lg|xl|2xl|3xl|full)$`
- matches `^bg-gradient-`
- matches `^backdrop-blur`
- matches `^shadow-\[0_`

### Why they are banned
- `rounded-full`: Collage Art uses sharp corners (rounded-sm/rounded-none) for cut-paper feel
- `rounded-lg`: Collage Art uses rounded-sm or rounded-none, never soft corners
- `bg-gradient-to-r`: Collage Art uses flat solid color blocks, not smooth gradients
- `backdrop-blur`: Collage Art is opaque and layered paper, not translucent glass
- `shadow-[0_`: Collage Art uses hard offset shadows (Npx_Npx_0px), 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-bold uppercase
border-2 border-[#2d2d2d]
transition-all duration-200 ease-in-out
```

### Every card must include
```
rounded-none
bg-[#f5f0e8]
border-2 border-[#2d2d2d]
```

### Every input must include
```
rounded-none
border-2 border-[#2d2d2d]
bg-[#f5f0e8]
focus:outline-none
```

---

## [COMPARE] Collage 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="rounded-sm font-bold uppercase border-2 border-[#2d2d2d] transition-all duration-200 ease-in-out bg-[#e74c3c] text-white border-2 border-[#2d2d2d] shadow-[4px_4px_0px_#2d2d2d]">
 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-none bg-[#f5f0e8] border-2 border-[#2d2d2d] p-5 md:p-8">
 <h3 class="font-serif font-bold uppercase tracking-wider text-xl md:text-2xl">{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-none border-2 border-[#2d2d2d] bg-[#f5f0e8] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Collage 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-[#f5f0e8] text-[#2d2d2d] border-2 border-[#2d2d2d] 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-bold uppercase tracking-wider text-xl md:text-2xl">
 {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-[#e74c3c] text-[#2d2d2d] py-12 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-bold uppercase tracking-wider text-5xl md:text-7xl lg:text-8xl">
 {HEADLINE}
 </h1>
 <p class="font-sans text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-sm font-bold uppercase border-2 border-[#2d2d2d] transition-all duration-200 ease-in-out bg-[#e74c3c] text-white border-2 border-[#2d2d2d] shadow-[4px_4px_0px_#2d2d2d]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#f5f0e8] text-[#2d2d2d] py-12 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-bold uppercase tracking-wider text-2xl 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-none bg-[#f5f0e8] border-2 border-[#2d2d2d] p-5 md:p-8">
 <h3 class="font-serif font-bold uppercase tracking-wider text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="font-sans text-sm md:text-base text-[#2d2d2d]/50">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="rounded-none border-2 border-[#2d2d2d] bg-[#f5f0e8] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#ebe4d8] text-[#e74c3c] py-12 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-bold uppercase tracking-wider text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="font-sans text-xs md:text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-serif font-bold uppercase tracking-wider text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="font-sans text-xs md:text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Collage Art 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-bold uppercase border-2 border-[#2d2d2d] transition-all duration-200 ease-in-out`
- [ ] Card includes: `rounded-none bg-[#f5f0e8] border-2 border-[#2d2d2d]`
- [ ] Input includes: `rounded-none border-2 border-[#2d2d2d] bg-[#f5f0e8] focus:outline-none`

### Forbidden check
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-3xl`
- [ ] Not using `rounded-full`
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `bg-gradient-to-b`
- [ ] Not using `bg-gradient-to-br`

### Style rule check
- [ ] Use mixed fonts (serif font-serif + sans-serif font-sans + monospace font-mono alternating)
- [ ] Use Tailwind arbitrary value rotation rotate-[Ndeg] instead of inline style transform (avoid hover conflicts)
- [ ] Use hard offset shadows shadow-[Npx_Npx_0px_color] for layered depth
- [ ] Add washi tape decorations: repeating-linear-gradient striped color blocks
- [ ] Use polygon clip-path to create torn paper edge effects

### Style drift check
- [ ] Does not violate: No smooth gradients (bg-gradient-to-*)
- [ ] Does not violate: No soft rounded corners (rounded-lg or above)
- [ ] Does not violate: No frosted glass effects (backdrop-blur)
- [ ] Does not violate: No soft shadows (shadow-[0_Npx_Npx])
- [ ] Does not violate: No uniform, perfectly aligned layouts

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

---

## [EXAMPLES] Example prompts

### 1. 

，、

```
Use Collage Art style to create a zine-style page:
1. Background: aged paper #f5f0e8 with torn paper scrap decorations (clip-path polygon)
2. Hero: mixed fonts (serif title + sans subtitle + mono caption), random rotations on each line using rotate-[Xdeg] Tailwind class
3. Cards: hard offset shadows in different colors, each card rotated differently with rotate-[Xdeg]
4. Washi tape: repeating-linear-gradient stripe decorations, wrapped in group div for parallax effect
5. Buttons: rotated via rotate-[Xdeg], hover paper-lift effect (scale-105 + rotation change + shadow expand)
6. Form: mixed font labels (serif/sans/mono), dashed border textarea
7. Typography mixes serif, sans-serif, and monospace throughout
```

## Absolute Bans (Match and Refuse)

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

- smooth gradients (bg-gradient-to-*)
- soft rounded corners (rounded-lg or above)
- frosted glass effects (backdrop-blur)
- soft shadows (shadow-[0_Npx_Npx])
- uniform, perfectly aligned layouts
- use style={{ transform }} inline property on elements with hover/group-hover Tailwind transforms (causes transform conflicts)

## 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 smooth gradients (bg-gradient-to-*)
- [ ] no soft rounded corners (rounded-lg or above)
- [ ] no frosted glass effects (backdrop-blur)
- [ ] no soft shadows (shadow-[0_Npx_Npx])
- [ ] no uniform, perfectly aligned layouts