Product Storytelling

Download

Patterns and guidance for communicating product value, feature moments, and user journeys.

Simplified UI: a product panel with a status pill stacked below it

Simplified UI

For use when speaking to high-level product and platform benefits.

Focused UI

For use when communicating specific product benefits.

Literal UI

For use when showing the product as a complete interface in context.

Choosing a mode

Use the least literal UI that still supports the message:

  1. Simplified first. This is the default for heroes, value propositions, benefits, and top-of-funnel content.
  2. Focused second. Use it when the content demonstrates a single product capability that simplified UI would obscure.
  3. Literal last. Reserve it for bottom-funnel content, comparisons, product tours, and detailed walkthroughs.

Never recreate product UI. Use approved assets from the Brand UI Library, and flag a gap if no approved asset fits.

Staging UI

  • Stage floating UI on a halftone tile, not a gradient.
  • Arrange the context UI panel and its status pill as a centered stack, about 12px apart.
  • Status pills have an 8px radius, never a capsule. Floating UI gets the brand-ui drop shadow.

Product Storytelling documentation last updated Tuesday, October 20, 2026