ORCHARD — A Seasons Toy demo
ORCHARD — A Seasons Toy

A translucent glassmorphism interface inspired by seasonal orchards, using frosted panels, backdrop blur, and soft layered depth to evoke a fresh, playful toy-like feel.
Category: Glass & Soft UI
Era: 2020s Modern
Prompt: 11.7 KB · 1559 words
# CODING PROMPT — Build Landing Page: "ORCHARD — a Seasons Toy" (Glassmorphism)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page described below on the first attempt. Do not ask clarifying questions; do not output partial code.

**Project Brief:** Create a single-page marketing site for **ORCHARD — a seasons toy**, a tactile toy/object line that transforms across the four orchard seasons. The visual language is **2020s digital glassmorphism**: frosted, translucent glass panels floating over layered warm gradients. Required sections: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links** — plus a sticky glass header with navigation.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in a dedicated `style.css` file. **The `style="..."` attribute is forbidden anywhere in the HTML.**
* All design properties, layout rules, and interaction states must be targeted via **class or ID selectors only**.
* HTML must remain semantic and structure-agnostic: changing the theme must never require editing markup.

**1.2 CSS Variables & Theme Tokens**
Store every visual token in `:root` (and a `.dark` theme block). Light mode (primary presentation) must use at minimum:
* **Colors:** `--primary: #5a4a32` (deep bark brown); `--secondary: #a08c6a` (weathered wood — **decorative only: borders, dividers, large display accents; never body text**, its contrast against light backgrounds is too low); `--accent: #b0552f` (harvest persimmon); `--bg-primary: #faf6ec` (warm cream — not pure white); `--bg-secondary: #e9e3d3`; `--text-primary: #5a4a32`; `--text-secondary: #6a5a40`; `--text-success: #4a7c59`; `--text-error: #b03a2f`; `--border-default: rgba(90,74,50,0.22)`; `--border-error`, `--border-success`.
* **Contrast Pairing (mandatory):** every light background token pairs with dark text, every dark background token pairs with light text — enforced in both themes. Where a near-white surface is genuinely needed, use `#fefefe`, never `#ffffff`.
* **Glass tokens:** `--glass-bg: rgba(250,246,236,0.55)`; `--glass-border: rgba(255,255,255,0.4)`; `--glass-blur: blur(18px) saturate(160%)`; `--glass-shadow` (soft, diffuse, large blur radius).
* **Shape, spacing, motion:** `--radius-sm: 8px`, `--radius-md: 16px`, `--radius-lg: 28px` (glass panels get the large, organic radii of 2020s glassmorphism); `--shadow-sm`, `--shadow-md`; `--spacing-gap: clamp(1rem, 3vw, 2rem)`; `--transition-fast: 150ms`, `--transition-normal: 280ms`; `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Elevation:** `--z-header`, `--z-dropdown` (mobile nav panel), `--z-toast` — layered components must never conflict.

**1.3 Mandatory Dark Mode Support**
* Dark mode **must be fully implemented** even though the source spec marks Light as primary. **Exception clause:** Light mode is the default initial state and the showcase presentation; Dark mode ships as a complete, equally polished secondary theme behind the toggle.
* Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class (e.g., `--bg-primary: #16130e`, `--bg-secondary: #1f1a12`, `--glass-bg: rgba(31,26,18,0.55)`, `--glass-border: rgba(250,246,236,0.12)`, `--text-primary: #f3ead8`, `--text-secondary: #cbbfa4`; brighten `--accent` for contrast on dark, e.g., `#d06a3f`; adjust `--text-error`/`--text-success` for dark backgrounds).
* **Theme switching:** background and text variables must flip seamlessly with zero HTML restructuring. Persist the choice in `localStorage` (key: `orchard-theme`), falling back to `prefers-color-scheme` on first visit.
* **Toggle control:** a visible header button with correct `aria-pressed` and `aria-label` ("Switch to dark theme" / "Switch to light theme"), swapping Material Symbols `light_mode` / `dark_mode` icons.

**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 explicitly justified in a CSS comment.
* Mobile-first responsiveness: multi-column rows (Features, How It Works, Pricing, Testimonials, Footer link groups) collapse to single columns at small viewports. **Horizontal scrolling is forbidden at any width** — use `flex-wrap`, `min-width: 0`, and fluid `clamp()` typography/sizing.

**1.5 Framework Default & Naming Convention**
* Use Tailwind CSS **or** clean custom CSS with `@layer`/`@apply`; given the heavy bespoke glass effects, custom CSS with reusable classes is recommended. Every utility must map back to CSS variables or generic reusable classes (`.btn`, `.card`, `.glass`, `.input-group`).
* Enforce **BEM** naming exclusively across HTML/CSS/JS hooks (`.hero`, `.hero__title`, `.card`, `.card--featured`, `.pricing__tier`, `.faq__item`, `.faq__trigger`). Never mix conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Text: Google Fonts — **Fraunces** (display headlines, warm and orchard-like) and **Inter** (body). Bind them to `--font-display` and `--font-base`.
* Icons: **Google Material Symbols Rounded** (the soft variant suits the toy aesthetic). **Raw inline SVGs and local icon files are forbidden.** Decorative icons get `aria-hidden="true"`; meaningful icons get accessible labels.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons (`.btn`, `.btn--primary`, `.btn--accent`, `.btn--ghost`, `.btn--danger` if used)**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target.
* **Hover:** brightness/lift shift, `cursor: pointer`.
* **Focus:** distinct focus ring built from CSS variables — visible against glass in both themes.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** disables interaction, prevents double-clicks, renders an animated Material Symbol spinner **without changing button dimensions** (applies to the Final CTA submit button).
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback styles driven by `--text-success`/`--text-error` (used by the Final CTA form).

**2.2 Glass Cards (`.card`)**
* **Default:** flex layout, `background: var(--glass-bg)`, `backdrop-filter: var(--glass-blur)`, 1px `--glass-border`, `--radius-lg`, `--shadow-sm`.
* **Hover:** `transform: translateY(-2px)` plus a shadow/border-intensity shift.
* **Focus-within:** card border brightens when a child link/button is focused.
* **Loading (Skeleton):** define a shimmer keyframe class for glass cards that may load asynchronously.
* **Empty State:** not applicable to this static page, but the pattern must not be invented for elements that don't need it.

**2.3 Form & Input — Final CTA email capture**
* States required: **Empty, Focused (outline ring), Filled, Valid (success border + Material check icon), Invalid (error border, `--text-error` message, error icon), Disabled**.
* Structure: flex container wrapping a visually bound `<label>`, `<input type="email">`, and a **dedicated error feedback element with `aria-live="polite"`**. Validation in `script.js` must announce success/error via that region — never color alone.

**2.4 Accordion (FAQ) & Overlay Rules**
* FAQ items use the button + region pattern: each trigger is a real `<button>` with `aria-expanded`, `aria-controls`, keyboard operable. Animate open/close via CSS (grid-rows or max-height transition) — never mouse-only interaction. Only one item open at a time.
* If any overlay is introduced (e.g., the mobile nav panel), it must follow modal rules: animated open/close via CSS transitions, backdrop, visible focus state, closable via `Esc`, focus management, correct `z-index` token.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid sizing, no horizontal overflow, container capped ~1200px with generous padding.
* **Smooth animations:** every state change transitions with `var(--transition-normal)` / `--ease-standard`; **never animate `backdrop-filter`** (animate `transform`/`opacity` instead); all motion respects `prefers-reduced-motion`.
* **Accessibility (a11y):** ≥4.5:1 text contrast on glass surfaces in **both** themes; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); logical DOM/focus order; full keyboard operability; star ratings in Testimonials carry text alternatives ("Rated 5 out of 5"); decorative gradient orbs are `aria-hidden`.
* **Mandatory visual feedback:** every hover, click, and submission triggers a visible state change.
* **Destructive actions:** none expected; if a destructive style is ever needed, `.btn-danger` must be distinct in both themes.
* **Backdrop-filter fallback:** wrap glass effects in `@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))` and raise background alpha so text stays legible without blur.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** separate `index.html`, `style.css`, `script.js`. The only `<script>` tag in HTML is a single deferred reference to `script.js`. No inline CSS, no inline JS.
* **JS scope:** theme toggle with persistence, FAQ accordion, smooth-scroll for anchor links (with `scroll-margin-top` for the sticky header), optional IntersectionObserver scroll-reveal (class toggle only; respects reduced motion), Final CTA email validation with `aria-live` feedback. Nothing else.
* **Copy:** write real, plausible English marketing copy in orchard/harvest vocabulary (seasons, harvest, grafting, sap, fruit). **No lorem ipsum anywhere.** Placeholder `href="#"` is permitted only for footer links with no real destination; all visible text must be meaningful English.

---

## 5. PAGE ARCHITECTURE (build in this order)

1. **Sticky glass header:** "ORCHARD" wordmark, anchor links (Features, How It Works, Pricing, FAQ), theme toggle, "Pre-order" accent button; on mobile the links collapse into a flex-column panel.
2. **Hero:** layered seasonal gradient background (blend the palette browns/creams with `--accent` terracotta) with floating translucent orbs (`aria-hidden`); glass panel containing display headline, subheadline, two CTAs (`.btn--accent` "Reserve yours", `.btn--ghost` "See it in season"), and a decorative four-season indicator.
3. **Features:** 3 glass cards, each with a Material Symbol (e.g., `spa`, `swap_horiz`, `toys`), title, and description of the toy's seasonal transformation.
4. **How It Works:** 3 numbered steps; glass number discs; row → column on mobile; connecting line via pseudo-element only.
5. **Testimonials:** 3 glass quote cards with star ratings (Material `star` icons + accessible labels), quote, name, and role.
6. **Pricing:** 3 tiers — "Sapling" (one season), "Bough" (two seasons, highlighted with accent border, "Most loved" badge, subtle scale/elevation), "Orchard Keeper" (all four seasons). Each has price, feature list with Material check icons, and a full-state CTA button.
7. **FAQ:** 5–6 accordion items in glass panels, per Section 2.4.
8. **Final CTA:** large glass panel over gradient; email capture per Section 2.3 with loading/success/error button states.
9. **Footer:** flex-wrap columns — brand blurb, secondary link groups (Product / Company / Support), Material Symbol social icon buttons with `aria-label`s, copyright line.

---

## 6. GLASSMORPHISM IMPLEMENTATION RECIPE

* Base surface: `background: var(--glass-bg)` + `backdrop-filter: var(--glass-blur)` + 1px `var(--glass-border)` + inset top highlight (`box-shadow: inset 0 1px 0 rgba(255,255,255,0.3)`) + soft outer `--shadow-md`.
* Page background: 2–3 stacked radial/linear gradients in palette hues with slow, subtle orb drift animations (transform-only, reduced-motion safe).
* Keep blur radius ≤ 20px; limit frosted layers per viewport for performance.

**Output the complete, runnable three-file deliverable now.**