Grove demo
Grove

A deep forest-green canvas with warm bone Playfair Display serifs and a single rust-red accent, evoking an earthy, editorial aesthetic suited to sustainability and wellness brands.
Category: Nature & Organic
Era: 2020s Modern
Prompt: 18.0 KB · 2457 words
# System Prompt — "Grove" Landing Page (Full Build Specification for Coding Agent)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete "Grove" landing page in one attempt — fully styled, fully functional, no follow-up questions, no truncated output.

**Objective:** A single-page marketing site with 8 sections: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.** All user-facing copy must be written in **English**, in a considered, patient, classical voice fitting an organic/sustainability brand. No lorem ipsum — author real copy.

---

## 1. Theme Definition — "Grove"

**1.1 Brand Identity**
- **Name:** Grove — Organic, Forest, Classical-Serif, Considered
- **Keywords:** Forest green, rust accent, Playfair serif, organic, natural, sustainability, classical, warm
- **Era:** Mid-Century Modern
- **Mood:** Classical, patient, restrained. Generous whitespace, typography-led design, **no neon, no glassmorphism, no decorative gradients, no raster/photographic images, no external image dependencies.** Rhythm is created by alternating deep-forest sections and warm-cream sections.

**1.2 Mandatory Design Token Contract** — implement exactly this structure in `style.css` (all values via `var()`; the `.dark` class on `<html>` plus the `@media` block drives dark mode; this pattern prevents flash-of-wrong-theme on first paint):

```css
:root { /* LIGHT (cream-forward) */
  --primary: #192b1b;            /* deep forest — brand primary */
  --secondary: #c8524a;          /* rust */
  --accent: #c8524a;
  --accent-soft: #C4703C;        /* harmonized rust for hover/rules */
  --accent-text: #a8443c;        /* small-text-safe rust on cream */
  --bg-primary: #e8e4d6;         /* warm cream page base */
  --bg-secondary: #fefefe;       /* raised surfaces/cards on cream */
  --text-primary: #192b1b;       /* deep green on cream — enforced pair */
  --text-secondary: #4f5d4a;
  --text-success: #2e6b3f;  --text-error: #a83226;
  --border-default: rgba(25, 43, 27, 0.18);
  --border-success: #2e6b3f; --border-error: #a83226;
  /* Section rhythm tokens */
  --section-forest-bg: #192b1b; --section-forest-fg: #d4cfbf;
  --section-forest-card: #1e3221; --forest-display: #F5F0E0;
  --section-cream-bg: #e8e4d6;  --section-cream-fg: #192b1b;
  --section-cream-card: #fefefe;
  /* Shape, depth, motion */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(20,30,18,0.12);
  --shadow-md: 0 8px 24px rgba(20,30,18,0.18);
  --spacing-gap: 1.5rem;
  --transition-fast: 150ms; --transition-normal: 200ms; /* Grove signature: 200ms */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --z-header: 40; --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) { /* DARK (forest-forward) */ }
}
.dark { /* same DARK overrides as the media block */ }
```

Dark overrides: `--bg-primary: #192b1b; --bg-secondary: #1e3221; --text-primary: #d4cfbf; --text-secondary: #a3a893; --accent: #C4703C; --accent-soft: #d98a63; --accent-text: #d98a63; --text-success: #7fbf8e; --text-error: #e08c7f; --border-default: rgba(212,207,191,0.2); --border-success: #7fbf8e; --border-error: #e08c7f;` and, critically, the cream sections invert their pairing rather than staying light: `--section-cream-bg: #1e3221; --section-cream-fg: #d4cfbf; --section-cream-card: #16281a;` (forest sections stay `#192b1b`, keeping the alternating rhythm visible in both themes). `--section-forest-*` tokens never change.

**1.3 Contrast Pairing (mandatory, every theme)**
- Every light background token pairs with a dark text token and vice versa: cream `#e8e4d6` ↔ deep green `#192b1b`; forest `#192b1b` ↔ cream `#d4cfbf` / display `#F5F0E0`.
- **Rust discipline:** rust (`--accent` family) is used ONLY for rules, highlights, icons, focus rings, eyebrows/labels, and the primary CTA fill — never for body text, never as a full-section background flood. Where rust appears as small text on cream, use `--accent-text`; verify ≥ 4.5:1 for body text and ≥ 3:1 for large text and UI boundaries in **both** themes.

**1.4 Typography (Google Fonts mandatory — no other font sources)**
- Load via `<link>`: **Playfair Display** (600, 700, italic 400) and **Inter** (400, 500, 600).
- `--font-display: 'Playfair Display', Georgia, serif` → hero H1, all section H2s, card/step/tier titles, testimonial quotes, FAQ questions, footer wordmark.
- `--font-base: 'Inter', system-ui, sans-serif` → body, nav, buttons, forms.
- Scale: H1 `clamp(2.75rem, 6vw, 4.5rem)` / line-height 1.1 in `#F5F0E0`; H2 `clamp(2rem, 4vw, 3rem)` / 1.15; H3 1.375rem; eyebrow labels: Inter 600, 0.75rem, uppercase, letter-spacing 0.14em, rust; body 1rem–1.125rem, line-height 1.7.

**1.5 Icons (Google Material Symbols mandatory)**
- Load Material Symbols (Rounded) via `<link>`; render icons with the icon-font `<span>` pattern. **Forbidden: inline SVGs, local icon files, emoji as icons.**
- Required icons: feature glyphs (`eco`, `spa`, `recycling` or similar), pricing checks (`check`), FAQ chevron (`expand_more`), close (`close`), menu (`menu`), theme toggle (`dark_mode` / `light_mode`), spinner (`progress_activity`), form feedback (`check_circle`, `error`), back-to-top (`arrow_upward`).

**1.6 Grove Signature Details (non-negotiable)**
- `body { border-top: 2px solid var(--accent); }` — a 2px rust rule across the top of the page, visible in both themes.
- Rust rule lines: a 2px × 3rem rust rule under every section H2; hairline rust separators in the footer and hero trust strip.
- **Hover style:** interactive elements (buttons, links) fade to `opacity: 0.8` over `200ms` with `var(--ease-standard)`.
- **Focus rings (refined):** `:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }` everywhere.
- Shadows are soft and warm-tinted (never colored glows).

---

## 2. Strict Rules & Architecture

**2.1 CSS-First & Zero Inline CSS**
- All styling lives in `style.css`. **The `style="..."` attribute is forbidden.** Target everything via class/ID selectors only. HTML stays semantic and skin-agnostic — a full re-theme must be possible by editing CSS alone.

**2.2 CSS Variables & Theme Tokens**
- Every color, radius, shadow, spacing, z-index, duration, and easing value must reference a `var(--...)` token from Section 1.2. No hard-coded hex values in component rules (only inside the token definitions and the explicit section-card exceptions listed).

**2.3 Mandatory Dark Mode**
- Dark mode MUST be implemented exactly per the token contract in 1.2 (`.dark` class + `@media (prefers-color-scheme: dark)` with the `:root:not(.light)` guard).
- **Persistence:** store the user's explicit choice in `localStorage` (key `grove-theme`); on return visits apply it immediately in `script.js`; with no stored choice, defer to `prefers-color-scheme` (which is why the media block exists — no JS needed on first paint).
- **Toggle control:** a visible header button with Material icons (`dark_mode`/`light_mode`), `aria-pressed` reflecting state, and `aria-label="Switch to dark theme"` / `"Switch to light theme"`, synced in JS.

**2.4 Flexbox Layout & Mobile-First**
- Build every layout structure with `display: flex`. **Every flex container defaults to `align-items: center`** unless a documented exception is required (allowed exceptions: card/step content columns use `align-items: stretch` or `flex-start` so text blocks align at the top; nav bar uses `space-between` for justify).
- Mobile-first: multi-column rows (feature cards, steps, pricing, footer columns) collapse to single columns below 768px. **No horizontal scrolling at any viewport down to 320px.** Use `clamp()` and `%`/`rem` for fluid sizing. Add `section { scroll-margin-top: 5rem; }` so sticky-header anchor jumps don't cover headings.

**2.5 Framework / CSS Approach**
- Use **clean, hand-authored custom CSS in `style.css`** (no build step, no framework CDN) — the Grove spec's raw CSS snippets imply a custom-CSS build. All rules map to the token variables and reusable semantic classes (`.btn`, `.card`, `.section-forest`, `.section-cream`, `.input-group`, `.accordion`, etc.).

**2.6 Google Fonts & Icons**
- Reaffirmed as mandatory per 1.4–1.5. No `@font-face` blocks, no font files, no third-party icon packs.

---

## 3. Page Structure & Section-by-Section Specification

**3.0 Global Shell & Header**
- `<!DOCTYPE html>`, `<html lang="en">`, viewport meta, `<title>Grove — Grown slowly. Made to last.</title>`, meta description.
- Skip link ("Skip to main content") → `<main id="main">`. Every section uses semantic `<section>` with an `id` and `aria-labelledby` pointing at its H2.
- **Sticky header**, constant forest treatment in both themes (`background: var(--section-forest-bg)`, bottom hairline `rgba(212,207,191,0.12)`): Playfair wordmark "Grove" (cream), nav links (Features, How It Works, Testimonials, Pricing, FAQ — cream, rust underline on hover/focus), theme toggle, compact rust `.btn` "Get started" → `#pricing`. Below 768px the links collapse behind a `menu` icon button that opens a forest dropdown panel (`--z-dropdown`), closable via `Esc` and overlay click, with `aria-expanded` and focus returned to the toggle on close.

**3.1 Hero (`#hero`, `.section-forest`, full-bleed)**
- `min-height: min(90vh, 100%)`, flex column, centered, generous vertical padding.
- Content: rust uppercase eyebrow (e.g., "Grown, not manufactured"), Playfair H1 in `#F5F0E0`, cream subcopy (max-width ~36rem), CTA row: primary rust button → `#pricing` and outlined cream button → `#features`.
- Below: a trust strip — three short stats separated by rust hairlines (e.g., "100% organic materials · One tree planted per order · 4.9/5 from 2,400 growers").

**3.2 Features (`#features`, `.section-cream`)**
- Eyebrow, Playfair H2, 2px rust rule, one-line intro.
- Three `.card`s in a flex row → column on mobile. Each card: `.section-cream-card` surface, `--radius-md`, `--shadow-sm`, `--border-default`, 2rem padding, flex column; icon row (Material symbol, 32px, rust) with `align-items: center`; Playfair H3; sans body text in `--text-secondary`. Hover: `translateY(-2px)` + `--shadow-md` over `--transition-normal`. Focus-within: border shifts to `--accent`.

**3.3 How It Works (`#how-it-works`, `.section-forest`)**
- Three steps in a flex row → column on mobile. Each step: oversized Playfair numeral ("01/02/03") in rust, Playfair H3 in `#F5F0E0`, body in `#d4cfbf`. On desktop, a rust hairline connects the steps (pseudo-element on the row); on mobile it becomes a short vertical rust rule between stacked steps. Author a source → craft → regenerate narrative.

**3.4 Testimonials (`#testimonials`, `.section-cream`)**
- Three `<blockquote>`s, flex row → column. Each: Material `format_quote` icon in rust, Playfair italic quote in `--section-cream-fg`, attribution line (name in 600 weight + role/company in `--text-secondary`), separated by hairlines. Non-interactive — no hover transforms required.

**3.5 Pricing (`#pricing`, `.section-forest`)**
- Eyebrow, H2, rust rule. Three tier cards (suggest names "Sapling / Grove / Forest" with authored feature lists, 4–5 items each with rust `check` icons, and monthly prices).
- Standard cards: `--section-forest-card` background, cream text, hairline border. **Featured middle card:** cream `#e8e4d6` background with deep-green text (constant in both themes), 2px rust top border, a small rust pill badge "Most popular", `--shadow-md`, slightly larger padding. Buttons: featured tier gets rust `.btn-primary`; others get outlined cream buttons. Small print note under the grid.

**3.6 FAQ (`#faq`, `.section-cream`)**
- H2 + rust rule; six authored Q&As in a centered accordion (max-width ~48rem). Each item is a `.section-cream-card` surface; the question is a full-width `<button>` (flex, `space-between`, `align-items: center`) containing a Playfair question and a rust `expand_more` chevron that rotates 180° over 200ms. Answer region: `aria-labelledby` + hidden/expanded via `[hidden]` or height animation (`grid-template-rows: 0fr → 1fr`, 200ms), `aria-expanded` on the button, fully keyboard operable. Single-open behavior is preferred.

**3.7 Final CTA (`#cta`, `.section-forest`, full-bleed)**
- Centered column: rust eyebrow, large Playfair H2 in `#F5F0E0`, subcopy, and an **email capture form** (see 4.3): visible label, styled input (on-forest surface `--section-forest-card`, hairline border, rust focus ring), rust submit button "Join the grove". On valid submit: button enters loading state (~800ms), then the form area swaps to a success confirmation (`check_circle` + message) announced via `aria-live="polite"`. Include a ghost link "or explore pricing →".

**3.8 Footer (`.section-forest-alt`: background `#1e3221` in both themes, 2px rust top border)**
- Brand column (Playfair wordmark, one-line mission, social links as styled text links). Three secondary-link columns (Explore → on-page anchors; Company; Support/Legal — unspecified targets may use `href="#"` with descriptive accessible names). Bottom bar: © year Grove, tagline "Grown slowly. Made to last.", back-to-top link with `arrow_upward` icon.

---

## 4. Component Design Specifications

**4.1 Buttons** — all via CSS classes, all states defined:
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px; Inter 600. Variants: `.btn-primary` (rust fill, cream text — verify ≥ 3:1 large-text contrast, darken the rust fill if it fails), `.btn-outline` (2px cream border on forest / deep-green border on cream), `.btn-ghost`, `.btn-danger` (must be visually distinct in **both** themes via `--text-error`/`--border-error`).
- **Hover:** `opacity: 0.8`, 200ms (Grove signature) plus subtle shadow shift; `cursor: pointer`.
- **Focus:** refined rust ring per 1.6.
- **Active:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** disables interaction, blocks double-clicks, shows rotating `progress_activity` icon without changing button dimensions; sets `aria-busy="true"`.
- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
- **Success/Error:** temporary state classes tinted by `--text-success` / `--text-error`.

**4.2 Cards**
- **Default:** flex column, `--radius-md`, `--border-default`, `--shadow-sm`, background from the section's card token; content top-aligned (documented flexbox exception).
- **Hover (interactive):** `translateY(-2px)` + `--shadow-md`.
- **Focus-within:** border highlights to `--accent` when a child control gains focus.
- Skeleton and empty states are **not required** for this static marketing page — do not fabricate fake loading UI.

**4.3 Forms & Inputs (email capture in `#cta`)**
- `.input-group`: flex column, gap 0.5rem, wrapping `<label>`, `<input>`, and a dedicated error/feedback container wired with `aria-describedby` and `aria-live="polite"`.
- Input states: empty; **focused** (2px rust ring, no default outline); filled; **valid** (`--border-success` + trailing `check` icon); **invalid** (`--border-error`, red message text via `--text-error`, `error` icon, `aria-invalid="true"`); disabled; read-only. Min height 44px. Client-side email validation only; no backend assumptions; no `alert()`/`confirm()` — feedback is inline and announced.

**4.4 Modal / Popup (conditional)**
- No modal is required. If you add any dialog, it must: be a centered fixed flex container (`align-items: center; justify-content: center`), show a backdrop overlay, animate open/close over 200ms, trap keyboard focus, close on `Esc` and backdrop click, expose `role="dialog"` + `aria-modal="true"` + `aria-labelledby`, use a Material `close` icon button, and layer at `--z-modal`.

**4.5 FAQ Accordion** — per 3.6: `aria-expanded`/`aria-controls`, native `<button>` semantics, 200ms transitions, chevron rotation, works with keyboard alone.

**4.6 Theme Toggle & Mobile Menu** — per 2.3 and 3.0: correct `aria-pressed`/`aria-label` on the toggle; `aria-expanded` on the menu button; both fully keyboard operable.

---

## 5. Core UX & Micro-Interaction Rules

- **Responsive by default:** fluid `clamp()` sizing, flex wrap/collapse at 768px, zero horizontal overflow at 320px, `prefers-reduced-motion` honored (disable transforms, rotations, and smooth scrolling; keep ≤200ms opacity fades only).
- **Motion:** every state change transitions over `var(--transition-normal)` (200ms) with `var(--ease-standard)`; smooth anchor scrolling via CSS with a reduced-motion override.
- **Accessibility (a11y):** WCAG AA contrast in light **and** dark modes; never color alone to communicate state (pair icons/text with color); semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`, `blockquote`); correct ARIA on the accordion, menu, toggle, and form; logical DOM/focus order; skip link; full keyboard operability — no mouse-only interactions; `aria-live` regions for the form and any dynamic feedback.
- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
- **Rust discipline enforced globally** (per 1.3) — no rust body text, no rust section floods.

---

## 6. Deliverable & Output Format

- **Files:** exactly three — `index.html`, `style.css`, `script.js`. The only script reference is a single `<script src="script.js" defer></script>`; **no inline `<script>` blocks, no inline styles**.
- **Naming:** one consistent **BEM** convention across all files; never mix conventions.
- **Assets:** Google Fonts + Material Symbols via `<link>` only; no external images, no icon files, no build tools — the page must run by opening `index.html`.
- **Copy:** all user-facing copy authored in English in the Grove voice (classical, patient, organic). No lorem ipsum. Placeholders (`href="#"`) are permitted only for footer/legal links with unspecified targets.
- **`script.js` scope:** theme init/toggle with `localStorage` persistence, mobile menu, FAQ accordion, form validation + loading/success flow. Nothing else.
- **Response format:** output three complete, clearly labeled code blocks — `index.html`, then `style.css`, then `script.js`. Every section, every state, and both themes must be fully implemented in this single response. No "…", no "rest of the code here", no deferrals. Verify contrast pairs and both theme renderings before finalizing.