[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-160-POINTS-OF-LIGHT-a-living-braille-field":3},"# System Prompt: Build \"POINTS OF LIGHT — A Living Braille Field\" Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Follow every rule below exactly. All user-facing copy must be written in **English**.\n\n**Theme:** POINTS OF LIGHT — a living braille field\n**Style:** 1950s Swiss Modernism \u002F Grid-based Minimalism\n**Sections required (in this order):** Hero, Features (exactly 3 cards), How It Works (exactly 3 steps), Testimonials, Pricing (exactly 3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** Keep HTML semantic and styling-agnostic — changing the look must only require editing `style.css`.\n\n### 1.2 CSS Variables & Theme Tokens\nStore all tokens in `:root` (and theme classes):\n\n* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Theme mapping:** Primary ink `#232830`, field `#dfe3ea`, accent glow `#ffb347`; secondary tones `#8a92a0`, `#2a303a`, `#1e222a`. Light mode background must be `#dfe3ea` (not pure white; use `#fefefe` only if a near-white surface is needed). Every light background token must pair with dark text, and every dark background token with light text — in **all** themes.\n* **Radius & Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n* **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n### 1.3 Mandatory Dark Mode\n* Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class selector.\n* Theme switching must swap variables only — no HTML restructuring.\n* Persist choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle with correct `aria-pressed` \u002F `aria-label` state. In dark mode, the braille field background must darken (`#1e222a` \u002F `#2a303a`) with light text and the `#ffb347` accent retained for contrast.\n\n### 1.4 Layout — Grid + Flexbox, Mobile-First\n* Use **CSS Grid** for the page-level Swiss layout (the signature of this theme): a strict modular grid with visible hairline dividers (`--border-default`) between sections, evoking 1950s Swiss print grids.\n* Use **Flexbox** for all component interiors. Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n* All layouts must be mobile-responsive out of the box: multi-column grids collapse to fewer columns on small viewports; no horizontal scrolling at any width.\n\n### 1.5 Framework Default\n* Use Tailwind CSS (or clean custom CSS via `@layer` \u002F `@apply`) unless another framework is requested. All utilities must map back to CSS variables or generic reusable classes (`.btn`, `.card`, `.input-group`). Use one consistent naming convention (BEM or a fixed utility set) throughout — never mix conventions.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load a Google Font suited to Swiss Modernism (e.g., **Inter** or **Space Grotesk** for headings, Inter for body) via `\u003Clink>` or `@import`; bind to `--font-base`. Use strict typographic hierarchy: large uppercase tracking-tight headings, small caps labels, generous whitespace.\n* **Icons:** Use Google Material Symbols\u002FIcons only. Raw inline SVGs and local icon files are forbidden.\n* **Braille motif:** The \"living braille field\" must be built with CSS only — e.g., a repeating radial-gradient dot pattern (`background-image: radial-gradient(...)`) or a grid of small circular `::before` pseudo-element dots on a decorative container. Dots must subtly animate (gentle opacity\u002Fscale pulse via CSS keyframes) to feel \"alive,\" respecting `prefers-reduced-motion`. Do not use images or SVGs for the braille field.\n\n---\n\n## 2. COMPONENT SPECIFICATIONS\n\n### 2.1 Buttons\nAll states via CSS classes:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Minimum 44×44px touch target.\n* **Hover:** brightness\u002Fshadow shift, `cursor: pointer`.\n* **Focus:** distinct focus ring using CSS variables (`outline`\u002F`box-shadow`) for keyboard nav.\n* **Active:** `transform: scale(0.97)` feedback.\n* **Loading:** disables interaction, prevents double-clicks, CSS spinner or animated Google Icon, no layout shift.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Primary CTA** uses the `#ffb347` accent with `#232830` text (contrast-checked in both themes). Destructive `.btn-danger` must be visually distinct in light and dark themes.\n\n### 2.2 Cards (Features, Pricing, Testimonials)\n* **Default:** Grid\u002FFlex layout, `--bg-secondary` surface, subtle neumorphic soft shadows (dual box-shadows: light top-left, dark bottom-right, derived from `--bg-primary`), hairline `--border-default` borders.\n* **Hover:** elevation shift or `transform: translateY(-2px)`; pricing cards highlight the recommended tier with the `#ffb347` accent border\u002Fbadge.\n* **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n* **Skeleton:** shimmer animation defined in CSS (no layout jumps).\n* **Empty state:** structured fallback with a Google Icon and guidance text.\n\n### 2.3 FAQ — Accordion\n* Each FAQ item: semantic `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-compliant custom accordion with Google Icon chevron rotating on open, animated via `transition: var(--transition-normal)`. Fully keyboard operable.\n\n### 2.4 Forms (Final CTA \u002F newsletter capture)\n* States: Empty, Focused (outline ring), Filled, Valid (success border\u002Ficon), Invalid (error border, red text, error icon), Disabled, Read-only.\n* Structure: flex container wrapping label, input, and dedicated error feedback container. Errors announced via `aria-live=\"polite\"`.\n\n### 2.5 Modals\u002FPopups\n* If any modal is used: Opening\u002FOpen\u002FLoading\u002FSuccess\u002FClosing states animated via CSS transitions; centered flex container; backdrop overlay; Google Icon close button; focus trapping; close via `Esc` and overlay click.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, breakpoints, zero horizontal overflow.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion`.\n* **Accessibility:** sufficient contrast in both Light and Dark modes; never rely on color alone for state; semantic HTML5; correct ARIA roles\u002Flabels; logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).\n* **Mandatory visual feedback:** every click, hover, or submission triggers a visible state change.\n* **Neumorphism & Gradients:** soft dual box-shadows on cards\u002Fbuttons derived from theme variables; subtle gradients (e.g., braille field fade, accent glow on hero) — both must remain legible and re-tokenized for dark mode.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference.\n* **Content:** Write real, on-theme English copy for every section (hero headline referencing \"points of light,\" 3 feature blurbs, 3 steps, 3 testimonials with names\u002Froles, 3 pricing tiers with feature lists, 5+ FAQ questions, final CTA, footer links). No lorem ipsum.\n* **Section grid:** Use visible hairline grid dividers and section numbering (01, 02, 03…) in the Swiss Modernist tradition; asymmetric hero layout with the braille field as a large tactile background panel.\n* **Naming:** One consistent convention (BEM or fixed utility set) across the entire deliverable.\n\nGenerate the complete final code now — all sections, all states, both themes, in one response.\n",1791954982632]