Chromecore demo
Chromecore

A revived Y2K metallic aesthetic inspired by retrofuturism and speculative fiction, featuring liquid chrome surfaces, glossy silver gradients, and futuristic optimism.
Category: Retro & Pop
Era: 2000s Revival (Y2K)
Prompt: 14.6 KB · 1978 words
# CODING AGENT PROMPT — "CHROMECORE" LANDING PAGE (RETRO & POP)

**Role & Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single pass — no clarifying questions, no partial drafts. Make expert decisions and deliver final, working code.

**Theme Definition — Chromecore (claude-artisan/retrofuturism, 2020s evoking Y2K):** Liquid/reflective chrome surfaces and type; silver, mercury, iridescent reflections; blobby metallic 3D forms; futuristic, sleek, cold. Signature move: liquid, blobby border-radii combined with an iridescent mercury-sheen overlay (diagonal white-highlight gradient) that reads as poured metal — repeated on the nav, primary button, badge, and cards.

**Design Tokens (adopt verbatim in `:root`):**

```css
--color-bg: #e8eaf0; --color-surface: #f4f5f9; --color-surface-strong: #fefefe; /* overrides source #ffffff — pure white forbidden */
--color-border: #c3c8d6; --color-text: #1c1b2e; --color-text-muted: #4a4866;
--color-primary: #a78bfa; --color-accent: #f472b6; --color-mint: #5eead4;
--radius-sm: 16px; --radius-md: 28px; --radius-lg: 44px; --radius-pill: 999px;
--shadow-sm: 0 2px 8px rgba(28,27,46,0.1); --shadow-md: 0 10px 26px rgba(167,139,250,0.22); --shadow-lg: 0 20px 48px rgba(244,114,182,0.24);
--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);
--iridescent: linear-gradient(120deg, #a78bfa 0%, #f472b6 33%, #5eead4 66%, #a78bfa 100%);
--mercury-sheen: linear-gradient(160deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.2) 35%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.1) 100%);
```
Also adopt the full `--text-*` scale (0.75rem → 4rem) and `--space-*` scale (4px → 96px) from the reference specification.

**Required Sections (in order):** Header/Nav · Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links.

**Copy Rule:** All user-facing copy in English. Invent one coherent fictional product (suggested: a real-time 3D chrome-material design tool) and write real, themed marketing copy for every section. Lorem ipsum is forbidden.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute is forbidden anywhere in the HTML.
- Target every design property, layout rule, and state via class/ID selectors only.
- HTML must remain semantic and styling-agnostic: retheming the site requires editing `style.css` only, never the markup.
- The Chromecore base classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) are the component foundation; extend them with BEM modifiers — never with inline styles or presentational attributes.

**1.2 CSS Variables & Theme Tokens**
- Store all tokens in `:root` as defined above, plus these mandatory semantic aliases (mapped, not duplicated): `--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-4)`.
- Add the missing mandatory tokens: `--text-success`, `--text-error`, `--border-success`, `--border-error` (success = mint-derived green; error = red distinct from `--color-accent`; both must pass AA contrast on their surfaces in both themes), `--transition-fast: 150ms`, `--transition-normal: 250ms` (both using `var(--ease-standard)`), `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`, and `--font-base` / `--font-display` bound to the Google Fonts loaded per 1.6.
- Preserve `--iridescent` and `--mercury-sheen` exactly as specified; they drive badges, primary buttons, chrome type, and card/nav surfaces.
- Contrast pairing is mandatory per theme: every light background token pairs with a dark text token, and every dark background token pairs with a light text token.

**1.3 Mandatory Dark Mode Support**
- The source specification does not declare light/dark modes; you must define both and validate the page in each before considering it complete.
- Implement dark tokens twice: under `@media (prefers-color-scheme: dark)` and under a `.dark` class on `<html>` (the class wins when both apply). Suggested starting values (final values must pass AA): `--color-bg: #141321`, `--color-surface: #1c1b2e`, `--color-surface-strong: #26243f`, `--color-border: #3d3a5c`, `--color-text: #f4f5f9`, `--color-text-muted: #b8b6d4`; keep `#a78bfa` / `#f472b6` / `#5eead4`, lightening them if contrast requires.
- Override `--mercury-sheen` in dark scope with a subtler cool-silver highlight gradient so surfaces read as dark liquid chrome, not washed-out white.
- Theme toggle: a visible nav button using a Material Symbol (`dark_mode`/`light_mode`) with correct `aria-pressed` and `aria-label` ("Switch to dark theme" / "Switch to light theme"). Persist the choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Switching themes must require zero HTML restructuring.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox (Tailwind flex utilities or custom flex CSS).
- Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., stretched equal-height pricing cards).
- Mobile-first: single-column stacks promoting to multi-column at ≥768px and ≥1024px; no horizontal scrolling at any viewport; fluid type via `clamp()` mapped to the `--text-*` scale.

**1.5 Framework Default: Tailwind CSS**
- Use Tailwind CSS (Play CDN acceptable) as the utility layer. Define all component classes inside `@layer components` using `@apply`, driven by the Chromecore CSS variables; every utility must map back to a token or a generic reusable class (`.btn`, `.card`, `.input-group`).
- Exception clause: the Tailwind CDN `<script>` and the Google Fonts / Material Symbols `<link>` tags are permitted in `<head>`; `script.js` remains the only custom script, referenced exactly once with `defer`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load Google Fonts via `<link>` with preconnect: **Space Grotesk** (display) and **Inter** (base). Bind `--font-display` and `--font-base` accordingly. Exception clause: the source spec's system stacks (`'Segoe UI'`, `'Helvetica Neue'`, `system-ui`) are retained only as fallbacks after the Google Font families.
- Icons: Google Material Symbols only (Rounded variant suits the blobby aesthetic), loaded once via the standard `<link>`. Inline SVGs, other icon fonts, and local icon files are forbidden.
- Metal type: the hero H1 (and pricing figures, optionally) must render as liquid chrome via CSS-only gradient text — a silver/mercury/iridescent gradient with `background-clip: text; color: transparent` — wrapped in `@supports` with a solid `var(--color-text)` fallback. An animated sheen sweep is allowed and must respect `prefers-reduced-motion`.

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem`; minimum touch target 44×44px; `border-radius: var(--radius-pill)`; mercury-sheen surface per the base `.btn`.
- Hover: `translateY(-2px) scale(1.02)` + `var(--shadow-md)`, `cursor: pointer`.
- Focus: distinct `:focus-visible` ring built from `--color-primary` (outline/box-shadow) for keyboard navigation.
- Active/pressed: `scale(0.99)` transform feedback.
- Loading: `aria-busy="true"`, pointer events disabled to prevent double-clicks, CSS-only iridescent conic-gradient spinner that does not change button dimensions; label remains accessible.
- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`, no transforms.
- Success/Error: temporary feedback states driven by `--text-success` / `--text-error`, always pairing color with a Material Symbol + text (never color alone).
- `.btn--primary` uses `var(--iridescent)` with white text — verify AA contrast. Any destructive variant (`.btn-danger`) must be visually distinct in both themes.

**2.2 Card**
- Default: `.card` per spec (surface + mercury sheen, `--radius-lg`, `--shadow-md`), flexible flexbox layout; inner text blocks may left-align as a justified exception, but card-level containers still default to `align-items: center`.
- Hover: elevation shift to `var(--shadow-lg)` and/or `translateY(-2px)`.
- Focus-within: border/outline highlight in `--color-primary` when any child link/button receives focus.
- Loading: skeleton state with a mercury-shimmer animation (background-position keyframes over a silver gradient) that preserves final layout dimensions — no layout jumps.
- Empty state: structured fallback with a Material Symbol and clear guidance copy.

**2.3 Form & Input**
- Account for all states: empty, focused (primary ring per base `.input`), filled, valid (mint border + check Material Symbol), invalid (error border + red text + error Material Symbol + message), disabled, read-only.
- Structure: a flex-column `.input-group` wrapping a `<label>` (with `for`), the `.input`, and a dedicated error/success feedback container with `aria-live="polite"`.
- Never rely on color alone; every state pairs color with icon and/or text.

**2.4 Modal / Popup (if any dialog is used)**
- States: opening, open, loading, success/error, closing — all animated via CSS transitions.
- Centered flex container (`align-items: center`) over a backdrop overlay; Material Symbol close button; keyboard focus trapping; close via `Esc` and overlay click; `role="dialog"`, `aria-modal="true"`, labelled by its heading.

**2.5 FAQ Accordion**
- Each question is a `<button>` with `aria-expanded` and `aria-controls`; each panel is a region labelled by its button.
- Open/close animated via CSS (height/opacity/transform) with the chevron Material Symbol rotating; fully keyboard operable; visible focus state; state never communicated by color alone.
- Choose one-open-at-a-time or multi-open and apply it consistently.

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow, breakpoints at 640/768/1024px.
- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; liquid overshoot easing; blob-morph (animated border-radius) and iridescent-shift keyframes for hero decor. Every animation is disabled under `prefers-reduced-motion: reduce`.
- **Accessibility:** skip-to-content link; semantic landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); strict heading hierarchy h1 → h2 → h3; AA contrast in both light and dark; ARIA roles/labels on all custom widgets (theme toggle, accordion, mobile menu); logical DOM/focus order; full keyboard operability — no mouse-only interactions; `aria-live` regions for dynamic feedback (form errors, confirmations, loading).
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Decorative elements:** all blobs/sheens are `aria-hidden="true"` and never carry content.

## 4. DELIVERABLE & OUTPUT FORMAT

- Three files: `index.html`, `style.css`, `script.js`. No inline styles; no inline scripts beyond the single deferred `script.js` reference (plus the permitted Tailwind CDN script per 1.5).
- **Naming:** BEM exclusively, matching the provided `.btn--primary` pattern — never mix conventions.
- **No unrequested placeholders:** real English copy everywhere per the brief; placeholders only where content was genuinely unspecified.
- **`script.js` scope (vanilla JS only):** theme toggle + `localStorage` persistence + `prefers-color-scheme` fallback; mobile nav open/close with focus management and `Esc`; FAQ accordion logic; Final CTA email validation with `aria-live` success/error feedback; smooth anchor scrolling; optional IntersectionObserver reveal animations (reduced-motion aware). No other libraries.

## 5. PAGE SECTION REQUIREMENTS

**5.1 Header/Nav** — `.nav` pill (mercury sheen, `--radius-pill`) with a chrome-gradient wordmark logo, anchor links, theme toggle, and a `.btn--primary` CTA. Sticky with a translucent surface; on mobile, collapse links behind a Material Symbol menu button opening an accessible panel (`aria-expanded`, focus trap, `Esc` close, `--z-dropdown` layering).

**5.2 Hero** — H1 in liquid-chrome metal type (largest `clamp()` scale), supporting subhead, `.badge` with a themed tagline, primary + secondary CTAs, and CSS-only blobby metallic 3D forms (morphing border-radius shapes filled with `--iridescent` and blurred mercury highlights, `aria-hidden`). Vertical rhythm via `--space-24`.

**5.3 Features** — exactly 3 `.card` items in a responsive grid (1 → 3 columns). Each: Material Symbol inside an iridescent `.badge`, h3 title, description. Hover elevation + focus-within per 2.2.

**5.4 How It Works** — exactly 3 steps, each with a chrome pill number badge (iridescent), h3, and description; a connecting gradient line on desktop that hides on mobile; stacks vertically on small viewports.

**5.5 Testimonials** — 3 quote `.card` items with a `format_quote` Material Symbol, quote text, a chrome-circle avatar built from a `person` Material Symbol (no external images), name, role, and a star rating (Material Symbols with an `aria-label` such as "Rated 5 out of 5").

**5.6 Pricing** — exactly 3 tiers. Middle tier marked "Popular": iridescent gradient-border technique + `.badge`, slightly elevated scale/shadow. Each tier: name, chrome-type price, feature list with `check` Material Symbols, and a CTA (`.btn--primary` on the popular tier, `.btn` elsewhere). Equal-height cards via a justified `align-items` exception.

**5.7 FAQ** — accordion per 2.5 with 5–6 real, themed Q&A pairs.

**5.8 Final CTA** — full-bleed band surfaced with `--iridescent` (or mercury surface + iridescent border), h2, short supporting line, and an email capture: `.input` + `.btn--primary` in a wrapping flex row (stacks on mobile). Validate per 2.3; on success, show an `aria-live` confirmation and swap the button into its success state per 2.1.

**5.9 Footer** — grouped secondary link columns (Product, Company, Resources, Legal), social icons as Material Symbols with descriptive `aria-label`s, copyright line with dynamic year, muted text via `--text-secondary` with AA contrast in both themes.

## 6. PRE-DELIVERY VALIDATION CHECKLIST

- Zero `style="..."` attributes; zero inline scripts beyond the permitted entries.
- Light and dark both defined, toggleable, persisted, and AA-validated.
- All buttons ≥44×44px with hover/focus/active/loading/disabled states.
- Keyboard-only pass: skip link → nav → all sections → footer, with visible focus everywhere.
- `prefers-reduced-motion` honored for every animation.
- No horizontal scroll from 320px up; no layout shift from skeletons.
- BEM naming consistent; all copy real English; icons exclusively Google Material Symbols.