Cyber-Tribal demo
Cyber-Tribal

A fusion of futuristic cyber aesthetics with primal tribal patterns, featuring neon geometric designs, glowing organic tech elements, and immersive psychedelic visuals.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 14.5 KB · 2010 words
# SYSTEM PROMPT — CODING AGENT BUILD SPECIFICATION

## Project: "AETHERTRIBE" — Cyber-Tribal Landing Page (Dark-Only · Future-Primitivism · Dark Tech & Cyber)

**Your Role:** Senior Frontend Engineer & Expert UI Designer. Build the complete, production-quality landing page on the first attempt, in a single response.

## 0. MISSION BRIEF & CONTENT DIRECTION

* **Theme:** Cyber-Tribal — futuristic, primal, visionary. Keywords: psychedelic, geometric patterns, neon, organic tech, glowing, immersive, tribal masks with a cyber twist, neon light trails, holographic elements, pulsating rhythms.
* **Product Concept (all copy must serve this):** AETHERTRIBE — a fictional immersive platform where ancient tribal ritual meets machine intelligence: audio-reactive generative visuals, shared holographic "ritual spaces," and pattern-art tools that pulse with sound.
* **Copy Rules:** Write all user-facing copy in **English**, original and real — a primal-futuristic manifesto tone (short, ceremonial, punchy). Zero lorem ipsum. Placeholders only where content is genuinely unspecified — aim for none.
* **Required Sections (in order):** Sticky Navigation → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials (3 quotes) → Pricing (3 tiers) → FAQ (5 items) → Final CTA (email capture) → Footer (secondary links).

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS

* **No Inline CSS:** All styling lives in `style.css`. The `style="..."` attribute, `<style>` blocks in HTML, and inline `on*=` handlers are strictly forbidden.
* **Class/ID Selectors Only:** Every design property, layout rule, and state is targeted via class or ID selectors.
* **Minimal HTML Modifications:** HTML stays semantic and style-agnostic — re-theming the site must require editing CSS only, never markup.

### 1.2 CSS Variables & Theme Tokens

Define exactly these tokens in `:root` (you may extend, never rename):

```css
:root {
  /* Surfaces */
  --bg-primary: #000000;      /* Black */
  --bg-secondary: #0e0221;    /* Deep Indigo-darkened panel */
  --bg-tertiary: #1a0a3e;     /* Elevated Deep Indigo surface */

  /* Brand */
  --primary: #00FFFF;         /* Electric Cyan */
  --secondary: #29AB87;       /* Jungle Green */
  --accent-magenta: #FF00FF;  /* Neon Magenta */
  --accent-orange: #FF4500;   /* Solar Orange */
  --accent-purple: #BF00FF;   /* Blacklight Purple */
  --accent-indigo: #4B0082;   /* Deep Indigo — SURFACE ONLY */

  /* Text */
  --text-primary: #00FFFF;
  --text-secondary: #d5fff5;  /* pale cyan-white body copy */
  --text-success: #29AB87;
  --text-error: #FF4500;

  /* Borders */
  --border-default: rgba(0, 255, 255, 0.45);
  --border-glow: #00FFFF;
  --border-error: #FF4500;
  --border-success: #29AB87;

  /* Radius / Shadow / Glow */
  --radius-sm: 4px;  --radius-md: 10px;  --radius-lg: 18px;
  --shadow-sm: 0 0 10px rgba(0, 255, 255, 0.25);
  --shadow-md: 0 0 24px rgba(0, 255, 255, 0.45);
  --glow-magenta: 0 0 20px rgba(255, 0, 255, 0.55);
  --glow-green: 0 0 16px rgba(41, 171, 135, 0.5);

  /* Spacing / Motion / Stacking */
  --spacing-gap: clamp(1rem, 3vw, 1.5rem);
  --transition-fast: 150ms;  --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --z-dropdown: 100;  --z-modal: 200;  --z-toast: 300;

  /* Type */
  --font-display: 'Orbitron', sans-serif;
  --font-base: 'Exo 2', sans-serif;
}
```

* **Contrast Pairing (mandatory):** Every text token must reach ≥ 4.5:1 against the surface it sits on. **Deep Indigo `#4B0082` is a surface/accent token only — never a text color on black (≈2.9:1).** Black text is permitted on cyan/orange fills (≥ 9:1).
* **No Pure White Backgrounds:** Never use `#ffffff` as a background; where near-white is unavoidable, use `#fefefe` (rare in this dark-only build).

### 1.3 Mandatory Dark Mode Support

* Dark mode is the canonical theme: dark tokens are the `:root` defaults, and the page must render the dark theme regardless of OS preference (set `<meta name="color-scheme" content="dark">` and `color-scheme: dark` in CSS so native controls/scrollbars match). All colors remain tokenized so a light theme could be added later via CSS only, with zero HTML changes.
* **Exception (this build):** The style spec mandates a dark-only experience (✗ Light / ✓ Full Dark) — do **not** build a light-mode palette or a theme toggle.

### 1.4 Flexbox Layout & Mobile-First Alignment

* **Flexbox Only:** Build every layout structure with `display: flex`. Multi-card rows use `flex-wrap` with fluid `flex-basis` so they collapse to a single column at ≤ 768px.
* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless a section spec explicitly justifies otherwise (e.g., left-aligned text blocks).
* **Mobile-Friendly First:** Base styles are single-column; enhance at ≥ 768px and ≥ 1024px. No horizontal scrolling at any width down to 320px.

### 1.5 Framework Default

* Use **clean custom CSS** in `style.css` (the provided technical spec is vanilla CSS and the architecture is variable-driven). No Tailwind, no CDN frameworks. Organize the cascade: tokens → base/reset → components → sections → utilities. All classes must be reusable component classes (`.btn`, `.card`, `.nav`, `.field`).

### 1.6 Typography & Icons — Google Fonts Mandatory

* **Text:** Include Google Fonts `<link>` tags for **Orbitron** (500/700/900 — display headings) and **Exo 2** (400/600 — body), bound to `--font-display` and `--font-base`.
* **Exception (this build):** 'Azonix' (named in the raw spec) is not available on Google Fonts — substitute Orbitron for all display type to preserve the futuristic feel.
* **Icons:** Google Material Symbols (Rounded) stylesheet only. **Forbidden:** raw inline `<svg>`, local icon/image files, emoji-as-icons. Suggested glyphs: `theater_comedy` or `skull` (cyber mask motif), `graphic_eq`, `blur_on`, `auto_awesome`, `view_in_ar`, `sensors`, `tune`, `diversity_3`, `flare`, `waves`, `format_quote`, `check`, `check_circle`, `error`, `expand_more`, `menu`, `close`, `arrow_upward`, `keyboard_arrow_down`, `progress_activity` (spinner).
* **Exception (this build):** Do not reference `tribal-pattern.svg` or any external/local asset — recreate all tribal and geometric patterns with pure CSS gradients (see §2.7) so the deliverable stays fully self-contained.

---

## 2. COMPONENT & SECTION DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`)

* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; Orbitron label, uppercase, letter-spaced.
* **Primary:** `background: var(--primary); color: #000;` — **Hover:** brightness shift + `--shadow-md` glow, `cursor: pointer`. **Ghost:** transparent bg, `1px solid var(--border-glow)`, cyan text; hover fills with a 10% cyan tint.
* **Focus:** distinct 2px cyan outline (offset) plus glow ring via `box-shadow` — clearly visible on black for keyboard users.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading (`.is-loading`):** disables pointer events, prevents double-clicks, swaps the label for a CSS-rotating `progress_activity` glyph — button dimensions must not change.
* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`.
* **Success/Error (`.is-success` / `.is-error`):** temporary feedback tinting via `--text-success` / `--text-error` with matching border tokens — never color-only; pair with an icon or status text.
* **Danger:** define `.btn--danger` (Solar Orange treatment, distinct on black) even though this page renders no destructive action.

### 2.2 Card Component (`.card` — Features, Pricing, Testimonials)

* **Default:** flex column, `background: var(--bg-secondary)`, `border: 1px solid var(--border-default)`, `border-radius: var(--radius-lg)`, `--shadow-sm`, generous padding.
* **Hover:** `transform: translateY(-2px)` + `--shadow-md` + border brightens to `--border-glow`.
* **Focus-within:** card border glows cyan when a child button/link receives focus.
* **Skeleton/Empty:** not required — all card content is real, static copy per §0.

### 2.3 Form & Input (Final CTA email capture, `.field`)

* **Structure:** flex column wrapper → real `<label>` (associated via `for`/`id`) → input → dedicated error/status container with `aria-live="polite"`.
* **States (via classes):** empty; focused (cyan outline ring + glow); filled; valid (`--border-success` + `check_circle` icon); invalid (`--border-error`, message in `--text-error` + `error` icon); disabled; read-only.
* **Submit Flow:** validate email format in `script.js`; on submit the button enters `.is-loading` for ~900ms, then `.is-success` with a visible status message ("You're initiated. Watch the void.") — all feedback announced via the `aria-live` region. No `alert()`.

### 2.4 FAQ Accordion

* Use native `<details class="faq__item">` / `<summary>` (keyboard-accessible by default). Summary: flex row, question + `expand_more` glyph rotating 180° when `[open]`; hover/focus glow on the summary. Content is never hidden from assistive tech.

### 2.5 Page Shell & Navigation

* Fixed header, flex row: wordmark "AETHERTRIBE" + `theater_comedy` glyph (left), anchor links (center/right), `.btn--primary` CTA. `backdrop-filter: blur()` over `rgba(0,0,0,0.7)`; bottom border `--border-default`.
* **Mobile:** links collapse behind a hamburger button (`menu`/`close` glyphs) toggling a panel at `--z-dropdown`; JS must set `aria-expanded`/`aria-controls`, close on link click and `Esc`.
* Include a skip-to-content link, a single `<h1>`, and each `<section aria-labelledby>` with an `id` matching the anchor nav.

### 2.6 Section-by-Section Build Specification

1. **Hero** — `min-height: 100vh` (with `100svh` enhancement), flex column centered. Background: layered pure-CSS tribal geometry (§2.7) + radial magenta/indigo glows. Center motif: a "cyber mask" — glowing clip-path diamond frame containing a pulsing `theater_comedy` glyph, ringed by two slow-rotating conic-gradient neon trails, inside a `perspective: 800px` stage with a gentle 3D tilt. Headline: Orbitron 900, uppercase, cyan with `text-shadow: 0 0 10px var(--accent-magenta)` (base text color must stay readable beneath the glow). Eyebrow badge, subcopy in `--text-secondary`, primary CTA "Begin the Ritual" (→ #pricing) + ghost CTA "See the Vision" (→ #features). Bouncing `keyboard_arrow_down` scroll cue (`aria-hidden`).
2. **Features (3 cards)** — flex row → column. Each card: glowing icon medallion (`graphic_eq`, `blur_on`, `view_in_ar`) in a cyan-ringed circle, Orbitron title, real copy on audio-reactive visuals, the generative pattern engine, and shared holographic ritual spaces.
3. **How It Works (3 steps)** — steps joined by an animated neon light trail (gradient line with pulsing `background-position`; horizontal ≥768px, vertical below). Step numbers in glowing diamond frames; icons `sensors`, `tune`, `diversity_3`; copy: connect your sound → shape the ritual → merge with the tribe.
4. **Testimonials (3)** — `.card` variants: `format_quote` glyph, quote in `--text-secondary`, CSS-gradient avatar circle with initials (no external images), name + role (e.g., Visual Shaman, Generative Artist, Sound Alchemist).
5. **Pricing (3 tiers)** — Initiate $0 / **Shaman $19** (featured: "Most Chosen" badge, magenta-green glow border, `translateY(-4px)` ≥1024px) / Elder $49. Feature lists with `check` glyphs; each tier gets a `.btn` (featured = primary, others = ghost).
6. **FAQ** — 5 real questions (e.g., "Do I need a VR headset?", "What does the free Initiate tier include?", "Can I export my generative patterns?") built per §2.4.
7. **Final CTA** — full-bleed section with the page's strongest glow: pulsing headline, email capture per §2.3, supporting microcopy.
8. **Footer** — flex-wrap columns: brand blurb, Product links, Community links, Legal links; social row as text links or generic glyphs (`alternate_email`, `forum`, `public`) — no brand-logo SVGs. Copyright "© 2025 AETHERTRIBE" and a back-to-top link (`arrow_upward`, smooth scroll).

### 2.7 Cyber-Tribal Visual Effects Engine (CSS Only)

* **Geometric/Tribal Patterns:** layered `repeating-linear-gradient` (zigzag/diamond lattices), `repeating-conic-gradient` (radiating tribal suns), `radial-gradient` (bead rows, dot fields) — applied as section backgrounds with `background-blend-mode: overlay` over `--bg-primary`.
* **Pulse-Glow:** `@keyframes pulse-glow` oscillating `text-shadow`/`box-shadow` intensity, `2s infinite alternate`; stagger `animation-delay` across elements to create a "rhythm."
* **Holographic Surfaces:** iridescent `conic-gradient` borders (background-clip padding-box/border-box technique) with slow `hue-rotate` on decorative layers only.
* **3D Immersion:** `perspective: 800px` on the hero stage; floating elements via `translateZ`/`rotateX` float keyframes.
* **Motion Safety:** every animation must respect `prefers-reduced-motion: reduce` — freeze infinite loops, remove transforms/parallax, keep only ≤200ms opacity fades. Nothing may flash more than 3 times per second. Decorative DOM layers get `aria-hidden="true"`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** fluid `clamp()` typography; rows → columns at ≤768px; zero horizontal overflow at 320px.
* **Smooth Animations:** all state changes transition with `var(--transition-normal) var(--ease-standard)`, honoring `prefers-reduced-motion`.
* **Accessibility (a11y):** semantic HTML5 landmarks; logical DOM/focus order; full keyboard operability (nav, FAQ, form, buttons — no mouse-only interactions); visible focus everywhere; never rely on color alone to communicate state (pair color with icon or text); `aria-live` regions for all dynamic feedback; contrast ≥ 4.5:1 body / ≥ 3:1 large text throughout the dark theme.
* **Mandatory Visual Feedback:** every hover, click, and submission triggers a visible state change.
* **Scroll Reveal:** `IntersectionObserver` adds `.is-visible` (fade/translate) — disabled under reduced motion; all content must remain visible with JS disabled.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** separate `index.html`, `style.css`, `script.js`. A single `<script src="script.js" defer>` in the HTML — no other script tags, no inline JS.
* **Head Assets:** Google Fonts (Orbitron, Exo 2) + Material Symbols links only; no other external requests of any kind.
* **Naming Convention:** strict BEM (`block__element--modifier`) across the entire deliverable — never mix conventions.
* **Copy:** all real English marketing copy per §0; no lorem-ipsum submissions.
* **Prohibited:** inline styles, inline SVGs, local/external images, `alert()`, unrequested placeholder content.
* **Output:** deliver the complete landing page — full HTML, full CSS, full JS — in one response, on the first attempt.