From USOM

USOM

O USOM, o envelope com rosto. Junto com o serviço de e-mail somente de recebimento «USOM Mail», ele te guia pelo site e pelo app. Nasceu de um pedido: fazê-lo «fofo como um ladrão de pão». As ilustrações e o código de implementação são publicados sob CC BY 4.0.

Como ele é feito

Como é um envelope personificado como está, as partes são emprestadas do estilo de ilustração plana já existente. A base é fixa; só os braços, as pernas e a expressão são trocados. Todo o movimento é CSS, e ele para com prefers-reduced-motion.

  • Painel arredondadoO corpo do envelope. A base que nunca se move em nenhuma pose.
  • AbaUm único V fino da borda de cima para dentro. A dobra.
  • Emblema de escudoUm escudo roxo com um tique. A marca de «recebimento confirmado». Fixa no canto inferior direito.
  • Anel duploCírculos concêntricos contínuo e tracejado ao fundo. Decoração que só sugere presença.
  • Braços, pernas, expressãoAs únicas partes variáveis. A pose e a expressão são trocadas conforme o local.

Poses

A pose muda conforme o local. Cada uma é mostrada como é de fato usada.

walkAo longo do hero e do rodapéAnda. O corpo balança e os tornozelos batem.
waveCaixa vaziaAcena com uma mão no lugar. Sobre fundo branco, o traço fica escuro.
peekAo lado de um título de seçãoCurva-se e espia por cima da borda. Colocado pequeno.
lostPágina 404Levanta as duas mãos, aflito. O «?» também treme.

Como usar (licença)

Creative Commons Atribuição 4.0 Internacional (CC BY 4.0). Dê o crédito, e você pode modificá-lo e usá-lo para fins comerciais.

  • Você pode copiar, modificar e redistribuir (inclusive para fins comerciais)
  • Você pode mudar a pose ou as cores e usá-lo no seu próprio produto
  • Você não pode omitir a linha de crédito
  • Você não pode usá-lo de forma que dê a entender que o USOM Mail te apoia ou é afiliado a você

Linha de crédito

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

SVG

O SVG da pose padrão (walk). Substitua --m-* pelas cores que você quiser.

Baixar usom.svg