Sanity Neon Structured demo
Sanity Neon Structured

A Sanity-inspired dark nocturnal landing page style with neon accents and structured layouts, tailored for headless CMS, content APIs, and data-driven developer tools.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 15.4 KB · 2114 words
# SYSTEM PROMPT — CODING AI

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-quality landing page in a single response** — no stubs, no TODOs, no clarifying questions. Make reasonable decisions and deliver the full code on the first attempt.

**Project:** "Sanity Neon Structured" — a nocturnal, structured-content CMS landing page (Sanity-inspired design language). Near-black canvas (#0b0b0b) as the natural environment. Pure achromatic gray scale with zero color undertone. Coral-red (#f36458) CTA buttons as vivid signals against the dark field. Electric blue (#0052ef) as the universal hover state. Neon green (display-p3) reserved for success signals. Waldenburg display font with extreme negative tracking (-4.48px at 112px). Pill-shaped primary buttons (99999px). IBM Plex Mono for technical labels. Dark border hierarchy (#0b0b0b → #212121 → #353535) creating subtle depth.

**Era:** 2024–2026 Structured Content CMS aesthetic.
**Mode:** Dark mode is the canonical, full experience (Light mode: Not Recommended).

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
All styling must live exclusively in a dedicated `style.css` file:

* **No Inline CSS:** The `style="..."` attribute is forbidden. No `<style>` blocks in the HTML. No inline event handlers (`onclick`, etc.).
* **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.
* **Minimal HTML Modifications:** HTML must remain clean, semantic, and style-agnostic — retheming the site must only require editing the CSS file.

**1.2 CSS Variables (`var(--...)`) & Theme Tokens**
Store all visual tokens in `:root`. Required palette mapping:

* **Backgrounds:** `--bg-primary: #0b0b0b` (canvas), `--bg-secondary: #151515` (elevated achromatic surface), `--bg-tertiary: #212121`.
* **Text:** `--text-primary: #fefefe` (never `#ffffff` where near-white is needed), `--text-secondary: #b9b9b9` (Silver), `--text-muted: #797979` (reserve for large/bold or decorative metadata only — it sits at ~4.5:1 contrast).
* **Accents:** `--primary: #f36458` (Coral — CTA signal), `--secondary: #0052ef` (Electric Blue — universal hover), `--text-success` = neon green defined as a display-p3 color (e.g., `color(display-p3 0.25 1 0.55)`) with an sRGB hex fallback (e.g., `#3dffa8`) applied via an `@supports (color: color(display-p3 0 1 0))` override, `--text-error: #f36458`.
* **Borders:** `--border-default: #212121`, `--border-strong: #353535`, `--border-error: #f36458`, `--border-success` = neon green. Use the achromatic border ladder for depth: darker (#0b0b0b) for inset lines on raised surfaces, #212121 default, #353535 for raised/hover edges.
* **Contrast Pairing (mandatory):** Dark backgrounds pair with light text tokens, light/coral fills pair with dark text. Enforce these verified pairs: `#fefefe` on `#0b0b0b` (~19:1), `#b9b9b9` on `#0b0b0b` (~10:1), `#0b0b0b` text on `#f36458` coral (~6.4:1), `#fefefe` on `#0052ef` blue (~6:1).
* **Shape & Elevation:** `--radius-sm: 6px`, `--radius-md: 6px` (cards/inputs/secondary buttons), `--radius-lg: 12px` (large panels), `--radius-pill: 99999px` (primary buttons only), `--shadow-sm`, `--shadow-md` (deep black shadows, e.g., `0 8px 24px rgba(0,0,0,0.45)`).
* **Motion & Spacing:** `--spacing-gap` plus a defined spacing scale, `--transition-fast: 120ms`, `--transition-normal: 240ms`, `--ease-standard: cubic-bezier(0.22, 1, 0.36, 1)`.
* **Elevation/Stacking:** `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 2000` to prevent overlap conflicts.
* **Type tokens:** `--font-display`, `--font-base`, `--font-mono`, `--tracking-display: -0.04em` (equals the required **-4.48px at 112px**, and scales proportionally at smaller display sizes).

**1.3 Dark Mode (Nocturnal-First)**
Dark mode must be fully defined as the default experience:

* The `:root` tokens above define the nocturnal theme. Mirror them under `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>` so every resolution path renders the nocturnal palette — the site must never flash an unstyled light state.
* **Persistence:** On load, `script.js` resolves the theme via `localStorage`, falling back to `prefers-color-scheme` on first visit; all resolution paths resolve to the dark palette.
* **Theme Toggle Exception:** Per the theme specification ("Light: ✗ Not Recommended / Dark: ✓ Full"), this build ships **dark-only** — do not render a light/dark toggle; structure every color through variables so a future light theme requires zero markup changes.

**1.4 Flexbox Layout & Mobile-First Alignment**
Build all layout structures with Flexbox:

* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
* **Justified exceptions for this build:** card/testimonial/pricing rows use `align-items: stretch` (equal-height cards); card interiors use `align-items: flex-start` (text-heavy stacks).
* **Mobile-First:** All rows convert to columns below ~640px. Use fluid `clamp()` sizing and a max-width container (~1200px). Zero horizontal overflow at any viewport from 320px up.

**1.5 Styling Framework**
No framework was requested — use **clean custom CSS in `style.css` organized with `@layer`** (tokens → base → components → utilities). All reusable patterns must be generic component classes (`.btn`, `.card`, `.input-group`, `.section`, `.badge`) driven by CSS variables.

**1.6 Typography & Icons (Google Fonts Mandatory)**
Load all fonts and icons from Google Fonts via `<link>` tags (with `preconnect`):

* **Text:** `Waldenburg` (weights 400–700) as `--font-display`; `IBM Plex Sans` (400/500/600) as `--font-base`; `IBM Plex Mono` (400/500) as `--font-mono`. **Exception:** the "system-ui" value from the technical snippet may appear only as the final fallback in each font stack, never as the primary font.
* **Display treatment:** Waldenburg for all headings with `letter-spacing: -0.04em`; hero `h1` scales via `clamp()` up to ~112px on desktop (e.g., `clamp(2.75rem, 8vw, 7rem)`), keeping glyphs legible — tracking tightens with size, never letting characters collide at small sizes.
* **Mono discipline:** IBM Plex Mono for technical labels only — section index labels, step numerals, metadata, schema/code preview text, pricing period labels, footer microcopy. Mono labels render small, uppercase, with slightly open tracking (~0.08em) to contrast the tight display type.
* **Icons:** Google Material Symbols (Rounded set) only. Raw inline SVGs and local icon files are forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (`.btn`)**
All states styled via CSS classes; no JS-driven style changes:

* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px, `transition: var(--transition-fast) var(--ease-standard)`, `cursor: pointer`.
* **Primary (`.btn--primary`):** `border-radius: var(--radius-pill)` (99999px pill), background `--primary` coral, text `#0b0b0b` (dark-on-light pairing), semibold.
* **Secondary (`.btn--secondary`):** `border-radius: var(--radius-sm)`, 1px solid `--border-strong`, transparent background, text `--text-primary`.
* **Hover (universal electric blue law):** Primary background transitions to `--secondary` electric blue with `#fefefe` text; Secondary gains an electric blue border plus a translucent blue tint (`rgba(0,82,239,0.12)`) while text stays `#fefefe`. Every interactive element on the page (links, summaries, icons, nav items) must incorporate the `#0052ef` signal on hover via fill, border, underline, or icon — while text contrast stays ≥ 4.5:1.
* **Focus:** Visible `:focus-visible` ring — 2px `outline` in `--secondary` (or `#fefefe`) with 3px offset.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading (`.btn--loading`):** `pointer-events: none`, `aria-busy="true"`, an animated rotating Material Symbol `progress` icon, pill dimensions unchanged; double-clicks impossible.
* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`, no hover/active transforms.
* **Success (`.btn--success`):** neon green fill with `#0b0b0b` text. **Error (`.btn--error`):** coral fill with `#0b0b0b` text. Always pair with an icon — never color alone.
* **Destructive:** No destructive action exists on this landing page; if one is ever added, define `.btn-danger` as visually distinct (coral outline treatment) with a confirm affordance.

**2.2 Card Component (`.card`)**
Used by Features, Testimonials, and Pricing:

* **Default:** Flex column, `align-items: flex-start` (justified exception), background `--bg-secondary`, 1px `--border-default`, `border-radius: var(--radius-md)`, generous padding, `--shadow-sm`.
* **Hover:** border shifts to `--border-strong` plus `transform: translateY(-2px)` and `--shadow-md`; contained icons/links shift toward electric blue.
* **Focus-within:** border shifts to `--secondary` when a child link/button receives focus.
* **Loading (Skeleton):** define `.skeleton` with an achromatic shimmer keyframe and reserved heights — no layout jumps.
* **Empty State:** if any dynamic area is ever added, provide a structured fallback with a Material Symbol and guidance text.

**2.3 Form & Input (`.input-group`)**
Required for the Final CTA email capture:

* **Structure:** a `<form>` wrapping a flex-column `.input-group` containing: `<label>` (mono, uppercase), `<input type="email" required>`, and a dedicated error container holding a Material Symbol plus message text — wired with `aria-describedby`, `aria-invalid`, and an `aria-live="polite"` region.
* **States (all CSS-class driven):** empty; focused (electric blue ring); filled; valid (`.is-valid`: neon green border + check icon); invalid (`.is-invalid`: coral border, visible error message); disabled; read-only.
* **Submit flow:** click → `.btn--loading` for ~800ms → success (neon green confirmation message announced via `aria-live`) or error for invalid email. Prevent double submissions.

**2.4 Modal / Popup (Conditional)**
No modal is required for this build. If one is added (e.g., a demo video), it must: animate open/close with CSS transitions, use a centered flex overlay with `rgba(11,11,11,0.7)` backdrop, a Material Symbol close button, keyboard focus trapping, closing via `Esc` and overlay click, and `z-index: var(--z-modal)`.

**2.5 Page Sections & Content Requirements**
Author all user-facing copy in **English**, realistic and confident (no lorem ipsum). Invent a short product brand name (e.g., "Strukt") and keep it consistent. Section order:

* **a) Sticky Header:** brand wordmark in Waldenburg with tight tracking and a coral punctuation accent; anchor nav links; primary coral pill CTA "Get started"; `#0b0b0b` background with a `#212121` bottom border. Mobile: a Material Symbol `menu` button toggles a disclosure panel — `aria-expanded`, `aria-controls`, keyboard operable, `z-index: var(--z-dropdown)`.
* **b) Hero:** mono eyebrow label (e.g., `[ STRUCTURED CONTENT CMS ]`); `h1` in Waldenburg up to 112px with -0.04em tracking; subheadline in `--font-base` at `--text-secondary`; dual CTAs (coral pill + outline secondary). Include a CSS-only "schema preview" panel: `--bg-secondary` surface, mono field rows (type, title, slug, array), the dark border ladder, and a neon green "validated" status dot — built purely from markup and CSS, no images. Optional achromatic CSS-gradient grid backdrop.
* **c) Features (3 cards):** section header pattern = mono index label ("01 — Features") + `h2`. Flex row (equal-height) → column on mobile. Each card: Material Symbol icon (e.g., `account_tree`, `bolt`, `sync`), `h3`, description, mono micro-label. Topics: structured schemas, real-time collaboration, flexible content APIs.
* **d) How It Works (3 steps):** oversized IBM Plex Mono numerals 01 / 02 / 03 connected by 1px `#212121` rules; each step has a title and short text; stacks vertically on mobile.
* **e) Testimonials (3 cards):** quote, author name, role in mono, and an initials-avatar in a 1px `#353535` circle (no images).
* **f) Pricing (3 tiers):** Free / Pro (highlighted) / Scale. Pro card: 1px coral border, mono "MOST POPULAR" tag, subtle elevation. Prices in Waldenburg display with mono "/ month" labels. Feature lists use neon green Material Symbol `check` icons. CTAs: coral pill on Pro, secondary outline on the others.
* **g) FAQ (5–6 items):** native `<details>`/`<summary>` accordions separated by 1px `#212121` rules; summary hover carries the electric blue signal; Material Symbol `expand_more` rotates 180° on `[open]` via CSS; CSS-only open/close transition; fully keyboard accessible without JS.
* **h) Final CTA:** full-width panel on `--bg-tertiary` with a coral top border; display headline (tight tracking); the email capture form per 2.3 with a primary pill submit; a secondary "Talk to sales" text link.
* **i) Footer:** top border `#212121`; flex columns collapsing to a stack on mobile; brand + one-line tagline; secondary link groups (Product, Resources, Company, Legal) in Silver with electric-blue underline hover; Material Symbol social icons with `aria-label`s; mono microcopy line ("© 2025 — All rights reserved").

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** fluid sizing, responsive breakpoints, zero horizontal overflow from 320px up.
* **Smooth Animations:** apply `transition: var(--transition-normal) var(--ease-standard)` to all state changes; under `@media (prefers-reduced-motion: reduce)` collapse transitions/animations to near-zero and remove transforms.
* **Accessibility (a11y):** skip-to-content link; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`); a single `h1`; each section labeled via `aria-labelledby`; full keyboard operability (nav menu, accordion, form); visible `:focus-visible` everywhere; enforce the verified contrast pairs in 1.2; never rely on color alone — every state pairs an icon and/or text; use `aria-live` regions for all dynamic feedback.
* **Mandatory Visual Feedback:** every click, hover, focus, and submission triggers a visible state change.
* **Signal Discipline:** neon green only for success semantics (validation, pricing checks, status dot, success feedback) — never decoration. Coral reserved for CTAs, errors, and the single "MOST POPULAR" highlight. Electric blue only as the hover/interactive signal.
* **Selection styling:** `::selection` uses coral background with `#0b0b0b` text.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** exactly three files — `index.html`, `style.css`, `script.js`. A single `<script src="script.js" defer></script>` in the HTML; no inline script blocks, no inline styles, no inline handlers.
* **Fonts:** one Google Fonts `<link>` request (with `preconnect`) covering Waldenburg, IBM Plex Sans, IBM Plex Mono, and Material Symbols Rounded.
* **Naming Convention:** consistent BEM throughout (`.card`, `.card__title`, `.btn--primary`, `.input-group__error`). Never mix conventions.
* **JavaScript (vanilla, deferred):** theme resolution/persistence per 1.3; mobile menu toggle; form state machine (loading → success/error with `aria-live`); optional `IntersectionObserver` scroll-reveal animations (disabled under reduced-motion). No frameworks, no console errors.
* **Copy:** realistic English product copy for a structured-content CMS (schemas, real-time editing, content APIs, versioning, collaboration); plausible testimonial authors; sensible pricing features and FAQ answers. No lorem ipsum; no unrequested placeholder content.
* **Output the complete code for all three files in a single response.** The build must be finished on the first attempt.