[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-620-IBM-Carbon-Enterprise":3},"# System Prompt: Build \"IBM Carbon Enterprise\" Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **IBM Carbon Enterprise** landing page on the first attempt. Follow every rule below strictly.\n\n## 1. ARCHITECTURE & STRICT RULES\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- All styling must live in a dedicated `style.css` file. **No `style=\"...\"` attributes anywhere in the HTML.**\n- Target everything via class or ID selectors only.\n- HTML must remain semantic and clean; changing the theme must require editing CSS only.\n\n### 1.2 CSS Variables & Token System\nStore all tokens in `:root` using the Carbon naming convention `--cds-*`:\n- **Colors:** `--cds-blue-60: #0f62fe` (the single interactive accent), `--cds-blue-hover: #0043ce`, `--cds-white: #ffffff`, `--cds-gray-100: #161616`, `--cds-gray-70: #525252`, `--cds-gray-30: #c6c6c6`, `--cds-gray-20: #e0e0e0`, `--cds-gray-10: #f4f4f4`, `--cds-red: #da1e28`.\n- **Semantic aliases:** `--primary`, `--bg-primary`, `--bg-secondary`, `--bg-tertiary`, `--text-primary`, `--text-secondary`, `--text-error`, `--border-default`.\n- **Contrast pairing:** every light background token pairs with a dark text token and vice versa, in **both** themes. Light mode background must be `#f4f4f4` or `#fefefe` — never pure `#ffffff` as the page canvas (white is reserved for card\u002Fsurface layers per Carbon layering).\n- **Geometry:** `--radius-sm: 0px`, `--radius-md: 0px`, `--radius-lg: 0px` (Carbon is zero-radius; keep tokens defined but set to 0), `--shadow-sm\u002Fmd: none` (depth comes from background layering white → `#f4f4f4` → `#e0e0e0`, never shadows).\n- **Spacing & motion:** `--spacing-gap` on a strict 8px grid (all margins\u002Fpadding in 8px multiples), `--transition-fast: 110ms`, `--transition-normal: 160ms`, `--ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9)` (Carbon motion).\n- **Stacking:** `--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: dark surfaces use `--cds-gray-100: #161616` backgrounds with `#f4f4f4` text; layering inverts (gray 100 → gray 90 → gray 80 surfaces). Blue 60 remains the accent.\n- Provide a visible theme toggle (Google Material Symbols icon) with `aria-pressed` and `aria-label`; persist choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. No HTML restructuring on switch.\n\n### 1.4 Flexbox Layout & Mobile-First\n- Build all layouts with Flexbox; every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n- All rows convert to columns on small viewports. No horizontal scrolling at any breakpoint.\n\n### 1.5 Framework\n- Use Tailwind CSS (or clean custom CSS via `@layer`\u002F`@apply`) with all utilities mapping to reusable classes: `.btn`, `.btn-primary`, `.btn-secondary`, `.card`, `.input-group`, `.section`, `.container`.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- Load **IBM Plex Sans** from Google Fonts and bind to `--font-base`. Three weights only: **300 (display headlines, 60px)**, 400 (body), 600 (emphasis).\n- Micro letter-spacing: `0.16px` at 14px body, `0.32px` at 12px labels\u002Feyebrows.\n- Icons: **Google Material Symbols** only. No inline SVGs, no local icon files.\n\n## 2. COMPONENT SPECIFICATIONS\n\n### 2.1 Buttons\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target. Primary: solid Blue 60, white text, **border-radius: 0px**. Secondary: transparent with 1px Gray 100 border, zero radius.\n- **Hover:** primary shifts to `#0043ce`; secondary gets a Gray 30 border. `cursor: pointer`.\n- **Focus:** 2px solid Blue 60 outline offset 2px (Carbon focus ring) — visible in both themes.\n- **Active:** `transform: scale(0.97)` or 1px inset border shift.\n- **Loading:** disabled interaction, animated Google Material Symbol spinner, dimensions unchanged.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Danger:** `.btn-danger` using `--cds-red`, visually distinct in both themes.\n\n### 2.2 Cards (Features, Pricing, Testimonials)\n- **Default:** Flexbox layout, `background: var(--bg-secondary)` (`#f4f4f4` on white sections), 1px Gray 30 border, zero radius, 8px-grid padding.\n- **Hover:** border shifts to Blue 60 (no shadows, no transforms — Carbon flat depth).\n- **Focus-within:** border highlights when a child link\u002Fbutton is focused.\n- **Loading:** shimmer skeleton animation defined in CSS.\n- **Empty state:** Google Icon + guidance text fallback structure.\n\n### 2.3 Forms & Inputs (Newsletter in Final CTA)\n- **Bottom-border inputs only** (Carbon pattern): `border: none; border-bottom: 2px solid var(--cds-gray-100); background: transparent;` zero radius — never boxed.\n- **States:** empty, focused (bottom border turns Blue 60), filled, valid (Blue 60 border + check icon), invalid (`--cds-red` border, red helper text, error icon), disabled, read-only.\n- **Structure:** flex `.input-group` wrapping label, input, and a dedicated error message container with `aria-live=\"polite\"`.\n\n### 2.4 FAQ Accordion (acts as disclosure, not modal)\n- Animated open\u002Fclose via CSS transitions; keyboard operable (Enter\u002FSpace); `aria-expanded` on triggers; visible Carbon focus ring.\n\n## 3. UX & MICRO-INTERACTION RULES\n- Responsive by default; fluid type scale (60px display desktop → ~36px mobile).\n- All state changes transition with `var(--transition-normal)`; respect `prefers-reduced-motion`.\n- **a11y:** WCAG-sufficient contrast in both themes; never color-only state communication (pair color with icons\u002Ftext); semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`); logical focus order; full keyboard operability; `aria-live` regions for form feedback.\n- Every click\u002Fhover triggers visible feedback.\n- Strict 8px grid adherence on all spacing.\n\n## 4. DELIVERABLES & PAGE STRUCTURE\n\n**Files:** separate `index.html`, `style.css`, `script.js` (single deferred entry point; no other inline scripts). One consistent naming convention (BEM or fixed utility set) throughout.\n\n**Sections (in order):**\n1. **Header\u002FNav** — logo, nav links, theme toggle, primary CTA button.\n2. **Hero** — 60px weight-300 headline, subcopy, primary + secondary CTAs, layered background (`--bg-primary`).\n3. **Features** — 3 cards on Gray 10 background, each with a Google Material Symbol icon.\n4. **How It Works** — 3 numbered steps (01\u002F02\u002F03 eyebrow labels, weight 600), white background.\n5. **Testimonials** — 3 quote cards on Gray 10.\n6. **Pricing** — 3 tiers; middle tier emphasized with Blue 60 border and \"Recommended\" label.\n7. **FAQ** — accessible accordion.\n8. **Final CTA** — Gray 100 dark band, white weight-300 headline, bottom-border email input + primary button.\n9. **Footer** — secondary link columns, copyright, Gray 100 background.\n\n**Copy:** All user-facing copy in English. Write realistic, enterprise-grade copy (no lorem ipsum) — product name, headlines, feature descriptions, testimonial quotes, pricing tiers with real dollar amounts, and 4–5 genuine FAQ entries.\n\n## 5. MANDATORY STYLE SUMMARY\n`background: #f4f4f4 (page) \u002F #ffffff (surfaces); color: #161616; accent: #0f62fe only; border-radius: 0px on all buttons; bottom-border 2px inputs; font-family: 'IBM Plex Sans'; font-weight: 300 display; letter-spacing: 0.16px at 14px; depth via background layering only, no shadows.`\n\nGenerate the complete final code now — all three files, fully functional, on the first attempt.\n",1791954990015]