Expo Luminous Developer demo
Expo Luminous Developer

A dark, luminous developer landing page style inspired by Expo, featuring glowing gradients, sleek dark surfaces, and modern tech aesthetics for cross-platform mobile development tools.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 14.7 KB · 2110 words
# SYSTEM PROMPT — Build the "Expo Luminous Developer" Landing Page

**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single attempt. All user-facing copy must be written in **English**.

**Design Identity:** Luminous Canvas · Pill Geometry · Strict Monochromatic · Gallery Spacing · Inter Full Range. A cool-white gallery canvas (`#f0f0f3`) with generous vertical rhythm (96px+), a strictly grayscale UI in which product screenshots are the only source of color, pill-derived geometry (24px–9999px radii), massive 64px display headlines with extreme negative tracking (−1.6px to −3px), Inter as the sole typeface (weights 400–900), whisper-soft shadows that barely lift elements, and white cards floating on the Cloud Gray canvas. Black (`#000000`) is reserved for headlines and primary CTAs.

---

## 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 Selectors Only:** All design properties, layout rules, and states must be targeted via class selectors in `style.css`.
* **Minimal HTML Modifications:** HTML must remain semantic and styling-agnostic — changing the look must only require editing `style.css`.

### 1.2 CSS Variables & Theme Tokens
Store every visual token in `:root`, and override them for dark mode. Required tokens:

| Token | Light Value | Dark Value | Usage |
|---|---|---|---|
| `--primary` | `#000000` | `#fefefe` | Primary ink: CTA fill, headlines |
| `--secondary` | `#fefefe` | `#262b31` | Secondary surface: buttons, cards |
| `--bg-primary` | `#f0f0f3` | `#1c2024` | Page canvas |
| `--bg-secondary` | `#fefefe` | `#262b31` | Floating cards, nav, elevated surfaces |
| `--bg-inverse` | `#000000` | `#fefefe` | Inverted panels (Final CTA) |
| `--text-primary` | `#1c2024` | `#fefefe` | Body text |
| `--text-heading` | `#000000` | `#ffffff` | Display headlines |
| `--text-secondary` | `#60646c` | `#b0b4ba` | Subheads, descriptions |
| `--text-muted` | `#b0b4ba` | `#878c94` | Meta text, captions |
| `--text-on-inverse` | `#ffffff` | `#1c2024` | Text on `--bg-inverse` |
| `--accent` | `#0d74ce` | `#5aa4e6` | Inline text links + focus rings **only** |
| `--text-success` / `--border-success` | `#1a7f37` | `#4caf7d` | Functional success feedback |
| `--text-error` / `--border-error` | `#c5221f` | `#f28b82` | Functional error feedback |
| `--border-default` | `#e0e1e6` | `#343941` | Card/input borders |
| `--shadow-sm` | `0 3px 6px rgba(0,0,0,0.08)` | `0 3px 6px rgba(0,0,0,0.45)` | Whisper resting shadow |
| `--shadow-md` | `0 12px 32px rgba(0,0,0,0.10)` | `0 12px 32px rgba(0,0,0,0.55)` | Hover elevation |
| `--radius-sm` / `--radius-md` / `--radius-lg` | `6px` / `24px` / `9999px` | same | Buttons / containers & cards / pills |
| `--spacing-gap` / `--section-gap` | `1.5rem` / `clamp(96px, 10vw, 128px)` | same | Gaps / gallery vertical rhythm |
| `--transition-fast` / `--transition-normal` / `--ease-standard` | `150ms` / `300ms` / `cubic-bezier(0.4,0,0.2,1)` | same | All state changes |
| `--z-dropdown` / `--z-modal` / `--z-toast` | `100` / `200` / `300` | same | Layered components |
| `--font-base` | `'Inter', sans-serif` | same | Sole typeface |

* **Contrast Pairing (mandatory in every theme):** light backgrounds pair with dark text tokens, dark backgrounds pair with light text tokens. Verify this pairing in both Light and Dark modes.
* **Pure White Exception:** Never use `#ffffff` as a background — near-white surfaces use `#fefefe`. `#ffffff` is permitted only as text color on dark/black surfaces.
* **Monochrome Exception (explicit):** The UI is strictly grayscale; `--accent` is reserved for inline links and focus rings, and success/error/danger colors are permitted **only** as functional feedback (accessibility requirement), never as decoration.

### 1.3 Mandatory Dark Mode
* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` (default, prevents flash-of-wrong-theme) and a `.dark` override class placed after the media query in the cascade.
* **Theme Switching:** Backgrounds and text must flip purely via variables — no HTML restructuring.
* **Persistence:** `script.js` reads `localStorage` on load; if an explicit choice exists, apply the `.dark`/`.light` override class; otherwise defer to `prefers-color-scheme`.
* **Toggle Control:** A visible header toggle with `aria-pressed`, a dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme"), and Material Symbols `dark_mode` / `light_mode` icons.
* **Luminous-First Exception (explicit):** The source style is luminous-first, but Dark Mode is mandatory; adapt the identity to a Quasi-Black (`#1c2024`) canvas with inverted monochrome surfaces per the token table above.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Every flex container defaults to `align-items: center` unless a layout explicitly justifies an exception.
* All rows convert to columns on small viewports; **no horizontal scrolling at any breakpoint**.
* Use a single `.container` (max-width ~1120px, fluid inline padding) and `--section-gap` for gallery rhythm.

### 1.5 Framework: Tailwind CSS
* Use Tailwind CSS (Play CDN) for layout utilities only (flex, grid, gap, responsive prefixes). Map its config colors/radii/fonts to the CSS variables above.
* All themeable styling lives in `style.css` as a fixed component class set: `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`, `.btn-pill`, `.card`, `.badge`, `.input-group`, `.faq-item`, `.section`, `.container`, `.panel-inverse`, plus `.is-*` state classes. Never mix in BEM or any other naming convention.
* **Script Exception (explicit):** The Tailwind CDN `<script src>` and its minimal inline config object are the sole permitted addition to the single deferred `script.js` entry point.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Load Inter (weights 400;500;600;700;800;900) via Google Fonts `<link>` with preconnect; bind to `--font-base`. Inter is the only typeface.
* **Icons:** Google Material Symbols (Rounded) via Google Fonts. Inline SVGs, local icon files, and emoji-as-icons are all forbidden.
* **Type Scale (fluid, weight/tracking per spec):**

| Class | Size | Weight | Letter-spacing |
|---|---|---|---|
| `.display-xl` | `clamp(44px, 7vw, 64px)` | 900 | −3px at 64px (≈ −0.047em) |
| `.display-lg` | `clamp(36px, 5vw, 48px)` | 800 | −2.4px at 48px |
| `.display-md` | `clamp(30px, 4vw, 40px)` | 800 | −1.6px at 40px |
| `.heading-lg` | 28px | 700 | −0.8px |
| `.heading-md` | 20px | 700 | −0.3px |
| body | 17px | 400 | normal |

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Buttons
Style all states via classes; base `.btn` uses `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` with a 44×44px minimum touch target.
* **Default:** `.btn-primary` = `--primary` fill + `--text-on-inverse` text, `--radius-sm` (6px). `.btn-secondary` = `--secondary` fill, 1px `--border-default`, `--text-primary` text. `.btn-pill` modifier applies `--radius-lg` (9999px) — hero CTAs use this.
* **Hover:** Brightness shift + `--shadow-sm`, `cursor: pointer`.
* **Focus:** Distinct cobalt ring via `box-shadow: 0 0 0 3px` accent-derived ring; keyboard navigable.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading (`.is-loading`):** Disables interaction, blocks double-clicks, renders a CSS spinner or animated Material `progress` icon without changing button dimensions.
* **Disabled (`[disabled]` / `.is-disabled`):** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* **Success/Error (`.is-success` / `.is-error`):** Temporary feedback styles driven by `--text-success` / `--text-error`, announced via an `aria-live` region.
* **Danger:** `.btn-danger` must be visually distinct in **both** themes (functional-color exception).

### 2.2 Cards
* **Default:** `.card` = `--bg-secondary` fill, `--radius-md` (24px), 1px `--border-default`, `--shadow-sm`, flexbox layout.
* **Hover:** `transform: translateY(-2px)` + `--shadow-md`.
* **Focus-within:** Border highlights when a child link/button receives focus.
* **Loading (`.card--skeleton`):** Shimmer keyframe animation in CSS; no layout shift.
* **Empty State (`.card--empty`):** Structured fallback with a Material icon and guidance text. Define and ship all state classes in CSS even where the static page doesn't render every state.

### 2.3 Forms & Inputs
Structure: `.input-group` flex container wrapping a `<label>`, an input, and a dedicated error-feedback element.
* **States to style:** Empty, Focused (cobalt outline ring), Filled, Valid (success border + `check` icon), Invalid (error border, error text + `error` icon, `aria-live="polite"` announcement), Disabled, Read-only.
* Applied to the email capture in the Final CTA.

### 2.4 FAQ Accordion (in place of modals — no modals are in scope)
* Each item: `<button class="faq-trigger">` with `aria-expanded` + `aria-controls`, and a panel with `role="region"` + `aria-labelledby`.
* Material `expand_more` chevron rotates 180° on open; panel animates via the CSS `grid-template-rows: 0fr → 1fr` technique.
* Fully keyboard operable; respects `prefers-reduced-motion`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid `clamp()` sizing, no horizontal overflow, mobile-first breakpoints.
* **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; a `prefers-reduced-motion` block disables transforms, shimmer, and smooth scrolling.
* **Accessibility:** Skip-to-content link; semantic landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); logical heading order; contrast ≥ 4.5:1 in both themes; visible `:focus-visible` rings; never rely on color alone — pair icons with text for every state; `aria-live` regions for form errors, loading, and success feedback.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Destructive/Distinct Actions:** `.btn-danger` and destructive links remain distinct in both themes.

---

## 4. DELIVERABLES & OUTPUT FORMAT

* **Files:** `index.html`, `style.css`, `script.js`. No inline `<style>` blocks; no inline `<script>` beyond the sanctioned Tailwind CDN config (see 1.5); `script.js` loaded once with `defer`.
* **Naming:** One fixed kebab-case component set (Section 1.5) + Tailwind layout utilities. Never mix conventions.
* **Copy:** Write realistic, specific English copy for a cross-platform developer tool — no lorem ipsum. Placeholder content is permitted **only** for the hero product-screenshot frame (Section 5.2), which must be a neutral, CSS-built monochrome mock (no external images anywhere; testimonial avatars are initial-based pill circles).

---

## 5. PAGE SECTION SPECIFICATIONS

### 5.1 Sticky Navigation
Logo (Material `deployed_code` icon + wordmark), anchor links (Features, How It Works, Pricing, FAQ), theme toggle (1.3), and a `.btn-primary` CTA. Frosted `--bg-secondary` bar with `--border-default` bottom border. Mobile: hamburger (`menu`/`close` icons) toggling a dropdown panel with `aria-expanded`, `--z-dropdown`, closing on link click and `Esc`.

### 5.2 Hero
Gallery-spaced. A `.badge` pill tag (e.g., "Now with over-the-air updates"), a `.display-xl` headline in `--text-heading` (−3px tracking), a `--text-secondary` subhead, and two `.btn-pill` CTAs (`.btn-primary` "Start building" + `.btn-secondary` "Read the docs" with `arrow_forward` icon). Below: a `.card` containing a CSS-built, monochrome product-screenshot mock (browser dots + gray content blocks) — the only sanctioned placeholder; real screenshots would be the page's sole color source.

### 5.3 Features — 3 Cards
Section heading (`.display-md`) + intro line. Grid: 1 column mobile → 3 columns desktop. Each `.card`: a pill icon chip (`--radius-lg`, muted surface) with a Material Symbol (`devices`, `bolt`, `cloud_upload`), a `.heading-md` title, and a `--text-secondary` description. Hover/focus-within/skeleton states per 2.2.

### 5.4 How It Works — 3 Steps
Three steps, each with a black pill number chip ("01", "02", "03"), `.heading-md` title, and short description. Desktop: horizontal row connected by a `--border-default` line; mobile: vertical stack. Suggested copy: create a project → develop with instant previews → ship to app stores with OTA updates.

### 5.5 Testimonials
Three `.card` quotes: Material `format_quote` icon, quote text, and an author row (initials avatar in a `--radius-lg` circle, name in 600 weight, role in `--text-muted`). Strictly monochrome.

### 5.6 Pricing — 3 Tiers
Three `.card` tiers (e.g., Hobby $0, Pro $19/mo, Team $49/mo). Middle tier is featured: "Most popular" `.badge` pill, `--text-heading` border, `--shadow-md`, and a `.btn-primary`; other tiers use `.btn-secondary`. Feature lists use Material `check` icons. Prices use tight tracking and 800 weight.

### 5.7 FAQ
Five to six realistic questions in the accordion pattern (2.4), e.g., platforms supported, native code requirements, update shipping, offline support, billing.

### 5.8 Final CTA
An inverted `.panel-inverse` section (a class that locally flips `--bg-secondary`, `--text-primary`, `--border-default`, so child components adapt automatically): `--bg-inverse` background — black in Light mode, near-white in Dark mode. Contains a `.display-lg` headline, the `.input-group` email capture (2.3), and a `.btn-primary` submit demonstrating the full state flow: idle → `.is-loading` (spinner) → `.is-success` (check icon + confirmation announced via `aria-live`), or inline `.is-error` with message on invalid input. Include a one-line privacy microcopy in `--text-muted`.

### 5.9 Footer
`--bg-secondary` surface with 3–4 columns of secondary links (Product, Resources, Company, Legal) in `--text-secondary`, hovering to `--accent`. Social presence as text links with `arrow_outward` icons (no brand SVGs). Bottom bar: logo, copyright, and a `--text-muted` note.

---

## 6. JAVASCRIPT BEHAVIORS (`script.js`)

Implement **only** the following: (1) theme toggle with `localStorage` persistence, `prefers-color-scheme` fallback, `aria-pressed`/`aria-label` state, and icon swap; (2) mobile nav open/close; (3) FAQ accordion toggling; (4) email validation with inline error, button loading → success flow, and `aria-live` announcements; (5) optional IntersectionObserver scroll-reveal adding `.is-visible` — content must be visible by default without JS and fully disabled under `prefers-reduced-motion`. Use CSS `scroll-behavior: smooth` (with reduced-motion override) for anchor navigation. No other behavioral JS.

---

## 7. DEFINITION OF DONE

Zero inline styles; zero inline SVGs; all tokens variable-driven; dark mode complete with persisted toggle; every button/input/card state defined in CSS; all copy real English; keyboard-only operation verified; no horizontal scroll from 320px up; both themes pass contrast checks; only three files delivered.