Art Nouveau

STYLEKIT_STYLE_REFERENCE
style_name: Art Nouveau
style_slug: art-nouveau
style_source: /styles/art-nouveau

# 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 an Art Nouveau design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Rigid right angles and sharp geometric shapes
- Neon or high-saturation modern colors
- Sans-serif fonts for headings
- Dark/black backgrounds
- Short duration-150 or duration-200
- Hard-edge shadows (shadow-[Xpx_Ypx_0px_color])

## Must Follow

- Use organic curves and rounded corners rounded-full, rounded-3xl
- Deep green #2d5016 as primary, gold #c9a227 as accent
- Ivory white #f5f0e1 as background
- Use font-serif serif fonts
- Add soft shadows and glow effects

## Animation & Interaction Rules

- Organic Flow: Animations must flow naturally like plant growth. Use duration-500 or duration-700 with smooth ease-in-out.
- Soft Glow: Hover glow should expand softly outward (shadow grows from small to large, shallow to deep), avoiding rigid displacement.
- Decorative Flourishes: Decorative elements produce slight scaling or rotation on hover (scale(1.1) rotate(5deg)), like flowers blooming.
- Radial Highlight: Cards produce corner glow via radial-gradient pseudo-element on hover (opacity 0 -> 100).
- Gentle Float: Cards float slightly upward on hover -translate-y-1, paired with shadow expansion.

## Color Palette

Primary:
- Deep Green: #2d5016
- Gold: #c9a227
- Ivory White: #f5f0e1
- Wisteria: #8b6db5

## Special Elements

- Organic curve SVG decorations
- Vine and floral patterns
- Gold borders and glow
- Elegant gradient transitions

---

# Art Nouveau Design System

> Organic curve aesthetics from the late 19th century, characterized by flowing vine patterns, natural floral elements, Mucha-style poster decorations, and elegant serif typography -- conveying the harmony of nature and art.

## Design Philosophy

Art Nouveau is an international art movement from the late 19th to early 20th century, drawing inspiration from organic forms in nature and pushing decorative art to its zenith.

Core principles:
- Organic curves: Flowing lines inspired by plants and flowers
- Unity with nature: Harmonious fusion of art and nature
- Holistic design: A unified aesthetic from architecture to furniture to posters
- Beauty of ornamentation: Exquisite decorative patterns endow functional objects with artistic value
- Growth rhythm: Interactions should be slow, soft, and organic like plant growth

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#c9a227]/60
Radius: rounded-2xl
```

### Shadow
```
sm: shadow-sm
md: shadow-md
lg: shadow-lg
hover: hover:shadow-lg
focus: focus:shadow-[0_0_12px_rgba(201,162,39,0.3)]
```

### Interaction
```
Hover translate: hover:-translate-y-1
Hover scale: hover:scale-105
Hover opacity: (none)
Transition: transition-all duration-300 ease-in-out
Active: active:scale-95
```

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

### Type scale
```
Hero: text-4xl md:text-6xl 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-[#f5f0e1]
Background secondary: bg-[#e8dcc8]
Background accent: bg-[#2d5016], bg-[#c9a227], bg-[#8b6db5]
Text primary: text-[#2d5016]
Text secondary: text-[#c9a227]
Text muted: text-[#2d5016]/60
Button primary: bg-[#2d5016] text-[#f5f0e1] border-2 border-[#c9a227]
Button secondary: bg-[#f5f0e1] text-[#2d5016] border-2 border-[#2d5016]
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-none`
- `bg-black`
- `bg-gray-900`
- `bg-[#0a0a1a]`
- `text-[#ff00ff]`
- `text-[#00ffff]`
- `shadow-[0_0_16px_rgba(255,0,255`
- `border-[#ff00ff]`
- `border-[#00ffff]`
- `uppercase`
- `font-bold tracking-widest`

### Banned patterns
- matches `^bg-(?:black|gray-9|\[#0a)`
- matches `^text-\[#(?:ff00ff|00ffff)`
- matches `^shadow-\[0_0_\d+px_rgba\((?:255,0,255|0,255,255)`
- matches `^border-\[#(?:ff00ff|00ffff)`

### Why they are banned
- `bg-black`: Art Nouveau uses warm ivory/cream backgrounds, not dark themes
- `text-[#ff00ff]`: Art Nouveau uses natural greens and golds, not neon colors
- `rounded-none`: Art Nouveau uses organic curves and rounded shapes
- `uppercase`: Art Nouveau uses elegant serif typography, not bold uppercase

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

---

## [REQUIRED]

### Every button must include
```
rounded-full
font-serif
border-2 border-[#c9a227]
transition-all duration-300 ease-in-out
```

### Every card must include
```
rounded-2xl
bg-[#f5f0e1]
border-2 border-[#c9a227]/60
shadow-md
```

### Every input must include
```
rounded-full
border-2 border-[#c9a227]/40
bg-[#f5f0e1]
text-[#2d5016]
focus:border-[#c9a227]
focus:outline-none
```

---

## [COMPARE] Art Nouveau 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-full font-serif border-2 border-[#c9a227] transition-all duration-300 ease-in-out bg-[#2d5016] text-[#f5f0e1] border-2 border-[#c9a227]">
  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-2xl bg-[#f5f0e1] border-2 border-[#c9a227]/60 shadow-md p-5 md:p-8">
  <h3 class="font-serif 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-full border-2 border-[#c9a227]/40 bg-[#f5f0e1] text-[#2d5016] focus:border-[#c9a227] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Art Nouveau page skeletons

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

### Navigation
```html
<nav class="bg-[#f5f0e1] text-[#2d5016] border-2 border-[#c9a227]/60 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 tracking-wide text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 md:gap-6 font-serif text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#2d5016] text-[#2d5016] 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 tracking-wide text-4xl md:text-6xl lg:text-8xl">
      {HEADLINE}
    </h1>
    <p class="font-serif text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-full font-serif border-2 border-[#c9a227] transition-all duration-300 ease-in-out bg-[#2d5016] text-[#f5f0e1] border-2 border-[#c9a227]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#f5f0e1] text-[#2d5016] 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 tracking-wide 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-2xl bg-[#f5f0e1] border-2 border-[#c9a227]/60 shadow-md p-5 md:p-8">
        <h3 class="font-serif tracking-wide text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-serif text-sm md:text-base text-[#2d5016]/60">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="rounded-full border-2 border-[#c9a227]/40 bg-[#f5f0e1] text-[#2d5016] focus:border-[#c9a227] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#e8dcc8] text-[#c9a227] 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 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 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] Art Nouveau post-generation self check

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

### Token check
- [ ] Button includes: `rounded-full font-serif border-2 border-[#c9a227] transition-all duration-300 ease-in-out`
- [ ] Card includes: `rounded-2xl bg-[#f5f0e1] border-2 border-[#c9a227]/60 shadow-md`
- [ ] Input includes: `rounded-full border-2 border-[#c9a227]/40 bg-[#f5f0e1] text-[#2d5016] focus:border-[#c9a227] focus:outline-none`

### Forbidden check
- [ ] Not using `rounded-none`
- [ ] Not using `bg-black`
- [ ] Not using `bg-gray-900`
- [ ] Not using `bg-[#0a0a1a]`
- [ ] Not using `text-[#ff00ff]`
- [ ] Not using `text-[#00ffff]`
- [ ] Not using `shadow-[0_0_16px_rgba(255,0,255`
- [ ] Not using `border-[#ff00ff]`

### Style rule check
- [ ] Use organic curves and flowing lines
- [ ] Use deep green, gold, and ivory white as primary colors
- [ ] Add vine, floral, and other natural decorative elements
- [ ] Use serif or decorative fonts
- [ ] Maintain an elegant and refined overall quality

### Style drift check
- [ ] Does not violate: Do not use rigid right angles and geometric shapes
- [ ] Does not violate: Do not use neon or high-saturation modern colors
- [ ] Does not violate: Do not use rough undecorated design
- [ ] Does not violate: Do not use modern sans-serif fonts for headings
- [ ] Does not violate: Do not use short abrupt duration-150 or duration-200

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

## Absolute Bans (Match and Refuse)

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

- use rigid right angles and geometric shapes
- use neon or high-saturation modern colors
- use rough undecorated design
- use modern sans-serif fonts for headings
- use short abrupt duration-150 or duration-200
- use hard-edge shadows (shadow-[Xpx_Ypx_0])

## 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 rigid right angles and geometric shapes
- [ ] do not use neon or high-saturation modern colors
- [ ] do not use rough undecorated design
- [ ] do not use modern sans-serif fonts for headings
- [ ] do not use short abrupt duration-150 or duration-200