MongoDB Forest Neon demo
MongoDB Forest Neon

A dark forest-toned landing page with neon green accents inspired by MongoDB's branding, designed for databases, data infrastructure, and developer platforms.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 13.1 KB · 1859 words
# System Prompt: Build the "MongoDB Forest Neon" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Produce the complete, final, production-ready code in a single attempt — no partial output, no follow-up questions.

**Objective:** Build a full landing page in the **MongoDB Forest Neon** theme: a deep forest teal-black canvas (`#001e2b` — forest-dark, not space-dark), a single electric bioluminescent neon-green accent (`#00ed64`), editorial serif hero headlines, technical monospace labels, and a signature dual-mode rhythm of dark-teal sections alternating with light sections. The product is a document database. **All user-facing copy must be written in English.**

**Sections to build:** Header (for navigation + theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 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/ID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.
- **Minimal HTML Modifications:** Markup stays clean, semantic, and styling-agnostic — restyling the site must require editing only the CSS file.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root`, overridden per theme mode:
- **Required tokens:** `--primary: #00ed64` (neon MongoDB green), `--secondary: #006cfa` (action blue), `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Theme palette tokens:** `--forest-black: #001e2b`, `--green-deep: #00684a`, `--white: #ffffff`, `--blue-hover: #3860be`, `--teal-gray: #b8c4c2` (secondary text on dark surfaces), `--cool-gray: #5c6c75` (secondary text on light surfaces), plus `--bg-section-dark` and `--bg-section-light` driving the dual-mode section rhythm.
- **Contrast Pairing:** Every light background token pairs with dark text tokens and every dark background token with light text tokens — enforced in every theme mode. On dark teal surfaces, text is `#ffffff` / `#b8c4c2`; on light surfaces, text is `#001e2b` / `#5c6c75`.
- **Accent Contrast Rule:** Neon `#00ed64` is used only on dark-teal backgrounds (text, borders, glows, underlines). On light sections, all green accents switch to `#00684a`. Never place `#00ed64` text on white.
- **Light Mode Background:** Never use pure `#ffffff` for page or section backgrounds — use `#fefefe`. Reserve `#ffffff` for text on dark surfaces and card surfaces inside dark sections.
- **Radius:** `--radius-sm: 8px`, `--radius-md: 16px` (cards), `--radius-lg: 24px`, `--radius-pill: 100px` (buttons).
- **Shadows (teal-tinted):** `--shadow-sm: rgba(0,30,43,0.08) 0 8px 20px`, `--shadow-md: rgba(0,30,43,0.12) 0 26px 44px` (the signature elevation).
- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- **Stacking:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`.

**1.3 Mandatory Dark Mode Support (Dual-Mode)**
- **Two-Layer Theming:** (a) the design's signature alternation of dark-teal and light sections, and (b) a full site-wide light/dark theme with a toggle. Both must work simultaneously.
- **Implementation:** Define light-mode tokens in `:root` and dark-mode overrides under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`. In dark mode, the "light" sections become an elevated teal derived from `#001e2b` (e.g., `#0a3040`); in light mode, dark sections keep `#001e2b`. Switching modes must never require HTML restructuring.
- **Persistence:** Theme choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit. Apply the stored theme before first paint to avoid a flash of the wrong theme.
- **Toggle Control:** A visible pill button in the header with a Google Material icon (`dark_mode` / `light_mode`), correct `aria-pressed` state, and `aria-label` ("Switch to dark mode" / "Switch to light mode").

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is justified in a CSS comment.
- **Mobile-Friendly First:** All multi-column rows (features, steps, testimonials, pricing, footer columns) collapse to a single column below 768px. No horizontal scrolling at any viewport.
- Use fluid type via `clamp()`; the hero headline reaches 96px on desktop and scales down gracefully.

**1.5 Framework Default**
Use Tailwind CSS (CDN acceptable) or clean custom CSS. Either way, every utility must map back to the CSS variables above or to generic reusable class names (`.btn`, `.card`, `.section`, `.section--dark`, `.section--light`, `.input-group`). Never mix conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Google Fonts:** Load **Source Code Pro** from Google Fonts and bind it to `--font-label`.
- **Exception Clauses (per theme spec):** The hero serif is **Georgia** (system font, no import required) bound to `--font-hero`, and body text uses the **system-ui** stack bound to `--font-base` — both are explicit, allowed exceptions to the Google Fonts requirement.
- **Hero:** Georgia, weight 400, up to 96px, line-height ~1.05 — editorial authority.
- **Labels:** Source Code Pro, uppercase, letter-spacing 1px–3px, 12–13px — used for eyebrow labels, section kickers, badges, step numbers, and tier names, evoking database field names.
- **Body:** weight 300 (light), 16–18px, line-height 1.6.
- **Icons:** Google Material Symbols only. Inline SVGs, local icon files, and emoji-as-icons are forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (Pill)**
Base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-pill); min-height: 44px; padding: 0 32px; font-weight: 500`. All states via CSS classes:
- **Variants:** `.btn--primary` (neon `#00ed64` fill + `#001e2b` text on dark sections; `#00684a` fill + `#ffffff` text on light sections), `.btn--outline` (transparent with a 1.5px `#00ed64` border on dark surfaces / `#00684a` border on light surfaces), `.btn--ghost` (text link with a green underline on hover).
- **Hover:** brightness/shadow shift with `cursor: pointer`; primary pills may gain a subtle neon glow (`box-shadow` with `#00ed64` alpha) — the bioluminescent signature.
- **Focus:** Distinct ring via `outline` + `box-shadow` using `--secondary` or green tokens; visible in both modes.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading:** `.is-loading` disables pointer events, prevents double-clicks, and renders a CSS spinner or animated Material icon without changing button dimensions.
- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
- **Success/Error:** Temporary feedback styles driven by `--text-success` / `--text-error` (used by the Final CTA form submit).

**2.2 Card Component**
- **Default:** Flexible flexbox layout, `background: var(--bg-secondary)`, `border: 1px solid var(--border-default)`, `border-radius: var(--radius-md)` (16px), resting shadow `--shadow-sm`.
- **Hover:** `transform: translateY(-2px)` plus elevation shift to `--shadow-md` (interactive cards only).
- **Focus-within:** Card border highlights when a child link/button receives focus.
- **Loading (Skeleton):** Define shimmer animation classes for card content to prevent layout jumps if content loads asynchronously.
- **Empty State:** Structured fallback layout with a Material icon and clear guidance text for any dynamic region.

**2.3 Form & Input Requirements (Final CTA Email Capture)**
- **Structure:** `.input-group` flex container wrapping a `<label>`, an `<input type="email">`, and a dedicated error/success feedback container.
- **States:** Empty, Focused (green/blue outline ring), Filled, Valid (`--border-success` + check icon), Invalid (`--border-error`, red text, error icon, message), Disabled, Read-only.
- **Feedback:** Validation messages render in an `aria-live="polite"` region; never rely on color alone — pair color with icon and text.

**2.4 FAQ Accordion & Overlay Requirements**
- **The FAQ must be an accordion, not a modal:** each item is a `<button aria-expanded>` (or `<details>/<summary>`) controlling its panel; a chevron Material icon rotates 180° on open; open/close animates via CSS (`grid-template-rows` or height transition); the entire header is keyboard operable with a visible focus ring.
- **No modals are required on this page.** If an overlay is ever introduced, it must be a centered flex dialog with a backdrop, Material icon close button, focus trapping, and `Esc`/overlay-click closing — but do not add one unless explicitly requested.

---

## 3. PAGE STRUCTURE — SECTION-BY-SECTION REQUIREMENTS

Every section shares: a Source Code Pro uppercase kicker with wide tracking, a Georgia headline (32–48px), weight-300 body copy, and the signature green underline — a short `#00ed64` (dark sections) / `#00684a` (light sections) underline bar as a recurring decorative motif. Alternate section themes exactly as prescribed:

1. **Header (sticky):** Brand wordmark (invent a fitting English brand, e.g., "CanopyDB"), anchor links to all sections, and the theme toggle pill. On mobile, collapse links behind a Material icon menu button with `aria-expanded`/`aria-controls`. Header background adapts per theme mode with translucency/blur.
2. **Hero (dark teal):** Source Code Pro eyebrow label (e.g., "DOCUMENT DATABASE · BUILT FOR SCALE"), Georgia 96px headline with one keyword wrapped in a neon `#00ed64` underline decoration, weight-300 subheadline, and two pill CTAs (primary + outline). Add a CSS-only bioluminescent glow: a soft radial gradient of `#00ed64` at low alpha behind the headline — pure CSS, no images.
3. **Features — 3 cards (light section):** Each card has a Material icon inside a neon-ringed circle, a Source Code Pro mini-label, a Georgia card title, and a weight-300 description. Follow §2.2.
4. **How It Works — 3 steps (dark teal section):** Steps numbered `01 / 02 / 03` in Source Code Pro with wide tracking, connected by a thin `#00ed64` line (CSS pseudo-element) that hides on mobile; each step has an icon, title, and description.
5. **Testimonials (light section):** Three quote cards with the `format_quote` Material icon, a weight-300 quote, an initials-based avatar circle (CSS only, no external images), and name + role in Source Code Pro small caps.
6. **Pricing — 3 tiers (dark teal section):** Three cards; the middle "Most Popular" tier is visually elevated — a forest-black card with a 2px `#00ed64` border, a neon Source Code Pro badge, and the signature `--shadow-md`. Each tier: Source Code Pro tier label, Georgia price, feature list with `check` Material icons, and a pill CTA (the highlighted tier gets the primary neon pill).
7. **FAQ (light section):** 5–6 real, thematically written questions about the database product; accordion per §2.4.
8. **Final CTA (dark teal with neon glow):** Georgia headline, weight-300 subcopy, and the email capture form per §2.3, whose primary pill submit shows loading → success feedback.
9. **Footer (deepest teal, e.g., `#00141d`):** Brand + tagline, secondary link columns (Product, Company, Resources, Legal), social links as Material icons, and a copyright line. Links use `--secondary` blue with `--blue-hover` on hover, with verified contrast on dark surfaces.

---

## 4. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** Fluid `clamp()` type scale and responsive breakpoints with zero horizontal overflow. Anchor navigation uses smooth scrolling with `scroll-margin-top` compensating for the sticky header.
- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable transforms and glow pulses).
- **Accessibility (a11y):** Sufficient contrast in both light and dark modes; never communicate state by color alone; semantic HTML5 (`header`, `main`, `section`, `nav`, `footer`); correct ARIA roles/labels on the theme toggle, mobile menu, accordion, and form feedback; logical DOM/focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, submit success).
- **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
- **Destructive Actions:** Any `.btn-danger` must be visually distinct in both themes (include the class definition even if unused on this page).

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry point (`<script src="script.js" defer></script>`).
- **Naming Convention:** One consistent BEM convention (`.card`, `.card__title`, `.card--featured`, `.btn--primary`) across the entire deliverable — never mix conventions.
- **Copy:** All user-facing copy in English, real and thematically written for a document database product (collections, documents, queries, horizontal scale) — no lorem ipsum.
- **No Unrequested Placeholders:** Every section is fully populated with themed content; placeholders are allowed only where content was genuinely unspecified.