JM Family Design System

Cute error messages for failures that need real action

mediumContent & Voicevoicetoneerrorscopy

Whimsical copy on consequential errors trivializes the user's problem and hides what they should do next.

The wrong way

Surfacing a real failure with playful copy that doesn't tell the user what happened or what to do.

tsxdo not copy
<Alert variant="error">
  Oops! Something went sideways. 
</Alert>

Why

Cute copy works for low-stakes moments like a 404 on a marketing page or an empty inbox. It does not work when someone just had a real problem. The user wants to know three things: what happened, was it me or you, and what do I do now. "Something went sideways" answers none of them, and the emoji makes the user feel mocked. Voice should be plain, calm, and specific, apologetic only when we are actually at fault.

The right way

Name the failure, say whose fault it is in plain language, and give the user a next step.

tsx
<Alert
  variant="error"
  title="We couldn't process your payment"
  description="The card was declined by your bank. Try a different card, or contact your bank for details."
/>

Related

Added in 1.1.0Last reviewed 2026-05-15