Chromatic Aberration / RGB Split demo
Chromatic Aberration / RGB Split

A glitch-inspired digital aesthetic using offset red, green, and blue channel splits to create a distorted, futuristic tech look.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 13.6 KB · 1862 words
# System Prompt — Coding Agent Build Specification

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single first attempt. Output the full, final code — no stubs, no TODOs, no partial sections.

**Design Brief — Theme:** *Chromatic Aberration / RGB Split* — a glitchy, retro-tech, VHS/analog-error aesthetic from the 2020s Retro-Tech era. Output category: **Dark Tech & Cyber**. The visual language is built on RGB channel separation (red/cyan and red/green/blue fringing), scan lines, noise flicker, lens-style distortion, and analog imperfection. **Dark mode is the preferred/default presentation; a complete light mode ("daylight broadcast") must also be fully designed.**

**Page Sections (in order):**
1. Header/Nav — sticky shell hosting wordmark, anchor links, theme toggle, mobile menu
2. Hero
3. Features (3 cards)
4. How It Works (3 steps)
5. Testimonials (3 cards)
6. Pricing (3 tiers)
7. FAQ (accessible accordion)
8. Final CTA (with email capture form)
9. Footer with secondary links

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
* **Class/ID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors.
* **Minimal HTML Modifications:** HTML must remain clean, semantic, and style-agnostic — reskinning the entire page must only require editing `style.css`.
* *Exception clause:* a data-URI SVG used exclusively as a noise/texture `background-image` inside `style.css` is permitted (it is a texture, not an icon); inline SVG markup in the HTML remains forbidden.

**1.2 CSS Variables (`var(--...)`) & Theme Tokens**
Store all tokens in `:root` (light defaults), overridden by the dark theme (see 1.3):
* **Required color tokens:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* **Theme channel tokens:** `--rgb-red: #FF0000`, `--rgb-green: #00FF00`, `--rgb-blue: #0000FF`, `--rgb-cyan` (red's complement fringe, e.g., `#00FFFF`), plus `--scanline-color`, `--noise-opacity`, `--glitch-duration`, `--glitch-interval`, `--scanline-speed`.
* **Radius & shadows:** `--radius-sm` (2px — sharp tech feel), `--radius-md` (4px), `--radius-lg` (8px), `--shadow-sm`, `--shadow-md`, plus `--glow-rgb` (composite channel glow, e.g., `0 0 12px rgba(0,255,0,.35)`).
* **Spacing & transitions:** `--spacing-gap`, `--transition-fast` (~120ms), `--transition-normal` (~250ms), `--ease-standard` (e.g., `cubic-bezier(0.2, 0, 0.2, 1)`).
* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`, plus `--z-overlay` for the fixed scanline/noise layers.

Token rules:
* **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in BOTH themes, not just the default.
* **Light mode background:** never pure white. Choose a tinted off-white fitting the mood (e.g., phosphor-washed `#f2f2ec`); where a near-white is needed, use `#fefefe`, never `#ffffff`.
* **Dark mode:** `--bg-primary: #000000` (per palette) with a slightly lifted `--bg-secondary` (e.g., `#0d0d12`) for panels/cards.
* **Channel usage guard:** the pure channels `#FF0000 / #00FF00 / #0000FF` are decorative (fringes, glows, overlays). Functional text must pass WCAG AA — never set pure `#0000FF` as text on black (≈2.4:1); tune per-theme functional tokens instead (e.g., darken light-mode error text to ~`#c40000`).

**1.3 Mandatory Dark Mode Support**
* Dark mode must always be defined. Provide tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`; JS applies the class so switching requires zero HTML restructuring.
* Dark is the primary presentation — craft it first, then derive the light "daylight broadcast" theme from the same token names.
* **Persistence:** store the user's choice in `localStorage` (e.g., key `"theme"`); first visit falls back to `prefers-color-scheme`.
* **Visible toggle** in the header: a `<button>` with `aria-pressed` and a dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode"), rendering the `dark_mode` / `light_mode` Google Material Symbol.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox.
* Every flex container **must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment.
* **Mobile-first:** multi-column rows (features, steps, testimonials, pricing, footer columns) collapse to a single column on small viewports. No horizontal scrolling at any width. Use a centered `max-width` container (~1200px) and fluid `clamp()` typography.

**1.5 Framework Default & Tailwind CSS Integration**
* Use Tailwind CSS utilities for layout/spacing/typography, with all custom effects (glitch, scanlines, noise, RGB split) authored in `style.css` (plain CSS or `@layer`/`@apply`).
* All utilities must map back to CSS variables or generic reusable classes: `.btn`, `.card`, `.input-group`, `.rgb-split`, `.glitch-hover`, `.scanlines`, `.noise-overlay`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Google Fonts only — a display face with retro-tech character (e.g., **Chakra Petch** or **Orbitron**) and a monospace body face (e.g., **Space Mono** or **IBM Plex Mono**), loaded via `<link>` and bound to `--font-display`, `--font-base`, `--font-mono`.
* **Icons:** Google Material Symbols (outlined). Raw inline SVGs and local icon files are explicitly forbidden (exception per 1.1: CSS data-URI noise texture only).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.0 Global RGB-Split / Glitch Effect System (theme core — build as reusable classes)**
* **RGB split text:** a reusable `.rgb-split` class for display headings — base text in `--text-primary` with decorative `text-shadow: -2px 0 var(--rgb-red), 2px 0 var(--rgb-cyan)`. Never apply animated glitching to body copy.
* **Element split:** `filter: drop-shadow(2px 0 0 var(--rgb-red)) drop-shadow(-2px 0 0 var(--rgb-cyan))` on the hero visual, feature icons, and the featured pricing card.
* **Glitch animation:** CSS-only `@keyframes` with `steps()` timing and long idle cycles (e.g., a 6s loop containing a ~400ms burst of randomized channel offsets, `clip-path` slices, and 1–3px translations) so timing feels random without JS. Provide `.glitch-hover` variants triggering bursts on `:hover` / `:focus-visible`.
* **Scanlines:** a fixed, full-viewport, `pointer-events: none`, `aria-hidden="true"` overlay (e.g., `body::before`) built from `repeating-linear-gradient`, animated via `background-position` using `--scanline-speed`; opacity ~0.04–0.08 so content stays readable.
* **Noise flicker:** a fixed overlay using a CSS data-URI noise texture with `mix-blend-mode: screen` in dark mode (reduce opacity or adjust blend for light mode), animated with an opacity flicker keyframe.
* **Hover distortion:** interactive cards/buttons receive a distortion burst on hover — intensified channel drop-shadows, optional `clip-path` slice or `skewX(±1deg)` translate — with zero degradation of content readability.
* **Reduced motion:** under `@media (prefers-reduced-motion: reduce)`, disable ALL glitch/scanline/noise/flicker animations and hover transforms; keep at most a static, subtle RGB text-shadow. This is non-negotiable for this theme.

**2.1 Button Component**
All states styled via classes. Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` with a minimum 44×44px touch target. Variants: `.btn--primary` (neon `--rgb-green` background with black text — passes contrast in both themes), `.btn--ghost` (transparent with `--border-default`), `.btn--danger` (error-toned, visually distinct in both themes).
* **Hover:** brightness/shadow shift + intensified RGB fringe; `cursor: pointer`.
* **Focus:** distinct ring (e.g., `outline: 2px solid var(--rgb-cyan); outline-offset: 2px;`) visible in both themes.
* **Active:** `transform: scale(0.97)`.
* **Loading:** interactions disabled (prevents double-clicks), CSS border spinner or animated Material Symbol, no change to button dimensions.
* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error` (used by the CTA form submit).

**2.2 Card Component** (Features, Testimonials, Pricing)
* **Default:** flexible Flexbox layout, `--bg-secondary`, `--border-default`, `--radius-md`, `--shadow-sm`.
* **Hover:** `transform: translateY(-2px)` + `--glow-rgb` channel shadow + distortion burst (per 2.0).
* **Focus-within:** card border highlights when a child link/button receives focus.
* **Loading (skeleton):** define a shimmer keyframe + `.card--skeleton` class for reuse.
* **Empty state:** define the pattern (Material Symbol + clear guidance text) for reuse.

**2.3 Form & Input** (Final CTA email capture)
* **Structure:** `.input-group` flex container wrapping a `<label>`, an `<input type="email">`, and a dedicated error feedback element with `aria-live="polite"`.
* **States via classes:** empty, focused (cyan outline ring), filled, valid (success border + `check` icon), invalid (`--border-error`, red text, `error` icon, message), disabled, read-only.
* **Behavior:** `script.js` validates the email on submit — button enters loading → success (confirmation text in `--text-success`) or error (message announced via `aria-live`); no page reload; no double submits.

**2.4 Modal / Popup**
No modal is required by the section list. If you add any dialog (e.g., pricing plan details), it must implement: opening/open/loading/success/closing states animated via CSS transitions; a centered flex container (`align-items: center`); backdrop overlay; Material Symbol `close` button; keyboard focus trapping; close via `Esc` and overlay click; `role="dialog"` and `aria-modal="true"`.

**2.5 Section Specifications**
* **Header/Nav:** sticky, translucent backdrop blur, mobile menu panel at `--z-dropdown`. Logo: text wordmark with `.rgb-split`. Anchor links to all sections. Mobile: links collapse behind a menu `<button>` (`aria-expanded`, `aria-controls`) opening a flex panel — fully keyboard operable. Hosts the theme toggle (1.3).
* **Hero:** full-viewport-height flex column; `h1` with `.rgb-split` + periodic glitch burst; supporting subcopy in `--text-secondary`; two CTAs (`.btn--primary` "Get Started" + `.btn--ghost` "See How It Works"); a CSS-built hero visual (e.g., a distorted "signal" panel or oversized typographic artifact with channel drop-shadows — no external images required). Scanline/noise overlays are global (2.0).
* **Features (3 cards):** flex row → column on mobile. Each card: Material Symbol icon with channel drop-shadow, `h3` title, copy. Hover per 2.2.
* **How It Works (3 steps):** monospace `01 / 02 / 03` markers, step title + copy, visually connected (flex with a connector rule that rotates to vertical on mobile).
* **Testimonials (3 cards):** quote, initials-badge avatar (styled monogram — no external images), name, role. Same card system as 2.2.
* **Pricing (3 tiers):** flex row → column. Middle tier `.pricing-card--featured`: `--glow-rgb` border, "MOST SIGNAL" badge, primary CTA; side tiers use ghost CTAs. Feature lists use Material Symbol `check` icons. Never signal the featured tier by color alone — the badge, border, and scale must also communicate it.
* **FAQ:** accessible accordion — each item is a `<button>` trigger with `aria-expanded` + `aria-controls`; panel with `role="region"`; CSS-animated expand/collapse; `expand_more` icon rotates; keyboard operable.
* **Final CTA:** centered flex column, `.rgb-split` headline, email capture form per 2.3, primary submit button with loading → success/error feedback.
* **Footer:** secondary links (About, Contact, Privacy, Terms, Social), copyright, small print. Links get a hover glitch-underline effect (reduced-motion aware). Multi-column flex → stacked on mobile.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` sizing, breakpoints without horizontal overflow; verify behavior down to 320px.
* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; `prefers-reduced-motion: reduce` disables glitch/scanline/noise/flicker, hover transforms, and smooth scrolling (per 2.0).
* **Accessibility (a11y):** WCAG AA contrast in both themes (verify channel-token usage per 1.2). Never rely on color alone — pair icons/text with color. Semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`; one `h1`; logical heading order). Correct ARIA on the accordion, mobile menu, and theme toggle. Logical DOM/focus order; full keyboard operability (no mouse-only interactions); visible focus everywhere. `aria-live` regions for form feedback. Include a "Skip to content" link.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark themes.
* **Anchor navigation:** `scroll-behavior: smooth` (reduced-motion aware) + `scroll-margin-top` offset for the sticky header.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File structure:** separate `index.html`, `style.css`, and `script.js`. A single `<script src="script.js" defer></script>` entry point; no inline scripts; no inline styles.
* **Naming convention:** BEM only (`block__element--modifier`) across the entire deliverable — never mix conventions.
* **Copy:** all user-facing copy in English, written as real themed content (retro-tech / broadcast / analog-signal metaphors, e.g., "Your signal, in three channels"). No lorem ipsum.
* **Completeness:** deliver the full landing page — all nine sections, both themes, all component states — on the first attempt.