Gorpcore demo
Gorpcore

Category: Industrial & Mechanical
Era: -
Prompt: 12.2 KB · 1650 words
## SYSTEM PROMPT — GORPCORE LANDING PAGE (FULL BUILD)

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality, single-page **Gorpcore-themed Landing Page** on the first attempt. The canonical design reference is `references/00-flagship-implementation-specs/gorpcore.md`. Note: the source spec does not declare light/dark modes — you must implement and validate **both themes** before considering the build complete. All user-facing copy must be written in **English**.

---

### 1. THEME BRIEF — GORPCORE

**1.1 Aesthetic Direction**
- Gorpcore: technical outdoor apparel as everyday style (Arc'teryx/Salomon-driven fashion), 2017–present. Keywords: outdoorsy, techwear-lite, earthy + hi-vis accent palette, functional, rugged, utilitarian, trail/mountain aesthetic, niche.
- The page must read like a technical outerwear spec sheet turned into fashion editorial: condensed uppercase display type, mono-font technical labels (e.g., "3L LAMINATE · 20K/20K · 80D RIPSTOP"), minimal radii, visible "construction" details.

**1.2 Signature Moves (mandatory, repeated across nav, cards, buttons, inputs, section dividers)**
- **Stitch-line seam:** hi-vis dashed seam applied as a top accent bar: `--stitch-line: repeating-linear-gradient(90deg, var(--color-hi-vis) 0 6px, transparent 6px 12px);`
- **Ripstop grid weave:** subtle fabric-grid texture on `body` and cards: `--ripstop: repeating-linear-gradient(0deg, rgba(36,34,27,0.035) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(36,34,27,0.035) 0 1px, transparent 1px 8px);`

**1.3 Design Tokens (Light — canonical, define in `:root`)**
```css
--color-bg: #e8e4d8; --color-surface: #f2efe6; --color-surface-strong: #ddd7c4;
--color-border: #4a4638; --color-text: #24221b; --color-text-muted: #565243;
--color-primary: #3c5a3e; --color-accent: #e8630a; --color-hi-vis: #d7ff3f;
--radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(36,34,27,0.2); --shadow-md: 0 4px 12px rgba(36,34,27,0.24);
--shadow-lg: 0 10px 24px rgba(36,34,27,0.28);
--font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--font-display: 'Bebas Neue', 'Oswald', Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
```
Retain the reference spec's full text scale (`--text-xs` … `--text-5xl`) and space scale (`--space-1` … `--space-24`).

---

### 2. STRICT RULES & ARCHITECTURE

**2.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **Forbidden:** `style="..."` attributes, `<style>` blocks, inline event handlers.
- Style only via class/ID selectors. HTML stays semantic and style-agnostic — a full retheme must be achievable by editing CSS alone.

**2.2 CSS Variables & Theme Tokens**
- In addition to the Gorpcore tokens above, define these **mandatory semantic tokens**, mapped to the palette: `--bg-primary: #e8e4d8`, `--bg-secondary: #f2efe6`, `--text-primary: #24221b`, `--text-secondary: #565243`, `--primary: #3c5a3e`, `--secondary: #e8630a`, `--border-default: #4a4638`. Derive `--text-success`/`--border-success` from the forest green (e.g., `#2f6b34`) and `--text-error`/`--border-error` from a brick red harmonizing with the accent (e.g., `#b3401f`); verify WCAG AA contrast wherever they render.
- Also define: `--spacing-gap` (8px step), `--transition-fast: 160ms`, `--transition-normal: 240ms` (both using `--ease-standard`), and `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`.
- **Contrast pairing:** every light background token pairs with dark text tokens and every dark background token with light text tokens — enforced in every theme, not only the default. Never default to pure white; if a near-white is required, use `#fefefe`.

**2.3 Mandatory Dark Mode**
- Design a dark theme with a "technical black outerwear" feel. Suggested starting tokens (tune until AA passes): bg `#16150f`, surface `#201f17`, surface-strong `#2a281e`, border `#6b6650`, text `#ece8da`, text-muted `#a39d87`, primary `#7fae7d` (lightened for text contrast; button fills may keep `#3c5a3e` under light text), accent `#ff7a26`, hi-vis unchanged `#d7ff3f`.
- **Redefine `--ripstop` in dark mode** with light grid lines (e.g., `rgba(236,232,218,0.04)`) — the light-mode grid is invisible on dark backgrounds. Re-tune shadows for dark surfaces.
- Implement via a `.dark` class on `<html>`; on first visit fall back to `prefers-color-scheme`; persist the user's choice in `localStorage`. Theme switching must swap tokens only — no HTML restructuring.
- Provide a visible toggle in the nav: Material Symbols icon (`light_mode`/`dark_mode`), correct `aria-pressed` and `aria-label` ("Switch to dark mode" / "Switch to light mode").

**2.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified (e.g., `stretch` for equal-height card rows).
- Mobile-first: rows collapse to columns below 768px; no horizontal scrolling at any viewport; fluid type via `clamp()`.

**2.5 CSS Approach**
- Clean custom CSS — no Tailwind build step. The reference spec supplies base component classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`); extend them, do not replace them.

**2.6 Typography & Icons — Google Fonts Mandatory**
- Load via Google Fonts `<link>`: **Inter** (400/500/700 → `--font-sans`, also exposed as `--font-base`), **Bebas Neue** (400 → `--font-display`), **JetBrains Mono** (400/700 → `--font-mono`). *Exception clause:* 'Helvetica Neue'/Arial may remain in the stacks only as local fallbacks after the Google fonts.
- Icons: **Google Material Symbols (Outlined)** via the Google Fonts icon stylesheet. **Forbidden:** inline SVGs, other icon fonts, local icon files.
- Use Bebas Neue (uppercase) for all headlines, Inter for body, JetBrains Mono for spec labels, prices, and step numbers.

---

### 3. PAGE STRUCTURE & SECTION REQUIREMENTS

Author original English copy for a fictional Gorpcore apparel brand (invent a fitting brand name; use authentic outdoor-tech vocabulary). No lorem ipsum. Build, in order:

**3.1 Header/Nav** — Sticky. Brand wordmark (Bebas Neue), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, primary CTA. Stitch-line top seam per spec. Below 768px, links collapse into a hamburger menu: `aria-expanded`/`aria-controls`, fully keyboard operable, Esc closes, layered at `--z-dropdown`.

**3.2 Hero** — Hi-vis `.badge` (e.g., "NEW SEASON DROP"), Bebas Neue display headline, supporting subcopy, two CTAs (`.btn--primary` + secondary `.btn`), and a mono-font spec strip (e.g., "20K/20K · 3L · 80D RIPSTOP"). Include a skip link as the first focusable element. Photographic imagery is optional; if used, only `https://picsum.photos` seeded placeholders with descriptive `alt` text.

**3.3 Features (3 cards)** — `.card` with stitch seam, Material Symbols icon (e.g., `hiking`, `water_drop`, `thermostat`), title, description. One card carries a hi-vis badge.

**3.4 How It Works (3 steps)** — Steps numbered `01/02/03` in mono, joined by a dashed stitch-line connector (horizontal on desktop, vertical on mobile), each with an icon and short copy.

**3.5 Testimonials (3 quotes)** — Quote cards with Material Symbols `star` ratings, quote text, name, and role/location (e.g., "Trail Runner — Chamonix"). Avatars as initial letters in a circle (no photos required).

**3.6 Pricing (3 tiers)** — `.card` tiers; the middle tier is featured with a hi-vis "MOST POPULAR" badge, stronger border, and elevation. Feature lists with `check` icons; prices in mono; one CTA button per tier with full button states. The featured tier must remain readable in both themes.

**3.7 FAQ (5–6 items)** — Accordion: each trigger is a `<button>` with `aria-expanded` + `aria-controls` pointing to its answer region; smooth CSS open/close animation (grid-rows or max-height technique); fully keyboard operable; `expand_more` icon rotates on open.

**3.8 Final CTA** — Full-width band on `--primary` green with light text (contrast pairing), Bebas headline, and an **email signup form**: visible `<label>`, `.input`, submit `.btn--primary`, and a dedicated feedback container with `aria-live="polite"`. Submit shows a loading state, then success ("You're on the list") or an inline error — never communicated by color alone.

**3.9 Footer** — Brand blurb, secondary link columns (Shop, Support, Company), social links as Material Symbols icons with `aria-label`, and a mono-font legal/copyright line. Every link has a valid `href`.

---

### 4. COMPONENT DESIGN SPECIFICATIONS

**4.1 Buttons** (all states via CSS classes; minimum 44×44px touch target)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` uppercase per spec.
- **Hover:** lift + `--shadow-md` per spec, `cursor: pointer`.
- **Focus:** distinct `:focus-visible` ring using `--secondary`/accent variables — never remove outlines.
- **Active/Pressed:** `transform: scale(0.97)` — merge with the spec's hover-lift so the pressed state returns to baseline and scales down.
- **Loading:** `.btn--loading` / `aria-busy` — disables interaction, prevents double submits, renders a CSS spinner or rotating Material Symbols `progress_activity` without changing button dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback classes driven by `--text-success`/`--text-error`, always pairing an icon + text with the color.

**4.2 Cards**
- **Default:** surface + ripstop texture + stitch seam top, `--shadow-md`.
- **Hover:** `translateY(-2px)` and shadow shift.
- **Focus-within:** accent border highlight when a child control receives focus.
- **Loading:** define `.card--skeleton` shimmer animation CSS that prevents layout jumps.
- **Empty:** define an `.empty-state` pattern (Material Symbols icon + clear guidance text) as the content fallback.

**4.3 Forms & Inputs**
- **Structure:** flex wrapper containing a visible `<label>` (bound with `for`), the `.input`, and a dedicated error-feedback container.
- **States:** empty, focused (accent ring per spec), filled, valid (`--border-success` + check icon), invalid (`--border-error`, error icon, red text message), disabled, read-only.
- **Behavior:** JS email validation on submit and on blur after first interaction; errors announced via `aria-live="polite"`; `aria-invalid` set on the input; success message uses `--text-success`.

**4.4 Overlays (conditional)** — No modal is requested. If you introduce any overlay, it must follow: animated opening/closing, backdrop, focus trapping, Esc and overlay-click close, layered at `--z-modal`. Any toast sits at `--z-toast` with `role="status"`.

---

### 5. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow; verify from 320px to 1440px.
- **Smooth animations:** CSS transitions on all state changes using `--transition-fast`/`--transition-normal`; fully respect `prefers-reduced-motion` (disable transforms and shimmer; keep non-motion cues).
- **Accessibility:** semantic HTML5 landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`), skip link, a single `h1`, logical heading order, AA contrast in **both** themes, logical DOM/focus order, full keyboard operability (no mouse-only interactions), visible focus states, and `aria-live` regions for all dynamic feedback. Never rely on color alone to communicate state.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions** (if any appear): a distinct `.btn--danger` style legible in both light and dark themes.

---

### 6. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single `<script src="script.js" defer>` entry point.
- **Naming:** one consistent BEM convention matching the spec's `.btn--primary` pattern (e.g., `.card`, `.card__title`, `.faq-item`, `.pricing-card--featured`). Never mix conventions.
- **Copy:** original English Gorpcore copy throughout — lorem ipsum is prohibited.
- **Zero inline CSS and zero inline SVGs**; all iconography via Google Material Symbols.
- **Final QA gate:** validate the page in both light and dark themes before delivering (source spec requirement).