Retro Digital 90s demo
Retro Digital 90s

A nostalgic, playful 90s-inspired digital style featuring vibrant colors, pixelated accents, and bold retro typography.
Category: Retro & Pop
Era: 1990s Retro
Prompt: 15.0 KB · 2065 words
# BUILD SPECIFICATION & SYSTEM PROMPT — "RETRO DIGITAL 90s" LANDING PAGE

**Your Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page for a fictional 90s-style digital marketing agency on the **first attempt**. No stubs, no placeholders, no "to be implemented" comments.

**Project:** Single-page marketing site, theme **"Retro Digital 90s"** (Nostalgic, Playful, Digital — Early 1990s Internet era). Suggested agency identity: **"DIAL-UP DIGITAL™ — We make brands go viral on the Information Superhighway."** All user-facing copy must be written in **English**, with authentic 90s internet slang ("hits," "surf the web," "guestbook," "AS seen on the Info Superhighway!").

---

## 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:** All design properties, layout rules, and states must live in `style.css`, targeted via class or ID selectors.
* **Minimal HTML Modifications:** HTML must remain clean, semantic (HTML5 landmarks: `header`, `nav`, `main`, `section`, `footer`), and agnostic of visual styling. Reskinning the site must require editing only the CSS file.

**1.2 CSS Variables (`var(--...)`) & Theme Tokens**
Store all visual tokens in `:root` and override them in the dark theme block:

* **Colors (Light mode — "Windows 95 Desktop" mood):** `--primary: #008080` (Teal), `--secondary: #800080` (Purple), `--accent-yellow: #FFFF00`, `--accent-lime: #32CD32`, `--accent-pink: #FF00CC`, `--accent-orange: #FFA500`, `--bg-primary: #C0C0C0` (Light Gray — classic OS chrome, never pure white), `--bg-secondary: #fefefe` (window content surface), `--bg-inset: #DFDFDF` (recessed fields), `--text-primary: #000000`, `--text-secondary: #404040`, `--border-default: #808080`.
* **Derived Text Tokens:** Where a palette hue fails WCAG contrast as text on a given background, derive a darkened variant for the text token and reserve the pure hue for borders, badges, and decorative accents. Specifically: `--text-success: #0B6B0B` (light mode) / `#32CD32` (dark mode); `--text-error: #B3008A` (light mode) / `#FF00CC` (dark mode); teal/purple used as *text* on light backgrounds must be darkened (e.g., `#005F5F` / `#5C005C`) — pure `#008080`/`#800080` are allowed only for large display text, borders, and backgrounds paired with light text.
* **Contrast Pairing:** Every light background token (`#C0C0C0`, `#fefefe`, `#FFFF00`) must pair with black/dark text; every dark background token (teal, purple, dark-mode surfaces) must pair with light text (`#FFFFFF`, `#FFFF00`, or `#E8E8E8`). Enforce this pairing in **both** themes.
* **Bevel Tokens:** `--bevel-light: #FFFFFF`, `--bevel-dark: #808080` (light mode); `--bevel-light: #4A4A5A`, `--bevel-dark: #000000` (dark mode). All 3D borders use these.
* **Radius & Shadows:** Define `--radius-sm`, `--radius-md`, `--radius-lg` — **exception clause:** resolve all three to `0px`, because the pixel aesthetic forbids rounded corners; bevel borders replace rounded corners as the shape language. Shadows must be **hard-offset, zero-blur** pixel shadows: `--shadow-sm: 3px 3px 0 var(--shadow-color)`, `--shadow-md: 5px 5px 0 var(--shadow-color)` (`--shadow-color: #000000` light / `#000000` dark).
* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 120ms`, `--transition-normal: 250ms`, `--ease-standard: ease-in-out`, plus `--ease-pixel: steps(4, end)` for retro stepped animations.
* **Elevation/Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts.

**1.3 Mandatory Dark Mode Support**
* **Implementation:** Define a full dark token set ("Midnight BBS" mood: `--bg-primary: #0A0A14`, `--bg-secondary: #1A1A2E`, `--text-primary: #E8E8E8`, `--text-secondary: #A0A0B0`, lightened teal `#40E0E0` and purple `#B366B3` for accents) under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector.
* **Theme Switching:** Backgrounds, text, bevels, and shadows must flip seamlessly via variables only — no HTML restructuring.
* **Persistence:** Persist the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a visible toggle in the header styled as a retro OS button, with correct `aria-pressed` and `aria-label` state.

**1.4 Flexbox Layout & Mobile-First Alignment**
* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless there is an explicitly justified exception (documented in a CSS comment).
* **Mobile-Friendly First:** All rows of windows/cards/steps must collapse to single columns on small viewports. No horizontal scrolling at any breakpoint. Fluid sizing throughout.

**1.5 Framework Default & Tailwind CSS Integration**
* Use Tailwind CSS (or clean custom CSS driven by `@layer` / `@apply`) unless another framework is requested. All utilities must map back to the CSS variables or generic reusable classes (`.btn`, `.window`, `.input-group`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Load Google Fonts via `<link>`: **"Press Start 2P"** for display/headings/buttons (bind to `--font-display`) and **"VT323"** for body copy (bind to `--font-base`, minimum body size `1.125rem` for legibility). **Exception clause:** the source spec names "Pixelade," which is not available on Google Fonts — substitute Press Start 2P + VT323 as the closest pixel-type equivalents.
* **Headings:** Apply `text-shadow: 1px 1px #808080` in light mode (classic bevel-embossed text); in dark mode, swap to a subtle neon glow (`text-shadow: 0 0 8px` accent color).
* **Icons:** Use Google Material Symbols only. Raw inline SVGs and local icon files are forbidden.

---

## 2. THEME DESIGN SYSTEM — "RETRO DIGITAL 90s"

**2.1 Mood & Art Direction**
Nostalgic, playful, quirky, authentic early-internet fun. The page should feel like a 1996 desktop: floating OS windows, chunky 3D buttons, pixel type, neon accents on gray chrome. Every section is framed as part of a retro operating system / GeoCities-era website.

**2.2 Signature Visual Effects (all CSS-only — no external images)**
* **Old OS UI elements:** Draggable-look `.window` components with gradient title bars (teal→purple gradient in light mode; adapted neon gradient in dark), title text, and window control buttons (Material icons `remove`, `crop_square`, `close`).
* **3D buttons:** `border: 2px outset var(--bevel-light)` at rest; `border-style: inset` on `:active` for the classic pressed-button effect.
* **Pixelated/web-safe typography:** Press Start 2P + VT323 per §1.6.
* **Geometric pattern & noise backgrounds:** Build with pure CSS — `repeating-conic-gradient` checkerboards, `repeating-linear-gradient` scanlines, `radial-gradient` dot grids/starfields. Apply via the `.pixel-pattern-bg` class.
* **Bevel borders everywhere:** The `.bevel-border` class (2px outset, bevel tokens) is the default surface treatment.
* **Dial-up click sounds:** Synthesize retro beeps/modem chirps with the **Web Audio API** (square-wave oscillators) — **exception clause:** no local or external audio files are permitted. Sounds fire only on direct user clicks, are controlled by a visible header mute toggle (Material `volume_up`/`volume_off`, `aria-pressed`, persisted in `localStorage`), never autoplay on page load, and default OFF when the user prefers `prefers-reduced-motion`.
* **Scanline/pixelation transitions:** Section reveals on scroll (IntersectionObserver adds a class) animate with a scanline sweep pseudo-element and `var(--ease-pixel)` stepped opacity flicker. Optionally add a subtle CRT scanline overlay on the hero only.

**2.3 Required Utility Classes (must exist in `style.css`)**
`.old-ui-element`, `.pixel-pattern-bg`, `.bevel-border`, plus a `.scanlines` overlay class. These are the only permitted non-BEM utilities (see §6).

---

## 3. PAGE CONTENT & SECTION SPECIFICATION

**3.1 Global Chrome**
Sticky header styled as an OS taskbar: agency wordmark (Press Start 2P), nav links to all sections, theme toggle, and sound toggle. Include a keyboard-accessible skip link.

**3.2 Hero**
A large `.window` with browser-chrome title bar ("http://www.dialupdigital.com"). Contains: blinking "NEW!" starburst badge (animation disabled under reduced motion), pixel headline (e.g., "We Make Websites That Get HITS."), subheadline, two CTAs ("Sign Our Guestbook" primary / "View Pricing" secondary), and a fake visitor counter ("You are visitor #001,337"). Below the window: a marquee strip with scrolling taglines (pauses on hover; static text under reduced motion).

**3.3 Features — 3 Cards**
Three `.window` cards, each with a Material icon, playful title, and 2–3 sentence description: (1) "Search Engine Domination" (SEO) — icon `travel_explore`; (2) "Banner Ads That Actually Get Clicked" — icon `ads_click`; (3) "Killer WWW Design" — icon `language`.

**3.4 How It Works — 3 Steps**
Styled as a retro software install wizard: three numbered steps ("Insert Disk 1: Discovery Call," "Installing... Your Strategy," "Reboot: Launch & Watch the Hits Roll In") connected by a segmented block progress bar (classic installer aesthetic).

**3.5 Testimonials**
Three quotes styled as guestbook entries / retro chat windows, each with a fictional name, company, and 5-star rating rendered as Material `star` icons.

**3.6 Pricing — 3 Tiers**
Three software-box-styled cards: "FLOPPY DISK EDITION" ($499/mo), "CD-ROM PRO" ($999/mo — highlighted "BEST VALUE" with neon yellow treatment), "GOLD EDITION" ($1,999/mo). Each lists features with Material `check` icons and a "Buy Now!" button that opens the order-confirmation modal (§4.4).

**3.7 FAQ**
5–6 questions in a keyboard-accessible accordion (§4.5), e.g., "Do you really use dial-up?", "Will my site work in Netscape?", "What is a 'hit' and why do I need 9000 of them?"

**3.8 Final CTA**
A full-width window: "Don't get left behind on the Information Superhighway!" with an email `.input-group` and "Get My Free Quote" button. On submit: button enters loading state, a fake segmented download progress bar animates, then a success state + toast confirm subscription (aria-live feedback).

**3.9 Footer**
Secondary links (About, Services, Guestbook, Webrings, Contact, Privacy), a joke line ("Best viewed at 800×600 in Netscape Navigator 3.0"), a visitor counter, and "© 1996–2025 Dial-Up Digital. Made with a Material `favorite` icon and a 56k modem."

---

## 4. COMPONENT DESIGN SPECIFICATIONS

**4.1 Button Component**
All states via CSS classes; base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, minimum 44×44px touch target, Press Start 2P at a readable size.
* **Default:** 3D bevel (`2px outset`), variants `.btn--primary` (teal bg / light text), `.btn--secondary` (purple bg / light text), `.btn--accent` (neon yellow bg / black text), `.btn--danger` (shocking pink treatment, visually distinct in both themes).
* **Hover:** brightness shift + hard shadow growth, `cursor: pointer`.
* **Focus:** classic dotted OS focus ring (`outline: 2px dotted`) using a variable-driven color visible in both themes.
* **Active/Pressed:** `border-style: inset` + `transform: scale(0.97)`.
* **Loading:** disables interaction, prevents double-clicks, shows a rotating Material `hourglass_empty` icon without changing button dimensions.
* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback classes driven by `--text-success` / `--text-error`, always paired with an icon or text (never color alone).

**4.2 Card / Window Component**
* **Default:** Flexbox `.window` with `.bevel-border`, `--bg-secondary` surface, gradient title bar, `--shadow-sm`.
* **Hover:** `transform: translateY(-2px)` and shadow growth to `--shadow-md`.
* **Focus-within:** Title bar or border highlights when a child link/button receives focus.
* **Loading (Skeleton):** Shimmer animation defined in CSS to prevent layout jumps.
* **Empty State:** Structured fallback with a Material icon and guidance text.
* Decorative window control icons must be `aria-hidden="true"` and removed from tab order unless wired to real behavior.

**4.3 Form & Input Requirements**
* **States:** Empty, focused (dotted ring), filled, valid (lime border + `check` icon), invalid (pink border, error text, `error` icon), disabled, read-only. Inputs use inset bevel borders and `--font-base`.
* **Structure:** Flex container wrapping label, input, and a dedicated error feedback container wired to `aria-live="polite"`.

**4.4 Modal / Popup Requirements** (pricing "Buy Now!" confirmation)
* **States:** Opening (scanline/pixelation entrance), open, loading, success/error, closing — all animated via CSS transitions.
* **UX Features:** Centered flex container (`align-items: center`), backdrop overlay, Material `close` icon button, keyboard focus trapping, `role="dialog"` + `aria-modal`, close via `Esc` and overlay click.

**4.5 FAQ Accordion**
Each item: trigger `<button>` with `aria-expanded` and `aria-controls`, rotating Material `expand_more` chevron, panel with inset bevel; fully keyboard operable; smooth height/opacity transition respecting reduced motion.

**4.6 Toast**
Retro-window-styled notification region with `aria-live`, auto-dismiss, stacked above everything via `--z-toast`.

---

## 5. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid sizing, mobile breakpoints, zero horizontal overflow; window grids collapse to one column.
* **Smooth Animations:** `transition: var(--transition-normal)` on state changes; stepped `var(--ease-pixel)` for retro reveals; **all** blinking, marquees, scanlines, sounds, and transform animations disabled under `prefers-reduced-motion`.
* **Accessibility (a11y):** WCAG-sufficient contrast in both Light and Dark modes (apply the derivation rule in §1.2). Never rely on color alone — pair every success/error state with an icon and text. Semantic HTML5 elements, correct ARIA roles/labels on custom widgets, logical DOM/focus order, full keyboard operability, and `aria-live` regions for form errors, toasts, and loading states.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change (bevel press, sound, toast, or progress bar).
* **Destructive Actions:** `.btn--danger` must be visually distinct in both light and dark themes.

---

## 6. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference. No external assets beyond Google Fonts and Google Material Symbols.
* **Naming Convention:** BEM (`block__element--modifier`) for all components (`.window__title-bar`, `.btn--primary`, `.pricing-card__features`), with exactly four permitted legacy utility classes: `.old-ui-element`, `.pixel-pattern-bg`, `.bevel-border`, `.scanlines`. Never mix other conventions.
* **No Unrequested Placeholders:** Write real, on-theme English marketing copy for every section — lorem ipsum is forbidden. All copy, labels, class names, variables, and file names in English/ASCII.
* **First-Attempt Complete:** Ship the full working page — theme toggle, sound toggle, accordion, modal, form validation, toasts, and all animations functional — in this single response.