product-proof-saas

Product Proof SaaS

Show the product mechanism before making broad claims. Make the interface the evidence, not decoration.

Establish the Story

1. Name the user friction in one sentence.
2. Put a real, deterministic, or clearly labeled sample workflow in the hero.
3. Explain the mechanism as input, processing, draft, edit, approval, and publish states.
4. Organize features around user outcomes and audiences.
5. Keep pricing limits and objections in one continuous decision path.

Replace source brands, outputs, customers, metrics, prices, screenshots, and claims. Never fake generation speed or output quality.

Build the Visual System

• Use white-to-pale-blue surfaces, near-black text, soft gray grid lines, and one cool signal color.
• Pair a high-x-height grotesk with compact mono labels.
• Use 12-column product grids, 12–16px radii, thin borders, and honest UI screenshots.
• Keep product panels denser than the marketing copy around them.
• Use black primary actions and reserve the signal color for active state, progress, selection, and focus.
• Avoid decorative AI particles, constant floating, and vague glowing orbs.

Compose the Page

• Header: keep product routes compact and the primary trial or demo action obvious.
• Hero: pair the value proposition with a product stage that demonstrates one complete outcome.
• Friction proof: show a before/after, time breakdown, or concrete workflow constraint.
• Feature modules: use small icons and focused copy around real capabilities.
• Workflow: explain state changes and human control, not a magical one-click promise.
• Audience tabs: preserve content in the DOM and deep-link when useful.
• Proof: use verified examples, customer evidence, or clearly labeled samples.
• Pricing: align comparable limits, usage units, and footnotes.
• FAQ: deep-link ambiguous plan terms from the comparison table.
• Footer: resolve trust, documentation, and legal routes against a pale-blue fade.

Implement the Prompt-to-Output Story