A group of messages is meant to form a conversation. The way that conversations are represented inside of apps, regardless of platform, should be consistent.

Structure

Elements

Inner

The inner part of the message contains the guts of your message: the heading, date, and content.

Heading

The header should include an avatar and the sender’s name as part of a title.

Title

The title inherits the heading-4 style along with the modified color if the message is a note.

Date

The date is floated to the right edge of the message in a muted color.

Variations

Note

Note messages modify the appearance of the message to differentiate it from others. A typical conversation has two-way messages but can also have internal or private notes.

The title and date in the content inherit alternative text colors to match the note in appearance.

Spacing