f/1.4 — Street Photography demo
f/1.4 — Street Photography

Frosted translucent glass panels layered over blurred urban imagery, evoking the shallow depth of field and bokeh of wide-aperture street photography.
Category: Glass & Soft UI
Era: 2020s Modern
Prompt: 13.9 KB · 1857 words
# SYSTEM PROMPT FOR CODING AI — "f/1.4 — STREET PHOTOGRAPHY" GLASSMORPHISM LANDING PAGE

**Role & Objective:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in your first response — full working code, no follow-up questions, no TODOs, no stubs. The site markets **"f/1.4"**, a fictional street-photography community and creative toolkit. Visual identity: 2020s Digital glassmorphism — frosted translucent panels floating over candid monochrome street imagery, soft rust-red accents, cool gray gradients, and camera-technical microcopy (EXIF-style labels such as `ISO 400 · 1/250s · f/1.4`).

---

## 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/ID Selectors Only:** Every visual property, layout rule, and state must live in `style.css`, targeted via classes/IDs.
* **Minimal HTML Modifications:** HTML stays semantic and style-agnostic — the entire theme must be re-skinnable by editing `style.css` alone.

### 1.2 CSS Variables & Theme Tokens
All tokens must be defined in `:root`, consumed via `var(--...)`, and must include at minimum: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm/md/lg`, `--shadow-sm/md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.

Use this palette mapping (extend, never remove):

```css
:root {
  /* Brand & surfaces — LIGHT is the default theme */
  --primary: #141416;            /* ink black */
  --secondary: #c23b22;          /* rust red accent */
  --bg-primary: #ececee;         /* soft gray base — pure #ffffff is forbidden; use #fefeee-family tints */
  --bg-secondary: #d8d8dc;
  --bg-glass: rgba(254, 254, 254, 0.55);   /* frosted panel */
  --border-glass: rgba(255, 255, 255, 0.38);
  --text-primary: #141416;
  --text-secondary: #5a5a64;     /* #7a7a84 reserved for borders/muted meta only */
  --text-success: #1e7a46;
  --text-error: #b3261e;
  --border-default: rgba(20, 20, 22, 0.12);
  --border-success: #1e7a46;
  --border-error: #b3261e;
  --text-on-accent: #fefefe;     /* text color on rust buttons (flips in dark mode) */

  /* Shape, motion, stacking */
  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(20, 20, 22, 0.08);
  --shadow-md: 0 12px 32px rgba(20, 20, 22, 0.16);
  --spacing-gap: 1.5rem;
  --transition-fast: 150ms; --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;

  /* Glass tokens */
  --glass-blur: 18px;

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;   /* oversized street-poster headlines */
  --font-base: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;   /* EXIF/metadata microcopy */
}
```

* **Contrast Pairing:** Every light background token must pair with dark text and every dark background token with light text — in **both** themes. In dark mode, `--text-on-accent` flips to `#141416` because the lightened rust accent (`#e0563a`) is a light surface.

### 1.3 Mandatory Dark Mode Support
* Dark mode must always be fully defined, even though light is the default presentation.
* **Implementation:** Mirror the dark token set (e.g., `--bg-primary: #141416`, `--bg-secondary: #1e1e23`, `--bg-glass: rgba(30,30,35,0.5)`, `--border-glass: rgba(236,236,238,0.12)`, `--text-primary: #ececee`, `--text-secondary: #d8d8dc`, `--secondary: #e0563a` lightened for AA contrast, `--text-success: #4ade80`, `--text-error: #ff9b8f`, matching border tokens) under **both** a `.dark` class and `@media (prefers-color-scheme: dark)`.
* **Theme Switching:** JS applies `.dark`/`.light` to `<html>`; without a stored choice, the media query drives the theme. No HTML restructuring to switch.
* **Persistence:** Store the choice in `localStorage` (key: `"theme"`), falling back to `prefers-color-scheme` on first visit. Provide a visible toggle button in the header with correct `aria-pressed` and a dynamically updated `aria-label` ("Switch to dark mode" / "Switch to light mode").
* **Spec Exception:** The requested style marks **✓ Light / ○ Dark**; therefore Light is the default and hero presentation, but Dark Mode remains fully mandatory and complete.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build every layout structure with Flexbox. **Every flex container must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment.
* Mobile-first: rows convert to columns below ~768px; no horizontal scrolling at any viewport from 320px up (use `min-width: 0` on flex children, `max-width: 100%` on media, `overflow-x` never relied upon for core content).
* Use `aspect-ratio` for photo frames (3/2 for street shots, 1/1 for avatars) and apply **scroll snap** only where it aids UX: the testimonials rail (`scroll-snap-type: x mandatory` on the container, `scroll-snap-align: center` on cards) on mobile; never full-page scroll trapping.

### 1.5 CSS Implementation
* No build step, no Tailwind CDN. Per the framework rule's custom-CSS branch, author clean, token-driven custom CSS in `style.css`, organized in native cascade layers: `@layer tokens, base, layout, components, utilities;`.
* All component classes (`.btn`, `.card`, `.input-group`, `.chip`) must consume only the CSS variables — no hardcoded hex values outside `:root`/theme blocks.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Load Google Fonts via `<link>` in `<head>`: **Bebas Neue** (display), **Inter** (body/UI, weights 400–700), **JetBrains Mono** (EXIF microcopy). Bind them to `--font-display`, `--font-base`, `--font-mono`.
* **Icons:** Google **Material Symbols Rounded** via the Google Fonts stylesheet, rendered as `<span class="material-symbols-rounded" aria-hidden="true">aperture</span>`. Raw inline SVGs and local icon files are forbidden.
* Photography placeholders must come from `https://picsum.photos/seed/<seed>/<w>/<h>.jpg` with descriptive English alt text; apply street-photography treatment via CSS filters (`filter: grayscale(100%) contrast(1.1)`).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Buttons
Style all states via classes (`.btn` base + `.btn--primary`, `.btn--ghost`, `.btn--danger`, `.btn--lg`):
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Primary uses `background: var(--secondary); color: var(--text-on-accent)`; ghost uses the glass surface with a hairline `--border-glass`.
* **Hover:** brightness/shadow shift, `cursor: pointer`.
* **Focus:** distinct visible ring via `box-shadow` using tokens — never remove outlines.
* **Active:** `transform: scale(0.97)`.
* **Loading:** `.btn--loading` disables interaction and double-clicks; render a CSS-animated spinner (rotating Material Symbol or CSS border spinner) **without changing button dimensions**.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** `.btn--success` / `.btn--error` temporary feedback styles driven by `--text-success` / `--text-error`.
* `.btn--danger` must be defined and visually distinct in both themes, even if unused on this page.

### 2.2 Cards (Glass Panels)
The signature component: `background: var(--bg-glass); backdrop-filter: blur(var(--glass-blur)) saturate(140%);` (with `-webkit-` fallback), `border: 1px solid var(--border-glass); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm)`.
* **Default:** flexible Flexbox layout with `--spacing-gap`.
* **Hover:** `transform: translateY(-2px)` and elevation shift to `--shadow-md`.
* **Focus-within:** accent border highlight when a child link/button is focused.
* **Loading (Skeleton):** define `.skeleton` with a shimmer keyframe animation; give `<img>` elements a shimmer background that clears on load (`.is-loaded` via JS `load` event).
* **Empty State:** define a reusable `.empty-state` (Google Icon + guidance text) in CSS.

### 2.3 Forms & Inputs
Use for the Final CTA email capture, structured as `.input-group` (flex column: label → input → error container):
* **States:** empty, focused (outline ring from tokens), filled, valid (`--border-success` + check icon), invalid (`--border-error`, error text in `--text-error`, error icon), disabled, read-only.
* The error container uses `aria-live="polite"` and links to the input via `aria-describedby`. Validate email on submit in `script.js`; on success run the button's Loading state (~1.2s), then swap to Success and fire a toast.

### 2.4 Modals / Popups
This page does not require modals. However, if you introduce **any** overlay (e.g., a photo lightbox or plan-details dialog), it must have: opening/open/loading/success-error/closing states animated via CSS transitions; a centered flex overlay with backdrop; a Google Icon close button; keyboard focus trapping; `Esc` and overlay-click closing; `role="dialog"` with `aria-modal` and labelled content; `--z-modal` stacking.
The mobile header menu is a lightweight disclosure (not a modal): `aria-expanded` on the trigger, `Esc` closes, visible focus.

### 2.5 Landing Page Sections & Content Requirements
Write all copy in **English**, in a candid, confident street-photography voice. No lorem ipsum. Required sections:

* **Sticky Glass Header:** frosted bar (`backdrop-filter`, `--z-dropdown`), "f/1.4" wordmark in mono/display type, anchor links (Features, How It Works, Testimonials, Pricing, FAQ), the theme toggle, and a `menu` icon button below 768px opening the accessible disclosure panel.
* **Hero:** `min-height: 90vh`, flex column centered. Layered backdrop: seeded picsum street photo (grayscale, slight scale) beneath a gradient mesh (two+ soft radial gradients: rust `#c23b22` at 0.25–0.35 alpha, cool gray `#d8d8dc`) and a subtle vignette. Content sits in a large glass panel: mono EXIF chip (`ISO 400 · 1/250s · f/1.4`), oversized `--font-display` H1 (clamp ~3rem→6.5rem, e.g., "The street doesn't pose. Neither do we."), supporting subline, two CTAs (`.btn--primary` "Join the hunt", `.btn--ghost` "See the gallery" → anchor). Add a floating glass "polaroid" chip or two and an aperture-ring motif built purely from `conic-gradient` + border-radius — no SVG.
* **Features (3 glass cards):** e.g., Curated Street Spots (`location_on`), Wide-Open Presets (`tune`), Weekly Challenges (`emoji_events`) — icon, heading, short copy each; card hover/focus-within per 2.2.
* **How It Works (3 steps):** 01 Shoot wide open → 02 Share your frames → 03 Get featured; oversized mono numerals, connecting line, Material icons (`photo_camera`, `cloud_upload`, `workspace_premium`); row → column on mobile.
* **Testimonials (3):** glass quote cards with 1/1 initial-monogram avatar circles, name + role, five `star` symbols (`aria-hidden` + visually hidden "Rated 5 out of 5"). Scroll-snap rail on mobile, 3-column grid ≥1024px.
* **Pricing (3 tiers):** Rookie ($0), Street Pro ($12/mo — highlighted: rust border, "Most popular" badge, slight scale/elevation), Studio ($29/mo). Feature lists with `check` icons; `.btn--primary` on Pro, `.btn--ghost` elsewhere.
* **FAQ (5–6 items):** native `<details>/<summary>` accordions in a glass container (suggested topics: gear requirements, preset compatibility, selling shots, challenges, cancellation). Styled summary with rotating `add` icon; visible hover/focus states; keyboard-accessible by default.
* **Final CTA:** wide glass panel over fresh gradient blobs; headline + the email capture form per 2.3.
* **Footer:** inverted surface using `--primary` as background with light text (correct token pairing): brand, tagline, 2–3 columns of secondary links (anchor to real sections where sensible, otherwise `href="#"` with meaningful accessible names), labeled icon buttons for social/contact using generic Material Symbols, EXIF-style sign-off microcopy, and the current year via JS.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** fluid `clamp()` typography, breakpoints ~640/768/1024px, zero horizontal overflow.
* **Smooth Animations:** all state changes use `transition: var(--transition-fast|normal) var(--ease-standard)`; entrance reveals via IntersectionObserver adding a reveal class — content must be fully visible without JS. Wrap all motion in `@media (prefers-reduced-motion: no-preference)`.
* **Accessibility (a11y):** WCAG AA contrast in both themes; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `main`, `section` with `aria-labelledby`, `footer`); one `h1`; skip-to-content link; logical focus order; full keyboard operability; a `role="status"`/`aria-live="polite"` toast region (`.toast`, `--z-toast`) for form feedback.
* **Mandatory Visual Feedback:** every link, button, card, summary, and input reacts visibly to hover, focus, and activation.
* **Destructive Actions:** `.btn--danger` defined with error tokens, distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** `index.html`, `style.css`, `script.js` — separate, complete. The only script tag is a single deferred `<script src="script.js" defer>`. `script.js` contains only: theme manager (localStorage + `prefers-color-scheme` + toggle `aria` state), mobile menu, FAQ niceties (if any), form demo validation with loading/success + toast, image-load class swap, and reveal observer. No libraries.
* **Naming:** BEM only (`.hero__panel`, `.card--featured`, `.btn--primary`) plus the sanctioned generic component classes (`.btn`, `.card`, `.input-group`, `.chip`, `.skeleton`, `.empty-state`, `.toast`). Never mix conventions.
* **No Unrequested Placeholders:** all user-facing copy is real, original English content; picsum is the only image source; no lorem ipsum, no "coming soon" stubs.
* **Definition of Done:** opens correctly by double-clicking `index.html`; both themes toggle and persist; complete keyboard pass; no console errors; no horizontal scroll at 320px; every requested section present and fully styled in both themes.