Digital Ecosystem Style demo
Digital Ecosystem Style

A dynamic, modern visual style for gaming and social platforms featuring vibrant interactive elements, immersive digital aesthetics, and AI-ready landing page design.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 13.5 KB · 1874 words
**SYSTEM PROMPT — CODING AGENT BRIEF**
**Project: "Digital Ecosystem" Landing Page — Dark Tech & Cyber**

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt — a finished, runnable set of `index.html`, `style.css`, and `script.js` files following every rule below exactly. Do not skip, reinterpret, or simplify any requirement.

**Theme Brief:** "Digital Ecosystem" — a dynamic, social, immersive landing page for **NEXORA**, a 2026+ "Connected Entertainment" platform that merges gaming, social feeds, AI-powered features, and a built-in digital wallet (fintech). Mood: vibrant, interactive, community-driven, engaging, neon, cyber. All user-facing copy must be written in **English**, themed, and realistic — no lorem ipsum, no "TODO" placeholders.

**Sections (in order):** Sticky Navigation · Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links.

---

### **1. STRICT ARCHITECTURE RULES**

**1.1 CSS-First Architecture & Zero Inline CSS**
* **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML. All styling lives in `style.css`.
* **Class/ID Selectors Only:** Every design property, layout rule, and state is targeted via class or ID selectors.
* **Minimal HTML Modifications:** Keep HTML semantic and styling-agnostic — changing the look must never require editing markup.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root` and swap them per theme. Mandatory tokens (with this theme's mapping):
* **Colors:** `--primary: #00A1DE` (Digital Blue), `--secondary: #BF00FF` (Electric Purple), plus `--accent-green: #00FF00`, `--accent-orange: #FFA500`, `--accent-cyan: #00FFFF`, `--surface-dark: #333333` as supplementary tokens.
* **Dark (default):** `--bg-primary: #000000`, `--bg-secondary: #14141C`, `--text-primary: #FFFFFF`, `--text-secondary: #A9B4C0`, `--text-success: #2BD96B`, `--text-error: #FF4D5E`, `--border-default: rgba(255,255,255,0.14)`, `--border-error`, `--border-success`.
* **Light (secondary):** `--bg-primary: #F2F6FA` (theme-fitted cool light — never pure white), `--bg-secondary: #fefefe`, `--text-primary: #0B0E14`, `--text-secondary: #45505E`, and darkened brand variants for any accent used as text (e.g., `#0077A8` instead of `#00A1DE` on light backgrounds).
* **Contrast Pairing:** Every light background token pairs with dark text and every dark background token pairs with light text — enforced in both themes, not just the default.
* **Neon Discipline:** `#00FF00`, `#00FFFF`, and `#FFA500` are decorative-only on dark surfaces; they must never be used as text or icon color on light backgrounds — use darkened variants there.
* **Radius & Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, plus `--glow-primary: 0 0 8px rgba(0,161,222,0.5)` and `--glow-secondary: 0 0 12px rgba(191,0,255,0.4)` for neon effects.
* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Stacking:** `--z-dropdown` (mobile nav), `--z-modal`, `--z-toast` — no ad-hoc z-index values.

**1.3 Mandatory Dark Mode Support**
* **Dark-first Default:** Dark Mode is the default boot state and primary presentation. Both light and dark token sets are fully implemented and switchable via a `[data-theme]` attribute (or `.dark` class) on `<html>` — background and text variables must swap with zero HTML restructuring.
* **Persistence:** First visit defaults to dark (per theme spec), then respects `prefers-color-scheme` only if the user has no stored choice; store the user's explicit choice in `localStorage` (e.g., key `nexora-theme`).
* **Toggle:** A visible theme toggle in the navigation with correct `aria-pressed` and a dynamic `aria-label` ("Switch to light theme" / "Switch to dark theme").
* **Exception Clause:** The source theme spec designates Dark Mode as the full/primary presentation (✓) and does not call for a light variant (✗); per the mandatory rule, both themes are nevertheless implemented, with Dark as the default state.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with `display: flex`.
* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an explicitly justified exception exists (document the exception in a CSS comment).
* **Mobile-Friendly First:** All flex layouts are responsive out of the box — rows convert to columns at small viewports, and horizontal scrolling is impossible (`overflow-x` never scrolls).

**1.5 Framework Directive — Pure Custom CSS**
The source specification is expressed as raw CSS; therefore build with **pure custom CSS in `style.css`** — no Tailwind, no CSS framework, no CDN utility scripts. Organize the stylesheet with native `@layer` blocks (`@layer tokens, base, components, utilities`) to keep the cascade predictable. All styling is class-based, never inline.

**1.6 Typography & Icons — Google Fonts Only**
* **Text:** Load **Poppins** from Google Fonts via `<link>` tags (weights 400, 500, 600, 700, 800) and bind it to `--font-base`; use weight 700–800 for display headings (bold, modern typography). Set a sensible line-height scale.
* **Icons:** Use **Google Material Symbols (Rounded)** via the Google Fonts stylesheet, rendered as ligature text and styled via a dedicated icon class (size, `font-variation-settings`, color). **Explicitly forbidden:** raw inline SVGs, emoji as icons, local icon font files, or icon CDN packages.

---

### **2. COMPONENT & SECTION SPECIFICATIONS**

**2.1 Button Component Requirements**
Style all states via CSS classes (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`):
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target 44×44px. Primary variant: gradient `linear-gradient(135deg, #00A1DE, #BF00FF)` with white text and `--glow-primary` shadow; secondary variant: ghost/outline.
* **Hover:** Brightness/glow shift with `cursor: pointer`.
* **Focus:** Distinct `:focus-visible` ring built from CSS variables for keyboard navigation.
* **Active/Pressed:** `transform: scale(0.97)` click feedback.
* **Loading:** `.is-loading` disables interactions, prevents double-clicks, and renders a CSS spinner that does not distort button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** `.is-success` / `.is-error` temporary feedback styles driven by `--text-success` / `--text-error`.
* **Destructive:** Define `.btn-danger` as visually distinct in both themes, even though this page may not use it.

**2.2 Card Component Requirements**
Apply to feature cards, testimonial cards, and pricing tiers (`.card`):
* **Default:** Flexible flexbox layout, `--bg-secondary`, subtle `--border-default`, `--radius-lg`, `--shadow-md`, glass surface where specified.
* **Hover:** `transform: translateY(-2px)` plus a neon glow shift.
* **Focus-within:** Card border highlights when a child link/button receives focus.
* **Loading (Skeleton):** Define a shimmer animation utility class in CSS for any async content (not required for the static build).
* **Empty State:** No empty states required for static content; do not fabricate any.

**2.3 Form & Input Requirements (Final CTA email capture)**
* **Structure:** Flex container `.input-group` wrapping a `<label>`, the input field, and a dedicated error feedback container.
* **States:** Empty, Focused (outline ring from variables), Filled, Valid (success border/icon), Invalid (`aria-invalid="true"`, error border, error icon, red error text — never color alone, always paired with an icon and message), Disabled, Read-only.
* **Behavior:** Validate in `script.js` (never native-only), announce feedback in an `aria-live="polite"` region, and drive the submit button through loading → success/error states.

**2.4 Modal / Popup (Conditional)**
This build requires no modal. If any action must open one (e.g., a pricing confirmation), implement: centered flex container (`align-items: center`), backdrop overlay at `--z-modal`, Google Icon close button, keyboard focus trapping, closing via `Esc` or overlay click, and animated open/close via CSS transitions. Otherwise, buttons give inline feedback only.

**2.5 Navigation & FAQ Accordion**
* **Nav:** Sticky glass header using `backdrop-filter: blur(10px) saturate(1.5)` over a translucent dark surface (with a `@supports` solid fallback). Include a skip-to-content link, logo, anchor links to all sections, theme toggle, and primary CTA. Mobile: hamburger button with `aria-expanded` + `aria-controls`, panel at `--z-dropdown`, `Esc` closes it, focus returns to the toggle. Set `scroll-padding-top` so anchors account for the sticky header.
* **FAQ:** Native `<details>` / `<summary>` pairs, fully styled via CSS (rotating Material Symbol chevron, animated open/close height in CSS or `script.js`), keyboard-accessible by default, correct heading hierarchy, one panel open at a time is optional.

**2.6 Section-by-Section Build Specification**
* **Hero:** Full-viewport, layered: base `linear-gradient(135deg, #000000, #00A1DE)` with Electric Purple radial accents; particle overlay (`aria-hidden="true"`, `pointer-events: none`) implemented as a `particle-flow 15s linear infinite` CSS keyframe field of blurred drifting glow dots (or lightweight canvas in `script.js`). H1 with neon `text-shadow: 0 0 8px rgba(0,161,222,0.5)` — glow on display headings only, never body text, never below AA contrast. Subhead + dual CTAs. **User data visualization:** a stats bar (e.g., 2.4M players, 38M matches, $12M paid out) with count-up animation on scroll via `IntersectionObserver`. **Gamification:** LVL badge chips and an XP progress bar. Optional subtle 3D tilt card using `perspective: 1000px` + `transform-style: preserve-3d`.
* **Features (3 cards):** AI Crowd Feed (AI), Instant Wallet (fintech payouts), Guilds & Squads (community) — one Material Symbol icon each, title, themed copy, full `.card` states.
* **How It Works (3 steps):** Gamified "Level 01 / 02 / 03" steps (Create your profile → Link wallet & games → Play, stream, earn XP) with a connecting progress line, numbered badges, and icons.
* **Testimonials:** 3 cards with initial-letter avatar circles (pure CSS, no external images), Material Symbol star ratings, quote, name, and role.
* **Pricing (3 tiers):** Rookie (Free) / Pro ($9.99/mo, `.card--featured` with gradient `#00A1DE → #BF00FF` border and a "Most Popular" badge) / Legend ($19.99/mo). Feature lists with check icons; each tier CTA demonstrates the loading → success button flow (no real checkout).
* **FAQ:** 6–8 themed English Q&As (wallet security, AI feed, cross-platform, payouts, community rules, cancellation) per 2.5.
* **Final CTA:** High-impact gradient panel (135deg black → digital blue, purple accents), bold headline, the newsletter email form per 2.3, and a secondary link.
* **Footer:** 4-column secondary link grid (Product, Company, Community, Support), Material Symbol social icon row, legal line, and copyright.

---

### **3. CORE UX & MICRO-INTERACTION RULES**

* **Responsive by Default:** Fluid sizing, mobile-first breakpoints, zero horizontal overflow at any width.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes. Under `prefers-reduced-motion: reduce`: disable particles, parallax/tilt, and count-up delays (show final values instantly), and minimize transitions.
* **Accessibility (a11y):** WCAG 2.1 AA contrast in both themes (4.5:1 body, 3:1 large text). Never rely on color alone to communicate state. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`), correct ARIA roles/labels on custom widgets (menu toggle, theme toggle, accordion), logical DOM/focus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, loading, success).
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Engagement Micro-Interactions:** Hover glows, XP bar fill on scroll, stat count-ups, reaction-pulse demo widgets — all CSS-driven and reduced-motion safe.
* **Neon & Glass Discipline:** `backdrop-filter: blur(10px) saturate(1.5)` on nav and glass cards with `@supports` fallbacks; inset neon panels via `box-shadow: inset 0 0 20px rgba(0,0,0,0.7)`; all glows derived from tokens, never hardcoded in components.

---

### **4. DELIVERABLE & OUTPUT FORMAT**

* **File Structure:** Separate `index.html`, `style.css`, and `script.js` — complete, runnable, delivered in full. No inline `<script>` blocks beyond a single `<script src="script.js" defer>` entry point. Google Fonts and Material Symbols load via `<link>` tags only.
* **Script Scope:** `script.js` contains only: theme manager (localStorage + toggle), mobile nav toggle, form validation with button state flow, IntersectionObserver count-ups, and optional FAQ height animation / card tilt. No libraries, no inline event handlers.
* **Naming Convention:** BEM exclusively (`.hero`, `.hero__title`, `.card`, `.card--featured`, `.btn`, `.btn--primary`) plus state classes (`.is-loading`, `.is-success`, `.is-error`). Never mix conventions.
* **No Unrequested Placeholders:** All eight sections are fully built with real themed English copy. Lorem ipsum, TODOs, empty sections, or "add your content here" submissions are rejected.
* **First Attempt:** Deliver complete code in one response with full visual fidelity to the Dark Tech & Cyber aesthetic — neon gradients, glass surfaces, particles, gamification, and data visualizations included. Do not ask clarifying questions; do not submit partial output.