1990s Grunge Rock demo
1990s Grunge Rock

A raw, DIY Seattle-scene aesthetic built from photocopied flyers, scrawled handwriting, and water-stained, degraded textures that look salvaged from a basement.
Category: Retro & Pop
Era: 1990s Grunge
Prompt: 8.6 KB · 1178 words
# System Prompt: 90s Grunge Rock Landing Page Build

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. Theme: **90s Grunge Rock — raw, gritty, anti-design zine aesthetic** (translated from Portuguese source spec: "Grunge Rock dos Anos 90").

**Sections required:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. Architecture & Strict Rules

**1.1 CSS-First — Zero Inline CSS**
* All styling lives in `style.css`. The `style="..."` attribute is forbidden in HTML.
* All rules target class/ID selectors only. HTML stays semantic and clean.
* Changing the theme must require editing only the CSS file.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root`:

* **Colors:** `--primary: #2E2E2E` (faded black), `--secondary: #B5A642` (dirty yellow), `--accent-red: #8C2727`, `--accent-orange: #A84700`, `--accent-olive: #6B8E23`, `--accent-blue: #3B5998`, `--bg-primary: #E9E1D4` (off-white paper), `--bg-secondary: #D8CFBE`, `--text-primary: #2E2E2E`, `--text-secondary: #7A7A7A`, `--text-success: #6B8E23`, `--text-error: #8C2727`, `--border-default: #2E2E2E`, `--border-error: #8C2727`, `--border-success: #6B8E23`.
* **Contrast pairing:** light backgrounds pair with dark text and vice versa, enforced for every token pair.
* **Shape & Motion:** `--radius-sm: 0px`, `--radius-md: 2px`, `--radius-lg: 4px` (grunge = sharp, barely rounded), `--shadow-sm`, `--shadow-md` (hard offset shadows like `4px 4px 0 rgba(46,46,46,0.9)` — no soft blur shadows), `--spacing-gap: 1.5rem`, `--transition-fast: 0.15s`, `--transition-normal: 0.3s`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Stacking:** `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200`.

**1.3 Dark Mode — Mandatory**
* The source spec says "Full Light / No Dark," but dark mode support is a mandatory rule. **Exception clause:** implement dark mode via a `.dark` class + `@media (prefers-color-scheme: dark)` fallback, mapping tokens to a "photocopied night zine" palette (`--bg-primary: #1C1A17`, `--bg-secondary: #262320`, `--text-primary: #E9E1D4`, `--text-secondary: #A39A8A`, keep dirty yellow and muted red accents). Persist choice via `localStorage`, fall back to `prefers-color-scheme`, and include a visible toggle with correct `aria-pressed`/`aria-label`. The default theme remains the light grunge paper look.

**1.4 Flexbox & Mobile-First**
* Every flex container defaults to `align-items: center` unless explicitly justified otherwise (grunge misalignment is achieved via deliberate `transform: rotate()` on individual elements, never by breaking alignment rules).
* All rows collapse to columns below 768px. No horizontal scrolling at any viewport width.

**1.5 Framework**
* Use Tailwind CSS via CDN or clean custom CSS with `@layer`/`@apply`. All utilities map back to CSS variables and generic classes (`.btn`, `.card`, `.input-group`).

**1.6 Typography & Icons — Google Fonts Only**
* Text: load **Special Elite** (typewriter), **Permanent Marker** (handwritten zine scrawl), and **Oswald** (condensed poster headlines) from Google Fonts; bind via `--font-base`, `--font-marker`, `--font-headline`. The source spec's `'Courier New', monospace` is replaced by Google Fonts per the mandatory rule — use Special Elite as the monospace-flavored base.
* Icons: Google Material Symbols only. No inline SVGs, no local icon files.

---

## 2. Grunge Visual Direction (Apply Globally)

* **Distressed textures:** use CSS-generated noise/grain via repeating gradients, `filter: saturate(0.8) contrast(1.3)` on imagery, and a subtle grain overlay class (`.texture-grain`) — no external `distressed-texture.png` dependency; recreate the effect in pure CSS.
* **Xerox copy artifacts:** high-contrast, slightly washed sections; `.xerox` class applying `filter: contrast(1.3) saturate(0.6)`.
* **Chaotic typography:** mixed font families per section, deliberate `transform: rotate(-2deg)` / `rotate(1.5deg)` on cards, headlines, and tape labels; underline key words with `text-decoration: underline wavy`.
* **Torn paper / duct tape:** pure-CSS torn edges (jagged `clip-path` polygons on section dividers) and a `.tape` class — a dirty-yellow rotated rectangle with torn ends and slight transparency — used as section labels.
* **Misaligned grid:** sections intentionally offset (`margin-left`/`rotate` variance) while remaining responsive and readable.
* **Borders:** `border: 2px dashed var(--border-default)` and `2px solid` stamps; sticker-style badges in muted red and burnt orange.
* **Flicker:** the `text-flicker` animation (opacity jitter, 0.2s steps) applies ONLY to one hero accent word, and is disabled under `prefers-reduced-motion`.

---

## 3. Component Specifications

**3.1 Buttons (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`)**
* Default: flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, min 44x44px, hard offset shadow, 2px solid border, slight rotation on primary CTAs.
* Hover: shadow grows (`6px 6px 0`), `cursor: pointer`, background shift.
* Focus: distinct dashed outline ring using `--secondary`.
* Active: `transform: scale(0.97)`.
* Loading: disabled interaction, CSS spinner (no dimension change).
* Disabled: `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* Success/Error: temporary feedback via `--text-success`/`--text-error`.

**3.2 Cards (`.card`)**
* Default: flex column, `--bg-secondary`, 2px solid border, hard shadow, torn-edge top strip via `clip-path`.
* Hover: `translateY(-2px)` + shadow shift.
* `:focus-within`: border highlights in `--secondary`.
* Skeleton shimmer class for loading; empty-state layout with a Google Icon and guidance text.

**3.3 Forms (FAQ search, newsletter signup in Final CTA)**
* States: empty, focused (dashed outline ring), filled, valid (olive border + icon), invalid (muted red border, error text, error icon), disabled, read-only.
* Structure: flex container wrapping label, input, and dedicated error container.

**3.4 FAQ Accordion**
* `<details>`/`<summary>` or ARIA-compliant custom disclosure; full keyboard operability; animated open/close via CSS transitions; `aria-expanded` maintained.

**3.5 Modals (Pricing tier details, if triggered)**
* States: opening, open, loading, success/error, closing — all CSS-animated. Centered flex, backdrop overlay, Google Icon close button, focus trapping, `Esc` and overlay-click close.

---

## 4. Section-by-Section Content

Write all user-facing copy in **English**, in authentic 90s zine voice (translated from the Portuguese source spec).

1. **Hero:** Huge chaotic headline (one word rotated, one flickering), subtext like a handwritten note, primary CTA + secondary link, grainy CSS-textured backdrop, tape label.
2. **Features (3 cards):** Each card rotated differently, tape label, Material Symbol icon, short punchy copy.
3. **How It Works (3 steps):** Numbered like photocopied setlist scraps, connected by dashed line, misaligned on desktop, stacked on mobile.
4. **Testimonials:** 3 quotes styled as cut-out xerox clippings with handwritten attribution (`--font-marker`).
5. **Pricing (3 tiers):** Middle tier highlighted with a "PICK THIS ONE" tape sticker; each tier is a `.card` with feature list, CTA button, distinct price stamps.
6. **FAQ:** 5–6 questions, accordion behavior per 3.4.
7. **Final CTA:** Full-width muted red band, torn edges, bold headline, email input + button with full form states per 3.3.
8. **Footer:** Secondary links in columns, social icons (Material Symbols), copyright line, small "printed on recycled pixels" style zine note.

---

## 5. UX, A11y & Motion Rules

* Responsive by default; no horizontal overflow at any breakpoint.
* All state changes transition with `var(--transition-normal)`; respect `prefers-reduced-motion` (disable flicker, rotation jitter, shimmer).
* Contrast AA in both light and dark themes. Never rely on color alone — pair icons/text with states.
* Semantic HTML5, logical focus order, full keyboard operability, `aria-live` regions for form feedback and toasts.
* Every click/hover triggers visible feedback. Destructive actions use `.btn-danger` (muted red), distinct in both themes.

---

## 6. Deliverables

* **Files:** `index.html`, `style.css`, `script.js` — separate, no inline styles, no inline `<script>` beyond one deferred entry point.
* **Naming:** one consistent convention (BEM or fixed utility set) throughout — never mixed.
* **Copy:** real thematic copy everywhere; no lorem ipsum. All user-facing text in English.
* **No unrequested placeholders** — every button, link, and form must be wired to visible behavior or a real target.

Generate the complete, working code now.