From USOM

USOM

USOM, the envelope with a face. Together with the receiving-only mail service “USOM Mail”, it guides you around the site and the app. It was born from a request to make it “cute like a bread thief”. The artwork and the implementation code are published under CC BY 4.0.

How it is built

Since it is an envelope personified as-is, the parts are borrowed from the existing flat-illustration style. The base is fixed; only the arms, legs and expression are swapped. All motion is CSS, and it stops under prefers-reduced-motion.

  • Rounded panelThe body of the envelope. The base that never moves across any pose.
  • FlapA single thin V from the top edge inward. The fold.
  • Shield badgeA purple shield with a check. The “receipt confirmed” mark. Fixed at the bottom right.
  • Double ringConcentric solid and dashed circles in the background. Decoration that only suggests presence.
  • Arms, legs, expressionThe only variable parts. The pose and expression are swapped per placement.

Poses

The pose changes per placement. Each one is shown as it is actually used.

walkAcross the hero and footerWalks along. The body sways and the ankles flap.
waveEmpty inboxWaves one hand in place. On a white ground the line art goes dark.
peekBeside a section headingHunches down and peeks over the edge. Placed small.
lost404 pageRaises both hands, flustered. The “?” shakes too.

How to use it (license)

Creative Commons Attribution 4.0 International (CC BY 4.0). Give credit, and you may modify it and use it commercially.

  • You may copy, modify and redistribute it (including commercially)
  • You may change the pose or colors and use it in your own product
  • You may not omit the credit line
  • You may not use it in a way that implies USOM Mail endorses or is affiliated with you

Credit line

USOM by USOM Mail — CC BY 4.0
https://creativecommons.org/licenses/by/4.0/

SVG

The SVG of the standard pose (walk). Replace --m-* with the colors you like.

Download usom.svg