[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-185-Atlassian-Design-System":3},"# Build Prompt — Atlassian Design System Landing Page (Corporate & SaaS)\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-quality landing page on the first attempt** for a fictional B2B work-management SaaS product, styled after the **Atlassian Design System (ADS)**. Generate the full final code immediately, following every rule below without omission.\n\n---\n\n## 1. PROJECT BRIEF & DESIGN DIRECTION\n\n**Theme:** Atlassian Design System (ADS), 2017–present, flat-platform aesthetic — the visual language of Jira, Confluence, and Trello marketing pages.\n**Tone:** Friendly-professional productivity. Clear hierarchy, generous whitespace, componentized Atlaskit-style UI, strong content and accessibility guidance baked in.\n**Aesthetic Constraints:** Flat surfaces with restrained elevation (shadow scale `sm\u002Fmd\u002Flg` only — never dramatic). No gradients anywhere **except** the signature accent bar. No glassmorphism, no neumorphism, no oversized hero shadows. Crisp 1px borders, compact radii (3\u002F6\u002F10px), pill-shaped lozenge badges.\n**Light Palette (from source spec):** bg `#f7f8f9`, surface `#fefefe` *(source declares `#ffffff`; render as `#fefefe` per the near-white rule — visually identical)*, surface-strong `#f1f2f4`, border `#dcdfe4`, text `#172b4d`, text-muted `#44546f`, primary `#0052cc`, accent `#36b37e`.\n**Signature Moves (mandatory):** (1) A thin 3px two-color accent bar (`--accent-bar`, blue → green gradient) capping the top of every raised surface — nav, cards, highlighted pricing tier. (2) A consistent low-elevation shadow scale. (3) A 2px blue focus ring on all interactive elements.\n**Source Note (translated):** \"The source specification does not declare color modes; validate in light and dark before publishing.\" Dark mode is therefore **mandatory** and must be contrast-validated in both themes.\n**Copy Locale:** All user-facing copy must be written in **English**.\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n### 2.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:** HTML must remain clean, semantic (header, nav, main, section, footer), and agnostic of visual styling — retheming the page must require editing only `style.css`, never the markup.\n\n### 2.2 CSS Variables & Theme Tokens\nStore **all** visual tokens in `:root` and the `.dark` theme class. Extend — never rename — the source spec's token names, and add the mandatory canonical aliases:\n\n```css\n:root {\n  \u002F* Atlassian Design System — light tokens *\u002F\n  --color-bg: #f7f8f9;\n  --color-surface: #fefefe;\n  --color-surface-strong: #f1f2f4;\n  --color-surface-hover: #e9ebef;\n  --color-surface-active: #dcdfe4;\n  --color-border: #dcdfe4;\n  --color-text: #172b4d;\n  --color-text-muted: #44546f;\n  --color-primary: #0052cc;\n  --color-primary-hover: #0747a6;\n  --color-on-primary: #ffffff;\n  --color-accent: #36b37e;\n  --color-danger: #de350b;\n  --color-on-danger: #ffffff;\n\n  \u002F* Mandatory canonical aliases *\u002F\n  --primary: var(--color-primary);\n  --secondary: var(--color-accent);\n  --bg-primary: var(--color-bg);\n  --bg-secondary: var(--color-surface);\n  --text-primary: var(--color-text);\n  --text-secondary: var(--color-text-muted);\n  --text-success: #006644;\n  --text-error: #ae2e24;\n  --border-default: var(--color-border);\n  --border-success: #36b37e;\n  --border-error: #ae2e24;\n\n  \u002F* Badge (lozenge) *\u002F\n  --badge-bg: #e3fcef;\n  --badge-text: #006644;\n\n  \u002F* Radius \u002F shadow \u002F spacing \u002F motion \u002F elevation *\u002F\n  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;\n  --shadow-sm: 0 1px 2px rgba(9,30,66,0.13);\n  --shadow-md: 0 4px 8px rgba(9,30,66,0.14), 0 0 1px rgba(9,30,66,0.28);\n  --shadow-lg: 0 8px 16px rgba(9,30,66,0.16), 0 0 1px rgba(9,30,66,0.31);\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  --spacing-gap: var(--space-6);\n  --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --transition-fast: 120ms var(--ease-standard);\n  --transition-normal: 240ms var(--ease-standard);\n  --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;\n\n  \u002F* Typography *\u002F\n  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;\n  --font-display: var(--font-sans);\n  --font-base: var(--font-sans);\n  --font-mono: 'Roboto Mono', 'SFMono-Regular', ui-monospace, monospace;\n  --text-xs: 0.75rem; --text-sm: 0.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\n  \u002F* Signature *\u002F\n  --focus-ring: 0 0 0 2px rgba(0,82,204,0.4);\n  --accent-bar: linear-gradient(90deg, var(--color-primary), var(--color-accent));\n}\n```\n\n- **Tokenize Everything:** The source spec's hardcoded hover hexes (`#e9ebef`, `#dcdfe4`, `#0747a6`, `#e3fcef`, `#006644`) must be converted into the variables above — zero raw hex values outside `:root`\u002F`.dark`.\n- **Contrast Pairing:** Every light background token pairs with a dark text token and every dark background token with a light text token — enforced in both themes, not just the default.\n- **Accent Warning:** Never use `--color-accent` (`#36b37e`) as text color on light backgrounds (fails WCAG AA); green communication on light surfaces uses `--text-success` (`#006644`).\n\n### 2.3 Mandatory Dark Mode Support\n- **Token Set:** Provide the dark palette via a `.dark` class on `\u003Chtml>` **and** duplicate it inside `@media (prefers-color-scheme: dark)` scoped to `:root:not(.light)` so no-JS users with dark OS preferences still get dark mode:\n\n```css\n.dark {\n  --color-bg: #091e42;\n  --color-surface: #172b4d;\n  --color-surface-strong: #253858;\n  --color-surface-hover: #2c4166;\n  --color-surface-active: #344563;\n  --color-border: #44546f;\n  --color-text: #f7f8f9;\n  --color-text-muted: #b3bac5;\n  --color-primary: #4c9aff;\n  --color-primary-hover: #85b8ff;\n  --color-on-primary: #091e42;\n  --color-accent: #57d9a3;\n  --color-danger: #ff7452;\n  --color-on-danger: #091e42;\n  --text-success: #79f2c0;\n  --text-error: #ffbdad;\n  --border-success: #57d9a3;\n  --border-error: #ff8f73;\n  --badge-bg: rgba(87,217,163,0.16);\n  --badge-text: #79f2c0;\n  --focus-ring: 0 0 0 2px rgba(76,154,255,0.6);\n  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);\n  --shadow-md: 0 4px 8px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.6);\n  --shadow-lg: 0 8px 16px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.65);\n}\n```\n\n- **Seamless Switching:** Backgrounds and text must flip purely through CSS variables — no HTML restructuring, no duplicated markup.\n- **Persistence:** Store the choice in `localStorage` (e.g., key `ads-theme`), falling back to `prefers-color-scheme` on first visit. Theme application must be the **first operation** in `script.js`.\n- **Visible Toggle:** A theme toggle button in the nav with a Google Material Symbol (`dark_mode` \u002F `light_mode`), correct `aria-pressed` state, and an `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n- **Validation:** Verify WCAG AA contrast (4.5:1 body text, 3:1 large text and UI boundaries) in **both** themes before finalizing.\n\n### 2.4 Flexbox Layout & Mobile-First Alignment\n- **Default Alignment Rule:** Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly justified — text-heavy card columns may use `items-start`, but each exception must carry a justifying CSS comment.\n- **Mobile-Friendly First:** All row layouts collapse to columns on small viewports; nothing may cause horizontal scrolling at 320px. Use a max-width container (~1200px) with `box-sizing: border-box` and fluid type\u002Fspacing.\n\n### 2.5 Framework Default & Tailwind CSS Integration\n- Use **Tailwind CSS** (CDN or build) for layout, spacing, and responsive utilities only.\n- All component styling lives in `style.css` under `@layer components` (or plain CSS) using the reusable class names `.nav`, `.btn`, `.card`, `.input`, `.input-group`, `.badge` and their BEM variants — utilities must never carry raw color values; every color references a CSS variable.\n\n### 2.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load **Inter** via Google Fonts `\u003Clink>` (with preconnect) and bind it to `--font-base`\u002F`--font-sans`. *Exception clause: the theme's proprietary \"Charlie Sans\" is unavailable on Google Fonts — Inter is the mandatory replacement, preserving the spec's fallback stack.* Load Roboto Mono only if monospace text is used.\n- **Icons:** Use **Google Material Symbols** (`material-symbols-outlined`) exclusively. Raw inline SVGs and local icon files are forbidden. *Exception clause: Atlassian's native iconography is replaced by Material Symbols per this mandatory rule.* Icons are decorative (`aria-hidden=\"true\"`) unless they are the sole content of an icon-only control, which then requires an `aria-label`.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\nUse this adapted foundation (extend, never rename), then complete every state below:\n\n```css\nbody { margin: 0; color: var(--text-primary); font-family: var(--font-base); background: var(--bg-primary); }\n.nav { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-6);\n  background: var(--color-surface); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: var(--z-dropdown); }\n.nav::before { content: \"\"; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-bar); }\n.btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px;\n  font: 600 var(--text-sm)\u002F1 var(--font-sans); color: var(--text-primary);\n  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);\n  background: var(--color-surface-strong); border: 1px solid transparent; cursor: pointer;\n  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }\n.btn:hover { background: var(--color-surface-hover); }\n.btn:active { background: var(--color-surface-active); transform: scale(0.97); }\n.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }\n.btn[disabled] { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.6); transform: none; }\n.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }\n.btn--primary:hover { background: var(--color-primary-hover); }\n.card { background: var(--bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--border-default);\n  box-shadow: var(--shadow-md); padding: var(--space-6); position: relative; overflow: hidden; }\n.card::before { content: \"\"; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-bar); }\n.input { width: 100%; box-sizing: border-box; min-height: 44px; color: var(--text-primary);\n  font: var(--text-base) var(--font-sans); padding: var(--space-3) var(--space-4);\n  border-radius: var(--radius-md); background: var(--color-surface); border: 2px solid var(--border-default); }\n.input::placeholder { color: var(--text-secondary); }\n.input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }\n.badge { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--text-xs); font-weight: 600;\n  padding: 0.3em 0.8em; border-radius: var(--radius-pill); background: var(--badge-bg); color: var(--badge-text); }\n```\n\n### 3.1 Button Component Requirements\n- **Default:** Flex, centered, `gap: 0.5rem`, minimum touch target 44×44px.\n- **Hover:** Background shift + subtle shadow, `cursor: pointer`.\n- **Focus:** Distinct `:focus-visible` ring via `--focus-ring` for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** Class `.btn--loading` disables pointer events (prevents double-clicks) and renders a CSS spinner or rotating Material Symbol (`progress_activity`) **without changing button dimensions**; set `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** Temporary feedback styles (`.btn--success`, `.btn--error`) driven by `--text-success` \u002F `--text-error`, paired with an icon — never color alone.\n- **Variants:** `.btn` (subtle default), `.btn--primary`, `.btn--danger` (uses `--color-danger`\u002F`--color-on-danger`, visually distinct in both themes), `.btn--ghost` (transparent, for nav links).\n\n### 3.2 Card Component Requirements\n- **Default:** Flexible flexbox layout, subtle border + elevation using `--bg-secondary` and CSS variables, 3px accent bar cap.\n- **Hover (interactive cards):** `transform: translateY(-2px)` and shadow `md → lg` — subtle, never dramatic.\n- **Focus-within:** Border highlights to `--color-primary` when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** Define a shimmer animation class for card grids to prevent layout jumps.\n- **Empty State:** Structured fallback with a Material Symbol and clear guidance text, defined for card grids even though content is static.\n\n### 3.3 Form & Input Requirements\n- **States:** Empty, Focused (2px primary border + ring), Filled, Valid (success border + check icon), Invalid (error border, `--text-error` message, error icon, `aria-invalid`), Disabled, Read-only.\n- **Structure:** `.input-group` flex container wrapping a `\u003Clabel for>`, the `.input`, and a dedicated error feedback element with `aria-live=\"polite\"`.\n\n### 3.4 Modal \u002F Popup Requirements (conditional — e.g., \"Watch demo\")\n- **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n- **UX:** Centered flex container (`align-items: center`), backdrop overlay, Material Symbol close button, keyboard focus trap, `aria-modal`, close via `Esc` or overlay click, focus restored to the trigger on close. The FAQ must use an accordion, not modals.\n\n---\n\n## 4. LANDING PAGE SECTION REQUIREMENTS\n\nBuild these sections in order, each as a `\u003Csection>` with an `id`, an `aria-labelledby` heading, and `scroll-margin-top` for the sticky nav:\n\n- **4.1 Global Navigation (sticky):** Wordmark (Material Symbol + product name), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, \"Get started\" `.btn--primary`. Below ~768px, links collapse into a hamburger panel (animated, `aria-expanded`\u002F`aria-controls`, closes on `Esc`, link click, or resize). Include a \"Skip to main content\" skip link before the nav.\n- **4.2 Hero:** Two-column layout (copy + visual) stacking on mobile. `h1` headline, benefit-driven subcopy, dual CTAs (`.btn--primary` \"Start free trial\"; `.btn` \"Watch demo\" with `play_circle`), and a trust line with an avatar stack of initials circles. The visual is a **CSS-composed product mockup** — a mini kanban board built from `.card`, `.badge`, avatar circles, and a progress bar using only tokens (no external images; if any image is truly needed, use picsum with descriptive alt text).\n- **4.3 Features (3 cards):** Section `h2` + intro; responsive grid (1 column mobile → 3 columns desktop) of `.card--feature`, each with a Material Symbol in a tinted square, `h3`, description, and optional \"Learn more\" link. One card carries a `.badge` (\"New\").\n- **4.4 How It Works (3 steps):** Numbered steps (number in a primary-colored pill), `h3` + text each, connected by a line on desktop (hidden on mobile).\n- **4.5 Testimonials:** 3 `.card--testimonial` in a responsive grid: initials avatar circle, blockquote, name, role, company; optional 5-star row (Material Symbol `star` with `aria-label` \"Rated 5 out of 5\").\n- **4.6 Pricing (3 tiers):** Accessible monthly\u002Fannual segmented toggle (`aria-pressed`, annual shows a \"Save 20%\" `.badge`); prices update with a transition and a polite `aria-live` announcement. Three `.card--pricing` tiers — the middle one highlighted with a \"Most popular\" `.badge`, stronger border\u002Felevation, and `.btn--primary` (others use `.btn`). Each tier: name, price, per-seat caption, feature list with `check` Material Symbols, CTA.\n- **4.7 FAQ:** 4–6 items using native `\u003Cdetails>`\u002F`\u003Csummary>` (or button + region with `aria-expanded`), styled chevron that rotates on open, animated open\u002Fclose.\n- **4.8 Final CTA:** Full-bleed band on `--color-surface-strong` containing a headline and an email capture form: `.input-group` (label, `.input` type=email, error container) + `.btn--primary`. On submit: button enters loading state, then a success message with a `check_circle` icon appears in the `aria-live` region; invalid emails show the full invalid state per 3.3.\n- **4.9 Footer:** Brand block (logo, tagline, social icon buttons with `aria-label`s) plus 3–4 secondary link columns (Product, Company, Resources, Legal) and a bottom bar with copyright and Terms\u002FPrivacy links. Links get hover\u002Ffocus underline styles.\n- **4.10 Copy Rules:** All copy in English, friendly-professional Atlassian marketing voice, sentence-case headings, one consistent fictional product name throughout. **No lorem ipsum** — write real, benefit-driven copy for every section.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid sizing and breakpoints with zero horizontal overflow; test at 320px.\n- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; global `prefers-reduced-motion: reduce` rule that disables animations\u002Ftransitions; smooth anchor scrolling (also disabled under reduced motion).\n- **Accessibility (a11y):** AA contrast in light **and** dark; never rely on color alone (pair icons + text); semantic HTML5; correct ARIA roles\u002Flabels on the toggle, accordion, mobile menu, segmented control, and modal; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors, loading, and pricing announcements; single `h1`, logical heading hierarchy.\n- **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n- **Destructive Actions:** `.btn--danger` must be visually distinct in both themes (only if used).\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single `\u003Cscript src=\"script.js\" defer>` reference. No inline styles anywhere.\n- **Naming Convention:** BEM only for components (`.btn--primary`, `.card--pricing`, `.input-group`, `.footer__link`) — never mix conventions; Tailwind utilities are restricted to layout\u002Fspacing.\n- **Head:** `lang=\"en\"`, viewport meta, descriptive `\u003Ctitle>` and meta description, Google Fonts and Material Symbols `\u003Clink>` tags.\n- **No Unrequested Placeholders:** Real English copy everywhere; placeholders only where content was genuinely unspecified.\n- **Behavioral JS (script.js only):** theme toggle + persistence, mobile nav, FAQ accordion behavior (if not native), pricing toggle, form validation with loading\u002Fsuccess states, optional scroll-reveal via IntersectionObserver — all progressive enhancement; content must remain readable with JS disabled.\n\nGenerate the complete, working code now, on the first attempt, in `index.html`, `style.css`, and `script.js`.\n",1791954982752]