Product Launch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# Product Launch

A clean, restrained product launch / waitlist landing page for a dev-focused product. Part of the DevSnips Vanilla Templates collection and built on the shared [`design-tokens.md`](../design-tokens.md) `--ds-*` token system.

## Design language

Minimal · light · editorial · neutral · typography-driven · restrained.

- Light-default, calm opt-in dark mode (no-flash, persisted).
- Hairline 1px borders over shadows; small controlled radii.
- Inter (text) + JetBrains Mono (labels / metadata), system fallbacks.
- Single controlled blue accent; neutral-first palette.
- One primary action per section; hierarchy from type and spacing.

## Structure

```
product-launch/
├── pages/
│   ├── code.html      # HTML structure (links style.css + script.js)
│   ├── style.css      # design system (--ds-* tokens)
│   └── script.js      # theme toggle, mobile nav, accordion, waitlist form, reveal
├── preview.html       # self-contained single-file preview (inlines CSS+JS)
├── metadata.json
└── README.md
```

`preview.html` opens directly with no backend. The modular files in `pages/` are for customization.

## Sections

1. **Header** — brand mark + version badge, anchor nav, theme toggle, mobile drawer.
2. **Hero + waitlist** — editorial `clamp()` headline, status meta, working waitlist card (validation + success + progress bar).
3. **Social proof** — company logo row.
4. **Features** — three-column grid (six features).
5. **How it works** — four-step numbered list.
6. **Pricing** — two-plan teaser (Free / Team), per-team pricing.
7. **FAQ** — single-open accordion (CSS-grid, ARIA).
8. **Final CTA** — primary + secondary actions.
9. **Footer** — copyright + footer links.

## Interactions

Scoped, dependency-free vanilla JS:

- Theme toggle (light ↔ dark, persisted, no-flash pre-paint).
- Mobile nav drawer (`aria-expanded`, Esc closes, auto-close on link click).
- FAQ accordion (single-open, `aria-expanded`/`aria-controls`/`role=region`).
- Waitlist form (name + email inline validation, `aria-invalid` + `aria-live` errors, simulated submission, success state, count bump).
- Scroll-reveal (`.reveal` → `.is-visible`, reduced-motion safe).

## Accessibility

Skip link, semantic landmarks, single `h1`, ARIA on the accordion and form, `role=img` progress bar, `:focus-visible` rings, native controls throughout, `prefers-reduced-motion` guards.

## Responsive

Three breakpoints (640 / 768 / 1024). Zero horizontal overflow at 320–1920px. Header CTA hides on very small screens (available in the drawer); feature/pricing grids reflow; hero splits to two columns on desktop.

## Dependencies

Google Fonts (Inter + JetBrains Mono). No framework, no build step.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# AGENTS.md — Product Launch

Guidance for an AI agent adapting this template. Read this before editing.

## What this template is

A clean, restrained product launch / waitlist landing page for a dev-focused product. Single page: header, hero + waitlist, social proof, features, how it works, pricing, FAQ, final CTA, footer.

## Design system

Built on the shared [`design-tokens.md`](../design-tokens.md) `--ds-*` token system. **Light-default**; calm opt-in dark mode (no-flash, persisted). Inter + JetBrains Mono. Hairline borders, small radii, single controlled blue accent, one primary action per section.

## File layout

```
product-launch/
├── pages/
│   ├── code.html      # HTML structure (links style.css + script.js)
│   ├── style.css      # design system (--ds-* tokens)
│   └── script.js      # theme toggle, mobile nav, FAQ accordion, waitlist form, reveal
├── preview.html       # self-contained preview (inlines CSS+JS)
├── metadata.json
└── README.md
```

## How to adapt it

1. **Swap the product**: edit `pages/code.html`—brand mark, name, version badge, hero headline/lede, status meta, feature copy, how-it-works steps, pricing tiers, FAQ items.
2. **Wire the waitlist to a backend**: the form in `script.js` currently simulates submission. Replace the success path with a real `fetch` to your endpoint; keep the inline validation and `aria-live` error messages.
3. **Rebrand**: edit the `--ds-*` tokens in `pages/style.css` `:root`—keep one controlled accent.
4. **Rebuild the preview**: run `python3 ../_build_preview.py .` from the template folder.

## Do not

- Do not add glassmorphism, neon, gradients, gradient text, or oversized hero/decoration.
- Do not introduce a framework. Vanilla HTML + CSS + JS only.
- Do not remove form validation or ARIA on the accordion/form.

## Quality bar

Skip link, semantic landmarks, single `h1`, ARIA on the FAQ accordion (`aria-expanded`/`aria-controls`/`role=region`), form `aria-invalid` + `aria-live` errors, `role=img` progress bar, `:focus-visible` rings, reduced-motion guard. Run `python3 scripts/qa/resources/qa_vanilla.py` after changes. Validate with `python3 scripts/qa/resources/_qa_template.py Vanilla/Templates/product-launch/preview.html`.