Vintage Botanical Scientific Illustration demo
Vintage Botanical Scientific Illustration

A scholarly vintage aesthetic featuring scientific botanical illustrations on aged paper backgrounds with plant diagram elements and muted organic tones.
Category: Art & Illustration
Era: 19th Century Victorian
Prompt: 12.9 KB · 1753 words
# SYSTEM PROMPT — "VINTAGE BOTANICAL SCIENTIFIC ILLUSTRATION" LANDING PAGE

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. Do not ask clarifying questions — make expert decisions and deliver the full result.

**Objective:** A single-page marketing landing page themed **Vintage Botanical Scientific Illustration** — scholarly, organic, timeless, evoking Victorian-era scientific folios and herbarium specimen plates: aged parchment, hand-inked botanical anatomy, ornate vine borders, watercolor washes, coffee stains, ink bleed, and academic figure annotations ("Fig. 1", "Plate II"). The product concept must fit the **Art & Illustration** category (e.g., a curated archive/shop of vintage botanical plates or a botanical illustration masterclass) — invent one coherent concept and write all copy in its scholarly voice, in English.

**Required page sections, in order:** Site header (sticky, with theme toggle), Hero, Features (exactly 3 cards), How It Works (exactly 3 steps), Testimonials, Pricing (exactly 3 tiers), FAQ (accordion), Final CTA, Footer with secondary links.

---

## 0. THEME DESIGN SYSTEM

**0.1 Color Tokens — Light Mode ("Aged Parchment", default), defined in `:root`:**
* `--bg-primary: #F0E5D3` (aged parchment) · `--bg-secondary: #FAF4E8` (lighter parchment for elevated plates/cards)
* `--text-primary: #1A1512` (faded ink) · `--text-secondary: #5D4037` (earth brown)
* `--primary: #4A6741` (leaf green — buttons, links, frames) · `--secondary: #5D4037` (earth brown)
* `--accent: #BF6B63` (dried rose — decorative flourishes and large display text only) · `--accent-deep: #A34F47` (darkened rose required for small accent text to meet AA contrast)
* `--text-success: #4A6741` · `--text-error: #9C3D2E` (madder red) · `--border-default: #4A6741` (use `rgba(74,103,65,0.35)` for hairline variants) · `--border-success: #4A6741` · `--border-error: #9C3D2E`
* Never use pure `#ffffff`; where a near-white is needed, use `#FEFEFE`.

**0.2 Color Tokens — Dark Mode ("Midnight Herbarium"), defined under both `@media (prefers-color-scheme: dark)` and a `.dark` class (class wins):**
* `--bg-primary: #1E1A14` (deep umber parchment) · `--bg-secondary: #2A241B`
* `--text-primary: #EFE6D5` · `--text-secondary: #C9B99B`
* `--primary: #7A9A6E` (sage, lightened for contrast) · `--secondary: #A98A72` · `--accent: #D98E85` · `--accent-deep: #E3A49C`
* `--text-success: #7A9A6E` · `--text-error: #E08573` · `--border-default: rgba(122,154,110,0.45)`
* **Contrast pairing is mandatory in both themes:** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens.

**0.3 Typography (Google Fonts only):** Load via `<link>`: **Playfair Display** (headings/display, per source spec) bound to `--font-display`, and **Lora** (body copy, long-form readability) bound to `--font-base`. Scholarly details: italic Latin specimen captions, small-caps section labels ("PLATE I — FEATURES") via `text-transform` + `letter-spacing`.

**0.4 Icons:** Google Material Symbols (Rounded) only. Suggested glyphs: `local_florist`, `eco`, `spa`, `science`, `menu_book`, `search`, `archive`, `auto_stories`, `check`, `help`, `expand_more`, `close`, `arrow_forward`, `dark_mode`, `light_mode`. **No raw inline SVGs, no local icon files.**

**0.5 Textures & Signature Effects (CSS-only, all decorative layers `aria-hidden` / `pointer-events: none`):**
* **Parchment texture:** apply `background-image: url('https://www.transparenttextures.com/patterns/ag-square.png')` layered over `--bg-primary` on the body (per source spec).
* **Watercolor wash:** soft low-opacity radial gradients (leaf green / dried rose, opacity ≤ 0.12) behind Hero and Final CTA via pseudo-elements.
* **Coffee stains:** 1–2 cup-ring stains built from concentric `radial-gradient` rings in earth brown at low opacity, positioned on Hero and Footer.
* **Ink bleed:** headings may use a subtle 1px low-opacity ink `text-shadow`; all shadows are warm brown-tinted, never pure black.
* **Ornate vine borders:** double-line frames (outer `1px solid --border-default` + inner offset rule via `::after` with `inset`), corner flourishes using rotated Material Symbols glyphs in the four corners of major frames, and dotted "leader lines" (`border-bottom: 1px dotted`) connecting labels to figures.
* **Specimen-plate framing:** cards framed like botanical plates — double border, `padding: 20px` (per source spec), "Fig. N" annotations, italic captions.

**0.6 Shape & Motion Tokens:** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px` (vintage print demands sharp, restrained radii — buttons use `--radius-sm`); `--shadow-sm: 0 1px 3px rgba(93,64,55,0.15)`, `--shadow-md: 0 4px 12px rgba(93,64,55,0.22)`; `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`; `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200`.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. **No `style="..."` attributes anywhere in the HTML.**
* Target everything via class/ID selectors only.
* HTML stays semantic and style-agnostic — retheming the site must require CSS edits only, never markup changes.

**1.2 CSS Variables & Theme Tokens**
* Every visual value routes through the tokens in Sections 0.1–0.6; no hard-coded hex values in component rules.
* Dark mode overrides tokens only — no component-level dark rewrites.

**1.3 Mandatory Dark Mode Support**
* Implement the "Midnight Herbarium" tokens from 0.2 under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`.
* Visible toggle in the header: Material Symbols sun/moon button with correct `aria-pressed` and `aria-label` ("Switch to dark mode" / "Switch to light mode").
* Persist choice in `localStorage` (`'theme'` key); first visit falls back to `prefers-color-scheme`; default presentation is light (parchment).
* **Exception clause:** the source style spec requested light-mode-only; dark mode remains mandatory under these architecture rules and must ship as the variant defined in 0.2.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is justified (equal-height stretch for pricing cards is permitted — document it in a CSS comment).
* Mobile-first: Features, Pricing, and Testimonials rows collapse to a single column below 768px; no horizontal scrolling at any viewport ≥ 320px.

**1.5 Framework Default & Tailwind CSS Integration**
* Use Tailwind CSS (CDN) with custom component classes in `@layer components`, or clean custom CSS organized with `@layer`/`@apply` — pick one and never mix conventions.
* All utilities map back to CSS variables and reusable class names: `.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`, `.card`, `.plate`, `.input-group`, `.section-label`, `.fig-caption`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Google Fonts `<link>` for Playfair Display + Lora; Material Symbols link for icons. No other font or icon sources.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component Requirements** — all states via CSS classes:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; 1px solid border (green for outline variant); radius `--radius-sm`.
* **Hover:** brightness shift + warm shadow; `cursor: pointer`.
* **Focus:** distinct ring — `outline: 2px solid var(--primary); outline-offset: 2px` — never removed.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** disables interaction, prevents double-clicks, swaps label for a CSS spinner or animated Material icon without changing button dimensions; announced via `aria-live`.
* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.
* **Success/Error:** temporary state classes tinted by `--text-success` / `--text-error`, always paired with an icon or text change — never color alone.
* `.btn-danger`: madder-red, visually distinct in both themes.

**2.2 Card Component Requirements** (all cards are "specimen plates"):
* **Default:** flex column, `--bg-secondary`, double ornate border, `padding: 20px`, `--shadow-sm`.
* **Hover (interactive):** `translateY(-2px)` + `--shadow-md` + border shift toward `--accent`; `transition: var(--transition-normal)`.
* **Focus-within:** border highlights when a child link/button receives focus.
* **Loading (Skeleton):** parchment-tinted shimmer keyframe, no layout jump.
* **Empty State:** Material icon + guidance text fallback layout defined in CSS.

**2.3 Form & Input Requirements**
* Structure: `.input-group` flex container wrapping `<label>`, `<input>`, and a dedicated error container with `aria-live="polite"`.
* States: empty, focused (outline ring), filled, valid (success border + check icon), invalid (error border, `--text-error` message, error icon), disabled, read-only.
* The Final CTA email capture must validate client-side with visible feedback; success shows a confirmation message, not a color change alone.

**2.4 Modal / Popup Requirements** (applies to any overlay used, e.g., a pricing detail dialog):
* **States:** opening, open, loading, success/error, closing — all animated via CSS transitions.
* **UX:** centered flex overlay (`align-items: center`), ink-tinted backdrop, Material `close` icon button, keyboard focus trapping, close via `Esc` and backdrop click, `role="dialog"` + `aria-modal` with labelled title, stacked at `--z-modal`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid type via `clamp()`, responsive breakpoints, zero horizontal overflow; `scroll-margin-top` on sections for the sticky header; smooth anchor scrolling disabled under `prefers-reduced-motion`.
* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` (disable transforms and shimmers).
* **Accessibility (a11y):** AA contrast in both themes; never color-only state communication; semantic HTML5 (`header`/`nav`/`main`/`section`/`footer`, strict `h1→h3` hierarchy); correct ARIA on the accordion and theme toggle; logical DOM/focus order; full keyboard operability; `aria-live` regions for form feedback and loading states.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive/distinct actions:** `.btn-danger` and the highlighted pricing tier must be visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File structure:** separate `index.html`, `style.css`, `script.js`. No inline `<style>` or `<script>` blocks; only a single `<script src="script.js" defer>` entry point.
* **Naming convention:** strict BEM (`block__element--modifier`) across the entire deliverable — never mix conventions.
* **Copy:** write real, thematic English copy in a scholarly botanical voice — **no lorem ipsum**. Realistic testimonial names/roles, plausible pricing (e.g., $12 / $29 / $79), 5–6 genuine FAQ questions (licensing, formats, print shipping, refunds).
* **No unrequested placeholders** and no external JS libraries beyond the Tailwind CDN if used; no build step.

---

## 5. PAGE SECTION REQUIREMENTS

* **Header:** sticky parchment bar with hairline bottom border; wordmark (e.g., "The Herbarium Press"); anchor nav (Features, Method, Testimonials, Pricing, FAQ); theme toggle.
* **Hero:** composed as the title plate of a Victorian folio — small-caps eyebrow "PLATE I", oversized Playfair Display headline, Lora subheadline, two CTAs (solid leaf-green primary, outlined secondary), "Fig. 1" annotation with dotted leader line, watercolor wash, one coffee stain, four corner flourishes.
* **Features:** exactly 3 specimen-plate cards, each with a circular icon medallion (Material Symbol inside a 1px green ring), "Fig. 2–4" numbering, title, 2–3 sentences of copy.
* **How It Works:** exactly 3 numbered field-note entries connected by a dotted vine line (CSS border), numbers in small-caps circles.
* **Testimonials:** 3 "letters of correspondence" — italic Lora quotes, oversized decorative quotation mark, small-caps attribution with role, framed cards on `--bg-secondary`.
* **Pricing:** exactly 3 catalogue plates; middle tier elevated (extra padding, accent double border, "Most Selected" badge, `translateY(-4px)` on desktop); feature lists with Material `check` icons; per-tier CTA buttons with full state support per 2.1.
* **FAQ:** accessible accordion using native `<details>/<summary>` (or button + `aria-expanded`), questions styled as index entries with dotted leaders, animated open/close, rotating `expand_more` icon.
* **Final CTA:** full-width parchment banner with ornate double border, watercolor wash, one strong CTA, and an email capture form built per 2.3.
* **Footer:** deep ink-brown panel (inverted tokens), wordmark, secondary link columns (Resources, Company, Legal), small print, dynamic copyright year via JS.

Build the complete page now, in one pass, following every rule above.