From USOM

USOM

USOM, el sobre con cara. Junto con el servicio de correo de solo recepción «USOM Mail», te guía por el sitio y la app. Nació de una petición: hacerlo «tierno como un ladrón de pan». El arte y el código de implementación se publican bajo CC BY 4.0.

Cómo está hecho

Como es un sobre personificado tal cual, las partes se toman del estilo de ilustración plana ya existente. La base es fija; solo se cambian los brazos, las piernas y la expresión. Todo el movimiento es CSS, y se detiene con prefers-reduced-motion.

  • Panel redondeadoEl cuerpo del sobre. La base que nunca se mueve en ninguna pose.
  • SolapaUna única V fina desde el borde superior hacia dentro. El pliegue.
  • Insignia de escudoUn escudo morado con una marca. La marca de «recepción confirmada». Fija abajo a la derecha.
  • Anillo dobleCírculos concéntricos continuo y discontinuo en el fondo. Decoración que solo sugiere presencia.
  • Brazos, piernas, expresiónLas únicas partes variables. La pose y la expresión se cambian según la ubicación.

Poses

La pose cambia según la ubicación. Cada una se muestra tal como se usa realmente.

walkPor el hero y el pie de páginaCamina. El cuerpo se balancea y los tobillos aletean.
waveBandeja vacíaSaluda con una mano en el sitio. Sobre fondo blanco, el trazo se oscurece.
peekJunto a un encabezado de secciónSe encorva y asoma por el borde. Se coloca pequeño.
lostPágina 404Levanta las dos manos, nervioso. El «?» también tiembla.

Cómo usarlo (licencia)

Creative Commons Atribución 4.0 Internacional (CC BY 4.0). Da crédito y podrás modificarlo y usarlo con fines comerciales.

  • Puedes copiarlo, modificarlo y redistribuirlo (incluido con fines comerciales)
  • Puedes cambiar la pose o los colores y usarlo en tu propio producto
  • No puedes omitir la línea de crédito
  • No puedes usarlo de forma que dé a entender que USOM Mail te respalda o está afiliado contigo

Línea de crédito

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

SVG

El SVG de la pose estándar (walk). Sustituye --m-* por los colores que quieras.

Descargar usom.svg