High Performance Computing Style demo
High Performance Computing Style

A powerful, dark technical aesthetic built for showcasing cutting-edge server processors with futuristic circuitry motifs and engineering precision.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 17.8 KB · 2470 words
# CODING AGENT SYSTEM PROMPT — "HIGH-PERFORMANCE COMPUTING" LANDING PAGE BUILD

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt. Generate the final code immediately — every specification below is final and non-negotiable. Do not ask clarifying questions.

---

## 0. PROJECT BRIEF & STYLE DIRECTION

**0.1 Project Brief**
- **Theme:** High-Performance Computing Style — Powerful, Technical, Modern. Era: 2026+ HPC Dominance.
- **Product Context:** A fictional next-generation server processor line for data centers. Invent one coherent product identity (product name, tagline, spec numbers) and keep it consistent across every section.
- **Output Category:** Dark Tech & Cyber.
- **Color Mode:** Dark-only (full dark). Light mode is out of scope — see the exception clause in Rule 1.3.
- **Required Sections (in order):** Sticky Header/Nav (page chrome), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

**0.2 Style & Visual Direction**
- **Keywords:** processors, GPUs, data center, high performance, technical, modern, efficient, scalable, reliable, cutting-edge.
- **Visual Direction:** Design a powerful and technical landing page for new server processors. Use: performance red accents, black background, chip performance visualizations, processor architecture diagrams, subtle high-performance glows, bold technical typography, real-time data micro-interactions, modular elements, and data/heat flow animations. The overall feel must be cutting-edge and efficient.
- **Signature Effects (all built in pure CSS — no images, no inline SVG):**
  - **Chip performance visualizations:** a CSS-built processor die (grid of "core" cells, glowing traces, bracket corner details).
  - **Processor architecture diagrams:** modular CSS-grid blocks connected by animated data-flow lines.
  - **Subtle high-performance glows:** red/blue text-shadows and box-shadows on key elements.
  - **Bold technical typography:** heavy Roboto display headlines + Roboto Mono data labels.
  - **Real-time data micro-interactions:** metric counters that animate on scroll into view.
  - **Modular elements:** "server-rack module" panels with mono labels (e.g., `// MODULE 01 — COMPUTE`).
  - **Data & heat flow animations:** pulsing keyframes along traces; heat-glow pulses on chip modules.

---

## 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 in `style.css`.
- **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — changing the look requires touching only `style.css`.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root`:
- **Colors:** `--primary: #ED1C24` (Performance Red); `--secondary: #00BFFF` (Electric Blue); `--bg-primary: #000000`; `--bg-secondary: #111111`; `--bg-elevated: #1A1A1A`; `--text-primary: #FFFFFF`; `--text-secondary: #C0C0C0` (Silver); `--text-muted: #CCCCCC` (Light Gray, fine print); `--text-success: #00FF00` (Green — metrics/valid states); `--text-error: #ED1C24`; `--border-default: #333333` (Dark Gray); `--border-error: #ED1C24`; `--border-success: #00FF00`; `--border-accent: #00BFFF`.
- **Contrast Pairing:** Every dark background token pairs with a light text token — this pairing is enforced on every component; never invert it.
- **Light Mode Background rule:** Not applicable — dark-only theme (see 1.3); `#FFFFFF` appears only as a text color per the palette.
- **Radius & Shadows:** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px` (sharp, technical corners); `--shadow-sm`, `--shadow-md` (deep black elevation shadows); `--shadow-glow-red: 0 0 24px rgba(237,28,36,0.35)`; `--shadow-glow-blue: 0 0 24px rgba(0,191,255,0.30)`; `--shadow-inset: inset 0 0 15px rgba(0,0,0,0.7)`; `--glow-text-red: 0 0 8px rgba(237,28,36,0.5)`.
- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- **Elevation/Stacking:** `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`.

**1.3 Mandatory Dark Mode — Dark-Only Exception**
- Dark mode is the permanent, single theme: define the complete dark token set once in `:root` as the source of truth for the entire page.
- **Exception clause:** Per the style spec (Light: ✗ No / Dark: ✓ Full), this build is dark-only — do NOT implement a light-mode palette, a theme toggle, or `localStorage` theme persistence; no `prefers-color-scheme` or `.dark` class switching is required, and the dark token set in `:root` is the permanent theme.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with **Flexbox** (or CSS Grid where a 2D modular grid is explicitly needed).
- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified.
- **Mobile-Friendly First:** All rows collapse to columns on small viewports; zero horizontal scrolling at any width from 320px up.

**1.5 Framework Default**
- Use Tailwind CSS (Play CDN) for layout utilities, or clean custom CSS structured with `@layer`/`@apply` — either way, all design tokens live in the `:root` CSS variables and every component has a semantic reusable class (`.btn`, `.card`, `.input-group`, `.section`, `.container`) defined in `style.css`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Text:** Load **Roboto** (weights 400/500/700/900) as `--font-base` and **Roboto Mono** (weights 400/500/700) as `--font-mono` via Google Fonts `<link>` tags. Body text uses Roboto; all metrics, data readouts, overline labels, and technical annotations use Roboto Mono.
- **Icons:** Use **Google Material Symbols (Outlined)** loaded via Google Fonts. Raw inline SVGs and local icon files are forbidden.

**1.7 Signature CSS Techniques (Mandatory — from the technical spec)**
- Base canvas: `background: #000000; color: #FFFFFF`.
- Glowing display text: `text-shadow: var(--glow-text-red)` on hero headline keywords and key stats.
- Inset depth: `box-shadow: var(--shadow-inset)` on panels, cards, and chip modules.
- Signature accent: `border-left: 3px solid var(--primary)` on cards, quotes, and callout panels.
- Define `@keyframes chip-glow` (pulsing red glow intensity) and apply it to the chip visualization with `animation: chip-glow 5s linear infinite alternate`.
- 3D presentation: the hero chip/architecture container uses `perspective: 1200px` and `transform-style: preserve-3d` with a subtle idle `rotateX`/`rotateY` tilt (optional pointer-driven tilt via JS, disabled under reduced motion).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
Style all states via CSS classes on a `.btn` base (`display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, minimum 44×44px touch target, bold text, `transition: var(--transition-normal)`):
- **Variants:** `.btn--primary` (red `--primary` fill, bold white text, red glow on hover), `.btn--secondary` (transparent, 1px silver border, white text), `.btn--danger` (visually distinct treatment).
- **Hover:** brightness/shadow shift with intensified glow, `cursor: pointer`.
- **Focus:** distinct focus ring (electric blue `outline`/`box-shadow`) for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** disables interaction, prevents double-clicks/double submits, renders a CSS spinner (border-based) or animated Material icon without changing button dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback styling driven by `--text-success`/`--text-error`, always paired with an icon and text — never color alone.

**2.2 Card Component**
`.card` base: `--bg-secondary` background, 1px `--border-default` border, `border-left: 3px solid var(--primary)`, `var(--shadow-inset)`, `border-radius: var(--radius-md)`, flex column layout:
- **Hover:** `transform: translateY(-2px)` with intensified border/glow and icon glow.
- **Focus-within:** card border highlights when a child link/button receives focus.
- **Loading (Skeleton):** shimmer keyframe animation styling to prevent layout jumps.
- **Empty State:** structured fallback with a Google Material icon and clear guidance text.
- Feature cards, pricing cards, and testimonial cards must all extend this `.card` base.

**2.3 Form & Input Requirements**
Each `.input-group` is a flex container wrapping a `<label>`, the input field, and a dedicated error/feedback container:
- **States:** Empty, Focused (electric blue ring), Filled, Valid (green border + check icon), Invalid (red border, error icon, red message text — icon + text, never color alone), Disabled, Read-only.
- **A11y:** `aria-describedby` linking input to message, `aria-invalid` on error, error container with `aria-live="polite"`, messages in English.

**2.4 FAQ Accordion (Disclosure Widgets)**
- Use native `<details>`/`<summary>` (or button + region with `aria-expanded`/`aria-controls`).
- Animated open/close via CSS (e.g., `grid-template-rows: 0fr → 1fr` transition).
- A plus/minus Material icon rotates on open; the entire summary is the click/focus target (min 44px); fully keyboard operable with a visible focus ring.

**2.5 Modal / Popup (conditional — only if you implement a "Request a Demo" dialog)**
- **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
- **UX:** centered flex overlay (`align-items: center`), backdrop, Material icon close button, keyboard focus trap, `aria-modal`, close via `Esc` or overlay click, focus returned to the trigger.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid sizing (`clamp()`), standard breakpoints, no horizontal overflow at any viewport width.
- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; `@media (prefers-reduced-motion: reduce)` disables `chip-glow`, data-flow pulses, counters (jump straight to final values), 3D tilt, scroll reveals, and smooth scrolling.
- **Accessibility (a11y):** WCAG AA contrast throughout the dark theme. Body text uses white/silver on black; red is reserved for accents, large display text, and UI components — never small body copy. Never rely on color alone to communicate state. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`), one `h1` with logical heading order, skip-to-content link, logical DOM/focus order, full keyboard operability (no mouse-only interactions), and `aria-live` regions for dynamic feedback (form errors, toasts, loading states).
- **Mandatory Visual Feedback:** every click, hover, focus, and submission triggers a visible state change.
- **Destructive Actions:** `.btn--danger` must be visually distinct in the dark theme.
- **HPC Micro-Interactions (theme-specific):**
  - **Real-time data counters:** hero/pricing metrics (e.g., cores, TFLOPS, bandwidth, efficiency) count up on scroll into view (IntersectionObserver), rendered in Roboto Mono with red glow on key figures. Final values must remain accessible to screen readers (announce once via `aria-live="polite"` or sr-only final text) — never announce every tick.
  - **Data-flow animations:** CSS keyframe pulses (moving gradient dashes, pulsing dots) along connector lines in the architecture diagram and How It Works steps.
  - **Heat-flow:** subtle red radial-gradient glow pulses on chip modules via `chip-glow`.
  - **Scroll reveal:** sections/elements fade + rise subtly on entry (CSS + IntersectionObserver), disabled under reduced motion.

---

## 4. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATIONS

All user-facing copy must be written in **English** — realistic, technical, specific to the HPC theme (no lorem ipsum). Author one coherent product story across all sections.

**4.0 Page Chrome — Sticky Header**
- Slim sticky header: CSS-built logo mark (square die glyph from borders) + product name; anchor nav (Features, How It Works, Testimonials, Pricing, FAQ); red `.btn--primary` CTA.
- On scroll: header gains background translucency/blur + bottom border.
- Mobile: hamburger toggle (Material `menu`/`close` icon) with `aria-expanded`/`aria-controls` toggling a vertical flex link list; closes on link click and `Esc`.
- In-page anchor scrolling via `scroll-behavior: smooth` (disabled under reduced motion). All primary CTAs anchor-scroll to the Final CTA form and focus its input (visible feedback).

**4.1 Hero**
- Full-viewport black section with a faint red radial glow and a subtle CSS grid/scanline texture (pure gradients).
- Copy block: Roboto Mono overline (e.g., `// NEXT-GEN SERVER PROCESSORS — 2026`), heavy `h1` with key words glowing (`text-shadow: var(--glow-text-red)`), silver subheadline, `.btn--primary` + `.btn--secondary` CTAs.
- Visual block: CSS-built processor die — bordered square module, inner CSS grid of "core" cells, glowing traces, bracket corners — presented with `perspective: 1200px`, `transform-style: preserve-3d`, subtle idle tilt, and `animation: chip-glow 5s linear infinite alternate`; animated data-flow pulses along its traces.
- Metrics strip: 3–4 real-time counters (e.g., `128 CORES`, `9.8 TFLOPS`, `5.0 GT/s`, `2.1× EFFICIENCY`) in Roboto Mono with counting animation.

**4.2 Features — 3 Cards**
- Section header: mono overline, `h2`, short intro.
- Responsive grid (3 columns → 1 on mobile) of three `.card` modules, each with a Material Symbol icon (e.g., `speed`, `bolt`, `hub`), `h3` title, and description covering raw performance, energy efficiency, and scalability/reliability.
- Card hover/focus-within per 2.2.

**4.3 How It Works — 3 Steps**
- Three numbered steps (`01`/`02`/`03` in Roboto Mono), each with a Material icon, `h3`, and description (e.g., Deploy → Orchestrate → Scale; author real copy).
- Desktop: horizontal flex row with an animated connector line (CSS gradient dash animation = data flow) between steps; mobile: vertical column with the connector rotated.

**4.4 Testimonials**
- Responsive grid of 3 quote `.card`s: quote text in silver, optional star rating via filled Material `star` icons, CSS monogram avatar (initials in a bordered circle with red accent), author name in white, role + company in Roboto Mono.
- Quote cards carry the `border-left: 3px solid var(--primary)` signature accent.

**4.5 Pricing — 3 Tiers**
- Three pricing `.card`s with HPC-appropriate tier names (e.g., Single Node / Cluster / Data Center).
- Middle tier highlighted: red border, `--shadow-glow-red`, mono `MOST POPULAR` badge (red background, white text), slight elevation.
- Each card: tier name, large price in Roboto Mono, billing note, feature list with Material `check` icons (green `--text-success` for included; muted dash icon for excluded), and a CTA (`.btn--primary` on the middle tier, `.btn--secondary` on the others).
- Every pricing CTA produces visible feedback: loading state on click, then an `aria-live` toast confirmation (see 4.9) or scroll to the Final CTA form.

**4.6 FAQ**
- 5–6 realistic Q&As (performance, compatibility, power/cooling, support, deployment).
- Accordion per 2.4; section header with mono overline and `h2`.

**4.7 Final CTA**
- Full-width band: black background with red radial glow, centered flex column, glowing `h2`, short supporting line, and an email-capture `.input-group` (label + input + `.btn--primary`).
- JS behavior: `preventDefault`; invalid email → invalid state (red border, error icon, English message, `aria-live`); valid → button loading (spinner, dimensions unchanged) → success state (green check icon + confirmation text, `aria-live` announcement). No page reload.

**4.8 Footer — Secondary Links**
- Top area: brand block (logo mark + one-line description) plus 3–4 link columns (Product, Resources, Company, Legal) with secondary links (`href="#"` is acceptable here — destinations are genuinely unspecified).
- Link hover: underline/glow; visible focus rings on all links.
- Social row using suitable Material Symbols (e.g., `mail`, `rss_feed`) or text links — no inline SVGs.
- Bottom bar: copyright and fine print in Roboto Mono (`--text-muted`); optional fixed back-to-top button (Material `arrow_upward`, appears after scroll, keyboard accessible, respects reduced motion, `--z-dropdown`).

**4.9 Toast/Feedback System**
- Fixed toast region (bottom-right) with `role="status"` / `aria-live="polite"`, styled with `--bg-elevated`, red accent border, auto-dismiss with CSS animation, stacked at `--z-toast`.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** Three separate files — `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry point (`<script src="script.js" defer>`). No inline CSS anywhere.
- **Head Requirements:** Google Fonts links for Roboto (400/500/700/900) and Roboto Mono (400/500/700), plus the Material Symbols Outlined stylesheet with variable settings (`FILL`, `wght`, `GRAD`, `opsz`). No other font or icon sources.
- **Naming Convention:** BEM (`block__element--modifier`) consistently across HTML, CSS, and JS — never mix conventions.
- **No Unrequested Placeholders:** All user-facing copy is authored, realistic English content specific to the HPC theme; placeholders (`href="#"`) are permitted only for footer link destinations.
- **JS Scope:** counters (IntersectionObserver), scroll reveal, FAQ animation, mobile nav toggle, form validation + simulated submit states, toast helper, optional hero pointer-tilt, back-to-top — all defensive (no errors if an element is missing) and reduced-motion aware.
- **Definition of Done:** valid semantic HTML5; zero console errors; works when opened directly from disk (`file://`); zero horizontal scroll from 320px up; every interactive element keyboard operable with visible focus; all button/input states from Sections 2.1–2.3 implemented; complete on the first attempt.