05 / IMPLEMENTATION · RETRIEVABLE CODE

Use a page.
Keep its contract.

The package is a static reference implementation. Each source-derived page uses ordinary HTML, CSS and small JavaScript modules; no framework runtime or account is required.

Files and ownership

File	Owns	Fingerprint
assets/reference.css	Guide shell, catalog specimens and guide responsiveness	`sha256:cd5ba78c8428511349f86aec6671cb79c44be71289425d8dc1bc010d9f64601e`
assets/reference.js	Guide navigation, search, local dialog and specimen controls	`sha256:f21db84ca7422556ceb466172cdd14328e5279c4aff3f51c119455af1a7b4ee0`
assets/product-recipes.css	Marketing, editorial, legal and console reconstruction contracts	`sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f`
assets/product-recipes.js	Local waitlist, typed decision, copy and sign-in fixtures	`sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f`
assets/docs-recipes.css	Documentation shell, code, tables, theme and mobile navigation	`sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353`
assets/docs-recipes.js	Search, tabs, copy, feedback, theme and passive media inspection	`sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6`
assets/catalog.css	Visible catalog presentation	`sha256:6d8757c0194dbe53d7560086eb6b098dc90484dbe3cf1dcb0c6c78b131b47587`
assets/catalog.js	Catalog filter, copy and decorative-motion controls	`sha256:ff73a482ef2841f2603dda0dde91783edbd1d3bc2fb2de0f512a3c47852231f1`

Download the complete recipe starter · Read the extension contract

Start from the matching family

Choose the route family and open its full-page recipe.
Use the component ID to find the local selector, source evidence and state contract.
Reuse that family’s stylesheet and JavaScript hooks. Keep page spacing outside the component.
Fill in original content using the vocabulary and data constraints.
Run the real page at 390, 768, 1440 and 1920px; verify keyboard, recovery and reduced motion.

Plain HTML component API

<!-- The page owns placement. This component owns its internal state. -->
<details data-component="mkt-faq-disclosure">
  <summary>How is uncertainty handled?</summary>
  <p>The application can route an uncertain result for human review.</p>
</details>

<!-- Stable IDs bind controls to outcomes and repeatable tests. -->
<button type="button" data-dialog-open="waitlist"
        data-control-id="secondary-waitlist" aria-haspopup="dialog">
  Join Waitlist
</button>

Ready to copy.

Use native semantics before adding roles. A link changes destination; a button changes local state. Input errors usearia-invalid and a linked message. Native dialogs contain focus and return it to the invoking control.

Reproduce the reference

node designs/typesafe/tools/build-all.cjs
python3 -m http.server 4177 --bind 127.0.0.1 \
  --directory designs/typesafe/site
# In another terminal:
.agents/skills/design-research/scripts/run-playwright.sh \
  designs/typesafe/tools/verify-render.cjs http://127.0.0.1:4177/

Ready to copy.

The base generator runs first; the dedicated recipe and catalog generators replace its initial bodies. Serve only site/. Raw captures and unpublished source documents stay in the research package.

Contribution, versions and migration

Maintainer: Pan Out design-research maintainers. Version 0.1.0, captured 18 September 2026. An added variant needs a stable ID, marked provenance, specimen, narrow layout, accessible state transition and a regression case that distinguishes the new behavior.

Use patch versions for faithful corrections, minor versions for backward-compatible additions, and a major version when a selector, hook, token meaning or interaction contract is removed. Keep the old hook as an alias through one minor release, document the replacement, and test both during that interval.

Do not merge the marketing and docs type systems. Do not silently replace source marks with text. Record deliberate accessibility changes and product-source uncertainty in the exception register.

Read system contracts and exception records