TEMPER — a weather instrument demo
TEMPER — a weather instrument

A weather-instrument aesthetic blending atmospheric gradients, glassy backdrop-filter panels, and animated natural elements into an airy, meteorological interface.
Category: Nature & Organic
Era: 2020s Modern
Prompt: 14.8 KB · 1974 words
# SYSTEM PROMPT — BUILD SPECIFICATION: "TEMPER — A WEATHER INSTRUMENT" LANDING PAGE

**You are a Senior Frontend Engineer and Expert UI Designer.** Your task is to code a complete, production-ready landing page on the first attempt, in a single pass, with no follow-up questions. Follow every rule in this specification exactly.

---

## 0. PROJECT BRIEF

- **Product:** TEMPER — a precision home weather instrument that reads temperature, humidity, pressure, and air quality, and translates the atmosphere into calm, glanceable insight.
- **Theme/Mood:** Weather/Nature, 2020s Contemporary. Keywords: weather, nature, animated, glass, translucent, gradient, blur, grid-layout. The visual metaphor is *"an instrument floating in the sky"* — frosted-glass panels hovering over a soft, slowly drifting atmospheric gradient.
- **Color Palette (source of truth — derive ALL tints, gradients, and translucency from these hexes only, no new hues):**
  - Primary set (Light theme): `#DCE3F2`, `#7C87A6`, `#9FD8FF`
  - Secondary set (Dark theme): `#1A2238`, `#141B2E`, `#070A14`
- **Required Visual Effects:** Blur, Glow, Glass Effect, Neumorphism, Gradients, Hover Effects.
- **Required CSS Techniques:** CSS Grid, Flexbox, Backdrop Filter, Blend Modes, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius, Aspect Ratio.
- **Sections (in this exact order):** Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links. Additionally, build a slim persistent glass navbar as page chrome (brand, anchor links, theme toggle).
- **Theme Mode:** Light is the **default** theme. **Exception clause:** although the source style spec lists Dark mode as secondary, Dark Mode is **mandatory** and must be fully built using the provided dark palette (`#070A14`, `#141B2E`, `#1A2238`).

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in a dedicated `style.css`. **Explicitly forbidden:** the `style="..."` attribute anywhere in the HTML, inline `<style>` blocks, and inline event handlers (`onclick`, etc.).
- All design properties, layout rules, and states are targeted via **class or ID selectors only**.
- HTML must remain clean, semantic, and styling-agnostic: re-theming the entire site must require editing only `style.css`, never the markup.

**1.2 CSS Variables (`var(--...)`) & Theme Tokens**
Define this exact token baseline in `:root` (Light) and override under `.dark` (Dark). You may adjust derived values only to satisfy contrast requirements, and only using the listed palette hues:

```css
:root {
  --primary: #7C87A6;
  --secondary: #9FD8FF;
  --accent: #9FD8FF;
  --bg-primary: #DCE3F2;          /* never pure white */
  --bg-secondary: #EDF2FA;        /* tint of #DCE3F2 */
  --bg-elevated: #FEFEFE;         /* near-white ONLY where needed */
  --text-primary: #1A2238;
  --text-secondary: #4E5872;      /* darkened #7C87A6 for ≥4.5:1 on #DCE3F2 */
  --text-success: #1E7A5F;
  --text-error: #A93226;
  --border-default: rgba(124,135,166,.28);
  --border-success: rgba(30,122,95,.55);
  --border-error: rgba(169,50,38,.55);
  --glass-bg: rgba(254,254,254,.55);
  --glow-accent: 0 0 32px rgba(159,216,255,.45);
  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px;
  --shadow-sm: 0 1px 3px rgba(26,34,56,.10);
  --shadow-md: 0 8px 28px rgba(26,34,56,.14);
  --spacing-gap: clamp(1rem, 2vw, 1.5rem);
  --transition-fast: 150ms; --transition-normal: 300ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --z-nav: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400;
}
.dark {
  --bg-primary: #070A14;
  --bg-secondary: #141B2E;
  --bg-elevated: #1A2238;
  --text-primary: #DCE3F2;
  --text-secondary: #9FD8FF;
  --text-success: #5BC8A6;
  --text-error: #FF8A7A;
  --border-default: rgba(159,216,255,.20);
  --glass-bg: rgba(20,27,46,.55);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.40);
  --shadow-md: 0 10px 32px rgba(0,0,0,.50);
}
```

- **Contrast Pairing (enforced in BOTH themes):** every light background token pairs with dark text; every dark background token pairs with light text. Any gradient or glass surface used behind text must preserve ≥ 4.5:1 body-text contrast — verify and adjust derived values if needed.
- **Accent discipline:** `#9FD8FF` fails as body text on light backgrounds — use it for borders, glows, icons on dark chips, and gradient fills paired with `--text-primary`. Never place light accent text on light backgrounds.

**1.3 Mandatory Dark Mode Support**
- Implement dark tokens via a `.dark` class on `<html>` AND define the same token set under `@media (prefers-color-scheme: dark)` for users who never toggle.
- **Persistence:** store the user's choice in `localStorage` (key `temper-theme`); on first visit, fall back to `prefers-color-scheme`.
- **Toggle control:** a visible icon button in the navbar using Material Symbols (`light_mode` / `dark_mode`) with correct `aria-pressed` and `aria-label` ("Switch to dark mode" / "Switch to light mode"), announcing the change via an `aria-live="polite"` region.
- Theme switching must require **zero HTML restructuring** — only variable swaps.

**1.4 Grid + Flexbox Layout, Mobile-First Alignment**
- Use **CSS Grid** for macro layout (page sections, 3-column card grids, footer columns) and **Flexbox** for component internals.
- **Default Alignment Rule:** every flex container must default to `align-items: center` unless a specific exception is justified in a CSS comment.
- **Mobile-first:** all multi-column grids collapse to a single column below `768px`; breakpoints at 640/768/1024/1280px. Prevent horizontal scrolling (`min-width: 0` on grid/flex children, `overflow-wrap: break-word`).

**1.5 CSS Organization (no framework requested)**
- Write clean, hand-authored CSS in `style.css`, organized via `@layer` in this order: `tokens`, `base`, `layout`, `components`, `utilities` — the heavy use of backdrop-filter, blend modes, and keyframes makes a framework inappropriate here.
- All styling maps to reusable component classes: `.glass`, `.btn`, `.card`, `.input-group`, `.section`, `.container`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Fonts:** Google Fonts via `<link>`: **Space Grotesk** (display/headings — technical instrument character) and **Inter** (body). Bind to `--font-display` and `--font-base`. Use fluid sizing with `clamp()`.
- **Icons:** Google Material Symbols (Outlined, variable font) via `<link>`. **Explicitly forbidden:** raw inline SVGs, local icon files, emoji-as-icons. Use weather-native glyphs: `thermostat`, `air`, `water_drop`, `partly_cloudy_day`, `radar`, `insights`, `check_circle`, `error`, `star`, `arrow_forward`, `close`, `light_mode`, `dark_mode`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (`.btn` + modifiers `.btn--primary`, `.btn--ghost`, `.btn--danger`)**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Primary = gradient `#9FD8FF → #7C87A6` with `--text-primary` label; ghost = glass surface with `--border-default`.
- **Hover:** brightness/shadow shift, `cursor: pointer`.
- **Focus:** distinct `:focus-visible` ring built from `--accent` (outline + offset), never removed.
- **Active:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** disables interaction and double-clicks; renders a CSS spinner (border-based or animated Material Symbol `progress`) via a pseudo-element — **button dimensions must not change**; set `aria-busy="true"`.
- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback using `--text-success` / `--text-error` with icon swap, never color-only.
- `.btn--danger` must be visually distinct in **both** themes (define it even if unused on this page).

**2.2 Card Component (`.card`, glass-based)**
- **Default:** Grid/Flex layout, `--glass-bg` background, `backdrop-filter: blur(14px) saturate(140%)`, 1px `--border-default` border, `--radius-lg`, `--shadow-sm`.
- **Hover:** `transform: translateY(-2px)` + shadow elevation shift.
- **Focus-within:** border brightens to `--accent` when a child link/button receives focus.
- **Loading (`.card--skeleton`):** shimmer keyframe animation on placeholder blocks, sized to prevent layout jump.
- **Empty State (`.card--empty`):** structured fallback with a Material Symbol and guidance text — define the pattern in CSS for reuse.
- **Fallback:** provide an `@supports not (backdrop-filter: ...)` rule swapping `--glass-bg` for solid `--bg-secondary`.

**2.3 Form & Input Component (`.input-group`)**
- **Structure:** flex container wrapping `<label>`, the input, and a dedicated error-feedback container.
- **States (all via CSS classes/attributes):** empty, focused (accent ring), filled, valid (success border + `check_circle` icon), invalid (`--border-error`, error text, `error` icon, message announced via `aria-live="polite"`), disabled, read-only.

**2.4 Modal Component (used for the "Preorder" flow)**
- **States:** opening (fade + slight scale/translate), open, loading (submitting), success/error, closing — all animated with CSS transitions.
- **UX:** centered flex container (`align-items: center`), blurred dark backdrop overlay, close via `Esc`, overlay click, and a Material Symbol `close` icon button; keyboard focus trapping; `role="dialog"`, `aria-modal="true"`, `aria-labelledby`; focus returns to the trigger on close. Layered at `--z-modal`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid typography and spacing; zero horizontal overflow at every breakpoint from 320px up.
- **Smooth Animations:** every state change transitions with `var(--transition-normal)` and `--ease-standard`. **All keyframe animations and transitions must be gated behind `@media (prefers-reduced-motion: no-preference)`** — provide a static, fully legible fallback.
- **Ambient Background Layer (signature effect):** a fixed, `--z`-managed layer behind all content with 3–4 large blurred gradient orbs (CSS `filter: blur()` + `mix-blend-mode: soft-light`/`overlay`) in `#9FD8FF`, `#7C87A6`, `#DCE3F2`, drifting on 20–30s keyframe loops. Wrap in an `isolation: isolate` container so blend modes never bleed into text. In dark mode, dim the orbs and shift blend to `screen`.
- **Glow & Text Shadow:** `--glow-accent` on the featured pricing card and instrument panel; a subtle accent `text-shadow` on the hero headline.
- **Neumorphism:** soft dual box-shadows (derived from `--bg-primary` tones) on the theme toggle, step-number dials, and stat chips in light mode; in dark mode, replace with a soft inner-glow treatment — never hard shadows.
- **Accessibility (a11y):** ≥ 4.5:1 contrast in both themes; never rely on color alone; semantic HTML5 landmarks (`header`, `main`, `section` with `aria-labelledby`, `footer`); a skip link; logical DOM/focus order; full keyboard operability (nav, accordion, modal, pricing toggle, forms); `aria-live` regions for form feedback, theme changes, and price updates.
- **Mandatory Visual Feedback:** every click, hover, toggle, and submission produces a visible state change.
- **Section scrolling:** anchor navigation with `scroll-margin-top` compensating for the sticky navbar; `scroll-behavior: smooth` only under the reduced-motion guard.

---

## 4. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATIONS

**4.0 Navbar (page chrome):** sticky glass bar (`backdrop-filter`, `--z-nav`): TEMPER wordmark, anchor links (Features, How It Works, Pricing, FAQ), theme toggle, compact "Preorder" `.btn--primary`.

**4.1 Hero:** CSS Grid, 2 columns → 1 column on mobile. Left: eyebrow chip ("Precision weather instrument"), H1 headline (authored copy, e.g., "Know the sky before it changes"), subheadline, primary "Preorder TEMPER" + ghost "See how it works" buttons, micro-trust row. Right: a **glass instrument panel** using `aspect-ratio` — a large temperature readout (e.g., "21.4°"), an animated CSS-only waveform/dial (keyframe bars), and stat chips (humidity, pressure, wind) with Material Symbols; the panel gently floats (3–6s translateY oscillation).

**4.2 Features — 3 cards:** `grid-template-columns: repeat(3, 1fr)` → `1fr` below 768px. Each `.card--glass` with an icon chip, title, and copy covering three authored angles: sensing precision, atmospheric intelligence/forecasting, and calm-by-design alerts. Full card state matrix from 2.2.

**4.3 How It Works — 3 steps:** numbered neumorphic dials (01/02/03), connector line on desktop (CSS pseudo-element), stacked single column on mobile. Steps: place/sense → interpret → inform.

**4.4 Testimonials:** 3 glass quote cards in a grid; star ratings via Material Symbols `star`; avatars are **CSS-generated gradient circles with initials** (no external images); quote, name, role.

**4.5 Pricing — 3 tiers:** weather-named tiers (e.g., Stratus / Cirrus / Cumulus). Middle tier featured: "Most popular" badge, `--glow-accent`, subtle desktop scale-up. Include a **monthly/yearly toggle** (`aria-pressed`, `aria-live` price announcement, yearly = 20% off). Each card: price, feature list with `check_circle` icons, CTA button. Featured CTA opens the Preorder modal.

**4.6 FAQ:** 5–6 accordion items using `<details>/<summary>` or button + `aria-expanded`/`aria-controls` regions; chevron rotation and animated height; fully keyboard operable.

**4.7 Final CTA:** full-width glass panel with gradient glow; email-capture `.input-group` exercising **all** input states; submit runs loading → success (icon + confirmation) or error, announced via `aria-live`.

**4.8 Footer:** multi-column CSS Grid: brand blurb, three secondary link groups (Product, Company, Support), social icon links (Material Symbols with `aria-label`), legal bar with copyright. All links are real in-page or `href="#"` anchors — no dead markup.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** exactly three — `index.html`, `style.css`, `script.js`. One `<script src="script.js" defer></script>` reference; **no inline scripts**.
- **script.js scope only:** theme toggle + `localStorage` persistence, FAQ accordion, pricing billing toggle, modal open/close + focus trap, form state simulation (loading/success/error). No libraries, no CDNs beyond Google Fonts/Material Symbols.
- **Naming:** BEM only (`.card`, `.card__title`, `.card--featured`) — never mix conventions.
- **Copy:** author realistic, polished English product copy for TEMPER throughout. **No lorem ipsum.** Placeholders only where content is genuinely unspecified.
- **Completeness:** the build must pass this checklist on first attempt: ✅ zero inline CSS/handlers · ✅ all tokens defined in both themes · ✅ dark mode toggle persists and respects first-visit `prefers-color-scheme` · ✅ every button/input/card state from Sections 2.1–2.4 styled · ✅ no horizontal scroll 320px–1920px · ✅ reduced-motion fallbacks · ✅ keyboard-only full navigation · ✅ glass surfaces have `@supports` fallback · ✅ all eight requested sections present in order.