Watercolor Art

STYLEKIT_STYLE_REFERENCE
style_name: Watercolor Art
style_slug: watercolor-art
style_source: /styles/watercolor-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 Watercolor Art design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Sharp edges (rounded-none, rounded-sm)
- Hard offset shadows (shadow-[Npx_Npx_0px])
- Thick borders (border-2 or higher)
- Neon or highly saturated colors
- Monospace fonts (font-mono)
- Uppercase text (uppercase)
- Pure black backgrounds (bg-black)

## Must Follow

- Warm paper background bg-[#faf6f0]
- Rose pink as primary color #d4a0a0
- Serif fonts font-serif with generous tracking
- Soft organic corners rounded-2xl (buttons) / rounded-3xl (cards)
- Ultra-soft shadows using rgba with low opacity (0.08-0.18)
- Delicate borders with 15-25% opacity
- Radial gradient backgrounds for watercolor wash effects
- Generous whitespace throughout

## Color Palette

Primary:
- Rose Wash: #d4a0a0
- Warm Paper: #faf6f0
- Cerulean: #7bb8d4
- Sage Green: #8cc5a8
- Lavender Bloom: #c3a0d4
- Ochre Gold: #e8c87a
- Text: #5a3e3e

## Unique Elements

- Paper grain texture overlay (feTurbulence SVG filter)
- Radial gradient buttons simulating pigment pooling
- Watercolor wash section backgrounds (multiple radial-gradients)
- Botanical watercolor accent decorations (leaf/flower shapes)
- Organic blob-like border-radius values

## Animation & Interaction Rules

- Pigment Bloom: Abandon hard 3D translate on hover. The core interaction simulates "watercolor bleeding." Use a large, soft, same-palette colored shadow that spreads outward on hover (e.g., `hover:shadow-[0_10px_40px_rgba(212,160,160,0.5)]`), like pigment dissolving on wet paper. Never use `hover:scale` or `hover:-translate-y`.
- Damp Paper Effect: On card hover, shift background opacity or tint slightly (e.g., `bg-[#faf6f0]/80` → `bg-[#faf6f0]/95`), simulating paper absorbing moisture.
- Liquid Slowness: Watercolor flows slowly. Enforce long transitions: `duration-500` or `duration-700` with `ease-in-out`.
- Soft Press: On `:active`, do not use aggressive scale-down. Add a subtle inset shadow (`active:shadow-[inset_0_2px_4px_rgba(90,62,62,0.1)]`) to simulate a brush pressing gently on damp paper surface.

---

# Watercolor Art Design System

> Authentic watercolor aesthetics with organic bleeding edges, pigment pooling effects, paper texture overlays, and botanical watercolor accents, creating a natural and organic visual experience reminiscent of hand-painted watercolors.

## Design Philosophy

Watercolor Art style pursues the natural, organic aesthetics of real watercolor painting, emphasizing the flow, seepage, and pooling of pigment on wet paper.

Core principles:
- Organic edges: SVG feTurbulence + feDisplacementMap simulate authentic watercolor bleeding edges
- Pigment pooling: Colors concentrate and deepen at edges while center areas remain transparent and layered
- Paper texture: Warm handmade paper base with subtle fiber texture
- Botanical accents: Leaf and flower-shaped watercolor touches add a natural atmosphere
- Wet-on-wet technique: Colors naturally spread, merge, and create unexpected beauty on wet surfaces

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#d4a0a0]/15
Radius: rounded-2xl
```

### Shadow
```
sm: shadow-[0_2px_12px_rgba(212,160,160,0.08)]
md: shadow-[0_4px_20px_rgba(212,160,160,0.12)]
lg: shadow-[0_8px_32px_rgba(212,160,160,0.18)]
hover: hover:shadow-[0_8px_32px_rgba(212,160,160,0.18)]
focus: focus:shadow-[0_0_0_3px_rgba(212,160,160,0.10)]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:scale-[1.02]
Hover opacity: hover:opacity-90
Transition: transition-all duration-500 ease-in-out
Active: active:scale-95
```

### Typefaces
```
Heading: font-serif font-semibold tracking-wide
Body: font-serif
Mono: font-mono
```

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

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

### Color roles
```
Background primary: bg-[#faf6f0]
Background secondary: bg-[#f3ede4]
Background accent: bg-[#d4a0a0]/15, bg-[#7bb8d4]/15, bg-[#8cc5a8]/15, bg-[#c3a0d4]/15
Text primary: text-[#5a3e3e]
Text secondary: text-[#d4a0a0]
Text muted: text-[#5a3e3e]/40
Button primary: bg-[#d4a0a0] text-[#5a3e3e] shadow-[0_4px_20px_rgba(212,160,160,0.25)]
Button secondary: bg-[#7bb8d4]/70 text-[#2a4a5a] shadow-[0_4px_20px_rgba(123,184,212,0.20)]
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-none`
- `rounded-sm`
- `shadow-[2px_2px_0px`
- `shadow-[3px_3px_0px`
- `shadow-[4px_4px_0px`
- `font-mono`
- `bg-black`
- `bg-[#0a0a1a]`
- `border-2`
- `border-4`
- `uppercase`

### Banned patterns
- matches `^shadow-\[\d+px_\d+px_0px`
- matches `^font-mono$`
- matches `^bg-black$`
- matches `^border-[2-4]$`
- matches `^uppercase$`

### Why they are banned
- `font-mono`: Watercolor Art uses serif fonts for elegance, not monospace
- `bg-black`: Watercolor Art uses warm paper backgrounds (#faf6f0), never dark
- `rounded-none`: Watercolor Art uses soft organic corners (2xl/3xl), never sharp edges
- `uppercase`: Watercolor Art uses elegant mixed-case, never aggressive uppercase
- `border-2`: Watercolor Art uses delicate single-pixel borders with low opacity

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

---

## [REQUIRED]

### Every button must include
```
rounded-2xl
font-serif
transition-all duration-500 ease-in-out
```

### Every card must include
```
rounded-3xl
bg-[#faf6f0]
border border-[#d4a0a0]/15
```

### Every input must include
```
rounded-2xl
border border-[#d4a0a0]/20
bg-[#faf6f0]
font-serif
focus:outline-none
```

---

## [COMPARE] Watercolor 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-2xl font-serif transition-all duration-500 ease-in-out bg-[#d4a0a0] text-[#5a3e3e] shadow-[0_4px_20px_rgba(212,160,160,0.25)]">
  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-3xl bg-[#faf6f0] border border-[#d4a0a0]/15 p-6 md:p-8 lg:p-10">
  <h3 class="font-serif font-semibold tracking-wide 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-2xl border border-[#d4a0a0]/20 bg-[#faf6f0] font-serif focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Watercolor 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-[#faf6f0] text-[#5a3e3e] border border-[#d4a0a0]/15 px-6 md:px-12 lg:px-16">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-6 md:gap-8">
    <a href="/" class="font-serif font-semibold tracking-wide text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-6 md:gap-8 font-serif text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#d4a0a0]/15 text-[#5a3e3e] py-16 md:py-24 lg:py-32 px-6 md:px-12 lg:px-16">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-serif font-semibold tracking-wide text-5xl md:text-7xl lg:text-8xl">
      {HEADLINE}
    </h1>
    <p class="font-serif text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-2xl font-serif transition-all duration-500 ease-in-out bg-[#d4a0a0] text-[#5a3e3e] shadow-[0_4px_20px_rgba(212,160,160,0.25)]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#faf6f0] text-[#5a3e3e] py-16 md:py-24 lg:py-32 px-6 md:px-12 lg:px-16">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-serif font-semibold tracking-wide text-2xl md:text-3xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
      <!-- Card template - repeat for each card -->
      <div class="rounded-3xl bg-[#faf6f0] border border-[#d4a0a0]/15 p-6 md:p-8 lg:p-10">
        <h3 class="font-serif font-semibold tracking-wide text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-serif text-sm md:text-base text-[#5a3e3e]/40">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="rounded-2xl border border-[#d4a0a0]/20 bg-[#faf6f0] font-serif focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#f3ede4] text-[#d4a0a0] py-16 md:py-24 lg:py-32 px-6 md:px-12 lg:px-16">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
      <div>
        <span class="font-serif font-semibold tracking-wide text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-serif text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-serif font-semibold tracking-wide text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-serif text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

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

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

### Token check
- [ ] Button includes: `rounded-2xl font-serif transition-all duration-500 ease-in-out`
- [ ] Card includes: `rounded-3xl bg-[#faf6f0] border border-[#d4a0a0]/15`
- [ ] Input includes: `rounded-2xl border border-[#d4a0a0]/20 bg-[#faf6f0] font-serif focus:outline-none`

### Forbidden check
- [ ] Not using `rounded-none`
- [ ] Not using `rounded-sm`
- [ ] Not using `shadow-[2px_2px_0px`
- [ ] Not using `shadow-[3px_3px_0px`
- [ ] Not using `shadow-[4px_4px_0px`
- [ ] Not using `font-mono`
- [ ] Not using `bg-black`
- [ ] Not using `bg-[#0a0a1a]`

### Style rule check
- [ ] Use ultra-soft shadows and extremely low opacity (0.08-0.18) borders
- [ ] Use paper texture overlay on backgrounds (feTurbulence grain overlay)
- [ ] Use radial-gradient on buttons to simulate pigment pooling from center to edges
- [ ] Use organic corners rounded-3xl and very faint borders on cards
- [ ] Use serif font (font-serif) with generous letter spacing

### Style drift check
- [ ] Does not violate: No sharp corners (rounded-none/rounded-sm)
- [ ] Does not violate: No hard offset shadows (shadow-[Npx_Npx_0px])
- [ ] Does not violate: No thick borders (border-2 or above)
- [ ] Does not violate: No pure black backgrounds or highly saturated neon colors
- [ ] Does not violate: No monospace fonts (font-mono)

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

## Absolute Bans (Match and Refuse)

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

- sharp corners (rounded-none/rounded-sm)
- hard offset shadows (shadow-[Npx_Npx_0px])
- thick borders (border-2 or above)
- pure black backgrounds or highly saturated neon colors
- monospace fonts (font-mono)
- uppercase text (uppercase)

## 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 sharp corners (rounded-none/rounded-sm)
- [ ] no hard offset shadows (shadow-[Npx_Npx_0px])
- [ ] no thick borders (border-2 or above)
- [ ] no pure black backgrounds or highly saturated neon colors
- [ ] no monospace fonts (font-mono)