Cyberprep demo
Cyberprep

Category: Glass & Soft UI
Era: -
Prompt: 15.1 KB · 1996 words
# System Prompt — Build the Complete "Cyberprep" Landing Page (Single Attempt, Production Quality)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Generate the final code immediately, in one complete attempt. Do not ask clarifying questions — every requirement below is mandatory.

**Theme — Cyberprep:** Optimistic cyberpunk (retrofuturism, 1990s–present, Frutiger-adjacent). Clean, bright, safe high-tech future; white/aqua/green palette; glossy top-lit surfaces; seamless, friendly tech integration; utopian consumer sci-fi. Signature move: a glossy top-lit gradient sheen (bright highlight fading to aqua surface) repeated on nav, cards, and primary buttons. Visual direction: Mirror's Edge; early-2000s tech ads.

**Product & copy:** Write all original user-facing copy in **English** for a fictional consumer product named **"Halcyon"** — a friendly, calm everyday AI companion / smart-living platform. No lorem ipsum anywhere.

**Theme modes note (translated from source spec):** The source style spec does not declare theme modes; the implementation must define and be validated in **both light and dark modes** before delivery. Dark mode is mandatory.

---

## 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.
- All design properties, layout rules, and states must be applied via class or ID selectors only.
- HTML must remain semantic and style-agnostic: re-theming the page must be achievable by editing `style.css` alone, with zero markup changes.

**1.2 CSS Variables & Theme Tokens**
- Keep the full Cyberprep token sheet from the reference spec (`--color-*`, `--radius-*`, `--shadow-*`, `--text-*`, `--space-*`, `--ease-*`, `--glossy-fill`, `--aqua-gradient`, `--shadow-inset-hi`) in `:root`, and **extend** it with the mandatory semantic tokens. Because the semantic tokens reference the `--color-*` tokens, they switch automatically with the theme:

```css
:root {
  --primary: var(--color-primary);
  --secondary: var(--color-accent);
  --bg-primary: var(--color-bg);
  --bg-secondary: var(--color-surface-strong);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --text-success: #0f7a3d;
  --text-error: #b3261e;
  --border-default: var(--color-border);
  --border-success: #2f9e63;
  --border-error: #e0655a;
  --spacing-gap: var(--space-6);
  --transition-fast: 150ms var(--ease-standard);
  --transition-normal: 250ms var(--ease-standard);
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;
  --color-on-gradient: #052226; /* dark teal ink for text on aqua gradients, both themes */
}
```

- **Contrast pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforced in both themes, not just the default.
- **Exception clause 1:** The theme spec's `--color-surface: #ffffff` is adjusted to `#fefefe` per the soft-white standard; all other palette values remain exactly as specified.
- **Exception clause 2:** The theme spec's `.btn--primary` white-on-gradient text is adjusted to dark teal ink (`--color-on-gradient`) on the unchanged `--aqua-gradient` to meet WCAG AA contrast in both themes; apply the same ink to `.badge` text.
- Layered components (sticky nav, mobile menu, any overlay) must consume `--z-dropdown` / `--z-modal` / `--z-toast` — never raw z-index values.

**1.3 Mandatory Dark Mode**
- Define dark tokens **once** and apply them under both a `.dark` class on `<html>` and `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }` so no-JS users still get their system theme. Required dark values:

```css
--color-bg: #062a2e;
--color-surface: #0b3a40;
--color-surface-strong: #10494f;
--color-border: #21646c;
--color-text: #e0f6f8;
--color-text-muted: #9cc9ce;
--color-primary: #2fd0de;
--color-accent: #4ae08f;
--color-glossy-hi: rgba(255, 255, 255, 0.10);
--glossy-fill: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, var(--color-surface) 45%, var(--color-surface-strong) 100%);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
--shadow-md: 0 8px 20px rgba(0, 0, 0, 0.40);
--shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.45);
--shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.12);
--text-success: #5eeaa0;
--text-error: #ff9d94;
--border-success: #2c8f63;
--border-error: #c9645c;
```

- Background and text variables must switch seamlessly with **no HTML restructuring**.
- **Persistence:** Store the user's choice in `localStorage` (key `cyberprep-theme`), falling back to `prefers-color-scheme` on first visit. Provide a visible toggle in the nav (Google Material Symbol `light_mode` / `dark_mode`) with correct `aria-pressed` and a dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode").

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox. Every flex container **defaults to `align-items: center`** unless an explicitly justified exception exists (documented exceptions: accordion panel collapse animation via `grid-template-rows: 0fr → 1fr`, and multi-line body text blocks).
- Mobile-first: all rows convert to columns on small viewports; **zero horizontal scrolling at any width down to 320px**; fluid sizing via `clamp()`.

**1.5 Styling Approach**
- Use clean, framework-free custom CSS organized in `@layer` cascade order: `tokens` → `base` → `components` → `sections` → `utilities`. The reference spec's component classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`) are the reusable class foundation; extend them per the BEM convention below. Do not add any CSS framework.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Exception clause 3:** The spec's `Segoe UI` / `Frutiger` / `Eurostile` are not on Google Fonts; substitute Google Fonts equivalents while keeping the original stacks as fallbacks:
  - `--font-base: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif` (Frutiger-adjacent humanist body font — weights 400/600/700/800).
  - `--font-display: 'Michroma', 'Segoe UI', sans-serif` (Eurostile-adjacent; use for the logo, hero H1, section titles, and pricing tier names — uppercase, slight letter-spacing, moderate `clamp()` sizes since Michroma is wide).
  - `--font-mono: 'Space Mono', ui-monospace, monospace` (eyebrow labels, step numbers, prices, tech chips).
- Include the correct Google Fonts v2 `<link>` tags (with `preconnect`) for Michroma, Nunito Sans, Space Mono, and **Material Symbols Outlined**.
- **All icons are Google Material Symbols.** Inline SVGs and local icon files are forbidden. Decorative icons get `aria-hidden="true"`; meaningful icons get accessible text.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`)**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` per the reference spec; minimum touch target 44×44px.
- **Hover:** elevation/brightness shift with `cursor: pointer` (per spec: `translateY(-1px)` + `--shadow-md`).
- **Focus:** distinct `:focus-visible` ring using `--primary` (spec's outline pattern) for keyboard navigation.
- **Active/Pressed:** `transform: translateY(0) scale(0.97)` click feedback.
- **Loading (`.btn--loading`):** `pointer-events: none` to prevent double-clicks, `aria-busy="true"` set via JS, and a pure-CSS spinner (`::after` border animation) that does **not** change button dimensions.
- **Disabled:** `opacity: 0.5`, `filter: grayscale(0.6)`, `cursor: not-allowed`, no hover/active transforms.
- **Success/Error (`.btn--success`, `.btn--error`):** temporary feedback states driven by `--text-success` / `--text-error` and matching border tokens, paired with a Material Symbol (`check_circle` / `error`) — never color alone.
- `.btn--primary` uses `--aqua-gradient` with `--color-on-gradient` ink (see Exception 2). `.btn--danger` must be visually distinct in **both** themes via `--text-error`/`--border-error`.

**2.2 Card Component (`.card` + variants)**
- **Default:** flexible Flexbox layout, `--glossy-fill` background, `--border-default` border, `--radius-lg`, `--shadow-md` + `--shadow-inset-hi`, per the reference spec.
- **Hover (interactive cards):** `transform: translateY(-2px)` and/or shadow shift to `--shadow-lg`.
- **Focus-within:** card border highlights (`--primary`) when a child link/button receives focus.
- **Loading skeleton (`.card--skeleton`):** shimmer animation (gradient sweep keyframes) defined in CSS to prevent layout jumps — must exist in the stylesheet as part of the component system.
- **Empty state (`.card--empty`):** structured fallback layout with a Google Material Symbol and clear guidance text — must exist in the stylesheet.
- Variants: `.card--feature`, `.card--testimonial`, `.card--pricing`, `.card--pricing--featured`, `.card--cta`.

**2.3 Form & Input Component (`.input-group`)**
- Account for all states: **empty, focused** (spec's `--primary` border + 3px aqua ring), **filled, valid** (`.input--success`: success border + `check_circle` icon), **invalid** (`.input--error`: `--border-error`, error text, `error` icon), **disabled**, **read-only**.
- Structure: a flex `.input-group` wrapping a `<label>`, the `.input` field (per reference spec), and a dedicated feedback container (`.input-group__feedback`) with `aria-live="polite"`, linked via `aria-describedby`.
- Never communicate validity by color alone — always icon + text message.

**2.4 Accordion (FAQ) & Overlay Rule**
- FAQ items use a native `<button>` (`.faq-item__toggle`) with `aria-expanded` + `aria-controls`, a chevron Material Symbol (`expand_more`) that rotates 180° on open, and a panel (`.faq-item__panel`, `role="region"`, `aria-labelledby`) animated via the `grid-template-rows: 0fr → 1fr` technique with `var(--transition-normal)`. Fully keyboard operable; all items collapsed by default.
- **Conditional:** if any modal/popup is introduced, it must implement opening/open/loading/success/closing states (CSS transitions), a centered flex overlay with backdrop, a Material Symbol close button, focus trapping, `Esc` and overlay-click closing, and `--z-modal` stacking.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` typography; breakpoints at ~640px, 768px, 1024px; no horizontal overflow at any width; test down to 320px.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; global `prefers-reduced-motion: reduce` kill switch disabling transitions, animations, and smooth scroll.
- **Accessibility (a11y):** WCAG AA contrast in **both** light and dark modes; never color-only state communication; semantic HTML5 (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for dynamic feedback (form errors, loading, success); a "Skip to content" link; global `:focus-visible` ring.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** any destructive control must use `.btn--danger` and be visually distinct in both themes.

---

## 4. PAGE COMPOSITION & SECTION SPECIFICATIONS

Build `<html lang="en">` with meta viewport, title, and meta description. Sticky glossy pill nav (`.nav` per spec, `position: sticky`, `--z-dropdown`), `scroll-behavior: smooth` inside `@media (prefers-reduced-motion: no-preference)`, and `scroll-margin-top` on all anchored sections.

**4.1 Nav:** Michroma wordmark "HALCYON", anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle (§1.3), primary CTA "Get started". Below 768px: links collapse into a disclosure menu (menu/close Material Symbols, `aria-expanded`, `aria-controls`, `--z-dropdown` panel) — no overflow.

**4.2 Hero:** mono eyebrow badge (`.badge`), Michroma H1, subcopy, primary CTA + `.btn--ghost` secondary, and a CSS-only decorative visual: a large glossy panel with the aqua gradient sheen containing a stylized "assistant" mock (message bubbles in `--color-surface-strong`) plus floating chips (Material Symbol + Space Mono microcopy, e.g., "AIR QUALITY · GOOD"). All decoration `aria-hidden="true"` and non-interactive; chips reposition or hide gracefully on mobile.

**4.3 Features — 3 cards:** section header (mono eyebrow, Michroma H2, intro) + three `.card--feature` items, each with a glossy icon chip (Material Symbols: e.g., `bolt`, `shield`, `eco`), title, and copy themed around seamless integration, privacy by design, and sustainable living. Hover lift + focus-within per §2.2.

**4.4 How It Works — 3 steps:** numbered glossy chips (Space Mono "01/02/03"), Material Symbol per step, title + copy; a decorative dashed connector line on desktop that stacks vertically on mobile.

**4.5 Testimonials — 3 cards:** `format_quote` icon, quote, star rating (icons `aria-hidden` + accessible text like "Rated 5 out of 5"), avatar as a glossy circular chip with a `person` Material Symbol (no external images), name, and role.

**4.6 Pricing — 3 tiers:** Free / Plus / Pro with Space Mono prices and `check_circle` feature lists. The middle "Plus" tier is `.card--pricing--featured`: "Most popular" `.badge`, elevated shadow, and an `--aqua-gradient` top bar. Primary CTA on the featured tier, default `.btn` on the others.

**4.7 FAQ — 5–6 items:** accordion per §2.4, wrapped in a max-width glossy `.card` container.

**4.8 Final CTA:** large `.card--cta` with the signature glossy sheen, Michroma headline, and an email capture `.input-group` (§2.3): label, email input, submit button demonstrating loading (simulated ~900ms) → success ("You're on the list — welcome to the future." with `check_circle`) or inline error, all announced via `aria-live`.

**4.9 Footer:** brand + tagline, three secondary link columns (Product / Company / Support — real-sounding English labels; `#` hrefs are acceptable here since this content was genuinely unspecified), optional social icon buttons with descriptive `aria-label`s, and a copyright line with the current year.

**`script.js` (only these behaviors):** theme toggle + `localStorage` persistence + system fallback; mobile nav disclosure; FAQ accordion; email form validation with loading/success/error feedback. Optional: `IntersectionObserver` entrance reveals respecting `prefers-reduced-motion`. Nothing else.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** three complete, runnable files — `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred `<script src="script.js" defer>` reference; no inline styles.
- **Naming:** one consistent **BEM** convention across the entire deliverable (`block__element--modifier`, matching the spec's `.btn--primary`); never mix conventions.
- **No unrequested placeholders:** all copy is real, on-theme English; placeholder `#` hrefs are permitted only for the genuinely unspecified footer secondary links.
- **Definition of Done — verify before outputting:** zero `style="..."` attributes; zero inline SVGs; both light and dark modes pass AA contrast with correct toggle persistence; full keyboard pass (nav, toggle, FAQ, form); no horizontal scroll at 320px; all button/card/input states from §2 exist in CSS; `prefers-reduced-motion` respected; every interactive element provides visible feedback.

Generate the complete final code now.