HWS UI

Tact

SystemLivelyCalmStill
In effect: lively
NoneCelebrationsAll

A conversation

MO
Mira Okafor

Send a message: it rises out of the composer, translucent until the server takes it, then shows delivered and seen. Send โค๏ธ or ๐ŸŽ‰ on its own, or click one: it celebrates, once per message and once per conversation per 30 seconds. Mira's replies rise with a wash; four at once is a batch and lands still, as opening a conversation does. React from the toolbar, the menu or the picker and your emoji flies from there into its pill, which swells as it lands (a heart beats); hers only roll the count.

Surfaces

Each comes out of what opened it and leaves faster than it came: menus and popovers grow from their trigger, a dialog flies out of the button pressed, a sheet crosses its full width, a toast rises. Every button sinks under the pointer and springs back.

Springs

Material 3's own spring tokens, sampled into CSS linear() until they rest within 0.5%. Components name a role; the level decides what it means: Calm plays each on the standard curve in 140-200 ms, Still makes it instant.

Interface sounds

Soft mallet tones, every one quieter than the message chime; the two ticks are quieter still. Never during a call, in a hidden window, or for someone else's message.

Rules

  1. Acknowledge every act within 100 ms, where it happened.
  2. The more often something happens, the quieter it is.
  3. Motion explains where things came from and where they went.
  4. Objects bounce, text does not.
  5. Never make anyone wait: exits are faster than entrances, and nothing holds a click.
  6. People celebrate, the product does not: no keywords, no milestones, no crowds.
  7. One place to tone it down: Settings โ†’ Appearance โ†’ Motion.