Low Tide — Interactive Tide Pool demo
Low Tide — Interactive Tide Pool

A serene ocean-inspired aesthetic featuring translucent, glassy water effects, fluid layouts, and soft filtered visuals evoking a coastal tide pool at low tide.
Category: Nature & Organic
Era: 2020s Modern
Prompt: 15.9 KB · 2228 words
# SYSTEM PROMPT — Build: "LOW TIDE — An Interactive Tide Pool" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. Every rule below is mandatory. Where a rule and a shortcut conflict, the rule wins. All user-facing copy MUST be written in **English**.

---

## 0. THEME DEFINITION & DESIGN DIRECTION

**Theme:** "LOW TIDE — an interactive tide pool" — a weather/nature landing page in 2020s contemporary glassmorphism.
**Keywords:** tidepool, lowtide, weather, nature, glass, translucent, gradient, blur.
**Mood:** Translucent glass panels drifting over layered seafoam gradients; wet-sand-to-water color transitions; soft light refraction; gentle, water-like motion. Organic, rounded, calm — never corporate or sharp.

**Source palette:** Deep tide slate `#20323a`, pale seafoam `#d8e8e4`, muted seafoam `#9ab8b4`, seafoam `#cfe8e0`, sea green `#7a9a94`, sage `#a8c4be`.

**Required visual effects:** Blur, Glass Effect (`backdrop-filter`), Gradients — plus Transforms, Transitions, CSS Filters, Text Shadows, and generous Border Radius.
**Required techniques:** Flexbox, `backdrop-filter` (with `-webkit-` prefix), CSS filters, transitions, transforms, gradients, text shadows, border radius.
**Decorative constraint:** All decorative shapes (waves, orbs, ripples, tide lines) must be pure CSS — gradients, `border-radius`, pseudo-elements. **No inline SVG anywhere on the page.**

**Glassmorphism mechanics:** Glass surfaces only read as glass when there is color behind them. Attach a fixed, `aria-hidden` ambient backdrop layer to the page (layered seafoam gradients + 3–5 slowly drifting blurred gradient orbs) so every `backdrop-filter` panel has visible content to blur. Do not nest glass panels inside glass panels.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* **No Inline CSS:** The `style="..."` attribute is forbidden in all HTML. Inline event-handler attributes (`onclick=`, etc.) are also forbidden; all behavior is attached via `addEventListener` in `script.js`.
* **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.
* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — changing the site's look must only require editing `style.css`.

### 1.2 CSS Variables & Theme Tokens
Store every visual token in `:root` (and the dark theme block) using CSS variables. Use these exact names, starting from the values below (verify WCAG AA contrast for every text/background pair and adjust values if any pair fails):

```css
:root {
  /* Color — Light "Day Tide" (default) */
  --primary: #20323a;
  --on-primary: #d8e8e4;          /* paired: dark bg ↔ light text */
  --secondary: #9ab8b4;
  --on-secondary: #16303a;        /* paired: light bg ↔ dark text */
  --bg-primary: #d8e8e4;          /* page background — never pure white */
  --bg-secondary: #cfe8e0;        /* raised surfaces / section bands */
  --text-primary: #20323a;        /* paired with --bg-primary */
  --text-secondary: #4f6d67;      /* #7a9a94 darkened to pass AA 4.5:1 */
  --text-success: #23684f;
  --text-error: #a63d33;
  --border-default: rgba(32, 50, 58, 0.15);
  --border-success: rgba(35, 104, 79, 0.55);
  --border-error: rgba(166, 61, 51, 0.55);
  /* Glass tokens */
  --glass-bg: rgba(254, 254, 254, 0.42);
  --glass-border: rgba(255, 255, 255, 0.55);
  --blur-sm: 8px; --blur-md: 16px; --blur-lg: 24px;
  /* Accents (decorative only — borders, icons, gradients) */
  --accent-sea: #7a9a94; --accent-sage: #a8c4be;
  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-base: "Inter", system-ui, sans-serif;
  /* Shape & depth */
  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(32, 50, 58, 0.08);
  --shadow-md: 0 14px 36px rgba(32, 50, 58, 0.16);
  /* Motion & space */
  --spacing-gap: 1.5rem;
  --spacing-section: clamp(4rem, 9vw, 6.5rem);
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  /* Elevation */
  --z-dropdown: 40; --z-modal: 60; --z-toast: 80;
}
```

* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforced in **both** themes, not just the default.
* **Light Mode Background:** Never default to pure white. Where a near-white surface is required (input fields, skeleton base), use `#fefefe`, never `#ffffff`.
* **Accent discipline:** `#7a9a94` and `#a8c4be` are decorative only (borders, icons, gradients) — never body text.

### 1.3 Mandatory Dark Mode Support
* **Implementation:** Define a "Midnight Tide" dark theme under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector, overriding only the tokens: `--bg-primary: #0e1c21; --bg-secondary: #14282e; --text-primary: #d8e8e4; --text-secondary: #a8c4be; --primary: #d8e8e4; --on-primary: #14282e; --secondary: #9ab8b4; --on-secondary: #0e1c21; --text-success: #7fd4b0; --text-error: #ff9a8c; --border-default: rgba(216,232,228,0.16); --glass-bg: rgba(20,40,46,0.5); --glass-border: rgba(154,184,180,0.28);` with deeper shadows. Backgrounds and text must swap seamlessly with **zero HTML restructuring**.
* **Persistence:** Store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`. Provide a visible toggle control in the header with correct `aria-pressed` and `aria-label` (e.g., "Switch to dark mode" / "Switch to light mode"), swapping Google sun/moon icons and announcing the change via a polite `aria-live` region.
* **Exception:** The source theme is light-first — ship Light as the default aesthetic — but Dark Mode must still be fully defined, toggleable, and persisted as required above.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build all layout structures with **Flexbox**.
* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless there is an explicitly justified exception — any deviation must include a CSS comment explaining why (e.g., top-aligned card content stacks).
* **Mobile-Friendly First:** Author base styles single-column, then add multi-column layouts via `min-width` media queries. Rows must convert to columns on small viewports. **No horizontal scrolling at any width down to 320px** — use fluid widths, a `max-width` page container (~72rem), and wrapping flex, never `overflow-x: hidden` as a fix.

### 1.5 Styling Approach: Token-Driven Custom CSS
Use clean custom CSS in `style.css`, organized with `@layer` (reset → base → components → utilities), with **BEM naming** as the single convention (`.hero`, `.card`, `.card--featured`, `.btn`, `.btn--primary`, `.faq__item`). Tailwind CSS is permitted only as a utility layer whose values map back to the CSS variables — never mix raw utility strings with BEM blocks in the same markup. Every reusable component (`.btn`, `.card`, `.input-group`) must consume the `:root` tokens.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Load Google Fonts via `<link>` — **Fraunces** for display headings (bound to `--font-display`) and **Inter** for body/UI text (bound to `--font-base`). Use `clamp()` for fluid type scale.
* **Icons:** Use **Google Material Symbols (Rounded)** via the official stylesheet with `<span class="material-symbols-rounded">` ligatures. Raw inline SVGs and local icon files are forbidden. Decorative icons get `aria-hidden="true"`; icon-only controls require `aria-label`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--glass`, `.btn--danger`)
Style every state via CSS classes:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target 44×44px.
* **Hover:** Visible brightness/shadow shift with `cursor: pointer`.
* **Focus:** Distinct focus ring built from CSS variables (`outline` or `box-shadow`) — never remove outlines without a replacement.
* **Active/Pressed:** `transform: scale(0.97)` click feedback.
* **Loading:** Disables interaction, prevents double-clicks, and renders a CSS spinner or animated 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`, always paired with text or an icon — never color alone.

### 2.2 Card Component (`.card` — features, steps, testimonials, pricing)
* **Default:** Flexible flexbox layout, glass surface (`--glass-bg`, `backdrop-filter: blur(var(--blur-md))`, `--glass-border`, `--radius-lg`, `--shadow-sm`).
* **Hover:** Elevation shift plus subtle `transform: translateY(-2px)`.
* **Focus-within:** Card border highlights when a child link/button receives focus.
* **Loading (Skeleton):** Define a shimmer animation class in CSS (no layout shift) and apply it to the hero's live-tide widget while its data loads.
* **Empty State:** Structured fallback layout with a Google icon and clear guidance text for the tide widget's no-data case.

### 2.3 Form & Input Requirements (`.input-group` — Final CTA email capture)
* **States:** Empty, Focused (outline ring), Filled, Valid (success border + icon), Invalid (error border, `--text-error` message, error icon), Disabled, Read-only.
* **Structure:** Flex container wrapping a `<label>` (bound via `for`/`id`), the input, and a dedicated error-feedback container. Errors link via `aria-describedby` and `aria-invalid`; feedback appears in an `aria-live="polite"` region.

### 2.4 Modal / Popup Requirements (applies to any overlay you introduce)
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
* **UX Features:** Centered flex container (`align-items: center`), backdrop overlay, Google icon close button, keyboard focus trapping, and closing via `Esc` or overlay click. Layer at `--z-modal`.

---

## 3. PAGE STRUCTURE & SECTION SPECIFICATIONS

Build these sections in order. Every section uses a consistent heading pattern (eyebrow chip, `<h2>`, short intro) and `--spacing-section` vertical rhythm, with soft gradient "tide line" dividers between sections.

### 3.0 Ambient Backdrop & Header
* Fixed `aria-hidden` backdrop: layered gradients (`#d8e8e4 → #cfe8e0 → #9ab8b4`) plus drifting blurred orbs (animate `transform`/`opacity` only).
* **Sticky glass header:** flex, `align-items: center`, `justify-content: space-between` — logo (Material "waves" icon + "LOW TIDE" wordmark in Fraunces), anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with gradient-underline hover, theme toggle (Rule 1.3), and a small primary CTA. On mobile, hide anchor links (or implement a disclosure menu layered at `--z-dropdown` with full keyboard support). First focusable element is a "Skip to content" link.

### 3.1 Hero
* `min-height: 88vh`, flex column, centered content over the glass backdrop.
* Eyebrow glass chip with a pulsing status dot **plus text** ("Live tide data") — never color alone.
* `<h1>` in Fraunces with a subtle seafoam text-shadow glow (e.g., "Read the water like a local."), supporting subcopy, and dual CTAs (primary + glass secondary).
* **Live Tide Meter:** a glass card containing an animated progress bar (`role="progressbar"` with `aria-valuenow/min/max` and a visible percentage label), skeleton shimmer on load, populated state, and empty/error fallback. Simulate the data in `script.js`.
* **Pointer ripple:** a soft radial-gradient highlight following the cursor via `--mx`/`--my` custom properties; decorative, `aria-hidden`, disabled under `prefers-reduced-motion`.

### 3.2 Features — 3 Glass Cards
* Responsive flex-wrap row → column on mobile.
* Each card: gradient icon chip with a Material symbol, `<h3>`, 2–3 line description, optional "Learn more" text link with arrow icon. Copy direction: hyperlocal tide charts, layered glass-style forecasts, ecosystem/pool alerts. All card states per Rule 2.2.

### 3.3 How It Works — 3 Steps
* Desktop: horizontal flex row of three step cards connected by an animated gradient "tide line" (pseudo-element or flex divider); mobile: vertical stack with a vertical line.
* Each step: number badge (01/02/03), Material icon, `<h3>`, short copy (e.g., set your shore → watch the water → get pool-side alerts).

### 3.4 Testimonials — 3 Quotes
* Three glass quote cards in a responsive flex-wrap grid (no carousel).
* Each: five Material "star" icons (`aria-hidden`) **plus** accessible text ("Rated 5 out of 5"), the quote with a CSS-generated quotation mark, and an author row with a gradient circular initial avatar, name, and role. Write realistic fictional people (marine biologist, surfer, coastal photographer) — no lorem ipsum.

### 3.5 Pricing — 3 Tiers
* Tiers: "Shoreline" (free), "Tide Pool" (featured), "Open Ocean". Flex row → column on mobile.
* Featured middle card: visually elevated (larger padding/scale, gradient border via CSS-only technique) with a **text** badge ("Most Popular") — not color alone.
* Each tier: name, price with period, blurb, feature list with Material "check" icons, and a CTA button implementing the full Rule 2.1 state matrix. Include a small billing footnote.

### 3.6 FAQ — Accessible Accordion
* 5–6 real, on-theme questions (data sources, coverage, offline use, cancellation, units).
* Pattern: `<h3><button aria-expanded aria-controls>` + region (`role="region"`, `aria-labelledby`), Material chevron rotating on open, CSS height/grid animation, full keyboard operability, visible hover/focus feedback.

### 3.7 Final CTA
* Full-width glass panel over a CSS "wave" gradient band (organic `border-radius` shape).
* `<h2>` (e.g., "Meet me at low tide."), supporting line, and the email capture form per Rule 2.3 — input + submit in a flex row that wraps to a column on mobile, with loading/success/error button states and `aria-live` feedback.

### 3.8 Footer
* Flex layout: brand block (logo, tagline, social icon buttons with `aria-label`s) beside three secondary link columns (Product, Company, Legal) as requested; links get gradient-underline hover and visible focus.
* Bottom bar: copyright with dynamic year, small microcopy, back-to-top link. Columns stack on mobile.

---

## 4. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid sizing and breakpoints with zero horizontal overflow.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable orb drift, ripple, parallax, and bounce; keep opacity-only changes).
* **Accessibility (a11y):** AA contrast in both Light and Dark modes; never rely on color alone for state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); one `<h1>` with sequential heading order; logical DOM/focus order; full keyboard operability with no mouse-only interactions; `aria-live` regions for dynamic feedback (form errors, tide meter, theme changes).
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Destructive Actions:** Any `.btn-danger`/delete-style action must be visually distinct in both themes.
* **Performance:** Animate only `transform`/`opacity` (never `backdrop-filter` directly); use `will-change` sparingly.

---

## 5. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference (`<script src="script.js" defer></script>`).
* **Naming Convention:** BEM throughout — never mix conventions.
* **No Unrequested Placeholders:** Write real, on-theme English copy everywhere; placeholders are permitted only where content was genuinely unspecified.
* **Acceptance checklist before you finish:** zero `style=` attributes; zero inline SVGs; zero inline scripts; dark mode toggles, persists, and defaults to `prefers-color-scheme`; full keyboard-only pass with visible focus; no horizontal scroll at 320px; reduced-motion honored; AA contrast verified in both themes; every button, card, and input implements its complete state matrix.