5 min read
designproduct-sitesweb-designdesign-foldermarketing-sitesdocs-sitesdevtoolsinspirationUpdated 2026-07-13
Product Site Reference Gallery
Product and company websites Kevin saved as design references: devtool marketing, docs/product hubs, AI tooling, infra, and distinctive brand sites.
Design Position
| Field | Value |
|---|---|
| Design family | Reference and inspiration ledgers |
| Use when | Use when mining Product Site Reference Gallery for references to translate into design constraints. |
| System map | Design System Map |
| Proof path | Translate references into named patterns, tokens, or constraints; do not copy the source wholesale. |
Use this page when the design question is "how are strong product companies presenting themselves?" not "which tool should we use?" Operational tool selection still belongs in Capability Routing Map and the specific tool pages. Here, the object of study is site structure, information hierarchy, copy density, documentation packaging, motion, brand system, and first-viewport clarity.
High-signal study cards
Devtool and infrastructure sites
| Site | Study for |
|---|---|
| Stripe.dev | Developer-product hub density, docs/product blending, polished technical navigation. |
| Graphite - AI Code Review (graphite.com) | AI-assisted code review positioning, workflow screenshots, review-queue product framing. |
| VoidZero | Modern JavaScript tooling company narrative and ecosystem rollup. |
| Blacksmith GitHub Actions (blacksmith.sh) | GitHub Actions performance positioning and benchmark-driven product marketing. |
| Cloudflare Workers (workers.cloudflare.com) | Edge platform landing structure, performance claims, examples, and docs routes. |
| Railway | Infrastructure product UX, pricing/product navigation, and build/deploy mental model. |
| Render Cloud Platform (render.com) | Cloud platform positioning and developer onboarding. |
| Temporal | Durable-execution concept communication and enterprise developer marketing. |
| Daytona | Dev environment / sandbox positioning and product visualization. |
| Vercel Sandbox | Sandboxed compute positioning inside a broader platform brand. |
| E2B Code Sandboxes (e2b.dev) | Agent sandbox product framing and technical trust cues. |
| Sanity | Content-platform landing and docs ecosystem. |
| Tailwind CSS | Documentation, examples, and framework-brand clarity. |
| Fumadocs | Docs-framework site and navigation patterns. |
| Vite+ | Toolchain packaging and launch-site simplicity. |
AI, agent, and model-product sites
| Site | Study for |
|---|---|
| Adaline | Evals/observability messaging for AI agents and self-improving systems. |
| Semiotic | Creative AI model aggregation and visual product positioning. |
| Contra Labs | Human-data/evaluation lab positioning for creative AI systems. |
| ElizaOS | Open agent-platform identity and ecosystem communication. |
| Cognition | Frontier-agent product narrative and restrained high-stakes branding. |
| Suno | Consumer AI creation surface and fast onboarding funnel. |
| Kive (kive.ai) | AI product-representation positioning, curated-studio discovery, product-accuracy proof, and commercially directed image examples. |
| MegaETH | Technical product branding with high visual confidence. |
| Deeptune | AI-agent training/evaluation site framing. |
| The Way of Code | Editorial/educational AI coding experience as interactive artifact. |
Distinctive brand and studio sites
| Site | Study for |
|---|---|
| Basement Studio | Tech-startup brand systems and agency-grade interaction polish; also tracked in Design Agencies Reference. |
| Lusion | Immersive 3D and real-time web craft; also tracked in Design Agencies Reference. |
| HeyKuba | Conversion-focused Framer boutique site framing; also tracked in Design Agencies Reference. |
| Golf | Distinctive developer-product brand and short, memorable domain. |
| Paper | Modern design-tool launch surface and visual-system clarity. |
| Oxide | Industrial hardware/software brand, technical gravitas, and product photography. |
| Sazabi | High-contrast visual identity and product-site pacing. |
| Null Range | Minimal/experimental brand reference. |
| Void Cloud | Cloud-product visual language. |
| HeyClicky | Consumer/product site personality and interactive affordances. |
| People Network Ledger (ning-h.com) | Designer portfolio reference; route durable personal-site structures to Personal Website References. |
| People Network Ledger (josephines.world) | Personal/expressive web reference with strong art direction. |
| Mana Yerba Mate | Consumer brand site with product photography and lifestyle narrative. |
Use rules
- Extract the design move, not the literal aesthetic. Record the relevant pattern: hero density, nav model, feature grouping, proof placement, motion rhythm, screenshot treatment, pricing structure, or docs handoff.
- For devtool sites, study how the site earns trust: API snippets, docs proximity, examples, benchmarks, diagrams, changelog velocity, customer proof, and failure-mode honesty.
- For AI product sites, separate brand confidence from actual product capability. Recheck live docs before citing a product feature as current.
- Product sites can inspire Landing Page Variants & Reticle Expansion, but shipped UI patterns still need Design Inspiration Galleries or real-product libraries such as Mobbin/Refero.
Timeline
- 2026-07-01 | Design category refresh added this page to the Reference and inspiration ledgers family, linked it to Design System Map, and kept it standalone because Product Site Reference Gallery owns a distinct design decision surface in this family. Source: User request, 2026-07-01
- 2026-06-25 | Page created from Kevin's design-folder link set so product/company websites become a first-class design-reference shelf without polluting moodboard, component, or tool-routing pages. Source: raw/notes/design-folder-sites-2026-06-25.md