[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-830-Base-Web":3},"# Coding Prompt — Complete \"Base Web\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality **Landing Page for the Base Web design system** in a **single first attempt**. The theme is **Base Web** (Uber's open-source design system): highly themeable primitives, neutral and functional, mobility-app roots, strong theming tokens, accessible components, flat-platform aesthetic, era 2018–present. Elevation comes from subtle shadows; the theme's ONE signature trait is the **\"seam\"** — a solid 3px underline in the current theme color (`--seam`) that marks active\u002Ffocus state (nav active link, input bottom border, primary button bottom accent), never used as decoration.\n\n**Source note (translated):** *\"The source spec does not declare color modes; validate in light and dark before publishing.\"* Dark mode is therefore yours to design and must be validated in both modes before you declare completion.\n\n---\n\n## 0. Product Brief & Required Sections\n\nWrite original English marketing copy presenting Base Web to developers (tone: confident, functional, utilitarian). All copy in **English**. No lorem ipsum. Testimonials must use clearly fictional personas (name + role, e.g., \"Design Systems Lead\") — do not imply real companies.\n\nBuild these sections, in order:\n\n- **Sticky header\u002Fnav:** Logo (\"Base Web\"), section links, theme toggle (rule 1.3), primary CTA button. Collapses to an accessible hamburger dropdown panel below ~768px. The link of the section currently in view receives the 3px seam underline (`aria-current=\"true\"` via scroll-spy in `script.js`). Header gains a shadow when scrolled.\n- **Hero:** Eyebrow badge, responsive headline (fluid `clamp()` from `--text-4xl`→`--text-5xl`), muted subcopy, two CTAs (primary + neutral), flat composition with generous `--space-*` rhythm, plus the interactive **theming demo** (rule 2.5).\n- **Features (3 cards):** `.card` grid (row → single column on mobile); each card: Material icon in a `--color-surface-strong` tile, title, description. Apply rule 2.2 states.\n- **How It Works (3 steps):** Numbered markers carrying the seam underline, step titles, connecting hairline borders; flex row → column on mobile.\n- **Testimonials (3 cards):** Quote, avatar (CSS-styled initials circle or Material `person` icon — no external images), fictional name + role. Demonstrate the skeleton loading state (rule 2.2) via a short simulated async load (300–600ms) in `script.js`.\n- **Pricing (3 tiers):** Accessible **monthly\u002Fannual segmented toggle** (`aria-pressed`, animated price update, `aria-live` announcement of the change). Middle tier featured (`.badge` \"Most popular\", primary border + seam). Each tier: name, price, feature list with Material `check` icons, CTA (primary on the featured tier).\n- **FAQ:** Accessible accordion (rule 2.4), 5–6 substantive Q&As.\n- **Final CTA:** Full-bleed `--color-surface-strong` band, headline, and the email-capture form (rule 2.3) with the full loading → success\u002Ferror → toast flow.\n- **Footer with secondary links:** Grouped secondary link columns (Product \u002F Docs \u002F Company), Material social icons as links, copyright, back-to-top link; columns stack on mobile.\n\n**Design token baseline (authoritative — define verbatim in `:root`, translate comments to English):**\n\n```css\n\u002F* Base Web — design tokens | 2018–present *\u002F\n--color-bg: #ffffff; --color-surface: #ffffff; --color-surface-strong: #f6f6f6;\n--color-border: #e2e2e2; --color-text: #000000; --color-text-muted: #5e5e5e;\n--color-primary: #276ef1; --color-accent: #06c167;\n--radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;\n--shadow-sm: 0 1px 2px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.1);\n--shadow-lg: 0 10px 24px rgba(0,0,0,.12);\n--text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;\n--text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;\n--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;\n--space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n--ease-standard: cubic-bezier(.2, 0, 0, 1);\n--seam: var(--color-primary); --seam-underline: 3px solid var(--seam);\n```\n\n**Component baseline to adopt, then extend:** `.nav` (flex, gap, surface bg, border-bottom), `.btn` (600 weight `--text-sm`, `--space-3\u002F--space-6` padding, `--radius-md`, surface-strong bg + border), `.btn--primary` (primary bg, white text, `box-shadow: 0 -3px 0 0 var(--color-accent) inset` — the seam accent), `.card` (surface bg, `--radius-lg`, 1px border, `--shadow-md`, `--space-6` padding), `.input` (full width, 1px border + `--seam-underline` bottom, focus: primary border + soft ring), `.badge` (pill, primary tint bg). **All hardcoded state values in this baseline (hover `#ececec`, active `#e2e2e2`, badge `#e8f0fe`, ring `rgba(39,110,241,.18)`, focus halo `#fff`) must be promoted to named tokens** (hover\u002Fpressed surface variants, `--tint-primary`, focus ring tokens) with dark-mode counterparts — no raw hex\u002Frgba outside `:root` and theme blocks.\n\n---\n\n## 1. Strict Architecture Rules\n\n**1.1 CSS-First & 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, and states exclusively via class\u002FID selectors (BEM).\n* `script.js` must never mutate inline styles — every state change is a class toggle or ARIA attribute change. HTML stays semantic, clean, and style-agnostic: re-theming must require CSS edits only.\n\n**1.2 CSS Variables & Theme Tokens**\n* In addition to the baseline tokens above, `:root` **must** define the mandatory system tokens — they may alias theme tokens to avoid duplication: `--primary` (= `#276ef1`), `--secondary` (= `--color-accent`), `--bg-primary`, `--bg-secondary` (= `--color-surface-strong`), `--text-primary`, `--text-secondary` (= `--color-text-muted`), `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm\u002Fmd\u002Flg`, `--shadow-sm\u002Fmd`, `--spacing-gap`, `--transition-fast` (150ms), `--transition-normal` (300ms), `--ease-standard`, `--z-dropdown` (1000), `--z-modal` (2000), `--z-toast` (3000). Every component rule consumes variables — never raw values.\n* Success\u002Ferror colors: pick a green (may derive from the accent) and a distinct red harmonious with the neutral palette, each passing WCAG AA against both surfaces in **both** modes.\n* **Contrast pairing:** every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in every theme, including dark mode and the swatch demo variants.\n* Light backgrounds: the default rule requires `#fefefe` instead of pure white — **Exception:** the Base Web spec explicitly declares `#ffffff` for `--color-bg`\u002F`--color-surface`, so those exact values are permitted.\n\n**1.3 Mandatory Dark Mode**\n* Dark mode is **mandatory**. Define dark tokens (e.g., bg `#121212`, surface `#17171a`, surface-strong `#1f1f24`, border `#383838`, text `#ffffff`, muted `#9b9b9b`; lighten primary\u002Faccent for contrast, e.g., `#4d84f3` \u002F `#0fd06f` — tune until AA passes).\n* Implement via a `.dark`\u002F`[data-theme=\"dark\"]` class on `\u003Chtml>` **and** an `@media (prefers-color-scheme: dark)` fallback for first visit, both consuming one shared token block — theme switching must not touch HTML structure.\n* A visible header **toggle button** with a Material `dark_mode`\u002F`light_mode` icon, correct `aria-pressed` and dynamic `aria-label`; choice persists via `localStorage` (e.g., key `baseweb-theme`), falling back to `prefers-color-scheme` on first visit; apply the stored theme synchronously at the top of `script.js` to minimize flash.\n\n**1.4 Flexbox Layout & Mobile-First**\n* Build all layout with Flexbox. **Every flex container defaults to `align-items: center`**; any exception (e.g., stretched pricing cards, top-aligned text blocks) requires a CSS comment justifying it.\n* Mobile-first: rows become columns under ~768px via flex-direction\u002Fwrap; **zero horizontal scrolling down to 320px**; minimum touch target 44×44px.\n\n**1.5 Framework & Naming Convention**\n* Primary styling = the theme's custom CSS class system in `style.css` (baseline classes above, extended). Tailwind CSS is permitted for layout utilities only; every utility\u002Fdesign value must map back to a CSS variable or a reusable class (`.btn`, `.card`, `.input-group`). No other libraries.\n* **One convention only: BEM** (`block__element--modifier`, e.g., `.btn--primary`, `.card__title`, `.pricing__tier--featured`, `.faq__item`). Never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load Google Fonts via `\u003Clink>`: **Inter** for text (and **Roboto Mono** for code). Bind `--font-sans`\u002F`--font-display` to `'Uber Move', 'Inter', 'Helvetica Neue', Arial, sans-serif` and `--font-mono` to `'Uber Mono', 'Roboto Mono', ui-monospace, monospace`. **Exception:** Uber Move \u002F Uber Mono are not distributed on Google Fonts, so the Google-hosted fonts render where they are absent — load no fonts from any other source.\n* Icons: **Google Material Symbols** (outlined, single `\u003Clink>`), e.g., `\u003Cspan class=\"material-symbols-outlined\">check_circle\u003C\u002Fspan>`. **No inline SVGs, no emoji icons, no local icon files.**\n\n---\n\n## 2. Component Design Specifications\n\n**2.1 Buttons (`.btn`, `.btn--primary`, variants)**\n* **Default:** `display:flex; align-items:center; justify-content:center; gap:.5rem;` min 44×44px, 600-weight `--text-sm`, `--radius-md`; dimensions must never change across states. Primary variant keeps its inset seam accent.\n* **Hover:** brightness\u002Fshadow shift, `cursor:pointer`. **Focus:** visible `:focus-visible` ring built from variables (replace the baseline `#fff` halo with `var(--color-surface)` so dark mode works). **Active:** `transform: scale(0.97)` in addition to the pressed background.\n* **Loading:** `.btn--loading` + `aria-busy=\"true\"` — blocks pointer events (no double submits) and swaps the label for a CSS spinner (currentColor) or animated Material `progress` icon without resizing the button.\n* **Disabled:** `opacity:.5`, grayscale, `cursor:not-allowed`. **Success\u002FError:** `.btn--success` \u002F `.btn--error` temporary feedback states driven by `--text-success` \u002F `--text-error`, announced via `aria-live`. If any destructive action exists, its variant (`.btn--danger`) must be clearly distinct in **both** modes.\n\n**2.2 Cards (features, pricing tiers, testimonials)**\n* **Default:** flex column layout, `--color-surface` bg, `--border-default` border, `--radius-lg`, `--shadow-md`, `--space-6` padding.\n* **Hover:** elevation shift to `--shadow-lg` and\u002For `transform: translateY(-2px)` on interactive cards only. **Focus-within:** when a child link\u002Fbutton is focused, the card border highlights in `--color-primary` (visible keyboard path through Features\u002FPricing).\n* **Loading:** `.card--skeleton` shimmer keyframe (gradient sweep using surface tokens) that preserves final dimensions — demonstrated on Testimonials with `aria-busy` on the section. **Empty state:** `.card--empty` (Material `inbox` icon + guidance text) defined in CSS for reuse.\n\n**2.3 Forms & Inputs (Final CTA email capture)**\n* **Structure:** a flex column `.input-group` wrapping a real associated `\u003Clabel>` (`for`\u002F`id`), the `.input` (seam bottom border per baseline), and a dedicated `.input-group__error` feedback container present in the DOM (empty by default, `aria-live=\"polite\"`, wired via `aria-describedby`).\n* **States:** Empty; Focused (primary border + soft ring + seam, per baseline); Filled; Valid (success border + `check_circle` icon); Invalid (`--border-error`, `--text-error` message, `error` icon, `aria-invalid=\"true\"`); Disabled; Read-only.\n* Validation lives in `script.js` (blur + submit); on valid submit show button loading → success + toast; **never** use `alert()`.\n\n**2.4 FAQ Accordion, Nav Dropdown, Modal & Toasts**\n* **FAQ:** accessible accordion — `\u003Cbutton aria-expanded aria-controls>` + panel (or upgraded native `\u003Cdetails>`); open\u002Fclose animated in pure CSS; rotating Material `expand_more` chevron; fully keyboard operable.\n* **Nav dropdown:** panel at `--z-dropdown`, `aria-expanded`, closes on Esc \u002F outside click \u002F link selection; smooth anchor scrolling gated by `prefers-reduced-motion`.\n* **Modal (only if you introduce any dialog, e.g., a \"Get started\" flow):** opening\u002Fopen\u002Floading\u002Fsuccess\u002Ferror\u002Fclosing states animated via CSS; centered flex container (`align-items:center`) with backdrop; Material `close` icon button; focus trap, Esc + overlay-click close; `role=\"dialog\"`, `aria-modal=\"true\"`, z-index `--z-modal`.\n* **Toasts:** bottom region at `--z-toast`, `role=\"status\"`, animated in\u002Fout via CSS, used for all dynamic feedback (subscribe success, pricing toggle changes).\n\n**2.5 Theming \"Seam\" Demo (signature interaction)**\n* In the Hero, a compact live demo of Base Web's \"highly themeable primitives\": a swatch row (Primary Blue `#276ef1`, Accent Green `#06c167`, plus 2–3 harmonized presets). Selecting a swatch re-themes the demo's `--color-primary`\u002F`--seam` by toggling preset classes defined **in CSS** (`.demo--sea`, `.demo--forest`, …) — never inline styles. Swatches act as a radiogroup (`role=\"radio\"`\u002F`aria-checked` or `aria-pressed`); the demo's input seam, primary button, and badge update instantly with visible feedback.\n\n---\n\n## 3. Global UX & Micro-Interaction Rules\n\n* **Responsive by default:** fluid `clamp()` sizing from the `--text-*` scale; no horizontal overflow from 320px to 1440px.\n* **Smooth animations:** every state change transitions via `--transition-fast`\u002F`--transition-normal` with `--ease-standard`; all animation softens\u002Fdisables under `prefers-reduced-motion: reduce`.\n* **Accessibility:** WCAG AA contrast in **both light and dark** for text, borders, rings, and badges; never communicate state by color alone (pair icons + text); semantic HTML5 landmarks (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`); logical DOM and focus order; a skip-to-content link; full keyboard operability for menu, accordion, forms, pricing toggle, and swatches; `aria-live` for all dynamic feedback.\n* **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change.\n* **Seam discipline:** the 3px underline appears only on active\u002Ffocus state (nav active link via scroll-spy with `aria-current`, input focus, primary button bottom accent) — never as decoration.\n\n---\n\n## 4. Deliverables & Output Format\n\n* **Exactly three files:** `index.html`, `style.css`, `script.js`. One `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no other script blocks, no inline JS.\n* **No `style=\"...\"` attributes, no inline SVGs, no external assets** beyond Google Fonts and Material Symbols links.\n* **BEM naming only**, consistent across all three files.\n* **No unrequested placeholders:** realistic English marketing copy throughout; lorem ipsum is prohibited.\n* **Self-review before finishing:** verify both themes (including tokenized focus rings and hover states in dark mode), a full keyboard pass, 320px viewport, reduced motion, and zero console errors.\n\nOutput the three complete files now, with full contents and no truncation — the page must run as-is when opened in a browser.\n",1791954994020]