UI prototypes

How to use them

Clickable prototype

Sign in: switch between Sign in and Sign up.

Mobile: four tabs along the bottom; open a chat from the list; back arrow returns; the + button opens the attachment panel; tap a bubble for its action sheet (your own messages offer Recall and Read by, theirs offer Report); type in the composer and the send button turns green.

Desktop: the left rail switches between Chats, Contacts, Groups and Settings; select Nina Cole or Product Design to change conversation, and the right column follows.

Where the values come from

Every value comes from the shipped stylesheet and UI spec.

Brand green #06C755 · deep green #00A844

Chat ground #E9F4E5 · own bubble #B7F27D

Page ground #F4F5F2 · rule #E5EAE6

Body #111817 · secondary #71807A · danger #D14343

Bubble radius 18px, 4px on the near corner