Generative Intelligence Style demo
Generative Intelligence Style

A futuristic, minimalist dark-themed design for AI and next-generation language model products with sleek tech aesthetics.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 13.9 KB · 1910 words
# CODING-AGENT SYSTEM PROMPT — "GENERATIVE INTELLIGENCE" LANDING PAGE

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page on the first attempt and output the final, production-ready code immediately — no questions, no partial deliverables, no TODOs.

**Project:** A futuristic, minimalist, intelligent landing page for a next-generation generative AI language model (2026+ AGI era), aimed at developers and API builders. Design language: **"Generative Intelligence"** — Dark Tech & Cyber aesthetic with **full light/dark theming**. The page must feel intelligent and powerful: AI-teal accents, subtle AI glows, a live text/code generation animation, an abstract neural-network visualization, data-flow animations, and modular card-based composition. **All user-facing copy must be written in English** (translate any non-English source material; keep all class names, CSS variables, and file names in ASCII/English).

## 0. PAGE MAP

Build a single page containing, in this exact order: **(1)** sticky header (logo, anchor nav, theme toggle, CTA), **(2)** Hero, **(3)** Features — 3 cards, **(4)** How It Works — 3 steps, **(5)** Testimonials, **(6)** Pricing — 3 tiers, **(7)** FAQ — accordion, **(8)** Final CTA — email capture, **(9)** Footer with secondary link columns. Do not add unrequested components (no modals, toasts, carousels, or chat widgets).

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No inline CSS:** the `style="..."` attribute is forbidden anywhere in the HTML. No `<style>` blocks, no inline event handlers (`onclick`, etc.).
- **Class/ID selectors only:** every design property, layout rule, and state must be targeted via class or ID selectors in `style.css`.
- **Minimal HTML modifications:** HTML must remain clean, semantic, and style-agnostic — changing the site's look must require editing only `style.css`, never the markup.

### 1.2 CSS Variables & Theme Tokens
Store **all** visual tokens in `:root` and override them per theme. The following tokens are **mandatory** and must exist with these exact names:

| Token | Light value | Dark value |
|---|---|---|
| `--primary` | `#00A67E` (AI teal) | `#00C796` |
| `--secondary` | `#800080` (purple) | `#A855F7` (lightened for dark-mode legibility) |
| `--bg-primary` | `#fefefe` | `#0D0F12` |
| `--bg-secondary` | `#F0F0F0` | `#202124` |
| `--text-primary` | `#202124` | `#F0F0F0` |
| `--text-secondary` | `#5F6368` | `#9AA0A6` |
| `--text-success` | `#188038` | `#5BBB7B` |
| `--text-error` | `#D93025` | `#F28B82` |
| `--border-default` | `#DADCE0` | `#3C4043` |
| `--border-error` | `#D93025` | `#F28B82` |
| `--border-success` | `#188038` | `#5BBB7B` |

Also define: `--radius-sm: 6px`, `--radius-md: 8px`, `--radius-lg: 16px`; `--shadow-sm: 0 2px 8px rgba(0,0,0,0.1)`, `--shadow-md: 0 8px 24px rgba(0,0,0,0.12)` (raise alpha in dark mode); `--spacing-gap: 1rem`; `--transition-fast: 150ms ease-in-out`, `--transition-normal: 300ms ease-in-out`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`; `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`, plus `--z-header: 90`. Add supporting tokens: `--accent-cyan: #00FFFF`, `--accent-green: #00FF00`, `--glow-primary` (e.g., `0 0 24px rgba(0,166,126,0.35)` light / stronger in dark), `--font-base`, `--font-mono`, and `--gradient-surface: linear-gradient(to bottom, #F8F8F8, #fefefe)` for light hero/section backgrounds (dark equivalent: a deep near-black gradient with a faint teal radial glow).

- **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, never just the default.
- **Restrict neon accents:** `--accent-cyan` and `--accent-green` are decorative only (glows, gradient stops, data-flow lines, terminal/code accents on dark surfaces) — never body text on light backgrounds, to preserve contrast.
- **Exception clause:** the source palette's `#FFFFFF` is implemented as `#fefefe` for all background surfaces per token rules; pure `#FFFFFF` remains only for text/icons on dark surfaces.
- Apply transitions to explicit properties (`color`, `background-color`, `border-color`, `box-shadow`, `transform`, `opacity`) — never `transition: all`.

### 1.3 Mandatory Dark Mode Support
- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`/`<body>`; the class must take precedence over the media query.
- Theme switching must work purely by swapping CSS variables — no HTML restructuring.
- **Persistence:** store the user's choice in `localStorage` (key `theme`), fall back to `prefers-color-scheme` on first visit, and apply the stored theme as the first statement in `script.js`. Provide a **visible toggle button** in the header using Google Material Symbols (`dark_mode` / `light_mode`) with correct `aria-pressed` and a dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme").

### 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 (e.g., text stacks inside cards may use `flex-start`).
- **Mobile-first:** single column by default; rows convert to columns below 768px (header nav → hamburger + dropdown panel; features/steps/pricing/testimonials → stacked). Fluid `clamp()` typography. **Zero horizontal scrolling** at any viewport width — never use `overflow-x: hidden` as a crutch.

### 1.5 Styling Approach
Use clean custom CSS (no framework build step), organized into `@layer` blocks (tokens, base, layout, components, effects). All styling must map back to CSS variables and reusable component classes (`.btn`, `.card`, `.input-group`). The two effect classes from the spec must exist under these **exact names**: `.ai-generation-animation` and `.neural-network-visualization`.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** load **Inter** from Google Fonts (with `preconnect`) and bind it to `--font-base`; also load a Google monospace font (JetBrains Mono or Roboto Mono) bound to `--font-mono` for the code-generation demo and inline code.
- **Icons:** use Google Material Symbols (Outlined) via `<link>` and `<span class="material-symbols-outlined">icon_name</span>`. **Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.**

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Buttons
Style all states via CSS classes on `.btn` (flex layout, `align-items: center; justify-content: center; gap: 0.5rem`, minimum touch target 44×44px):
- **Default:** `.btn--primary` (teal fill + `--glow-primary` on hover), `.btn--secondary` (ghost/outline), `.btn--danger` (defined even if unused).
- **Hover:** brightness/shadow shift, `cursor: pointer`.
- **Focus:** distinct ring via `box-shadow`/`outline` using `--primary` for keyboard navigation.
- **Active:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** disables interaction, prevents double-clicks, renders a CSS spinner (border-based) or animated Google Icon without changing button dimensions; set `aria-busy="true"`.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** transient feedback styles driven by `--text-success` / `--text-error` (used on the Final CTA submit: loading → success check icon, or error state on invalid email).

### 2.2 Cards
- **Default:** `.card` — flexible flexbox layout, `--bg-secondary` surface, 1px `--border-default`, `--radius-md`, `--shadow-sm`.
- **Hover:** `--shadow-md` + `transform: translateY(-2px)`.
- **Focus-within:** border shifts to `--primary` with a soft glow when a child link/button receives focus.
- **Loading (`.card--loading`):** shimmer keyframe skeleton (applied to the hero demo panel during "generation").
- **Empty (`.card--empty`):** structured fallback with a Google Icon and guidance text (define the CSS even if not rendered).
- **Featured (`.card--featured`):** middle pricing tier — teal gradient/glow border, "Most popular" badge, slightly elevated scale on desktop.
- Variants: feature cards (glowing icon tile + title + copy), testimonial cards (quote, 5-star Material Symbol rating, initials-avatar circle, name/role/company), pricing cards (tier name, price, check-icon feature list, CTA).

### 2.3 Accordion (FAQ)
- Each item: `<button aria-expanded>` trigger + panel with `role="region"` and `aria-labelledby`; Google Symbol chevron rotates on open.
- Animate open/close via CSS (`grid-template-rows: 0fr → 1fr` transition) using `--transition-normal`.
- Fully keyboard operable (native buttons), one-item-open behavior managed in `script.js`, visible hover/focus states on triggers.

### 2.4 Form & Input (Final CTA email capture)
- **Structure:** `.input-group` flex container wrapping `<label>`, `<input type="email">`, and a dedicated error feedback element with `aria-live="polite"`.
- **States (all styled in CSS):** empty, focused (outline ring via `--primary`), filled, valid (`--border-success` + check icon), invalid (`--border-error`, `--text-error` message + error icon — never color-only), disabled, read-only.
- **Behavior:** JS validation on submit; loading state prevents double-submits; success replaces the form with a confirmation message announced via `aria-live`.

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow, `scroll-behavior: smooth` (disabled under reduced motion) and `scroll-margin-top` on sections for the sticky header.
- **Smooth animations:** CSS transitions on all state changes via `--transition-normal`; **all keyframe animations must be wrapped in `@media (prefers-reduced-motion: no-preference)`** with static, fully readable equivalents for reduced-motion users.
- **Accessibility:** WCAG AA contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `main`, `section` with `aria-labelledby`, `footer`); skip-to-content link; logical DOM/focus order; full keyboard operability; `aria-live` regions for dynamic feedback; decorative visualizations marked `aria-hidden="true"`.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change (nav link underline/fill, button press scale, toggle icon animation).
- **Destructive actions:** none expected; if any appear, `.btn-danger` must be visually distinct in both themes.
- **Signature AI effects (theme-mandated):**
  - `.ai-generation-animation` — hero demo panel (terminal-style card; it may keep a fixed dark surface in both themes as a documented exception, with light text) showing a prompt/response or code snippet typing character-by-character with a blinking caret, ending in a subtle "generation complete" shimmer. Implement via CSS `steps()` typing or a minimal JS loop; keep it decorative with an accessible static equivalent for screen readers.
  - `.neural-network-visualization` — abstract node-and-line network behind/beside the hero, drawn with CSS (positioned pulsing dots + gradient connector lines) or `<canvas>` driven by `script.js`; low-opacity, non-interactive, `aria-hidden`, static under reduced motion. No inline SVG.
  - **Subtle AI glows** — `--glow-primary` on primary buttons, icon tiles, and the featured pricing card (stronger in dark mode).
  - **Data-flow animations** — animated gradient border on the hero demo panel and a flowing dashed connector line between the three "How It Works" steps (CSS `background-position` keyframes on a repeating gradient), horizontal on desktop, vertical on mobile.
  - **AI feedback micro-interactions** — "thinking dots" in the submit button during loading, soft pulse on primary CTA hover.

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference (`<script src="script.js" defer></script>`).
- **Naming:** BEM consistently across the entire deliverable (`.btn`, `.btn--primary`, `.card`, `card__title`, `.card--featured`, `.input-group__error`, `.faq__item`, `.pricing__card`, `.footer__link-group`), plus the two mandated effect classes. Never mix conventions.
- **Copy:** write realistic, on-theme English copy for a fictional generative-AI product — invent one product name and use it consistently across hero, features, pricing, and footer. **No lorem ipsum.** Real labels for every nav link, button, form field, and FAQ question.

## 5. SECTION-BY-SECTION BUILD SPECIFICATION

1. **Header (sticky):** blurred translucent backdrop (`backdrop-filter`), bottom border, logo with a `neuro` or `auto_awesome` Material Symbol, anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, "Get API Access" `.btn--primary`; hamburger + `--z-dropdown` panel below 768px.
2. **Hero:** announcement badge, H1 + subheadline about AGI-era reasoning, two CTAs ("Start Building" primary, "Read the Docs" secondary), the `.ai-generation-animation` demo panel, and the `.neural-network-visualization` background over `--gradient-surface`.
3. **Features (3 cards):** themed around the keywords — e.g., advanced reasoning, developer-first API, safe/ethical AI — each with a glowing Material Symbol icon tile.
4. **How It Works (3 steps):** numbered 01/02/03 steps (e.g., get an API key → send a prompt → stream tokens into your app) connected by the animated data-flow line.
5. **Testimonials:** 3 quote cards with star ratings, initials avatars, fictional-but-realistic names, roles, and companies.
6. **Pricing (3 tiers):** Developer (free) / Scale (monthly price, `.card--featured` "Most popular") / Enterprise (custom), each with a check-icon feature list and CTA.
7. **FAQ:** 5–6 accordion items covering the model, API, pricing, data privacy, and AI safety.
8. **Final CTA:** full-width gradient band with teal glow, headline, the email-capture `.input-group` with submit button (loading → success/error states), and reassurance micro-copy.
9. **Footer:** brand + tagline, 3–4 secondary link columns (Product, Company, Resources, Legal), Material Symbol social icons, and a copyright line.