Herbarium — Folio XII demo
Herbarium — Folio XII

A vintage botanical specimen aesthetic featuring pressed plant illustrations on aged archival paper with Latin nomenclature labels, muted greens and sepia tones, and delicate scientific annotations.
Category: Nature & Organic
Era: 1800s Victorian Scientific
Prompt: 13.3 KB · 1823 words
# SYSTEM PROMPT — Build the "HERBARIUM — folio XII" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-grade Landing Page in a single first attempt, with no follow-up questions.

**Objective:** Build a scientific, 2020s-contemporary landing page inspired by a botanical archive — "HERBARIUM — folio XII" — evoking aged specimen plates, catalog annotations, and translucent glass panels layered over warm sepia gradients. The page contains: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, and Footer with secondary links.**

**Visual language to implement:** Flexbox layouts, Backdrop Filters (glass), CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Border Radius. Effects: **Blur, Glass, Neumorphism, Gradients, 3D/Parallax, Hover Effects.** All user-facing copy must be written in **English**, themed to the herbarium concept (specimens, folios, cataloging, botanical research).

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML. Every visual property lives in `style.css`.
- **Class/ID Selectors Only:** All design properties, layout rules, and interactive states must be targeted via class or ID selectors defined in the stylesheet.
- **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic. Changing the theme later must only require editing CSS — never restructuring markup.

### 1.2 CSS Variables (`var(--...)`) & Theme Tokens
Store every visual token in `:root` (light theme) and override in the dark scope. Required tokens:

- **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Palette mapping (Light theme — the default):**
  - `--bg-primary: #efe6d0` (aged parchment cream), `--bg-secondary: #f6f0e1` (elevated cream surface). Never use `#ffffff`; if a near-white is needed, use `#fefefe`.
  - `--text-primary: #262017`, `--text-secondary: #46392a` (contrast-paired dark text on light backgrounds).
  - `--primary: #262017` (deep sepia ink for primary buttons), `--secondary: #3d3428`. Decorative gradient layer tokens derive from `#2c2318`, `#3a2f22`, `#46392a`.
  - `--text-success: #4d6b34` (muted botanical green), `--text-error: #9c3f2b` (clay red), both WCAG-AA readable on cream.
  - `--border-default: rgba(38, 32, 23, 0.14)`, `--border-error`, `--border-success` derived from the success/error tokens.
  - `--surface-glass: rgba(254, 254, 254, 0.45)` for translucent glass panels.
- **Palette mapping (Dark theme):** `--bg-primary: #262017`, `--bg-secondary: #2c2318`, `--text-primary: #efe6d0`, `--text-secondary: #d8cba9`, `--primary: #efe6d0` (inverted button pairing), `--surface-glass: rgba(61, 52, 40, 0.55)`, `--border-default: rgba(239, 230, 208, 0.18)`.
- **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforce this in **both** themes, not only the default.
- **Radius & Shadows:** `--radius-sm: 2px` (specimen-label corners), `--radius-md: 10px`, `--radius-lg: 20px` (glass panels), `--shadow-sm`, `--shadow-md`, plus a neumorphic pair `--shadow-neu-light` / `--shadow-neu-dark` (e.g., light theme: `6px 6px 14px rgba(38,32,23,0.18), -6px -6px 14px rgba(254,254,254,0.75)`; recompute for the dark surface so embossing remains visible).
- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.22, 1, 0.36, 1)`.
- **Elevation:** `--z-dropdown: 1000`, `--z-modal: 1050`, `--z-toast: 1100`. Layered components must never collide.

### 1.3 Mandatory Dark Mode Support
- Dark mode tokens must be defined under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`/`<body>`.
- All background, text, glass, border, and shadow variables must switch seamlessly with **zero HTML restructuring**.
- Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a visible toggle in the nav with correct `aria-pressed` and `aria-label`, swapping Google Material Symbols sun/moon icons.
- **Exception clause:** The source design marks **Light mode as the primary theme** — ship Light as the default, but Dark mode must still be fully implemented, tested, and toggleable per this rule.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build all layout structure with Flexbox (`display: flex`). **Every flex container defaults to `align-items: center`** unless an explicitly justified exception is documented in a CSS comment.
- All flex layouts must be mobile-responsive out of the box: rows convert to columns below `768px` (e.g., feature cards, pricing tiers, footer columns, nav links). **Horizontal scrolling is prohibited at every viewport width.**

### 1.5 Framework Default & Tailwind CSS Integration
- Use Tailwind CSS (CDN or build) or clean custom CSS driven by Tailwind's `@layer` / `@apply` directives. All utility/component classes must map back to the CSS variables above and to generic reusable class names (`.btn`, `.card`, `.input-group`, `.glass-panel`, `.neu-badge`).

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text fonts:** Google Fonts only — use `Cormorant Garamond` (600/700) for display headings (scientific folio feel), `Inter` (400/500/600) for body, and `IBM Plex Mono` for catalog numbers and annotation labels. Include via `<link>` tags; bind to `--font-display`, `--font-base`, `--font-mono`.
- **Icons:** Google Material Symbols only. **Raw inline SVGs and local icon files are forbidden.** Use Material Symbols for feature icons, accordion chevrons, close buttons, pricing check marks, social links, and the loading spinner (an animated rotating Material Symbol or CSS spinner).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`, `.btn-primary`, `.btn-ghost`, `.btn-danger`)
- **Default:** Flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem;`), minimum touch target 44×44px.
- **Hover:** Brightness/shadow shift with `cursor: pointer`.
- **Focus:** Distinct focus ring built from CSS variables (`outline` or `box-shadow`), fully keyboard navigable and visible over neumorphic surfaces.
- **Active/Pressed:** `transform: scale(0.97)` feedback.
- **Loading:** Disables interaction, blocks double-clicks, and renders a CSS spinner or rotating Google Icon **without changing button dimensions**.
- **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.
- **Success/Error:** Temporary feedback states driven by `--text-success` / `--text-error` with matching border tokens.

### 2.2 Card Component (feature cards, testimonial cards, pricing cards)
- **Default:** Flexible Flexbox layout using `--bg-secondary` or `--surface-glass` with `backdrop-filter: blur(14px)`, a 1px `--border-default` edge, and elevation from `--shadow-sm/md`.
- **Hover:** `transform: translateY(-2px)` with shadow elevation shift, per the requested hover effects.
- **Focus-within:** Card border highlights when a child link/button receives focus.
- **Loading (Skeleton):** Define a shimmer `@keyframes` skeleton style in CSS that prevents layout jumps.
- **Empty State:** Structured fallback layout with a Google Icon and guidance text.

### 2.3 Form & Input Requirements (Final CTA email capture, any footer signup)
- **States:** Empty, Focused (outline ring), Filled, Valid (success border + icon), Invalid (error border, red text, error icon), Disabled, Read-only.
- **Structure:** Flex container wrapping a `<label>`, the input field, and a dedicated error-feedback container; errors announced via an `aria-live="polite"` region. Success state shows an inline confirmation message.

### 2.4 FAQ Accordion & Overlays
- **FAQ accordion:** Each item is a `<button>` (full-width flex row, question + rotating Material Symbols chevron) controlling a panel via `aria-expanded` / `aria-controls`. Open/close animated with a CSS transition (grid-template-rows or max-height technique). Keyboard operable; only one panel open at a time.
- **Modal/Popup (if any overlay is used, e.g., a demo or plan-details dialog):** Opening, Open, Loading, Success/Error, and Closing states all animated via CSS transitions; centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard **focus trapping**, closable via `Esc` and overlay click, layered with `--z-modal`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

### 3.1 Responsive by Default
Fluid sizing, responsive breakpoints, zero horizontal overflow, mobile-first CSS.

### 3.2 Motion, Glass, Parallax & Neumorphism
- **Glass:** Apply `backdrop-filter: blur(14px) saturate(1.1)` (with `-webkit-` prefix and a `@supports` solid-background fallback) to the nav, hero plates, and key cards, layered over the sepia gradient backdrop.
- **Gradients:** Build the page backdrop from layered radial/linear gradients of `#262017`, `#3d3428`, `#3a2f22`, `#46392a`, and cream, with large blurred color blobs (CSS `filter: blur()` on decorative pseudo-elements) feeding the glass panels.
- **Neumorphism:** Emboss step markers, badges, and toggle surfaces with the dual `--shadow-neu` tokens. Never rely on shadow alone to communicate state; maintain AA contrast.
- **3D/Parallax:** Hero specimen plates translate at differing rates on pointermove — JS writes `--px` / `--py` custom properties; CSS consumes them via `calc()` transforms only. Add subtle scroll parallax to decorative layers. **Disable pointer parallax on touch devices and under `prefers-reduced-motion`.**
- **Keyframes (all defined in CSS):** `float` (gentle drift on hero plates), `shimmer` (skeletons), `spin` (loading), `fadeUp` (scroll reveal via IntersectionObserver adding a class), plus any CTA pulse. All state changes use `transition: var(--transition-normal)`; all animation is disabled or reduced under `prefers-reduced-motion`.

### 3.3 Accessibility (a11y)
- AA contrast in **both** light and dark themes. Never communicate state by color alone — pair with icons, text, or borders.
- Semantic HTML5 landmarks (`header`, `main`, `section`, `footer`), correct ARIA roles/labels on custom widgets (theme toggle, accordion, mobile menu), logical DOM/focus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, loading, success confirmations).

### 3.4 Mandatory Visual Feedback & Destructive Actions
- Every click, hover, and submission produces a visible state change. Any `.btn-danger` / destructive action must be visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** Exactly three files — `index.html`, `style.css`, `script.js`. No inline stylesheets; no inline `<script>` blocks beyond one deferred `script.js` reference. Vanilla JS only (theme toggle with `localStorage`, mobile nav, accordion, IntersectionObserver reveals, parallax custom properties, form submit with loading → success/error simulation).
- **Naming Convention:** BEM (`block__element--modifier`) consistently across HTML/CSS/JS — never mix conventions.
- **No Unrequested Placeholders:** Write original, thematic English copy (specimens, folios, cataloging, research) — lorem ipsum is prohibited. Where imagery is needed (e.g., testimonial avatars, plate backgrounds), use `https://picsum.photos/seed/<seed>/<w>/<h>.jpg` placeholders only.

---

## 5. SECTION-BY-SECTION BUILD REQUIREMENTS

1. **Header/Nav:** Fixed glass bar (`backdrop-filter`, `--z-dropdown` tier) with serif "HERBARIUM — folio XII" logo, anchor links (Features, Process, Testimonials, Pricing, FAQ), theme toggle, and primary CTA. Mobile: links collapse behind a Material Symbols hamburger into a glass dropdown.
2. **Hero (min-height ~100svh):** Gradient + blurred blob backdrop; 2–3 floating glass "specimen plates" (cards with mono catalog labels like `FOL. XII · PLATE 012`) animated with `float` keyframes and pointer parallax; serif display headline, supporting subheadline, primary filled CTA + secondary ghost CTA, scroll cue.
3. **Features — 3 cards:** Glass cards, one Material Symbols icon each (e.g., `eco`, `biotech`, `auto_stories`), hover lift, scroll-reveal `fadeUp`.
4. **How It Works — 3 steps:** Numbered `01 / 02 / 03` neumorphic markers connected by a flex line; short step titles + descriptions; staggered reveal animation.
5. **Testimonials — 3 quotes:** Glass cards styled as specimen annotations (mono citation numbers, serif pull-quotes), author name + role, picsum avatars.
6. **Pricing — 3 tiers:** Themed names (e.g., *Seedling*, *Botanist*, *Institution*); middle tier highlighted with a "Most Collected" badge and elevated shadow; feature lists with Material Symbols check icons; each tier has a `.btn` with full state coverage per §2.1.
7. **FAQ — 6 items:** Accordion per §2.4.
8. **Final CTA:** Full-width glass panel over a deep gradient band; headline + email capture form per §2.3 with loading → success flow and `aria-live` feedback.
9. **Footer:** Multi-column flex layout collapsing on mobile — brand blurb with mono "FOLIO XII" stamp, secondary link columns (Product, Company, Resources, Legal), Material Symbols social icons, bottom bar with copyright. All links use valid in-page or `#` hrefs.

Generate the complete, final code now — all three files in full, in one response, following every rule above with no omissions.