Skip to main content

​
Storage + naming

  • Place all static assets in docs/images/.
  • Use kebab-case filenames that describe the content: app-launch-sequence.png, otp-error-log.png.
  • Export at 2x resolution so text remains crisp on high-DPI screens.

​
Embedding images

Wrap screenshots in <Frame> to keep rounded corners consistent with the site. 
<Frame caption="Send OTP flow in staging">
  <img src="/images/otp-flow.png" alt="Send OTP request log" />
</Frame>
Always include descriptive alt text that explains what the reader should look for (use “Screenshot of …” sparingly).

​
Videos & demos

Prefer GIF/WebM for short loops (under 15s) and upload longer walkthroughs to an internal drive, then embed with <iframe>: 
<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.loom.com/embed/your-id"
  title="Langfuse trace triage demo"
  frameBorder="0"
  allow="autoplay; fullscreen"
></iframe>

​
Redaction guidelines

  • Blur customer PIIs (names, emails, phone numbers) unless you’re using test accounts documented in GUEST_USER_CHAT_IMPLEMENTATION.md.
  • Highlight areas of interest with subtle rectangles or callouts—avoid bright arrows that clash with the docs theme.

​
File size

  • Keep images under 1.5 MB when possible. Use pngquant/ImageOptim before committing.
  • For huge diagrams, prefer SVG exported from Figma; the docs site handles them well and they stay crisp at any zoom level.