Product interface example catalogs
A shared evidence library for choosing complete interaction models before product implementation. Each family pairs a curated visual field and measured panel anatomy with per-product records of motion, states, journey, interactions, recover
Overview#
A shared evidence library for choosing complete interaction models before product implementation. Each family pairs a curated visual field and measured panel anatomy with per-product records of motion, states, journey, interactions, recovery, accessibility, and provenance.
Motion evidence is labelled by how it was obtained, because the difference matters: 221 of 664 assets are a product driven on our own machines, the rest are recordings the product's owner published. A record still missing evidence is partial and carries the missing items in its own evidence_gaps; nothing is called complete on the strength of a marketing clip.
Catalogs: 15 Screenshots: 655 Structural analyses: 655 Records: 655 (0 with no remaining gap, 655 partial) Motion assets: 664 (443 owner-published media, 148 browser driven here, 73 product run here)
| Reference family | Representative screen | Scope | Records | Motion provenance |
|---|---|---|---|---|
| iOS app examples | <a href="ios-app-examples/README.md"><img src="ios-app-examples/images/01-things-3.webp" alt="iOS app examples representative interface reference" width="260"></a> | Native iPhone and iPad product interfaces. | 0 complete / 50 partial | 50 owner-published media |
| Android app examples | <a href="android-app-examples/README.md"><img src="android-app-examples/images/01-google-keep.webp" alt="Android app examples representative interface reference" width="260"></a> | Native Android phone, tablet, foldable, and wearable interfaces. | 0 complete / 50 partial | 50 owner-published media |
| macOS app examples | <a href="macos-app-examples/README.md"><img src="macos-app-examples/images/01-bartender.webp" alt="macOS app examples representative interface reference" width="260"></a> | Native macOS applications, menu-bar utilities, and productivity tools. | 0 complete / 50 partial | 50 owner-published media |
| Desktop app examples | <a href="desktop-app-examples/README.md"><img src="desktop-app-examples/images/01-visual-studio-code.webp" alt="Desktop app examples representative interface reference" width="260"></a> | Cross-platform desktop software across Electron, Qt, GTK, and native toolkits. | 0 complete / 50 partial | 46 browser driven here, 4 owner-published media |
| Web app examples | <a href="web-app-examples/README.md"><img src="web-app-examples/images/01-slack.webp" alt="Web app examples representative interface reference" width="260"></a> | Browser-based products with application-grade workflows. | 0 complete / 50 partial | 50 owner-published media |
| Dashboard and console examples | <a href="dashboard-console-examples/README.md"><img src="dashboard-console-examples/images/01-aws-management-console.webp" alt="Dashboard and console examples representative interface reference" width="260"></a> | Operational dashboards, control planes, admin surfaces, and dense data consoles. | 0 complete / 50 partial | 50 owner-published media |
| TUI examples | <a href="tui-examples/README.md"><img src="tui-examples/images/01-lazygit.webp" alt="TUI examples representative interface reference" width="260"></a> | Full-screen terminal interfaces with keyboard-first interaction. | 0 complete / 50 partial | 27 owner-published media, 23 product run here |
| CLI examples | <a href="cli-examples/README.md"><img src="cli-examples/images/01-git.webp" alt="CLI examples representative interface reference" width="260"></a> | Command-line interfaces designed for discoverability, composition, and automation. | 0 complete / 50 partial | 50 product run here |
| Onboarding and authentication examples | <a href="onboarding-auth-examples/README.md"><img src="onboarding-auth-examples/images/01-slack-workspace-creation.webp" alt="Onboarding and authentication examples representative interface reference" width="260"></a> | Account creation, identity, workspace setup, provisioning, and first-success journeys. | 0 complete / 50 partial | 50 owner-published media |
| Documentation site examples | <a href="documentation-site-examples/README.md"><img src="documentation-site-examples/images/01-mdn-web-docs.webp" alt="Documentation site examples representative interface reference" width="260"></a> | Product, API, framework, and platform documentation systems. | 0 complete / 50 partial | 50 browser driven here |
| App store listing examples | <a href="app-store-listing-examples/README.md"><img src="app-store-listing-examples/images/01-duolingo-language-lessons-apple-app-store.webp" alt="App store listing examples representative interface reference" width="260"></a> | Apple App Store and Google Play listings with strong product presentation. | 0 complete / 50 partial | 50 browser driven here, 14 owner-published media |
| Design system examples | <a href="design-system-examples/README.md"><img src="design-system-examples/images/01-material-design-3.webp" alt="Design system examples representative interface reference" width="260"></a> | Public design systems and platform human-interface guidance. | 0 complete / 50 partial | 48 owner-published media, 2 browser driven here |
| Report and evidence examples | <a href="report-evidence-examples/README.md"><img src="report-evidence-examples/images/01-grafana-explore.webp" alt="Report and evidence examples representative interface reference" width="260"></a> | Reports, findings, traces, comparisons, and evidence viewers. | 0 complete / 50 partial | 50 owner-published media |
| Landing page examples | — | Measured landing-page surfaces: captures at three review widths with DOM snapshots, per the family section of the evidence contract (full-reference-contract.md). | 0 complete / 0 partial | scaffolded, no records yet |
| Pricing & plans examples | <a href="pricing-page-examples/README.md"><img src="pricing-page-examples/images/01-docs-capital.png" alt="Pricing & plans examples representative interface reference" width="260"></a> | Product pricing and plan-comparison pages. | 0 complete / 5 partial | no measured motion |
Open a numbered per-product record for its motion evidence, named states, observed first-success journey, interactions, recovery, accessibility, and provenance. Read the family synthesis only after the underlying records.
Attribution and product ownership remain with the linked source.