[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-596-Figma-Vibrant-Monochrome":3},"# SYSTEM PROMPT — CODING AGENT BUILD: \"FIGMA VIBRANT MONOCHROME\" LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready landing page on the first attempt — full `index.html`, `style.css`, and `script.js` delivered in a single response. No partial builds, no scaffolding, no follow-up questions.\n\n**Objective:** Build a single-page marketing site for a fictional collaborative design tool (invent a coherent product name — e.g., \"Kern\" — and write real, specific English copy for it; no lorem ipsum). The visual theme is **\"Figma Vibrant Monochrome\"**: strictly black-and-white interface chrome, vibrant multi-color gradients reserved exclusively for product content, variable-font typography with negative tracking, and pill\u002Fcircular geometry referencing the Figma editor aesthetic (2024–2026 design-tool era).\n\n**Page Sections (in this order):** Sticky Header\u002FNav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ (accordion) → Final CTA (email capture) → Footer with secondary links.\n\n---\n\n## DESIGN SPECIFICATION — \"FIGMA VIBRANT MONOCHROME\"\n\n**Chrome Discipline (critical rule):** Every structural and navigational element — nav, buttons, cards, text, borders, dividers, footer — uses ONLY `#000000`, `#ffffff`, and alpha variants of those two values. Vibrant color exists exclusively inside product-content visuals (the hero gradient canvas and product-mock imagery). Never apply gradient colors to headlines, buttons, or chrome.\n\n**Color Tokens (translate into `:root` variables):**\n- `--primary`: `#000000` (Pure Black) · `--secondary`: `#ffffff` (Pure White) · `--on-primary`: `#ffffff` (text on primary surfaces)\n- `--bg-primary`: `#ffffff` (Pure White) · `--bg-secondary`: `rgba(0,0,0,0.03)` (subtle alpha-black tint)\n- `--text-primary`: `#000000` · `--text-secondary`: `rgba(0,0,0,0.62)` (alpha-black, never an independent gray hue)\n- `--glass-dark`: `rgba(0,0,0,0.08)` (Dark Glass — hairlines, borders, hover fills on light chrome) · `--glass-light`: `rgba(255,255,255,0.16)` (Light Glass — panels\u002Foverlays sitting on the gradient or dark surfaces)\n- `--border-default`: `rgba(0,0,0,0.08)`\n- Semantic feedback: `--text-success`: `#0ACF83` · `--text-error`: `#E5484D` · `--border-success`: `#0ACF83` · `--border-error`: `#E5484D` (used only in validation\u002Ffeedback states, always paired with an icon — never color alone)\n- Content-only accents: `--accent-green`: `#0ACF83` (Electric Green) · `--accent-yellow`: `#FFD60A` (Bright Yellow) · `--accent-purple`: `#A259FF` (Deep Purple) · `--accent-pink`: `#FF2E88` (Warm Pink) · `--hero-gradient`: one flowing multi-stop gradient through all four (e.g., ~115deg, green → yellow → purple → pink)\n\n**Typography:**\n- `--font-base`: **Inter** (Google Fonts, full variable weight axis 100–900 loaded) · `--font-mono`: **JetBrains Mono** (Google Fonts)\n- Unusual weight stops, mapped: **320** (hero\u002Flead paragraph), **330** (body text), **340** (card body), **400** (display headline), **450** (buttons, nav links, subheads), **480** (card\u002Fpricing titles), **540** (wordmark, prices, emphasis)\n- Display headline: **86px, weight 400, line-height 1.0, letter-spacing -1.72px** — implement with `clamp()` for mobile (never below ~40px)\n- Negative tracking scale on all sans text: -1.72px @ display · -1.1px @ h2 · -0.5px @ h3 · -0.1px @ body\n- Monospace labels: uppercase, **positive** letter-spacing (+0.08em), small size — used for eyebrows, step numerals (01\u002F02\u002F03), column labels, chips\n- Apply `font-feature-settings: 'kern'` globally\n\n**Geometry & Effects:**\n- `--radius-pill`: `50px` (all standard buttons) · `--radius-circle`: `50%` (icon buttons, avatars) · `--radius-sm`: `8px` · `--radius-md`: `16px` · `--radius-lg`: `24px` (cards, panels)\n- Focus indicator: **2px dashed outline, offset 4px** (Figma editor selection reference) — `:focus-visible` only\n- `--shadow-sm`: soft monochrome · `--shadow-md`: elevated monochrome · `--spacing-gap`: `1.5rem` · `--transition-fast`: `120ms` · `--transition-normal`: `240ms` · `--ease-standard`: `cubic-bezier(0.25, 0, 0.4, 1)` · `--z-dropdown`: `100` · `--z-modal`: `200` · `--z-toast`: `300`\n\n**Section Direction:**\n- **Header:** sticky; wordmark (weight 540, negative tracking); anchor links; circular theme-toggle icon button; black pill \"Get started\" CTA; hairline `--border-default` bottom. Below 768px, links collapse behind a circular menu button toggling an absolutely-positioned dropdown panel (`--z-dropdown`, closes on `Esc`\u002Foutside click, `aria-expanded` on trigger).\n- **Hero:** mono uppercase eyebrow; 86px display headline; supporting paragraph (weight 320, alpha-black); primary pill + secondary pill with icon. Hero visual = product mock: monochrome editor chrome (toolbar, floating layer-list panel, dashed 2px selection frame) floating over the vibrant `--hero-gradient` canvas; panels on the gradient use `--glass-light` overlays. Optional flourish: small name-labeled multiplayer cursor chips with gradient dots (product content — color permitted). Optional slow gradient hue-shift animation, disabled under `prefers-reduced-motion`.\n- **Features (3 cards):** one card per capability (e.g., real-time multiplayer, design tokens\u002Fvariables, dev handoff); each with a circular icon chip (Material Symbol), mono label, title (weight 480), body (weight 340).\n- **How It Works (3 steps):** mono numerals 01\u002F02\u002F03, connected by a dashed hairline; flex row → column on mobile.\n- **Testimonials (3):** quote (weight 340–450), circular initials avatar (monochrome), name, mono role label.\n- **Pricing (3 tiers):** free \u002F pro \u002F team with real prices; middle tier visually inverted (black card, white text in light mode; inverts with theme) with a mono \"Most popular\" chip; segmented Monthly\u002FYearly pill toggle (`aria-pressed`, animated price swap, \"Save 20%\" chip on yearly).\n- **FAQ:** 5–6 real questions about the fictional product, accordion per §2.4.\n- **Final CTA:** inverted monochrome section (black background, white display text in light mode; inverts in dark); email capture form per §2.3 (pill input + pill submit); success toast (`--z-toast`).\n- **Footer:** 4 columns of secondary links (Product, Resources, Company, Legal) with mono uppercase column labels; circular social icon buttons (use available Material Symbols such as `alternate_email`, `rss_feed`, `code`, `public` — brand icons are not in Material Symbols); bottom bar with wordmark and copyright.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE TO FOLLOW\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n- Target all design properties, layout rules, and states via class\u002FID selectors only.\n- Keep HTML semantic and styling-agnostic: `header`, `nav`, `main`, `section`, `footer`, one `h1`, logical heading hierarchy, `lang=\"en\"`.\n\n**1.2 CSS Variables & Theme Tokens**\n- Every visual token defined above MUST live in `:root` as a CSS variable — including the full mandatory set: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-success`, `--border-error`, `--radius-sm\u002Fmd\u002Flg`, `--shadow-sm\u002Fmd`, `--spacing-gap`, `--transition-fast\u002Fnormal`, `--ease-standard`, `--z-dropdown\u002Fmodal\u002Ftoast`.\n- **Contrast pairing:** any light background token must pair with a dark text token and any dark background token with a light text token — enforce this pairing in every theme, not just the default.\n- Light-mode backgrounds must not default to pure white; use `#fefefe` where a near-white is needed. **Exception:** this theme's monochrome chrome explicitly mandates pure `#ffffff` as the light-mode background token; the `#fefefe` substitution is waived for this build only.\n\n**1.3 Mandatory Dark Mode Support**\n- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class: `--primary` ↔ `#ffffff`, `--bg-primary` ↔ `#000000`, `--bg-secondary` ↔ `rgba(255,255,255,0.04)`, `--text-primary` ↔ `#ffffff`, `--text-secondary` ↔ `rgba(255,255,255,0.64)`, `--border-default` ↔ `rgba(255,255,255,0.16)` (Light Glass becomes the hairline), `--on-primary` ↔ `#000000`; shadows deepen; the hero gradient and accents remain unchanged. Background\u002Ftext swaps must require zero HTML restructuring.\n- Persist choice via `localStorage`, fall back to `prefers-color-scheme` on first visit, and provide the visible circular toggle with correct `aria-pressed` and `aria-label` state plus icon swap.\n- **Exception:** the source style spec marks dark mode \"not recommended\"; it must still ship exactly as defined above (a strict monochrome inversion with the gradient preserved) — light mode remains the default presentation.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structure with Flexbox. **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified and documented with a CSS comment (permitted exceptions: card interiors and footer columns use `flex-start`; FAQ triggers use `space-between` for `justify-content`).\n- Mobile-first: rows convert to columns below 768px; fluid sizing via `clamp()`; no fixed widths that break 320px viewports; **no horizontal scrolling ever**.\n\n**1.5 Framework & CSS Architecture**\n- Use clean custom CSS (the sanctioned alternative to Tailwind) organized in native `@layer` cascade: `tokens` → `base` → `components` → `utilities`. All components map back to the CSS variables via generic reusable classes (`.btn`, `.card`, `.input-group`); never hardcode hex values in component rules when a token exists.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Inter (full variable weight axis)** and **JetBrains Mono** from Google Fonts via `\u003Clink>` tags with `preconnect`.\n- All icons use **Google Material Symbols (Outlined)** via the Google-hosted stylesheet. **Inline SVGs and local icon files are forbidden.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\n- Base `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` border-radius `--radius-pill`; minimum touch target 44×44px (pills ~48px tall); weight 450, letter-spacing -0.1px; transition `var(--transition-normal)`.\n- Variants: `.btn--primary` (background `--primary`, color `--on-primary`), `.btn--secondary` (background `--secondary`, 1px `--border-default` border), `.btn--icon` (circular, `--radius-circle`, 44–48px, Material Symbol centered), `.btn--danger` if any destructive action exists.\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`. **Focus:** `:focus-visible` dashed 2px ring (offset 4px) via CSS variables. **Active:** `transform: scale(0.97)`. **Loading (`.is-loading`):** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Symbol without changing button dimensions. **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Success\u002FError:** temporary feedback classes driven by `--text-success` \u002F `--text-error`.\n\n**2.2 Card Component**\n- Base `.card`: flexbox layout, `--bg-secondary` or white surface, 1px `--border-default` border, `--radius-lg`, `--shadow-sm`.\n- **Hover:** `transform: translateY(-2px)` + shift to `--shadow-md`. **Focus-within:** border highlights to `--text-primary` when a child link\u002Fbutton receives focus. **Loading (skeleton):** define a shimmer keyframe class in CSS for reuse. **Empty state:** structured fallback with a Material Symbol and guidance text.\n- Variants: `.card--feature`, `.card--testimonial`, `.card--pricing`, `.card--pricing--featured` (inverted monochrome: `--primary` background, `--bg-primary` text, inverting with theme).\n\n**2.3 Form & Input (Final CTA email capture)**\n- Structure `.input-group`: flex container wrapping a `\u003Clabel>` (mono, uppercase, positive tracking), the input (pill radius), and a dedicated error feedback container.\n- States, all class-driven: empty, focused (dashed ring), filled, valid (`--border-success` + check Material Symbol), invalid (`--border-error`, `--text-error` message, error icon, `aria-invalid`), disabled, read-only.\n- Submit flow: validate on submit → invalid shows error message inside an `aria-live=\"polite\"` region → valid enters button loading state (~900ms simulated) → success state with check icon + toast confirmation. Never allow double submission.\n\n**2.4 FAQ Accordion (Disclosure Widget)**\n- Each item: `\u003Cbutton>` trigger (flex, `aria-expanded`, `aria-controls`), chevron Material Symbol rotating 180°, and a panel animated via CSS only (e.g., `grid-template-rows: 0fr → 1fr` transition with `overflow: hidden` inner wrapper).\n- Fully keyboard operable; dashed focus ring on triggers; animation disabled under `prefers-reduced-motion`. **Do not add modals or popups anywhere in this build** — the FAQ uses this accordion pattern only.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type via `clamp()`, breakpoints without horizontal overflow, `scroll-margin-top` on sections to offset the sticky header.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; scroll-reveal fades gated behind a `.js` class added by script (content must be fully visible without JavaScript); `scroll-behavior: smooth` only inside `@media (prefers-reduced-motion: no-preference)`; honor `prefers-reduced-motion` for every animation including the gradient and accordion.\n- **Accessibility:** sufficient contrast in both modes (alpha-secondary text must maintain ≥ 4.5:1); never rely on color alone — pair every semantic state with an icon and\u002For text; semantic HTML5 landmarks; correct ARIA roles\u002Flabels on the toggle, menu, accordion, and toast; logical DOM\u002Ffocus order; full keyboard operability; a visually-hidden-until-focused skip link; `aria-live` regions for form errors, loading, and toast feedback.\n- **Mandatory visual feedback:** every click, hover, toggle, and submission produces a visible state change.\n- **Destructive actions:** if any exist, `.btn--danger` must be visually distinct in both light and dark themes.\n\n---\n\n## 4. DELIVERABLES & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference; no inline styles; no external images — build all visuals (gradient canvas, mock UI, avatars) with CSS geometry.\n- **Naming:** strict BEM throughout (`.btn`, `.btn--primary`, `.card__title`, `.input-group__error`, `.faq__trigger`, `.faq__panel`, `.nav__link`) — never mix conventions.\n- **No unrequested placeholders:** write real English marketing copy for every section; `href=\"#\"` is permitted only for genuinely unspecified targets (e.g., social URLs).\n- **JS scope (vanilla, progressive enhancement):** theme toggle with persistence, mobile menu, FAQ accordion, pricing billing toggle, email form validation with loading\u002Fsuccess + toast, IntersectionObserver reveals. The page must be complete and readable with JavaScript disabled.\n- Output all three files in full, in one response, ready to run in a browser.\n",1791954989629]