Spin Lattice — an Ising Playground demo
Spin Lattice — an Ising Playground

A scientific playground aesthetic built on precise CSS grids where monochrome lattice cells flip between spin states, evoking computational physics and magnetic domain visualization.
Category: Data & Engineering
Era: 2020s Modern
Prompt: 13.1 KB · 1818 words
# SYSTEM PROMPT — Build "SPIN LATTICE — an Ising playground" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready, single-page landing page titled **SPIN LATTICE — an Ising playground** on the first attempt. The site is a creative/experimental, 2020s-contemporary marketing page for an interactive Ising-model playground: a lattice of spins (+1 / −1) where magnetic order emerges from thermal noise. The aesthetic must feel quantum, lattice-driven, and gradient-warm, built on CSS Grid, Flexbox, transitions, transforms, gradients, box shadows, border radius, and aspect-ratio. **Exception clause:** the source style designates Light mode as the default presentation — Light is the active theme on first visit, but Dark mode remains mandatory and must be fully implemented per Section 1.3.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in a dedicated `style.css`. The `style="..."` attribute is **forbidden** anywhere in the HTML.
* All design properties, layout rules, and state styles must target class or ID selectors only.
* HTML must remain clean, semantic, and style-agnostic — changing the site's look requires modifying only `style.css`, never the markup.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root` (Light mode = default) using CSS variables:
* **Colors:** `--primary: #E0491F`; `--secondary: #6f6754`; `--bg-primary: #EDE7D9`; `--bg-secondary: #E3DCC9`; `--text-primary: #16130D`; `--text-secondary: #6f6754`; `--text-success: #2E7D4F`; `--text-error: #B3261E`; `--border-default: #c9c0a9`; `--border-success` and `--border-error` derived from the success/error tokens.
* **Contrast Pairing:** `#EDE7D9` / `#E3DCC9` backgrounds always pair with `#16130D` text; `#16130D` backgrounds always pair with `#EDE7D9` / `#c9c0a9` text — enforce this pairing in every theme, not just the default.
* **Light Mode Background:** never use pure `#ffffff`; the warm cream `#EDE7D9` is the page background. If a near-white is ever needed, use `#fefefe`.
* **Radius & Shadows:** `--radius-sm: 6px`; `--radius-md: 12px`; `--radius-lg: 20px`; `--shadow-sm`, `--shadow-md` (warm-tinted shadows derived from `#16130D`, not pure black).
* **Spacing & Transitions:** `--spacing-gap: 1.5rem`; `--transition-fast: 150ms`; `--transition-normal: 300ms`; `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Elevation/Stacking:** `--z-header: 10`; `--z-dropdown: 100`; `--z-modal: 1000`; `--z-toast: 1100` — no component may hardcode a z-index.
* **Fonts:** `--font-display: 'Space Grotesk'`; `--font-base: 'Inter'`; `--font-mono: 'Space Mono'`.

**1.3 Mandatory Dark Mode Support**
* Define dark tokens under both a `.dark` class selector and an `@media (prefers-color-scheme: dark)` fallback: `--bg-primary: #16130D`; `--bg-secondary: #241E15`; `--text-primary: #EDE7D9`; `--text-secondary: #c9c0a9`; `--border-default: #3E372A`; `--secondary: #c9c0a9`; `--primary` stays in the `#E0491F` family (brighten to `#F2552C` only where contrast math requires it).
* Theme switching must swap variables only — no HTML restructuring.
* Persist the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit; Light is the default per the source spec. Include a visible toggle button in the header (Google Material Symbols `light_mode` / `dark_mode`) with correct `aria-pressed` and `aria-label` state.

**1.4 Flexbox, CSS Grid & Mobile-First Layout**
* Every flex container **must default to `align-items: center`** unless a documented exception exists (e.g., `stretch` for equal-height pricing cards).
* Build mobile-first: all multi-column layouts collapse to a single column below 768px; horizontal scrolling is forbidden at every viewport width.
* CSS Grid is **mandatory** for: the hero spin lattice, the Features/Steps/Testimonials/Pricing card rows (`grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))`), and the footer link columns.
* Use `aspect-ratio` for the spin tiles and any square media.

**1.5 Styling Approach**
No framework was requested and the source spec lists vanilla CSS techniques: hand-author clean custom CSS in `style.css` (optionally organized with `@layer`). Every reusable pattern must be a generic class — `.btn`, `.card`, `.input-group`, `.section`, `.container` — extended with BEM modifiers (`.btn--primary`, `.btn--ghost`, `.card--featured`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Text: load **Space Grotesk** (500/700, headings/wordmark), **Inter** (400/500, body), and **Space Mono** (spin readouts, step numerals, eyebrow labels) via Google Fonts `<link>` tags with `preconnect`.
* Icons: **Google Material Symbols (Outlined)** via the Google Fonts stylesheet. Raw inline SVGs and local icon files are **forbidden**.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Requirements**
Style all states via CSS classes on `.btn` (flex layout, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, minimum touch target 44×44px, `--radius-md`):
* **Hover:** brightness/shadow shift with `cursor: pointer`. **Focus:** distinct ring via `box-shadow` using `--primary` for keyboard navigation. **Active:** `transform: scale(0.97)`.
* **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material icon **without changing button dimensions**.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Success/Error:** temporary feedback states driven by `--text-success` / `--text-error` (newsletter submit, modal submit).
* **Variants:** `.btn--primary` (`#E0491F` fill, `#EDE7D9` text — verify AA contrast), `.btn--ghost` (transparent, `--border-default` border), `.btn--light` (`#fefefe` fill, `#16130D` text — for the gradient CTA band).

**2.2 Card Requirements**
Applies to Feature, Step, Testimonial, and Pricing cards:
* **Default:** flex column layout, `--bg-secondary` surface, 1px `--border-default` border, `--radius-lg`, `--shadow-sm`.
* **Hover:** `transform: translateY(-2px)` plus `--shadow-md` and a subtle gradient-border reveal.
* **Focus-within:** border highlights to `--primary` when a child link/button receives focus.
* **Loading (Skeleton):** define a shimmer keyframe animation in CSS that preserves layout dimensions.
* **Empty State:** define a centered fallback pattern (Material icon + guidance text) in CSS.

**2.3 Form & Input Requirements**
Used by the newsletter email capture and the modal contact fields. Structure: a flex `.input-group` wrapping a `<label>`, the input, and a dedicated error-feedback container announced via `aria-live`. Account for every state via classes: **empty, focused** (outline ring), **filled, valid** (success border + `check` icon), **invalid** (error border, red text, `error` icon), **disabled, read-only**. Never rely on color alone — pair icons with text.

**2.4 Modal / Popup Requirements**
The "Institution" pricing tier opens a "Talk to us" modal: **opening, open, loading, success/error, closing** — all animated with CSS transitions (opacity + scale). Centered flex container (`align-items: center`), dark backdrop overlay (`#16130D` at 60% opacity, fades), Material Symbols close button, `role="dialog"` + `aria-modal="true"`, keyboard focus trapping, focus restored to the trigger on close, closable via `Esc` and overlay click. Submit shows loading → in-modal success state, then a toast confirmation.

**2.5 FAQ Accordion Requirements**
Each FAQ item: a `<button>` trigger with `aria-expanded` and `aria-controls`, a Material Symbols `expand_more` icon rotating 180° on open, and a panel animated via CSS only (`grid-template-rows: 0fr → 1fr` technique) with no layout jump. Fully keyboard operable; opening behavior must be consistent across items.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid type via `clamp()`; no horizontal overflow at any width; smooth anchor scrolling (respecting reduced motion) with `scroll-margin-top` for the sticky header.
* **Smooth animations:** `transition: var(--transition-normal)` on all state changes. Wrap **all ambient/looping animations** (including the hero lattice idle animation) in `@media (prefers-reduced-motion: reduce)` — reduce them to instant color changes.
* **Accessibility (a11y):** WCAG AA contrast in both Light and Dark modes. Semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`). Visible `:focus-visible` rings, logical focus order, full keyboard operability (no mouse-only interactions), and `aria-live` regions for the magnetization readout, form feedback, and toasts.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive actions:** none are expected; if any are added, they must use a distinct `.btn-danger` visible in both themes.
* **Toasts:** bottom-right, layered at `--z-toast`, auto-dismissing, Material icon + text, `role="status"`.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** exactly `index.html`, `style.css`, `script.js`. A single `<script src="script.js" defer>` — no inline scripts, no inline styles, no inline event handlers.
* **Naming:** one consistent BEM convention (`.block__element--modifier`) across the entire deliverable — never mix conventions.
* **Copy:** write realistic, on-theme English copy for every section. Lorem ipsum and placeholder-only submissions are forbidden.
* **Head:** meta viewport, title, description, Google Fonts preconnect + stylesheet links, Material Symbols stylesheet.

---

## 5. PAGE STRUCTURE & SECTION-BY-SECTION SPEC

**5.0 Sticky Header:** "SPIN LATTICE" wordmark (Space Grotesk) + `grid_on` icon; anchor nav (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle. On mobile, the nav collapses into a vertically stacked menu behind a toggle button with `aria-expanded`.

**5.1 Hero:** full-viewport warm gradient background (layered radial `#E0491F` glow blending into `#EDE7D9` / `#E3DCC9`); mono letterspaced eyebrow ("AN ISING PLAYGROUND"); H1 with gradient text (`#E0491F → #6f6754`, `background-clip: text`) — e.g., "Watch order emerge from pure noise."; supporting paragraph; CTA row (`.btn--primary` "Run the lattice" + `.btn--ghost` "Read the science"). Beside/below: **the spin lattice** — a decorative interactive CSS Grid of spin tiles (12 columns desktop / 6 mobile, 2–4px gap) whose ~96 tile `div`s are generated by `script.js` to keep the HTML clean; container is `aria-hidden="true"` with a visually-hidden description. Two tile states: `.spin--up` (orange gradient fill) and `.spin--down` (tan `#c9c0a9` fill in Light / `#6f6754` in Dark), flipping via `transform: rotateX(180deg)` with staggered `--transition-normal` transitions; a subtle ambient flipping loop runs unless reduced motion is preferred. Clicking a tile flips it and its orthogonal neighbors (an Ising-coupling nod); an accessible "Shuffle spins" `.btn--ghost` provides the keyboard path. A Space Mono magnetization readout ("M = +0.42") updates in an `aria-live="polite"` region.

**5.2 Features (3 cards):** grid `auto-fit minmax(260px, 1fr)`. Cards: "Flip spins by hand" (`touch_app`), "Live magnetization readout" (`monitoring`), "Temperature & field controls" (`tune`) — each with a headline and two sentences of copy; hover lift + gradient border.

**5.3 How It Works (3 steps):** grid 3 columns → 1 on mobile. Space Mono numerals 01 / 02 / 03 in `--primary`; a dotted connecting line between steps on desktop (CSS `::after`). Steps: "Heat it up" (raise the temperature past the critical point), "Nudge the spins" (flip cells and watch neighbors follow), "Cool it down" (watch the phase transition lock in).

**5.4 Testimonials:** 3 quote cards (grid 3 → 1) with a `format_quote` icon, quotes from a condensed-matter physicist, a physics teacher, and a creative coder; avatar via Material Symbols `person` or monogram initials, plus name and role.

**5.5 Pricing (3 tiers):** grid 3 → 1. "Student — Free" (`.btn--ghost` CTA), "Researcher — $9/mo" (**featured**: gradient border, "MOST POPULAR" badge, slight elevation), "Institution — Let's talk" (CTA opens the modal per 2.4). Feature lists use `check_circle` icons in the success color.

**5.6 FAQ:** five questions ("What is the Ising model?", "Do I need a physics background?", "Can I export my lattices?", "Does it work on mobile?", "Is the Student tier really free?"), built as the accordion per 2.5.

**5.7 Final CTA:** full-bleed gradient band (135°, `#E0491F → #16130D` with a warm mid-blend), headline and supporting copy in `#EDE7D9`, one `.btn--light` ("Start flipping"), and the newsletter email capture (per 2.3) with a loading → success flow. All text on the band must maintain AA contrast.

**5.8 Footer with secondary links:** four link columns (Product: Features, Pricing, Changelog / Science: The Ising model, Tutorials, References / Company: About, Contact, Careers / Legal: Privacy, Terms) in a CSS Grid; a social row using Material Symbols generic icons or plain text links; a "Back to top" link; and the copyright line ("© 2025 SPIN LATTICE").

**Gradient governance:** gradients appear only where specified above (hero background, H1 text, featured pricing border, final CTA band, `.spin--up` tiles) and must derive exclusively from the six palette colors; dark-mode gradients are re-derived from dark tokens to preserve contrast.