Film Grain / Noise demo
Film Grain / Noise

A texture-driven aesthetic that overlays film grain and noise to add warmth, tactility, and analog character to otherwise sterile digital surfaces.
Category: Retro & Pop
Era: 2010s Modern
Prompt: 13.9 KB · 1901 words
# System Prompt — Build a "Film Grain / Noise" Themed Landing Page (Retro & Pop)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a **complete, production-quality landing page on the first attempt** — no stubs, no "to be implemented" comments, no lorem ipsum.

**Project brief:**
- **Theme:** Film Grain / Noise — analog film heritage; cinematic, tactile, warm; subtle photographic grain over flat color on every major surface.
- **Product concept:** A coherent fictional product in the analog-film space (suggested: a photo editor or preset library that applies authentic film grain and film-stock emulation to digital images). You may invent the brand name, but all copy must be written for this concept.
- **Sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.
- **All user-facing copy must be written in English.**

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No Inline CSS:** The `style="..."` attribute is **forbidden** anywhere in the HTML.
- **Class Selectors Only:** All design properties, layout rules, and states must be targeted via class selectors in `style.css`.
- **Minimal HTML Modifications:** HTML must remain clean, semantic (landmarks: `header`, `nav`, `main`, `section`, `footer`), and agnostic of visual styling. Changing the site's look must require editing only the CSS file.

### 1.2 CSS Variables & Theme Tokens (Mandatory Base)
Adopt the following token block **verbatim as the default (dark) theme**, then extend it. Do not redesign or rename these tokens:

```css
:root {
  --color-bg: #211d1a;
  --color-surface: #2b2622;
  --color-surface-strong: #35302a;
  --color-border: #4a423a;
  --color-text: #f2ece2;
  --color-text-muted: #bdb2a3;
  --color-primary: #d98c4a;
  --color-accent: #7fa08f;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.42);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.5);
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --grain-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  --grain-opacity: 0.16;
}
```

- **Required Extensions (same naming convention):** Add `--color-success`, `--color-error`, `--color-border-success`, `--color-border-error`, `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--spacing-gap: 16px`. Never mix naming conventions — the `--color-*` / `--space-*` / `--radius-*` prefixes are canonical.
- **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. The provided pairings (`#211d1a` ↔ `#f2ece2`, `#d98c4a` fill ↔ `#211d1a` text, `#7fa08f` fill ↔ `#16241d` text) must be preserved or equivalently contrasted.
- **No Pure White:** Never use `#ffffff`. Where a near-white is needed in light mode, use `#fefefe` — but prefer warm paper tones that fit the analog mood (see 1.3).

### 1.3 Mandatory Dual-Theme Support (Dark "Darkroom" + Light "Analog Paper")
The source spec does not declare modes — therefore you must **build and validate both themes before considering the page done**:

- **Dark (default brand mode):** The exact palette in 1.2 — deep warm brown-black surfaces, cream text, amber primary, sage accent.
- **Light ("Analog Paper"):** Derive a warm light palette in the same hue family — suggested starting point: `--color-bg: #f2ecdf`, `--color-surface: #e9e1d2`, `--color-surface-strong: #ded4c1`, `--color-border: #c4b79f`, `--color-text: #26211c`, `--color-text-muted: #6e6252`, `--color-primary: #a35c1e` (darkened amber for AA contrast on paper), `--color-accent: #4e7a63`. Fine-tune as needed to pass WCAG AA (4.5:1 body text, 3:1 large text/UI). Never pure white.
- **Implementation:** Define dark tokens in `:root`, light tokens under `[data-theme="light"]`, plus a `@media (prefers-color-scheme: light) { :root:not([data-theme]) { … } }` fallback for no-JS first visits. Theme switching must require **zero HTML restructuring** — only variable redefinition.
- **Persistence:** `script.js` reads `localStorage` (key: `filmgrain-theme`); on first visit with no stored value, fall back to `prefers-color-scheme`; if no preference is detectable, default to **dark** (the brand mode). Apply via `data-theme` attribute on `<html>`.
- **Toggle Control:** A visible theme-toggle button in the nav with a Google Material Symbols icon (`dark_mode` / `light_mode`), correct `aria-pressed` state, and an `aria-label` that updates ("Switch to light mode" / "Switch to dark mode").
- **Grain in Both Themes:** The grain texture must remain visible in light mode. Adjust intensity per theme (e.g., a second `--grain-image` data-URI with lower internal rect opacity, or a pseudo-element overlay using `var(--grain-opacity)`). Grain must never push text below AA contrast.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build all layout structures with **Flexbox** (and CSS Grid only for multi-card grids where columns are genuinely 2-dimensional).
- **Default Alignment Rule:** Every flex container must default to `align-items: center` unless there is an explicitly justified exception (e.g., stacked hero text).
- **Mobile-First:** All rows convert to columns on small viewports; no horizontal scrolling at any breakpoint; minimum touch target of 44×44px on all interactive elements.

### 1.5 Styling Approach & Naming Convention
- Use **clean vanilla custom CSS** driven by the provided token/component system (the spec's custom CSS is the framework for this build — do not introduce Tailwind or any other framework).
- **Naming Convention:** BEM exclusively (`.btn`, `.btn--primary`, `.card`, `.card--featured`, `.nav__link`, `.faq__item`). Never mix conventions.
- All component classes must map back to CSS variables — no hard-coded colors, shadows, or radii in component rules.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text Fonts (Google Fonts only, loaded via `<link>` with `preconnect` and `display=swap`):** The spec's `Suisse Int'l` and `Canela` are proprietary — substitute with Google Fonts equivalents: **Inter** for `--font-sans`, **Fraunces** for `--font-display` (editorial serif, Canela-like), **IBM Plex Mono** for `--font-mono` (available on Google Fonts as-is). Keep the fallback stacks.
- **Icons:** Use **Google Material Symbols (Rounded variant)** loaded via Google Fonts. Every icon must be `aria-hidden="true"` when decorative, or carry an `aria-label` when meaningful.
- **No raw inline SVGs or local icon files.** **Explicit exception:** the fractal-noise SVG data-URI inside `--grain-image` is a CSS background *texture*, not an icon — it is the single permitted SVG and must be kept exactly as specified, living only in `style.css`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

Adopt the spec's base component classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`) as your design-system foundation, then extend as follows:

### 2.1 Button
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target. Variants: `.btn--primary` (amber fill, dark text), `.btn--ghost` (transparent, border), `.btn--danger` (visually distinct via `--color-error` in **both** themes).
- **Hover:** brightness/shadow shift with `cursor: pointer` (spec's `translateY(-1px)` + `--shadow-md`).
- **Focus:** distinct `:focus-visible` ring using `outline` with `--color-primary` and offset.
- **Active/Pressed:** visible transform feedback (the spec's `translateY(0)` reset qualifies; `scale(0.97)` also acceptable).
- **Loading:** `.is-loading` class — 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:** `.is-success` / `.is-error` temporary feedback styles driven by `--color-success` / `--color-error`, paired with an icon or text (never color alone).

### 2.2 Card
- **Default:** Flexbox layout, grain surface (`--color-surface` + `--grain-image`), `--color-border` border, `--radius-lg`, `--shadow-md`.
- **Hover (interactive cards only):** `transform: translateY(-2px)` and shadow shift.
- **Focus-within:** border highlights when a child link/button receives focus.
- **Loading (Skeleton):** define `.card--skeleton` with a CSS shimmer animation to prevent layout jumps.
- **Empty State:** define `.card--empty` — a Google icon plus clear guidance text.

### 2.3 Form & Input (Final CTA email capture)
- **Structure:** A flex `.input-group` wrapping a label, the `.input` field, and a dedicated error-feedback container.
- **States — all styled via CSS classes:** Empty, Focused (the spec's primary border + `rgba(217,140,74,0.28)` ring), Filled, Valid (success border + check icon), Invalid (error border, error text, error icon), Disabled, Read-only.
- **Feedback:** Validation messages render in an `aria-live="polite"` region. Never rely on color alone — pair border color with icon and text.

### 2.4 FAQ Accordion (Disclosure)
- Build with native `<details>`/`<summary>` (preferred for robust a11y) or a button + region pattern with `aria-expanded` / `aria-controls`.
- **Summary row:** flex, `align-items: center`, `justify-content: space-between`, with a Material Symbols chevron (`expand_more`) that rotates 180° on open.
- **Animation:** smooth open/close transition via CSS; must respect `prefers-reduced-motion`. Fully keyboard operable — no mouse-only interactions.
- **No modals/popups are in scope for this build — do not add any.**

---

## 3. PAGE STRUCTURE & ART DIRECTION

**Global art direction (Retro & Pop, analog heritage):** mono uppercase "film-credit" kickers (IBM Plex Mono, letter-spaced) above Fraunces display headlines; generous `--space-24` section rhythm; grain applied to **every major surface** (body, nav, cards, hero, footer) so texture reads as one continuous analog surface; warm gradients always layered with grain (multiple backgrounds: `radial-gradient(...), var(--grain-image)`) to eliminate banding; optional retro film-frame/sprocket motifs built purely with CSS pseudo-elements — never extra icon files or inline SVGs.

1. **Sticky Nav:** wordmark (display font), anchor links to all sections, theme toggle (per 1.3), compact CTA. Grain surface per spec. On mobile: accessible hamburger menu (Material icon, `aria-expanded`, keyboard-focusable, closes with `Esc`).
2. **Hero:** mono kicker, Fraunces headline, subcopy, two CTAs (`.btn--primary` + `.btn--ghost`), grainy warm radial gradient backdrop, optional CSS film-frame decoration. CTAs scroll to Pricing / Final CTA.
3. **Features (3 cards):** grid — 1 column mobile, 3 columns desktop. Each card: Material Symbol icon, title, real copy. Card states per 2.2.
4. **How It Works (3 steps):** mono numerals `01 / 02 / 03`, connecting rule/line on desktop (collapses gracefully on mobile), icon + title + copy per step.
5. **Testimonials (3 cards):** quote styling (serif or `format_quote` icon), circular initials avatar built in CSS, name + muted role, optional Material star icons.
6. **Pricing (3 tiers):** featured middle tier — primary border, "Most Popular" `.badge`, elevated shadow. Feature lists with Material `check` icons. Per-tier CTA (featured = `.btn--primary`).
7. **FAQ:** 5–6 real questions about the fictional product, per 2.4.
8. **Final CTA:** centered display headline, email capture form per 2.3. Submit flow: loading state → success state with `aria-live` confirmation message.
9. **Footer:** secondary link groups (Product, Company, Resources), muted text, visible hover/focus states on all links, copyright line, grain surface.

---

## 4. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid sizing, standard breakpoints, zero horizontal overflow.
- **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; fully disabled under `prefers-reduced-motion: reduce`.
- **Accessibility (a11y):** AA contrast in **both** themes; semantic HTML5 landmarks; a "Skip to main content" link; logical DOM/focus order; full keyboard operability; correct ARIA roles/labels on the nav menu, toggle, accordion, and form feedback; `aria-live` regions for all dynamic feedback.
- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive/Distinct Actions:** `.btn--danger` must be visually distinct in both light and dark themes.

---

## 5. DELIVERABLES & OUTPUT FORMAT

- **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred `<script src="script.js" defer>` entry point. No inline styles anywhere.
- **Copy:** Write real, on-brand English copy for the fictional analog-film product across every section — no lorem ipsum, no placeholder-only submissions.
- **Self-Check Before Delivery:** (1) zero `style=` attributes; (2) both themes validated light and dark with the toggle persisting across reloads; (3) grain visible on body, nav, cards, hero, and footer in both themes; (4) all button/input/card states present in CSS; (5) keyboard-only pass of the entire page succeeds; (6) no horizontal scroll from 320px up.