AER — Climate Dial demo
AER — Climate Dial

A neumorphic climate dial interface where soft extruded and inset surfaces with subtle monochrome shadows create a tactile, sculpted control panel aesthetic.
Category: Glass & Soft UI
Era: 2020s Modern
Prompt: 14.5 KB · 1987 words
# CODING AGENT PROMPT — "AER — Climate Dial" Neumorphic Landing Page (Full Build, First Attempt)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code the **complete, production-ready landing page described below in a single first attempt**. Every rule in this document is mandatory. Do not output partial code, do not ask clarifying questions, and do not skip states or sections.

## 0. PROJECT BRIEF & ART DIRECTION

* **Product:** AER — a smart climate control dial for the home. The brand identity is a physical-feeling, soft circular dial that lets users set their ideal indoor climate.
* **Theme:** "AER — climate dial" — **Neumorphism (softneum)** with **gradients**, 2020s Digital aesthetic.
* **Light/Dark:** Light-first aesthetic (see exception clause in 1.3).
* **Keyword anchors:** softneum, dial, climate, neumorphism, gradient.
* **Color Palette (source of truth):** Primary surfaces `#E8EEF2`, `#c3ccd4`, `#ffffff`; Secondary accents/text `#4db8e8`, `#4a5a66`, `#8a99a5`.
* **Visual Effects:** Neumorphism (dual box-shadow extrusion: light highlight top-left, dark shadow bottom-right, on a `#E8EEF2` canvas), soft gradients (`#4db8e8` blended into `#E8EEF2`/`#c3ccd4`), CSS Filters, CSS Masks.
* **Required CSS Techniques:** Flexbox, CSS Filters, Transitions, Transforms, Gradients, Box Shadows, Border Radius, CSS Masks.
* **Sections (in this exact order):** Header/Nav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.
* **Copy:** Write all user-facing copy in **English**, as realistic product marketing copy for AER (no lorem ipsum).

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* Keep **all** styling in a dedicated `style.css` file. **Explicitly forbidden:** the `style="..."` attribute anywhere in the HTML.
* Target all design properties, layout rules, and states via class or ID selectors only.
* Keep the HTML semantic and styling-agnostic: changing the site's look must require editing only CSS, never markup.

**1.2 CSS Variables (`var(--...)`) & Theme Tokens**
Store every visual token in `:root` (and theme classes). Required tokens:

* **Colors:** `--primary: #4db8e8`, `--secondary: #4a5a66`, `--bg-primary: #E8EEF2`, `--bg-secondary: #ffffff`, `--text-primary: #4a5a66`, `--text-secondary: #8a99a5`, plus `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* **Accent Text Rule:** `#4db8e8` fails contrast on `#E8EEF2` for text. Define `--primary-strong` as a darker derived shade of `#4db8e8` (e.g., `#1f7fb0`) and use it for any accent-colored *text*, links, and focus rings. Reserve `#4db8e8` itself for non-text accents (dial arc, gradient fills, icon fills).
* **Neumorphic Shadow Tokens:** `--neu-light: #ffffff` and `--neu-dark: #c3ccd4`, composed into `--shadow-neu-out` (e.g., `8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light)`), `--shadow-neu-in` (the inverted pair for pressed/inset surfaces), and `--shadow-neu-flat`.
* **Gradient Tokens:** `--gradient-accent` (a soft blend of `#4db8e8` toward `#E8EEF2`/`#c3ccd4`) used for dial arcs, featured pricing borders, and Final CTA panel tinting — gradients must stay within the source palette.
* **Contrast Pairing:** Every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforce this in **all** themes, not only the default.
* **Light Mode Background:** Never default to pure white; the canvas is `#E8EEF2`. Where a near-white surface is required, use `#fefefe`, never `#ffffff` as a page background (`#ffffff` is reserved for shadow highlights and card surfaces).
* **Radius, Shadows, Motion, Depth:** `--radius-sm`, `--radius-md`, `--radius-lg` (use a generous `--radius-lg`/`50%` on dial and pill shapes — softneum demands soft edges), `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode Support**
Dark Mode **must always be defined**, even though this theme is Light-first. **Exception clause:** the source spec requests a Light-primary aesthetic, so Light neumorphism is the default presentation — but a complete, high-contrast dark mode must still be shipped alongside it.
* Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`/`<body>`.
* Dark neumorphism tokens: derive the dark canvas from the `#4a5a66` family (e.g., `--bg-primary: #232a30`), with `--neu-light` and `--neu-dark` redefined as lighter/darker lifts of that canvas (e.g., `#2c343b` / `#171c21`) so extrusions remain visible.
* Theme switching must swap variables seamlessly with zero HTML restructuring.
* Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a **visible neumorphic toggle** in the header with correct `aria-pressed` and `aria-label` ("Switch to dark mode" / "Switch to light mode"), containing a Google Material Symbols icon.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build every layout structure with Flexbox.
* **Every flex container must default to `align-items: center`** unless an explicitly justified exception is documented in a CSS comment.
* Mobile-first: all rows (feature grid, pricing tiers, footer columns, hero content) collapse to columns on small viewports via breakpoints. **No horizontal scrolling at any viewport width.**

**1.5 Framework Default & Tailwind CSS Integration**
* Use Tailwind CSS as the utility base, with all theme-aware styling driven through `@layer` / `@apply` and CSS variables.
* Every repeated pattern must map to generic reusable classes — at minimum `.neu-card`, `.neu-btn`, `.neu-input`, `.neu-inset`, `.section`, `.container`, `.dial` — never one-off utility soup for component states.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load via `<link>`: **Sora** (display/headings) and **Inter** (body), bound to `--font-display` and `--font-base`. Apply fluid sizing with `clamp()` for the hero headline.
* Icons: **Google Material Symbols, Rounded variant** (`settings`, `thermostat`, `bolt`, `savings`, `arrow_forward`, `check_circle`, `expand_more`, etc.) — the rounded set matches the softneum aesthetic. **Explicitly forbidden:** raw inline SVGs and local icon files. **Exception clause for this project:** the hero climate dial graphic must also be constructed from pure CSS (divs, `conic-gradient`, `repeating-conic-gradient`, box-shadows, CSS masks) plus Material Symbols glyphs — no SVG anywhere on the page.

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component Requirements**
Style every state via CSS classes (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`):

* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Raised neumorphic look via `--shadow-neu-out`; the `.btn--primary` variant instead uses the `--gradient-accent` fill with white text.
* **Hover:** subtle lift or shadow intensification plus a `filter: brightness()` shift; `cursor: pointer`.
* **Focus:** distinct ring built from `--primary-strong` (`box-shadow` ring that does not collide with the neumorphic shadows) for keyboard navigation.
* **Active/Pressed:** the signature neumorphic press — `box-shadow: var(--shadow-neu-in)` plus `transform: scale(0.97)`.
* **Loading:** disable interactions, prevent double-clicks, render an animated Material Symbols glyph or CSS spinner **without changing button dimensions**.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error` (used on the Final CTA form submit).

**2.2 Card Component Requirements**
Apply to Features cards, Testimonial cards, and Pricing tiers:

* **Default:** flexible Flexbox layout, `--bg-secondary` surface sitting on the `--bg-primary` canvas, styled with `--shadow-neu-out` and a soft `--border-default`.
* **Hover:** `transform: translateY(-2px)` with a shifted/deepened shadow.
* **Focus-within:** card borders highlight via `--primary` when a child link/button receives focus.
* **Loading (Skeleton):** define a shimmer animation in CSS on `.neu-card--skeleton` that preserves final dimensions (no layout shift).
* **Empty State:** a structured fallback with a Material Symbols icon inside a neumorphic inset circle and guidance text.
* **Testimonials:** each card contains a quote, a star rating rendered with Material Symbols `star`/`star_half` glyphs, and an avatar built as initials inside a `--gradient-accent` circle (no external images).
* **Pricing tiers:** exactly 3; the middle tier is the featured one — larger padding, a `--gradient-accent` border or glow, and a "Most Popular" badge; each tier's CTA uses the button states from 2.1.

**2.3 Form & Input Requirements**
Used for the Final CTA email signup:

* **States:** empty, focused (neumorphic inset + `--primary-strong` ring), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, `--text-error` message, `error` icon), disabled, read-only.
* **Structure:** a flex container (default `align-items: center`) wrapping a `<label>`, a neumorphic **inset** input (`--shadow-neu-in`) with an explicit `type="email"`, and a dedicated error feedback element wired to `aria-live="polite"` and `aria-describedby`.
* The submit button must cycle through default → loading → success with visible feedback.

**2.4 Accordion / FAQ Requirements**
The FAQ is a custom widget and must never be mouse-only:

* **Structure:** each item is a `<button aria-expanded="true|false" aria-controls="faq-panel-n">` heading plus a panel with `role="region"` and matching `id`.
* **States:** collapsed, hover, keyboard focus (ring per 2.1), open. Animate open/close purely with CSS (e.g., `grid-template-rows: 0fr → 1fr` or `max-height` transition) using `var(--transition-normal)`.
* **Interaction:** operable with `Enter`/`Space`; the chevron (Material Symbols `expand_more`) rotates 180° via `transform`. Dynamic content changes announced politely.

**2.5 Climate Dial (Hero Centerpiece)**
* **Construction:** pure CSS — nested circular divs: outer raised ring (`--shadow-neu-out`), inner inset well (`--shadow-neu-in`), a progress arc drawn with `conic-gradient` from `--gradient-accent`, tick marks via `repeating-conic-gradient`, an arc fade using **CSS Masks**, and a needle rotated with `transform: rotate()`. A Material Symbols `thermostat` glyph and a numeric readout sit at the center.
* **Interaction:** make the dial a functioning widget — pointer drag rotates the needle and updates a temperature readout; expose it as `role="slider"` with `aria-valuemin="16"`, `aria-valuemax="28"`, `aria-valuenow`, `aria-label="Target temperature"`, and full keyboard support (`ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight` adjust by 0.5°).
* **Idle animation:** a slow, subtle rotation of the gradient arc. It **must** be disabled under `prefers-reduced-motion`.
* All motion uses `var(--transition-normal)` and `var(--ease-standard)`; use CSS Filters (`drop-shadow`, slight `saturate()`) only where they don't harm performance.

**2.6 Section-by-Section Requirements**
1. **Header/Nav:** sticky, neumorphic bar, wordmark "AER", anchor links to each section, the theme toggle (1.3), and a primary CTA. On mobile, collapse links into a neumorphic icon button that opens a dropdown menu (`--z-dropdown`, `aria-expanded`, closable with `Esc`, managed focus).
2. **Hero:** flex layout pairing headline + subheadline + dual CTAs ("Get AER", "See it in action" ghost button) with the interactive dial (2.5). Headline uses `--font-display` with fluid `clamp()` sizing.
3. **Features:** exactly 3 neumorphic cards, each with an icon in an inset circle, title, and body copy (e.g., precision comfort, adaptive learning, energy insight).
4. **How It Works:** exactly 3 steps with numbered neumorphic markers connected by a thin `--gradient-accent` line (implemented so it never causes overflow on mobile), each step with title + description.
5. **Testimonials:** 3 cards per 2.2.
6. **Pricing:** 3 tiers per 2.2, with a neumorphic segmented Monthly/Yearly toggle (`aria-pressed`, prices update via `script.js` from `data-` attributes, changes announced via `aria-live`).
7. **FAQ:** 5–6 items in the accordion pattern defined in 2.4.
8. **Final CTA:** a full-width panel tinted with `--gradient-accent` (masked so it fades softly), headline, and the email form per 2.3.
9. **Footer:** brand block, secondary link columns (Product, Company, Support, Legal), social links as neumorphic icon-only buttons with accessible names, and a copyright line. All links must have real `href`s pointing to page anchors where possible.

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid sizing, standard breakpoints, zero horizontal overflow.
* **Smooth animations:** every state change transitions with `var(--transition-normal)`; all ambient/hero animations respect `prefers-reduced-motion`.
* **Accessibility (a11y):** maintain WCAG-level contrast in **both** modes. Because neumorphism communicates depth with low-contrast shadows, **never rely on shadow or elevation alone to communicate state** — pair every pressed/active/inset state with a border, icon, or color shift. Text uses `--text-primary`/`--text-secondary` (secondary only at sufficiently large sizes); accent text uses `--primary-strong`. Use semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`), correct ARIA roles/labels on all custom widgets (dial, accordion, toggle, mobile menu), logical DOM/focus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, pricing toggle, theme change).
* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
* **Destructive actions:** any destructive or opt-out affordance uses a visually distinct `.btn--danger` / error-styled treatment that remains distinct in both light and dark themes.

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred `<script src="script.js" defer></script>` reference. No inline CSS anywhere.
* **Naming convention:** BEM exclusively (`block__element--modifier`) for all custom classes across the entire deliverable — never mix conventions.
* **Copy:** all user-facing copy in English, written as realistic AER marketing content — no lorem ipsum, and no placeholders for content that this brief has fully specified.
* **Completeness:** the first output must be the full, runnable landing page covering every section, component state, and rule above — nothing deferred, nothing stubbed.