Victorian Botanical

STYLEKIT_STYLE_REFERENCE
style_name: Victorian Botanical
style_slug: victorian-botanical
style_source: /styles/victorian-botanical

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

## Absolutely Forbidden

- Neon or high-saturation fluorescent colors
- Pure black backgrounds or dark themes
- rounded-full fully rounded corners
- Sans-serif fonts as heading fonts
- Gradient backgrounds or rainbow colors
- Large shadows shadow-xl, shadow-2xl

## Must Follow

- Primary color #2d4a2d (dark green), accent #8b6914 (gold)
- Background color #faf5ef (aged paper)
- Use font-serif serif fonts
- Fine-line borders border border-[#2d4a2d]/20
- Moderate rounded corners rounded-lg
- Warm-toned and restrained shadows

## Color Palette

Primary:
- Dark green: #2d4a2d
- Aged paper: #faf5ef
- Gold: #8b6914
- Dried rose: #6b3a3a
- Fern green: #3d5c3d

## Special Elements

- Delicate decorative separator lines
- Serif font italic for botanical name annotations
- tracking-wide and tracking-[0.3em] for labels
- Subtle paper texture backgrounds

## Animation & Interaction Rules
- Specimen Stillness: Specimens are pinned to paper. Strictly no hover:-translate-y (float-up) effects. Interactions must stay on the 2D plane, conveyed only through color and subtle light-shadow changes.
- Magnifying Inspection: On hover, inner titles, initials, or illustrations can have very slow internal scaling (e.g., group-hover:scale-105), simulating a scholar examining a specimen with a magnifying glass.
- Gilded Reveal: During interaction, dark green text or ultra-fine borders should transition extremely slowly (duration-700) to classical gold (#8b6914), simulating gold leaf reflecting candlelight on a book page.
- Ink Deepening: On :active, do not shrink. Instead, deepen text color or background paper color, simulating pressing a dip pen firmly onto old paper to make a mark.

---

# Victorian Botanical Design System

> Victorian-era botanical illustration style with delicate line-drawn plants, floral ornaments, and the elegance of a natural history museum. A classic pairing of dark green and gold.

## Design Philosophy

Victorian Botanical style originates from the natural history research craze of 19th-century Victorian England. Botanists and illustrators of the era used delicate line drawings to document plant specimens from around the world -- these illustrations were not only scientific documents but also artistic treasures.

Core concepts:
- Delicate line drawing: Precise lines reminiscent of copperplate engravings, each stroke carrying the rigor of a scientist
- Natural history aesthetics: The composure and elegance of a museum specimen room, a unity of knowledge and beauty
- Dark green and gold: The classic color pairing of Victorian interior design, deep yet richly layered
- Paper texture: The warm base color of aged parchment, lending digital interfaces a sense of historical weight

This style is suitable for museums, libraries, tea brands, botanical gardens, premium stationery, and nature-themed cultural products. It translates the Victorian era's reverence for the natural world into a contemporary design language, recreating the refinement and restraint of that golden age in digital interfaces.

When designing, focus on the meticulous crafting of details rather than visual impact. Let every element be as carefully arranged as a botanical specimen, containing rich layers of information beneath a seemingly understated surface.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#2d4a2d]/20
Radius: rounded-lg
```

### Shadow
```
sm: shadow-[0_1px_4px_rgba(45,74,45,0.06)]
md: shadow-[0_2px_8px_rgba(45,74,45,0.1)]
lg: shadow-[0_4px_16px_rgba(45,74,45,0.12)]
hover: hover:shadow-[0_4px_12px_rgba(139,105,20,0.12)]
focus: focus:shadow-[0_0_0_2px_rgba(139,105,20,0.1)]
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:border-[#8b6914]/40
Transition: transition-all duration-300
Active: active:scale-[0.98]
```

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

### Type scale
```
Hero: text-4xl md:text-6xl lg:text-7xl
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-12 md:py-20 lg:py-28
Container: px-4 md:px-8 lg:px-12
Card: p-5 md:p-6
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-[#faf5ef]
Background secondary: bg-[#f4ede3]
Background accent: bg-[#2d4a2d], bg-[#8b6914], bg-[#6b3a3a]
Text primary: text-[#2d4a2d]
Text secondary: text-[#8b6914]
Text muted: text-[#2d4a2d]/50
Button primary: bg-[#2d4a2d] text-[#faf5ef] border border-[#8b6914]/60
Button secondary: bg-[#faf5ef] text-[#2d4a2d] border border-[#2d4a2d]/20
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-full`
- `bg-black`
- `bg-gray-900`
- `text-[#ff00ff]`
- `text-[#00ffff]`
- `text-[#ff6b6b]`
- `bg-gradient-to-r`
- `bg-gradient-to-br`
- `shadow-xl`
- `shadow-2xl`
- `font-sans`
- `neon`
- `glow`

### Banned patterns
- matches `^bg-(?:black|gray-9)`
- matches `^bg-gradient`
- matches `^shadow-(?:xl|2xl)`
- matches `^text-\[#(?:ff00ff|00ffff)`

### Why they are banned
- `rounded-full`: Victorian Botanical uses restrained rounded-lg corners, not pill shapes
- `bg-black`: Victorian Botanical uses warm cream backgrounds, not dark themes
- `bg-gradient-to-r`: Victorian Botanical uses flat, parchment-like backgrounds without gradients
- `shadow-xl`: Victorian Botanical uses subtle, warm-toned shadows only
- `font-sans`: Victorian Botanical requires serif typography for headings

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

---

## [REQUIRED]

### Every button must include
```
rounded-lg
font-serif tracking-wide
border border-[#8b6914]/60
transition-all duration-300
```

### Every card must include
```
bg-[#faf5ef]
border border-[#2d4a2d]/20
rounded-lg
shadow-[0_2px_8px_rgba(45,74,45,0.08)]
```

### Every input must include
```
bg-[#faf5ef]
border border-[#2d4a2d]/20
rounded-lg
text-[#2d4a2d]
focus:border-[#8b6914]/60
focus:outline-none
```

---

## [COMPARE] Victorian Botanical 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-lg font-serif tracking-wide border border-[#8b6914]/60 transition-all duration-300 bg-[#2d4a2d] text-[#faf5ef] border border-[#8b6914]/60">
  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-[#faf5ef] border border-[#2d4a2d]/20 rounded-lg shadow-[0_2px_8px_rgba(45,74,45,0.08)] p-5 md:p-6">
  <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="bg-[#faf5ef] border border-[#2d4a2d]/20 rounded-lg text-[#2d4a2d] focus:border-[#8b6914]/60 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Victorian Botanical page skeletons

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

### Navigation
```html
<nav class="bg-[#faf5ef] text-[#2d4a2d] border border-[#2d4a2d]/20 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-[#2d4a2d] text-[#2d4a2d] 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-7xl">
      {HEADLINE}
    </h1>
    <p class="font-serif text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-lg font-serif tracking-wide border border-[#8b6914]/60 transition-all duration-300 bg-[#2d4a2d] text-[#faf5ef] border border-[#8b6914]/60">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#faf5ef] text-[#2d4a2d] 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-3xl">{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="bg-[#faf5ef] border border-[#2d4a2d]/20 rounded-lg shadow-[0_2px_8px_rgba(45,74,45,0.08)] p-5 md:p-6">
        <h3 class="font-serif tracking-wide text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-serif text-sm md:text-base text-[#2d4a2d]/50">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-[#faf5ef] border border-[#2d4a2d]/20 rounded-lg text-[#2d4a2d] focus:border-[#8b6914]/60 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#f4ede3] text-[#8b6914] 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] Victorian Botanical post-generation self check

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

### Token check
- [ ] Button includes: `rounded-lg font-serif tracking-wide border border-[#8b6914]/60 transition-all duration-300`
- [ ] Card includes: `bg-[#faf5ef] border border-[#2d4a2d]/20 rounded-lg shadow-[0_2px_8px_rgba(45,74,45,0.08)]`
- [ ] Input includes: `bg-[#faf5ef] border border-[#2d4a2d]/20 rounded-lg text-[#2d4a2d] focus:border-[#8b6914]/60 focus:outline-none`

### Forbidden check
- [ ] Not using `rounded-full`
- [ ] Not using `bg-black`
- [ ] Not using `bg-gray-900`
- [ ] Not using `text-[#ff00ff]`
- [ ] Not using `text-[#00ffff]`
- [ ] Not using `text-[#ff6b6b]`
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `bg-gradient-to-br`

### Style rule check
- [ ] Use dark green #2d4a2d as the primary color, paired with gold #8b6914 accent elements
- [ ] Use aged paper color bg-[#faf5ef] for backgrounds, creating a parchment texture
- [ ] Use serif fonts font-serif; add tracking-wide letter spacing to headings
- [ ] Use fine-line borders border border-[#2d4a2d]/30, echoing line-drawn illustrations
- [ ] Keep rounded corners moderate rounded-lg; do not use fully rounded corners

### Style drift check
- [ ] Does not violate: Do not use neon or high-saturation fluorescent colors
- [ ] Does not violate: Do not use pure black backgrounds or dark themes
- [ ] Does not violate: Do not use rounded-full fully rounded buttons
- [ ] Does not violate: Do not use bold sans-serif fonts as headings
- [ ] Does not violate: Do not use gradient backgrounds or rainbow 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 Victorian Botanical

## Absolute Bans (Match and Refuse)

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

- use neon or high-saturation fluorescent colors
- use pure black backgrounds or dark themes
- use rounded-full fully rounded buttons
- use bold sans-serif fonts as headings
- use gradient backgrounds or rainbow colors
- use oversized shadows shadow-xl, shadow-2xl
- use dynamic, flashy animation effects

## 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 neon or high-saturation fluorescent colors
- [ ] do not use pure black backgrounds or dark themes
- [ ] do not use rounded-full fully rounded buttons
- [ ] do not use bold sans-serif fonts as headings
- [ ] do not use gradient backgrounds or rainbow colors