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

• Model input, processing, draft, edit, approval, and publish as explicit states.
• Use real application state when available; otherwise label the path Sample workflow.
• Support edit, submit, cancel, retry, copy, version history, loading, quota, moderation, network, and error states.
• Provide a deterministic replay and a text transcript.
• Disable autoplay typing and large state motion for reduced motion.
• Keep the workflow understandable when JavaScript or animation is unavailable.

Implement Pricing and FAQ

• Use semantic comparison tables or lists with aligned shared features.
• Explain usage units, limits, overages, and billing cadence in plain language.
• Keep cadence, plan selection, CTA loading, disabled, error, and recovery states in place.
• Connect ambiguous terms to deep-linked FAQ answers.
• Restore the prior comparison view with browser Back.

Motion Defaults

• Use 160–220ms for control feedback and 420–700ms for interface state changes.
• Stagger cards by 45–70ms and animate one handoff at a time.
• Keep cloud or background drift slow, optional, and offscreen-paused.
• Avoid fake typing speed, perpetual floating cards, and decorative generation loops.
• Render settled UI states immediately under reduced motion.

Validate

• Test keyboard editing, submit, cancel, retry, copy, and comparison controls.
• Exercise quota, moderation, network, empty, loading, and error states.
• Confirm all outputs are real, deterministic samples, or clearly labeled demos.
• Verify focus, contrast, 200% zoom, mobile wrapping, history, and reduced motion.
• Remove invented customers, outcomes, security claims, availability, or performance metrics.

Avoid

• A marketing mockup that cannot explain its own state changes.
• Fake dashboards, fake typing, or unlabeled sample output.
• Feature grids with no relation to the central workflow.
• Hidden pricing limits or disconnected FAQ answers.
• Generic AI particles, floating glass cards, and continuous motion.