Autonomous Future Style demo
Autonomous Future Style

A sleek, dark, high-tech visual style with futuristic automotive imagery and AI-inspired elements designed for cutting-edge autonomous vehicle landing pages.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 13.2 KB · 1826 words
# SYSTEM PROMPT — CODING AI: "AUTONOMOUS FUTURE" LANDING PAGE (DARK TECH & CYBER)

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce the complete, production-ready landing page code on the first attempt — full `index.html`, `style.css`, and `script.js`. Do not ask clarifying questions. Where this brief leaves copy unspecified, write polished, realistic copy that fits the theme.

**Project:** Marketing landing page for a 2026+ autonomous electric vehicle. **All user-facing copy, labels, and ARIA text must be written in English.** Invent a concise, futuristic brand name and use it consistently in the header, hero, and footer.

---

## 0. THEME SPECIFICATION — "AUTONOMOUS FUTURE STYLE"

**0.1 Theme Identity**
- **Name:** Autonomous Future Style
- **Type:** Sleek, Futuristic, Minimalist
- **Keywords:** electric vehicles, autonomous driving, AI, futuristic, sleek, minimalist, performance, sustainable, innovative, connected
- **Era:** 2026+ Autonomous Mobility
- **Mood:** deep black canvas, electric red energy, HUD-like precision, generous negative space, thin dividers, restrained glowing accents.

**0.2 Color System → CSS Variable Mapping (Dark = canonical default in `:root`)**
- `--primary: #CC0000` (Electric Red) — CTAs, accent lines, glow source
- `--secondary: #00BFFF` (Electric Blue) — sensor/data visualizations, HUD readouts, links
- `--bg-primary: #000000`; `--bg-secondary: #222222` (Carbon Fiber Black); elevated surface `#333333` (Dark Gray)
- `--text-primary: #FFFFFF`; `--text-secondary: #C0C0C0` (Silver); muted `#CCCCCC`
- `--border-default: #333333`; plus mandatory `--text-success`, `--text-error`, `--border-error`, `--border-success`
- **Light variant (`.light` class):** near-white surfaces — use `#fefefe` where a white surface is required, never `#ffffff`; dark text (`#111111` / `#222222`); keep `#CC0000` as primary; darken the blue accent (e.g., `#0077B6`) to preserve ≥ 4.5:1 contrast on light backgrounds.
- **Contrast pairing is mandatory in every theme:** light background tokens pair with dark text tokens, dark background tokens with light text tokens.
- **Contrast guidance:** `#CC0000` on black is reserved for large text (≥ 24px, or ≥ 18.66px bold) and non-text UI (~3.5:1); body copy must use `#FFFFFF` / `#C0C0C0`. Never set body paragraphs in red.

**0.3 Visual Effects, Motion & CSS Technical Foundation**
- **Autonomous driving animation:** define `@keyframes autonomous-scan` and apply `animation: autonomous-scan 10s linear infinite` to a scanning beam sweeping across the hero vehicle; add radar-pulse rings on sensor dots.
- **Sensor data visualizations:** HUD-style readouts (LIDAR points/s, AI compute in TOPS, battery %, range) rendered as animated counters and thin progress bars.
- **Subtle UI glows:** `text-shadow: 0 0 8px rgba(204,0,0,0.5)` on display headings and key accents only — never on body text; soft red/blue `box-shadow` glows on hover states.
- **Depth:** `box-shadow: inset 0 0 15px rgba(0,0,0,0.7)` on cards/panels; `border-bottom: 2px solid #CC0000` accent lines under the header, section titles, and feature cards.
- **Interactive 3D vehicle:** build a stylized low-poly vehicle from CSS 3D-transformed elements inside a `perspective: 1000px` / `transform-style: preserve-3d` scene. It must subtly tilt in response to pointer movement and animate on scroll. No external 3D libraries, no image assets — the entire visual is CSS-built.
- **Fluid transitions & responsive micro-interactions:** every state change uses `transition: var(--transition-normal)`; every interactive element responds visibly to hover/focus/press.

**0.4 Required Page Sections (build in this order)**
1. **Sticky Header** — brand wordmark; anchor nav (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle (§1.3); compact CTA button. Red `border-bottom` accent. On mobile, collapse the nav behind an accessible hamburger (Material `menu` icon, `aria-expanded`, `aria-controls`).
2. **Hero** — full viewport. Eyebrow chip (e.g., "AUTONOMOUS · 2026"), `<h1>` with the red glow, supporting subheadline, primary CTA ("Reserve Now") + secondary outline CTA ("Explore the Tech"). CSS 3D vehicle scene with the autonomous-scan beam, pulsing sensor dots, and three animated HUD readouts. Scroll cue at the bottom.
3. **Features — 3 cards:** Full Autonomy (AI driving), Electric Performance, Connected & Sustainable. Each card: Material icon, English title, 1–2 sentence description, red bottom accent, hover lift + glow.
4. **How It Works — 3 steps:** numbered 01/02/03 (Perceive — 360° sensor fusion; Decide — onboard neural core; Move — fully autonomous drive). A connecting progress line animates as steps enter the viewport; each step reveals on scroll.
5. **Testimonials — 3 cards:** avatar circle with a Material `person` icon (no external images), name, role, realistic English quote; silver borders, hover elevation.
6. **Pricing — 3 tiers:** e.g., Core / Prime / Fleet with realistic USD figures; the middle tier is featured ("Most Popular" badge, red glow border, visually elevated). Feature lists use `check_circle` icons; each tier has a CTA button.
7. **FAQ** — accessible accordion (§2.4) with 5–6 real English Q&As (autonomy level, safety, charging, data privacy, availability).
8. **Final CTA** — full-width glowing panel: headline, email-capture form (§2.3), submit button demonstrating the full loading → success flow with `aria-live` feedback.
9. **Footer** — secondary link groups (Product, Company, Support, Legal) with real English labels (`href="#"` anchors acceptable), social icons (Material Symbols), brand + copyright line.

---

## 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 are applied via class/ID selectors only.
- HTML remains clean, semantic (`header`/`nav`/`main`/`section`/`article`/`footer`), and style-agnostic — re-theming the site must require CSS edits only, never markup changes.

**1.2 CSS Variables & Theme Tokens**
- Store every visual token in `:root` (dark default) and override in `.light`: the color tokens from §0.2 plus `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, and `--z-dropdown`, `--z-modal`, `--z-toast` (layered components must never conflict in stacking order).
- Add theme-specific tokens: `--glow-red: 0 0 8px rgba(204,0,0,0.5)`, `--glow-blue`, `--inset-depth: inset 0 0 15px rgba(0,0,0,0.7)`, `--font-base`, `--font-display`.

**1.3 Mandatory Dark Mode Support**
- Dark is the canonical theme: dark tokens are the `:root` default; the complete light token set lives under a `.light` class. **Exception clause:** the source specification designates this a full-dark theme, so dark is the default and primary presentation — but the light variant and toggle must still ship per these mandatory rules.
- Provide a visible theme toggle in the header (Material `dark_mode`/`light_mode` icon) with correct `aria-pressed` and `aria-label` states.
- Persist the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`. Switching themes must require zero HTML restructuring.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox (`display: flex` / Tailwind flex utilities).
- Every flex container defaults to `align-items: center` unless an exception is explicitly justified (note it in a CSS comment).
- Mobile-first: multi-column rows collapse to columns on small viewports; zero horizontal scrolling at any breakpoint.

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS, or clean custom CSS organized with `@layer`/`@apply`. All utilities must map back to CSS variables or generic reusable classes (`.btn`, `.card`, `.input-group`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load text fonts from Google Fonts via `<link>` and bind them to `--font-base` / `--font-display`. **Exception clause:** the source spec lists "Helvetica Neue," which is unavailable on Google Fonts — substitute **Inter** (body) and **Space Grotesk** (display/headings) to deliver the same clean, modern sans-serif intent. Do not fall back to system-only font stacks.
- Icons: Google Material Symbols only (e.g., `directions_car`, `sensors`, `memory`, `bolt`, `battery_charging_full`, `hub`, `radar`, `check_circle`, `arrow_forward`, `person`, `menu`, `close`, `expand_more`, `dark_mode`, `light_mode`). Raw inline SVGs and local icon files are forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component** — style every state via CSS classes:
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Variants: `.btn--primary` (electric red, white text), `.btn--secondary` (outline, silver border).
- **Hover:** brightness/shadow shift with `cursor: pointer` and a subtle red glow.
- **Focus:** distinct visible ring built from CSS variables (`outline`/`box-shadow`) for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)` click feedback.
- **Loading:** disables interaction, prevents double-clicks, and renders a CSS spinner or animated Material icon without changing button dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback states driven by `--text-success` / `--text-error` (used by the Final CTA submit flow).

**2.2 Card Component** (features, pricing tiers, testimonials):
- **Default:** flexible Flexbox layout on `--bg-secondary` with subtle borders and elevation via CSS variables; feature cards carry the `border-bottom: 2px solid #CC0000` accent.
- **Hover:** `transform: translateY(-2px)` plus shadow/glow shift.
- **Focus-within:** card borders highlight when a child link/button receives focus.
- **Loading (skeleton):** define a shimmer animation class in CSS (ready for dynamic use) so loading states cause no layout jump.
- **Empty state:** structured fallback pattern with a Google icon and clear guidance text, defined in CSS for any dynamic region.

**2.3 Form & Input Requirements** (Final CTA email capture):
- **States:** empty, focused (outline ring), filled, valid (success border/icon), invalid (error border, red text, error icon), disabled, read-only.
- **Structure:** Flex container wrapping a label, the input field, and a dedicated error-feedback container; errors announced via `aria-live`.
- Validate email format in `script.js`; on submit, show the button loading state, then a success message using `--text-success` — all feedback inline and visible.

**2.4 FAQ Accordion & Modal/Popup**
- **Accordion:** each item is a semantic `<button>` (Material `expand_more` icon) controlling its region via `aria-expanded`/`aria-controls`; open/close animated with CSS transitions; fully keyboard operable.
- **If any modal/popup is used** (e.g., a demo overlay): animated opening/open/loading/success/closing states; centered Flexbox container (`align-items: center`) with backdrop overlay; Material icon close button; keyboard focus trapping; close via `Esc` and overlay click; layered with `--z-modal`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing and responsive breakpoints with no horizontal overflow at any width.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; every animation (autonomous-scan, shimmer, counters, 3D tilt, scroll reveals) must be disabled or reduced under `prefers-reduced-motion`.
- **Accessibility (a11y):** sufficient contrast in both themes; never rely on color alone to communicate state (pair color with icons/text); semantic HTML5; correct ARIA roles/labels on custom widgets (theme toggle, accordion, mobile nav); logical DOM/focus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for dynamic feedback (form errors, submit status); skip-to-content link; a single `<h1>` with logical heading order throughout.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** any `.btn-danger` or delete-style action must be visually distinct in both light and dark themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference (`<script src="script.js" defer></script>`). No external images or asset files — all visuals come from CSS, Google Fonts, and Material Symbols.
- **Naming convention:** BEM throughout (`.hero__title`, `.card__icon`, `.pricing__tier--featured`) — never mix conventions.
- **No unrequested placeholders:** no lorem ipsum; write real English copy for every headline, description, testimonial, price, and FAQ answer. Placeholders are permitted only where content was genuinely left unspecified by this brief.
- **`script.js` scope:** theme toggle + `localStorage` persistence, mobile nav, smooth anchor scrolling, IntersectionObserver scroll reveals + step-line animation, hero pointer-tilt (updating CSS custom properties), animated HUD counters, FAQ accordion, and the Final CTA form flow — all reduced-motion aware.

Generate the complete final code now, on the first attempt, following every rule above.