v1.0
Overview
Message Bubble is used exclusively in the Live Chat micro app. It is designed to show a series of individual written communications between to people.
Interactions
Anatomy
Dimension
Spacing
Visual Style
| Desktop-Sender | Desktop-Recipient | Tablet/Mobile-Sender | Tablet/Mobile-Recipient | |
|---|---|---|---|---|
| 1 | BUBBLE WRAP Background: #1E79C2; brand 600 height: flexible border: 1px solid #006AA9; brand 700 border-radius: 10px margin: 8, 8, 8, 8/0 align: right | Background: #FFFFFF; neutral 000 box-shadow: depth 100; - 0 1px 3px 0 rgba(53,60,70,0.80); align: left | No Change | No Change |
| 2 | HEADER TITLE (First, Last Name) font-family: Proxima-Nova font-size: 13px font-weight: 600; semibold font-color: #FFFFFF; neutral 000 align: left DATA POINT (Time Stamp) font-family: Proxima-Nova font-size: 12px font-weight: 400; regular font-color: #FFFFFF; neutral 000 align: right | TITLE (First, Last Name) font-family: Proxima-Nova font-size: 13px font-color: #353C46; neutral 700 DATA POINT (Time Stamp) font-color: #657489; neutral 500 | TITLE (First, Last Name) font-size: 16px DATA POINT (Time Stamp) font-size: 13px | TITLE (First, Last Name) font-size: 16px DATA POINT (Time Stamp) font-size: 13px |
| 3 | BODY font-family: Proxima-Nova font-size: 13px line-height: 15 font-weight: 400; regular font-color: #FFFFFF; neutral 000 align: left | font-color: #353C46; neutral 700 | font-size: 16pt | font-size: 16pt |
| 4 | FOOTER LABEL font-family: Proxima-Nova font-size: 12px line-height: 15 font-weight: 400; regular font-color: App team to configure align: right ICON glyph: App team to configure background: App team to configure height: 24px width: 24px HYPERLINK font-family: Proxima-Nova font-size: 12pt font-weight: 400; regular font-color: App team to configure align: right text-decoration: underline | FOOTER LABEL font-color (error): #C64252 font-color (default): #464F5C | No Change | No Change |
System Message
| Desktop | Tablet & Mobile | |
|---|---|---|
| 1 | BUBBLE WRAP Background: #EBEDF0; neutral 080 border: 1px solid #E0E3E8; neutral 100 border-radius: 10px margin: 16, 8, 8, 8 align: center | Background: #FFFFFF; neutral 000 box-shadow: depth 100; - 0 1px 3px 0 rgba(53,60,70,0.80); align: left |
| 2 | HEADER TITLE (System Message) font-family: Proxima-Nova font-size: 14pt font-weight: 600; semibold font-color: #353C46; neutral 700 padding-left: 16px padding-right: 16px align: center DATA POINT (Time Stamp) font-family: Proxima-Nova font-size: 12pt font-weight: 400; regular font-color: #353C46; neutral 700 align: right | TITLE (First, Last Name) font-size: 16pt DATA POINT (Time Stamp) font-size: 13pt |
| 3 | BODY font-family: Proxima-Nova font-size: 13pt font-weight: 400; regular font-color: #353C46; neutral 700 align: center | font-size: 16pt |