Stonepunk demo
Stonepunk

A speculative punk-genre aesthetic that reimagines advanced technology built from stone-age materials, blending prehistoric craftsmanship with retrofuturistic imagination.
Category: Fantasy & Sci-Fi
Era: Retrofuturistic / Speculative
Prompt: 17.7 KB · 2427 words
# SYSTEM PROMPT — STONEPUNK LANDING PAGE — FULL BUILD SPECIFICATION

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. Every rule in this document is mandatory.

**Objective:** A single-page marketing site containing: sticky header navigation, Hero, Features (exactly 3 cards), How It Works (exactly 3 steps), Testimonials, Pricing (exactly 3 tiers), FAQ, Final CTA, and Footer with secondary links.

**Theme — Stonepunk:** Prehistoric punk. Stone, bone, and wood "technology." Earthy, rough, primitive materials. Cave-painting motifs. Anachronistic prehistoric tech delivered with retrofuturist confidence. Tonal references: The Flintstones, The Croods. Era: 2000s–present. **Signature visual move:** every primary surface (nav, buttons, cards, inputs, pricing slabs, footer) must read as hewn rock — a carved-stone inset bevel (`--shadow-carve`) layered with a rough ochre daub texture (`--daub-texture`), small "chipped" border radii, and visible 2px borders.

**Copy language:** ALL user-facing copy must be written in **English**. The source specification contained non-English guidance — translate and write everything in English. Keep all CSS variable names, class names, and file names in ASCII/English.

**Reference baseline:** The design-token block and base classes supplied in the source spec (`references/00-flagship-implementation-specs/stonepunk.md`) are the canonical starting point. Port them into `style.css` and extend them according to the rules below.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in a dedicated `style.css`. **Forbidden:** `style="..."` attributes, `<style>` blocks in HTML, inline event-handler attributes (`onclick=`, `onsubmit=`, etc.).
- Target all design properties, layout rules, and states exclusively via class or ID selectors.
- HTML must remain clean, semantic, and style-agnostic: reskinning the page must never require touching the markup.

**1.2 CSS Variables & Theme Tokens**
Store every visual token in `:root`, then re-declare the full set under the dark theme (Section 1.3). Use this canonical mapping of the Stonepunk palette:

```css
:root {
  /* surfaces */
  --bg-primary: #d8c9a8;      /* parchment sand — page background */
  --bg-secondary: #cabb96;    /* hewn surface — cards, nav, footer */
  --bg-strong: #b8a67d;       /* surface-strong — buttons, inputs, chips */
  /* text */
  --text-primary: #2c2013;    /* char ink */
  --text-secondary: #52422b;  /* muted umber */
  --text-on-primary: #f4e9cf; /* bone text on rust */
  /* brand */
  --primary: #8a3b1f;         /* kiln-fired rust */
  --secondary: #4a6b4a;       /* moss green */
  --ochre: #b5772b;           /* cave-painting ochre */
  --char: #2c2013;            /* cave ink — flips to bone chalk in dark mode */
  /* borders & feedback */
  --border-default: #7a6242;
  --border-success: #4a6b4a;
  --border-error: #9a2b16;
  --text-success: #3d5a3d;
  --text-error: #9a2b16;
  /* radius — chipped stone */
  --radius-sm: 2px; --radius-md: 5px; --radius-lg: 9px; --radius-pill: 999px;
  /* shadows */
  --shadow-sm: 0 2px 3px rgba(44,32,19,0.35);
  --shadow-md: 0 5px 10px rgba(44,32,19,0.4);
  --shadow-lg: 0 12px 22px rgba(44,32,19,0.45);
  --shadow-carve: inset 0 2px 3px rgba(44,32,19,0.4), inset 0 -1px 0 rgba(255,247,224,0.15);
  /* spacing & motion */
  --spacing-gap: 24px;
  --transition-fast: 120ms; --transition-normal: 240ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  /* stacking */
  --z-header: 40; --z-dropdown: 100; --z-modal: 200; --z-toast: 300;
  /* signature textures */
  --daub-texture: repeating-linear-gradient(115deg, rgba(44,32,19,0.06) 0 2px, transparent 2px 6px);
  --char-mark: linear-gradient(180deg, rgba(44,32,19,0.08), transparent 60%);
  /* type */
  --font-base: 'Roboto Slab', 'Rockwell', Georgia, serif;
  --font-display: 'Rock Salt', 'Kalam', cursive;
  --font-mono: 'Courier Prime', ui-monospace, monospace;
}
```

- **Contrast pairing is mandatory for every theme:** any light background token pairs with a dark text token; any dark background token pairs with a light text token. Verify WCAG AA — 4.5:1 for body text, 3:1 for large text and UI components — in **both** modes, adjusting values if a pair fails.
- **Never use pure white.** The lightest surface is the parchment `#d8c9a8`; if a near-white is genuinely required, use `#fefefe`, never `#ffffff`.
- Optional flourish for the hand-hewn feel: subtly asymmetric corner radii (e.g., `border-radius: 9px 7px 10px 6px`) on cards and slabs.

**1.3 Mandatory Dark Mode Support**
- Define the full dark token set under **both** `@media (prefers-color-scheme: dark)` (first-visit correctness) **and** an `html.dark` class (explicit override; the class always wins). Suggested "cave at night" starting values — verify AA before shipping:

```css
html.dark {
  --bg-primary: #1f1710;  --bg-secondary: #2c2013;  --bg-strong: #3b2c1c;
  --text-primary: #f2e8d0; --text-secondary: #c7b58e;
  --primary: #d06a3a;     /* torch-lit rust */
  --text-on-primary: #241a10;
  --secondary: #8fb08c;   --ochre: #d18f3e;
  --char: #f2e8d0;        /* ink flips to bone chalk so painted motifs stay visible */
  --border-default: #5a4a33;
  --border-success: #8fb08c; --border-error: #e58a74;
  --text-success: #9ccf9c;   --text-error: #e58a74;
  --shadow-carve: inset 0 2px 3px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(244,233,207,0.12);
  --daub-texture: repeating-linear-gradient(115deg, rgba(244,233,207,0.05) 0 2px, transparent 2px 6px);
}
```

- Theme switching must work purely through CSS variables — **no HTML restructuring**.
- **Persistence:** store the user's explicit choice in `localStorage` (key: `stonepunk-theme`); fall back to `prefers-color-scheme` on first visit; store nothing until the user acts.
- Provide a **visible toggle** in the nav: an icon-only button using Material Symbols `light_mode`/`dark_mode`, with `aria-pressed` reflecting state and a dynamically updated `aria-label` ("Switch to dark theme" / "Switch to light theme").
- Add `<meta name="color-scheme" content="light dark">` and the CSS `color-scheme` property so native controls and scrollbars follow the theme.
- **Exception clause (dark mode):** the source spec declares no color modes ("validate in light and dark before publishing"). This does **not** waive the mandatory dark mode — you must author the dark palette yourself and validate both modes before declaring the build complete.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox. Every flex container **defaults to `align-items: center`** unless an exception is justified (document exceptions with a CSS comment).
- Mobile-first: single-column at base; promote to rows at `≥768px` and `≥1024px` using `flex-wrap` and `flex-basis` — never fixed widths that cause overflow.
- **Zero horizontal scrolling** at any viewport width from 320px upward. Sticky/fixed elements must not introduce overflow.

**1.5 Styling Approach & Naming Convention**
- Use **clean, framework-free custom CSS** (the reference stylesheet defines the component vocabulary). Organize `style.css` in labeled layers: tokens → base → layout → components → page sections → states → dark mode → media queries.
- **One naming convention only: BEM** (`block__element--modifier`), consistent with the reference classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`). Never mix conventions; never invent utility-class soup.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load via Google Fonts `<link>`: **Roboto Slab** (400/700) → `--font-base` (body); **Rock Salt** (400) → `--font-display` (headlines, buttons, badges — the hand-carved voice); **Kalam** (400/700) as display fallback; **Courier Prime** (400/700) → `--font-mono` (prices, step numerals, "carved tally" figures).
- **Exception clause (fonts):** Rockwell is not on Google Fonts; it may appear only as a local fallback after Roboto Slab. Google Fonts remain mandatory.
- Icons: **Google Material Symbols (Rounded)** via `<link>`. **Forbidden: raw inline SVGs, local icon files, emoji-as-icons.** Thematic glyph set to draw from: `construction`, `handyman`, `hammer`, `fireplace`, `forest`, `terrain`, `cabin`, `camping`, `history_edu`, `rocket_launch` (anachronistic tech), `front_hand` (cave handprint), `check`, `close`, `expand_more`, `dark_mode`, `light_mode`, `mail`, `send`.
- **No external images of any kind.** All decorative visuals — cave-painting bands, handprints, stone textures — are built from CSS gradients, pseudo-elements, and Material Symbol glyphs.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component** — all states via CSS classes; base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `--font-display` bold per reference.
- **Hover:** brightness/shadow shift + `cursor: pointer` (translateY(-1px) lift allowed).
- **Focus:** distinct `:focus-visible` ring using `outline: 3px solid var(--secondary); outline-offset: 2px` per the reference.
- **Active/Pressed:** `transform: scale(0.97)` click feedback. **Exception clause:** the reference shows `translateY(0)` on `:active`; the mandated `scale(0.97)` pressed feedback overrides it.
- **Loading (`.is-loading`):** disables interaction, blocks double-clicks, renders a CSS spinner or rotating Material Symbol **without changing button dimensions**.
- **Disabled (`[disabled]` / `.is-disabled`):** `opacity: 0.5`, grayscale, `cursor: not-allowed`, no transforms.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback tinted by `--text-success` / `--text-error`, always paired with an icon or text — never color alone.
- Variants: `.btn--primary` (rust slab, `--text-on-primary`), `.btn--ghost` (bordered parchment), `.btn--danger` (visually distinct in **both** themes), `.btn--lg` (hero).

**2.2 Card Component** — base `.card`: flex column, `--bg-secondary` + `--daub-texture`, 2px `--border-default`, `--radius-lg`, `--shadow-md` + `--shadow-carve`, padding `--space-6`.
- **Hover (interactive cards only):** `transform: translateY(-2px)` and shadow shift to `--shadow-lg`.
- **Focus-within:** border color shifts to `--ochre` when a child link/button receives focus.
- **Loading (`.card--skeleton`):** shimmer keyframe animation defined in CSS to prevent layout jumps.
- **Empty (`.card--empty`):** structured fallback with a Material Symbol and guidance text, defined in CSS.
- Used for: feature cards, pricing tiers, testimonial slabs, step slabs.

**2.3 Form & Input** — the Final CTA newsletter form: flex-column `.form-group` wrapping a `<label>`, an `.input` (reference styling: carved inset, ochre focus ring via `color-mix`), and a dedicated `.form-group__error` container with `aria-live="polite"` that is always in the DOM.
- **States to style:** empty, focused, filled, valid (`.is-valid`: `--border-success` + check icon), invalid (`.is-invalid`: `--border-error`, `--text-error` message + error icon), disabled, read-only.
- JS validates the email on submit (`novalidate` on the form; custom messages in English); the submit button enters the loading state during a simulated send; success swaps the form for a `--text-success` confirmation message. No page reload.

**2.4 Modal / Popup** — only if you implement any dialog (permitted solely where an interaction genuinely requires one; prefer the FAQ accordion over popups), it must have: centered flex overlay (`align-items: center; justify-content: center`), backdrop overlay, CSS-animated opening/closing (opacity + scale), Material Symbol close button, keyboard focus trapping, close via `Esc` and backdrop click, `role="dialog"` + `aria-modal` + labelled, focus restored on close, and internal loading/success/error states. Layer with `--z-modal`.

**2.5 Page Sections & Content Requirements** — build all of the following, in order. Do not add sections, chat widgets, cookie banners, or modals beyond what is specified.

- **a) Header / Nav (`.nav`, sticky):** brand wordmark in `--font-display` with a Material Symbol; anchor links (Features, How It Works, Pricing, FAQ); theme toggle (Section 1.3). Carved-slab styling per the reference. A "Skip to content" link is the first focusable element. On mobile, links may wrap (preferred, no JS) — or, if you build a hamburger, it must be a fully accessible disclosure (`aria-expanded`, keyboard operable, focus managed).
- **b) Hero:** flex row (copy + decorative cave-painting panel) collapsing to a column on mobile. Contains: `.badge` (e.g., "Now with 100% more wheel"), `<h1>` in `--font-display`, subhead in `--text-secondary`, primary CTA (`.btn--primary .btn--lg`) and secondary CTA (`.btn--ghost`) wired as smooth-scroll anchors, and a small stats row in `--font-mono`. The cave-painting panel is CSS-only — ochre daub band, `front_hand` handprint glyphs, primitive motifs via pseudo-elements, carved frame — marked `aria-hidden="true"` and `pointer-events: none`.
- **c) Features — exactly 3 `.card` items:** flex row wrapping to a column on mobile. Each: Material Symbol in a carved stone chip, `<h3>`, copy, and a "Learn more" text link (card highlights via `:focus-within`). Hover lift per 2.2.
- **d) How It Works — exactly 3 steps:** flex row with a dashed "rope" connector (CSS border/pseudo-element) that becomes vertical on mobile. Each step: `--font-mono` numeral ("01/02/03") in a carved stone disc, Material Symbol, `<h3>`, copy.
- **e) Testimonials — 3 quote cards:** stone-disc avatars with initials in `--font-display` (no external images), quote, name + role, ochre quotation glyph. Flex wrap → column on mobile.
- **f) Pricing — exactly 3 `.card--pricing` tiers:** the middle tier is featured (elevated treatment + `.badge` "Most Popular" in ochre per the reference) with a `.btn--primary`; outer tiers use `.btn`. Prices in `--font-mono` with a Stonepunk unit ("per moon"); feature lists with Material Symbol `check` items; a "carved in stone" guarantee line. All pricing CTAs must demonstrate the full button state machine (hover/focus/active at minimum; loading on click as a demo is allowed).
- **g) FAQ — accessible accordion:** `<button aria-expanded>` + region pattern (or `<details>`/`<summary>` with a styled summary), 5–6 Q&As in English, animated height via a CSS technique (e.g., `grid-template-rows: 0fr → 1fr`), `expand_more` icon rotating on open, fully keyboard operable.
- **h) Final CTA:** a full-width inverted contrast slab — in light mode, `--char` background with bone text; in dark mode, `--bg-strong` with bone text (verify AA both ways). Contains headline, supporting line, and the newsletter form per 2.3 with a `.btn--primary` submit.
- **i) Footer with secondary links:** 2–3 link columns (e.g., Product, The Tribe, Cave Legal), social icons as Material Symbol buttons with 44px targets and `aria-label`s, a humorous copyright line, and a repeat of key nav links. Footer uses `--bg-secondary` + `--daub-texture` + `--shadow-carve`. All links show visible focus rings.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid type via `clamp()` on display sizes; breakpoints at 480/768/1024px; test down to 320px with zero horizontal overflow.
- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes (hover lifts, presses, accordion, theme swap — transition `background-color`/`color` on key surfaces so mode switching cross-fades). Everything is disabled under `@media (prefers-reduced-motion: reduce)`: no transforms, no spinner, no shimmer, no smooth scrolling.
- **Accessibility (a11y):** semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); exactly one `<h1>` with a logical heading hierarchy; logical DOM/focus order; skip link; visible focus rings everywhere (never `outline: none` without replacement); `aria-live` regions for all dynamic feedback (form errors, loading, success, any toast layered at `--z-toast`); state is never communicated by color alone (always icon + text); AA contrast in both themes; all touch targets ≥44px; icon-only buttons carry `aria-label`s; full keyboard operability — no mouse-only interactions.
- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change (nav-link ochre underlines, card lifts, button presses, accordion rotation, form state transitions, toggle icon swap).
- **Destructive actions:** any destructive/reset control uses `.btn--danger` and must be visually distinct in both light and dark themes.
- **Anchor navigation:** smooth-scroll with `scroll-margin-top` on sections so the sticky header never covers targets; respect reduced motion.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js`. Exactly one `<script src="script.js" defer>` in `<head>` (placed early to minimize theme-flash); no other inline scripts, styles, or event handlers.
- **Naming:** BEM only, consistent with the reference classes, across the entire deliverable.
- **Copy:** all user-facing copy in English, no lorem ipsum anywhere. Invent one coherent Stonepunk product concept (e.g., a stone-age toolkit/logistics/workflow product) and carry it through every section with Flintstones/Croods-style anachronistic-tech humor while keeping the layout professional.
- **JS scope (vanilla, no libraries, no build step):** theme toggle + persistence, accordion behavior, form validation + simulated submit + loading/success states, smooth-scroll fallback, any optional nav disclosure. No external requests except Google Fonts and Material Symbols.
- **QA checklist — verify before declaring done:** both themes designed and validated (the source spec declared none — dark mode is your responsibility); AA contrast in both modes; full keyboard pass; 320px pass with no horizontal scroll; reduced-motion pass; zero inline CSS; zero inline SVGs; all eight sections present; every button and input state from Sections 2.1–2.3 is styled.