Retro Americana / Diner demo
Retro Americana / Diner

A nostalgic 1950s American diner aesthetic featuring chrome details, neon signs, checkerboard floors, jukebox reds, and pastel mint tones evoking roadside culture.
Category: Retro & Pop
Era: 1950s Retro
Prompt: 14.9 KB · 1989 words
# SYSTEM PROMPT — "RETRO AMERICANA / DINER" LANDING PAGE (COMPLETE BUILD)

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page described below on the first attempt. All user-facing copy must be written in English. All class names, tokens, and file names must be English/ASCII.

---

## 1. PROJECT BRIEF & DESIGN SOURCE OF TRUTH

**1.1 Theme:** "Retro Americana / Diner" — a 1950s revival. Keywords: diner, 50s Americana, rockabilly, chrome, red vinyl, checkerboard floors, neon signage, script + bold slab type, cherry red, cream, turquoise, nostalgic, wholesome, kitsch, condensed roadside typography (Route 66 signage, retro soda-pop Americana).

**1.2 Light/Dark directive (translated from source):** The source spec does not declare theme modes — you must validate the design in **both light and dark** before considering the build complete. Dark Mode is mandatory regardless of this gap.

**1.3 Sections to build (exactly this list — nothing more):** Sticky Header/Nav (with theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

**1.4 Authoritative design tokens — reproduce verbatim as the base of `style.css`:**

```css
:root {
/* color */
--color-bg: #fdf6e3;
--color-surface: #ffffff;
--color-surface-strong: #fff8ea;
--color-border: #1a1a1a;
--color-text: #1a1a1a;
--color-text-muted: #5c5346;
--color-primary: #d62828;
--color-accent: #1fb6b0;
--color-chrome: #c9ccd1;
/* radius */
--radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 999px;
/* shadow */
--shadow-sm: 0 2px 0 rgba(26,26,26,0.9);
--shadow-md: 0 4px 0 rgba(26,26,26,0.9);
--shadow-lg: 0 8px 0 rgba(26,26,26,0.9);
--shadow-neon: 0 0 6px rgba(31,182,176,0.7), 0 0 16px rgba(31,182,176,0.4);
/* font */
--font-sans: 'Helvetica Neue', Arial, sans-serif;
--font-display: 'Pacifico', 'Brush Script MT', cursive;
--font-mono: 'Courier New', monospace;
/* text */
--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 */
--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 */
--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);
/* extra */
--checker: repeating-linear-gradient(45deg, #1a1a1a 0 10px, #fdf6e3 10px 20px);
--chrome-edge: linear-gradient(180deg, #f4f4f4, #b8bcc2 50%, #f4f4f4);
}
```

**1.5 Authoritative base component classes — extend these blocks, never remove them:** the `body`, `.nav`, `.btn`, `.btn:hover/.btn:active/.btn:focus-visible/.btn[disabled]`, `.btn--primary`, `.card`, `.input`, `.input::placeholder`, `.input:focus`, `.badge`, and the `prefers-reduced-motion` override exactly as provided in the source specification.

**1.6 Signature moves (must repeat across the page):** (a) black-and-cream **checkerboard trim lines** (`--checker`) on the nav top edge, card bottom edges, section dividers, and footer top; (b) **hard-offset "chrome bumper" shadows** (`--shadow-sm/md/lg`) — solid offset, zero blur; (c) **neon glow** (`--shadow-neon`) on badges, focus rings, and hero accents (intensified in dark mode); (d) **script + bold slab type pairing** on all headlines; (e) **chrome-edge treatment** (`--chrome-edge`) on the logo and at least one decorative sign panel.

**1.7 Reference file:** if `references/00-flagship-implementation-specs/americana-diner.md` is available in your context, defer to it for signature details; otherwise Sections 1–6 of this prompt are the complete source of truth.

**1.8 CSS corrections:** `border-top-image` / `border-bottom-image` in the reference are not valid standalone CSS properties — reproduce their visual intent with valid CSS (`border-image`, pseudo-elements, or `aria-hidden="true"` trim elements). Decorative elements must be `aria-hidden`.

---

## 2. STRICT RULES & ARCHITECTURE

**2.1 CSS-First & Zero Inline CSS**
* All styling lives in `style.css`. The `style="..."` attribute is forbidden anywhere in the HTML.
* Target all design properties, layout, and states exclusively via class/ID selectors.
* Keep HTML semantic and visually agnostic: a full re-skin must be possible by editing CSS only.

**2.2 Tokens & Mandatory Semantic Aliases**
* Keep every token from 1.4. Additionally define in `:root`: `--primary: var(--color-primary)`, `--secondary: var(--color-accent)`, `--bg-primary: var(--color-bg)`, `--bg-secondary: var(--color-surface)`, `--text-primary: var(--color-text)`, `--text-secondary: var(--color-text-muted)`, `--border-default: var(--color-border)`, `--spacing-gap: var(--space-6)`, `--transition-fast: 120ms var(--ease-standard)`, `--transition-normal: 240ms var(--ease-standard)`.
* Define feedback tokens in both themes: `--text-success`, `--text-error`, `--border-success`, `--border-error` (suggested light values: `#2f7d32` success / `#b3261e` error; brighten both for dark mode; validate ≥ 4.5:1 against their backgrounds).
* Define elevation tokens: `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.
* **Contrast pairing is mandatory in every theme:** light background ↔ dark text, dark background ↔ light text, cherry `#d62828` backgrounds pair with cream `#fdf6e3` text, turquoise `#1fb6b0` backgrounds pair with `#06231f` text.
* **Pure-white exception clause:** the palette explicitly sets `--color-surface: #ffffff` — retain it exactly; however, any *additional* near-white surface you introduce must use `#fefefe`, never `#ffffff`.

**2.3 Mandatory Dark Mode**
* Implement dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`. Suggested "diner at night" values (validate contrast before finalizing): `--color-bg: #161210`, `--color-surface: #201913`, `--color-surface-strong: #2a2119`, `--color-border: #f2e6c9`, `--color-text: #fdf6e3`, `--color-text-muted: #cdc2a5`, `--color-primary: #e8433f`, `--color-accent: #2fd6cf`, `--color-chrome: #d9dce2`.
* Flip `--checker` in dark scope (cream-on-dark stripes) so trim lines stay visible; bump shadow offsets to near-black `rgba(0,0,0,0.85)`; intensify `--shadow-neon`.
* Provide a visible header toggle button persisting choice via `localStorage` (suggested key `diner-theme`), falling back to `prefers-color-scheme` on first visit, with correct `aria-pressed` and `aria-label` state.
* Before finishing, self-audit **both themes**: text contrast (≥ 4.5:1 body, ≥ 3:1 large/UI), trim visibility, shadow legibility, and focus-ring visibility.

**2.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified (documented exceptions allowed: card text stacks may use `align-items: flex-start`).
* Mobile-first: multi-column rows (pricing, features, steps, testimonials) collapse to single columns on small viewports. No horizontal scrolling at any width. Minimum touch target 44×44px.

**2.5 Styling Approach**
* Use the custom CSS token architecture from Section 1 as the styling system. Tailwind is permitted only via `@layer`/`@apply`, with every utility mapping back to the tokens and the reusable classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`). Never mix styling conventions.

**2.6 Typography & Icons (Google Fonts Mandatory)**
* Load via Google Fonts `<link>` (with preconnect): **Pacifico** (script, bind to `--font-display`), **Alfa Slab One** (bold slab; add `--font-slab: 'Alfa Slab One', 'Rockwell', serif;` and use it for all section headlines), and a **condensed Google sans** (suggested: Archivo Narrow or Roboto Condensed) rebound as the lead face of `--font-sans`, keeping the original fallbacks after it.
* Icons: Google Material Symbols (Rounded set) via `<link>`. Raw inline SVGs and local icon files are forbidden.
* **Exception clause:** `--font-mono` may retain the spec's system stack (`Courier New`) because it is decorative-only (menu-board prices); all primary text faces must be Google-hosted.

---

## 3. COMPONENT DESIGN SPECIFICATIONS

**3.1 Buttons** — all states via classes, no inline styles: **Default** (flex, `align-items/justify-content: center`, `gap: .5rem`, min 44×44px, pill radius, 3px border, bumper shadow); **Hover** (`translate(-2px,-2px)` + grown bumper shadow, `cursor: pointer`); **Focus-visible** (3px accent outline, 3px offset); **Active** (translate reset, `--shadow-sm` press feedback); **Loading** (interactions disabled, double-click prevention, `aria-busy="true"`, CSS border-spinner or rotating Material `progress` icon, zero dimension change); **Disabled** (`.5` opacity, greyscale, `not-allowed`, no transforms); **Success/Error** (transient `.btn--success` / `.btn--error` classes using feedback tokens + `check`/`error` icons); **Danger** (define `.btn--danger`, visually distinct in both themes, even if unused). Transition all states with `--transition-fast`.

**3.2 Cards** — **Default** (flex layout, `--color-surface`, 3px border, bumper shadow, checker bottom trim); **Hover** (`translateY(-2px)` + shadow step up); **Focus-within** (border/accent highlight when a child link or button is focused); **Loading** (`.card--skeleton` with CSS shimmer keyframes, fixed dimensions to prevent layout jumps); **Empty State** (`.empty-state` pattern: Material icon + short guidance text).

**3.3 Forms & Inputs** — structure each as a flex-column `.input-group`: `<label>`, `<input class="input">`, and a dedicated `.input-feedback` container (`aria-live="polite"`). States: empty; focus (accent border + neon ring); filled; **valid** (success border + `check` icon); **invalid** (error border + icon + text message — never color alone); disabled; read-only. Min input height 44px.

**3.4 FAQ Accordion** — use native `<details>/<summary>` (keyboard-accessible without JS). Summary in slab font with Material `expand_more` icon rotating 180° on `[open]`; hover background shift; visible `:focus-visible` ring; smooth open/close animation where CSS permits. No JavaScript for the FAQ.

**3.5 Theme Toggle** — icon-only `.btn` variant using Material `dark_mode` / `light_mode`; `aria-pressed="true"` in dark mode; `aria-label` updates ("Switch to dark mode" / "Switch to light mode").

**3.6 Modals/Popups** — out of scope. Do not add any.

---

## 4. LANDING PAGE SECTION BUILD SPECIFICATION

**4.0 Global** — semantic landmarks (`header`, `nav`, `main`, `section` + `footer`), one `h1` (hero), each section labelled via `aria-labelledby`; centered container max-width ~72rem; alternate `--color-bg` / `--color-surface-strong` section backgrounds; **no external images** (avatars are CSS monogram circles; all decoration is CSS patterns or Material icons).

**4.1 Header/Nav** — sticky top, `z-index: var(--z-dropdown)`; script-font logo with chrome-edge text effect; anchor links (Features, How It Works, Pricing, FAQ); theme toggle; 8px checker trim on the top edge.

**4.2 Hero** — centered flex column; script headline with layered neon `text-shadow` (glow stronger in dark mode; never on body text); slab sub-headline; short nostalgic paragraph; two CTAs — `.btn--primary` (e.g., "Pull Up a Stool") and secondary `.btn`; `.badge` ("Est. 1957"); decorative `aria-hidden` checker floor strip and/or chrome-edge sign panel.

**4.3 Features** — 3 `.card`s, each with a Material icon inside a chrome-edge circle (suggested: `local_cine` no — use `local_cafe`, `lunch_dining`, `icecream`, or `bolt` / `loyalty`), slab title, 2–3 lines of copy; checker bottom trim; hover lift per 3.2.

**4.4 How It Works** — 3 steps with numbered chrome-circle badges (`--chrome-edge` fill + 3px border), slab step titles, short copy; a dashed "Route 66" connector line between steps (CSS dashed border on an `aria-hidden` element); stacks vertically on mobile with the connector hidden or vertical.

**4.5 Testimonials** — 3 quote cards: 5-star rating via Material `star` icons (icons `aria-hidden` + visually hidden "Rated 5 out of 5 stars" text), quote copy, CSS monogram avatar circle, name + role; checker trim.

**4.6 Pricing** — 3 `.card` tiers; the middle tier gets `--color-primary` background with full cream-text pairing, a `.badge` "Most Popular", and visual emphasis; prices in `--font-mono` ("menu board" style); feature lists with Material `check` icons; one CTA button per tier (cream `.btn` on the cherry tier, `.btn--primary` elsewhere); columns collapse on mobile.

**4.7 FAQ** — 4–6 themed Q&As (e.g., hours, reservations, parking, menu options) implementing 3.4.

**4.8 Final CTA** — neon-framed panel (`--color-surface-strong`, checker trim, neon border glow in dark); slab headline + script accent word; newsletter `.input-group` per 3.3; submit `.btn--primary` with the full state chain: idle → **loading** (spinner, disabled, `aria-busy`) → **success** (`.btn--success`, `check` icon, "You're on the guest list!" announced in the `aria-live` region) or **error** (error token, icon, friendly message). Simulation lives in `script.js`; no backend.

**4.9 Footer** — checker top trim; script logo; secondary links (About, Menu, Locations, Careers, Privacy, Terms) in a wrapping centered flex row; icon links using generic Material Symbols (e.g., `alternate_email`, `share`, `photo_camera`) with descriptive `aria-label` (brand logos are unavailable and inline SVG is forbidden); muted copyright line with 50s flair.

**Copy voice:** wholesome 1950s diner Americana ("made to order", "since 1957", "served with a smile") — English only, real content everywhere, no lorem ipsum.

---

## 5. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` display sizes, breakpoints as needed (~640 / 768 / 1024px), zero horizontal overflow.
* **Smooth animations:** every state change transitions via `--transition-fast` / `--transition-normal` with `--ease-standard`.
* **Reduced motion:** under `prefers-reduced-motion: reduce`, disable all transforms, shimmer, reveals, and any neon flicker.
* **Accessibility:** logical DOM/focus order; full keyboard operability; visible focus everywhere; contrast ≥ 4.5:1 body text and ≥ 3:1 large text/UI in **both themes**; never communicate state by color alone; `aria-live` regions for all dynamic feedback.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive actions:** `.btn--danger` must read clearly on both cream and dark backgrounds.

---

## 6. DELIVERABLE & OUTPUT FORMAT

* **Files:** `index.html`, `style.css`, `script.js`. Only one script reference allowed: `<script src="script.js" defer></script>`. Zero inline styles.
* **Naming:** strict BEM throughout, matching the provided `.btn--primary` pattern — one convention, never mixed. Reuse `.nav`, `.btn`, `.card`, `.input`, `.badge` as the base blocks.
* **`script.js` scope only:** theme init/toggle/persistence, newsletter submit simulation, and optional IntersectionObserver scroll reveals (reduced-motion aware). No libraries, no frameworks, no other JS.
* **Content:** all user-facing copy in English, fully written diner-themed content — no TODOs, no placeholder text.
* Generate the complete, runnable result on the first attempt.