Warming Stripes 1880-2025 demo
Warming Stripes 1880-2025

A data-visualization aesthetic of animated horizontal color stripes shifting from cool blues to hot reds, representing 145 years of global temperature change in Ed Hawkins' iconic climate-stripes style.
Category: Data & Engineering
Era: 2020s Modern
Prompt: 14.2 KB · 1966 words
# SYSTEM PROMPT FOR CODING AI — LANDING PAGE BUILD: "WARMING STRIPES — 1880→2025"

**Your Role:** Senior Frontend Engineer and Expert UI Designer.
**Objective:** Build a complete, production-quality, interactive/animated landing page in a single attempt. Output the full, final code immediately — no truncation, no TODOs, no "rest of the code here" placeholders. All user-facing copy must be written in **English**.

---

## 0. PROJECT BRIEF

**0.1 Theme & Concept**
Create a 2020s-contemporary landing page for a fictional climate-data product called **Warming Stripes**. The signature visual is the iconic warming-stripes visualization: a sequence of **146 vertical color stripes (one per year, 1880 → 2025)** that gradually shift from cool blues to warm reds as global temperatures rise. The mood is precise, scientific, and quietly urgent. The page must feel alive: gradients, hover effects, keyframe animations, transitions, and transforms — with interactivity at the heart of the hero.

**0.2 Color Token Map (Light mode is the default presentation; Dark mode is fully mandatory)**
Define all tokens in `:root` (light) and override in both `@media (prefers-color-scheme: dark)` **and** a `.dark` class selector:

| Token | Light Mode | Dark Mode |
|---|---|---|
| `--primary` | `#0d1117` | `#d8dee9` |
| `--secondary` (accent) | `#ff8a5c` | `#ff8a5c` |
| `--text-on-secondary` | `#0d1117` | `#0d1117` |
| `--bg-primary` | `#f4f6fa` (cool off-white — never `#ffffff`) | `#0d1117` |
| `--bg-secondary` | `#e9eef5` | `#161d28` |
| `--text-primary` | `#0d1117` | `#d8dee9` |
| `--text-secondary` | `#5a6577` | `#9aa7bb` |
| `--text-muted` | `#7a8699` | `#6b7890` |
| `--text-success` | `#157f52` | `#57c58f` |
| `--text-error` | `#cf3b3b` | `#ff9090` |
| `--border-default` | `#d8dee9` | `#2c3646` |
| `--border-success` | `#157f52` | `#57c58f` |
| `--border-error` | `#cf3b3b` | `#ff9090` |

Every light background pairs with dark text and every dark background pairs with light text — this pairing is enforced in **both** themes. Where a near-white surface is genuinely required, use `#fefefe`, never `#ffffff`.

**0.3 Exception Clause — Warming-Stripe Data Colors**
The brand palette contains no blues, but the theme *is* the warming stripes. **Explicit exception:** the stripe visualization itself (hero band, section dividers, CTA backdrop) may use the canonical temperature color scale: `#08306b`, `#2166ac`, `#4393c3`, `#92c5de`, `#d1e5f0`, `#f7f7f7`, `#fddbc7`, `#f4a582`, `#d6604d`, `#b2182b`, `#67001f`. **All other UI chrome** (buttons, cards, text, borders, badges) must use only the tokens from 0.2.

**0.4 Required Page Structure & Section-by-Section Specifications**

1. **Header (sticky):** Wordmark "Warming Stripes" with a small CSS-gradient stripe logo (decorative, `aria-hidden`); nav links (Features, How It Works, Pricing, FAQ); theme toggle; accent CTA "Get started" → `#pricing`. On mobile, nav links collapse behind a Material Symbols `menu` button that toggles a flex-column panel (`aria-expanded`, closes on link click and `Esc`). Add a `.header--scrolled` class on scroll for shadow/solid background.
2. **Hero:** Headline (e.g., "145 years of climate change, in a single glance"), supporting lead, two CTAs (accent "Explore the stripes", ghost "How it works"), and three stat chips ("1880 → 2025", "+1.3 °C trend", "3 trusted datasets") with count-up animation on view. Below the copy: the **interactive stripe band** — 146 flex-sized `.stripe` children built by `script.js` from a representative anomaly dataset (≈ −0.2 °C in the 1880s rising to ≈ +1.3 °C by 2025; trend authenticity matters more than per-year precision). Each stripe gets one of eleven bin classes `.stripe--t0` … `.stripe--t10` (colors from 0.3, defined only in `style.css`). The band is a single focusable group (`tabindex="0"`, `role="group"`, descriptive `aria-label`); mouse hover highlights a stripe (`scaleY(1.12)`), keyboard `←`/`→` moves the highlight, and a shared `.stripe-readout` bar (`aria-live="polite"`) below the band updates with "1880 · −0.28 °C". The 2025 stripe carries a subtle pulse keyframe. Entrance: band fades/rises once. No layout shift (fixed band height).
3. **Features (3 cards):** "Scientifically sourced data" (Material icon `database`), "Interactive by design" (`touch_app`), "Built to be shared" (`ios_share`). Each card: gradient icon chip, title, two-line copy, "Learn more" text link (card highlights on `:focus-within`). A 4–6px full-width stripe-gradient divider separates every page section.
4. **How It Works (3 steps):** Numbered badges (gradient from cool to warm — stripes motif), connecting gradient line, steps: "Choose your dataset & region" (`tune`), "Generate your stripes" (`bar_chart`), "Share or embed anywhere" (`ios_share`). Staggered scroll-reveal.
5. **Testimonials:** 3 quote cards with Material `format_quote` accent icon, quote, author row (CSS initials avatar — no raster images), plausible fictional names/roles (climate scientist, data journalist, educator).
6. **Pricing (3 tiers + billing toggle):** Explorer (Free), Analyst (featured, "Most popular" badge, visually distinct in **both** themes), Institution. Feature lists with Material `check` icons; per-tier CTA buttons in different variants. Segmented **Monthly / Annual (−17%)** toggle (`aria-pressed`), prices swap via `data-monthly`/`data-annual` attributes, change announced in an `aria-live` region.
7. **FAQ:** 5 questions (data sources; why stripes instead of line charts; 1951–1980 baseline methodology; visual usage under CC BY 4.0 with credit; export formats). Use native `<details>`/`<summary>` styled via CSS; `expand_more` icon rotates when open; visible focus ring.
8. **Final CTA:** Soft stripe-gradient backdrop (stripe colors at ~12% opacity), headline, email capture form (spec 2.3), privacy microcopy, `aria-live` status region.
9. **Footer:** Brand column (logo, one-liner, text-based social links with `arrow_outward` icons); link columns Product / Resources / Company; the "Data sources" link opens the modal (spec 2.4). Bottom row: "© 2025 Warming Stripes — stripes concept inspired by Ed Hawkins (ShowYourStripes)."

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
Keep all styling in a dedicated `style.css`. The `style="..."` attribute is **forbidden** anywhere in the HTML. All design properties, layout rules, and states must be targeted via class or ID selectors. `script.js` may only toggle classes/ARIA attributes or set CSS custom properties on `:root` — never `el.style.<property>` or style attributes. HTML stays clean, semantic, and style-agnostic.

**1.2 CSS Variables & Theme Tokens**
Store every visual token as a CSS variable using the mandatory names: all color tokens from 0.2, plus `--radius-sm: 6px`, `--radius-md: 12px`, `--radius-lg: 20px`, `--shadow-sm`, `--shadow-md`, `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`, `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`, `--font-base`, `--font-heading`. Elevation tokens may deepen in dark mode. Nothing may hardcode a raw hex outside `:root`/theme blocks.

**1.3 Mandatory Dark Mode Support**
Implement dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`. Base media-query styling prevents a theme flash; `script.js` (deferred) reads `localStorage` and adds `.dark`/`.light` only when the stored choice differs from the system preference, falling back to `prefers-color-scheme` on first visit. Provide a visible toggle (sun/moon Material icons, swapped via CSS) with correct `aria-pressed` and `aria-label` state.

**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 (the one sanctioned exception: card interiors may use `align-items: stretch` for equal heights). All rows convert to columns below 768px; nothing may cause horizontal scrolling at 320px width (use `min-width: 0` on flex children). Minimum touch targets: 44×44px.

**1.5 Framework Default: Tailwind CSS (CDN)**
Load Tailwind via its CDN script (external framework entry). Use utilities **only** for layout, spacing, and sizing; every color utility must reference a CSS variable (e.g., arbitrary values with `var(--bg-primary)`). Do **not** use Tailwind's `dark:` variant — all theming flows through CSS variables and component classes (`.btn`, `.card`, `.input-group`, `.faq-item`, `.modal`) defined in `style.css`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
Load **Google Fonts**: Space Grotesk (headings → `--font-heading`) and Inter (body → `--font-base`). Load **Google Material Symbols (Rounded)** for every icon. Inline SVGs, local icon files, emoji-as-icons, and other icon fonts are explicitly forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
Base `.btn`: flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem`), min 44×44px, `--radius-md`, transition `var(--transition-fast) var(--ease-standard)`. Variants: `.btn--primary`, `.btn--accent` (background `var(--secondary)`, color `var(--text-on-secondary)`), `.btn--ghost`, `.btn--danger`. Required states, all via CSS classes: **Hover** (brightness/shadow shift, `cursor: pointer`); **Focus-visible** (distinct ring built from CSS variables); **Active** (`transform: scale(0.97)`); **Loading** (`.is-loading`: `aria-busy="true"`, interactions blocked, CSS spinner that never changes button dimensions); **Disabled** (`opacity: 0.5`, greyscale, `cursor: not-allowed`); **Success/Error** (temporary feedback using `--text-success`/`--text-error`, never color-only — pair with icon + text and an `aria-live` announcement).

**2.2 Card Component**
`.card`: `--bg-secondary`, 1px `--border-default`, `--radius-lg`, `--shadow-sm`, generous padding. **Hover:** `translateY(-2px)` + `--shadow-md`. **Focus-within:** border shifts to `--secondary` with ring when a child link/button is focused. **Loading:** define a `.skeleton` shimmer keyframe class even though this static page renders final content immediately. **Empty state:** define a `.card--empty` fallback layout with a Material icon and guidance text.

**2.3 Form & Input Requirements**
`.input-group`: flex-column wrapper of label, input, and a dedicated error container. States: empty, focused (variable-driven outline ring), filled, valid (success border + check icon), invalid (error border + error icon + message in `--text-error` — never color alone), disabled, read-only. The newsletter form validates email on blur and submit; on success the button enters loading (≈900ms, simulated) then a success state, with an `aria-live="polite"` confirmation. Reserve the error container's height to prevent layout jumps.

**2.4 Modal / Popup Requirements**
Build the "Data sources" dialog: fixed full-viewport backdrop (`rgba(13,17,23,0.55)`) with a centered flex container (`align-items: center; justify-content: center`), panel in `--bg-secondary`, `--radius-lg`, `--shadow-md`, `--z-modal`. States: **opening** (fade + scale from 0.96), **open**, **loading**, **success/error**, **closing** — all animated via CSS transitions/keyframes; the closing animation must complete before the dialog is hidden. Behaviors: `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, focus moved to the Material `close` icon button on open, focus trapped while open, focus returned to the trigger on close, `Esc` and backdrop click close it, body scroll locked via a toggled class. Include a "Copy citation" action that demonstrates loading → success feedback announced via `aria-live`.

---

## 3. CORE UX & MICRO-INTERACTION RULES TO ENFORCE

* **Responsive by default:** fluid type/spacing, breakpoints at 640/768/1024px, zero horizontal overflow.
* **Smooth animations everywhere:** every state change transitions with `var(--transition-fast/normal)`; all decorative keyframes, scroll reveals, count-ups, stripe pulses, and smooth scrolling are disabled or reduced under `prefers-reduced-motion`.
* **Scroll reveals:** IntersectionObserver adds `.is-visible` (class toggling only); content reveals with opacity + small translate; staggered delays via modifier classes.
* **Accessibility:** skip link; semantic landmarks (`header`, `main`, `section` with `aria-labelledby`, `footer`); one `h1`, logical heading order; WCAG AA contrast in **both** modes (verify every token pairing); visible `:focus-visible` rings on all interactive elements; full keyboard operability for the stripe band, nav, pricing toggle, FAQ, modal, and forms; `aria-live` regions for the stripe readout, form status, and billing-toggle announcements; never rely on color alone for any state.
* **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change.
* **Destructive actions:** define `.btn--danger` so it is visually distinct in both light and dark themes, even if only referenced by microcopy links.
* **Consistency:** no console errors or warnings; no layout shift on load or theme switch.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File structure:** three files — `index.html`, `style.css`, `script.js`. `<head>` contains the Google Fonts/Material Symbols links, the Tailwind CDN script, and the stylesheet link; the body references exactly **one** `<script src="script.js" defer>`. No other inline scripts. Vanilla JS only — no external JS libraries.
* **Naming convention:** strict BEM (`.block__element--modifier`) for every custom class; never mix conventions; utilities are reserved for layout/spacing only.
* **Copy:** write real, meaningful English copy per Section 0.4 — no lorem ipsum. Placeholder `href="#"` is permitted only for destinations genuinely unspecified (external product routes), each with a clear accessible name.
* **Imagery:** none required — all visuals come from CSS gradients, keyframes, and Material Symbols.
* **Output:** deliver the complete code for all three files in a single response, each clearly labeled, with nothing omitted.

**Definition of Done:** light/dark toggle persists and never flashes · all `--` tokens from 0.2 present · zero `style="..."` attributes · 146 interactive stripes with keyboard + hover readout · every button/card/input/modal state from Section 2 implemented in CSS · reduced-motion respected · no horizontal scroll at 320px · all nine sections from 0.4 present and populated with real English copy.