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 — a 404 on a marketing page, 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