Layout
Joule / Foundation / Layout
Intro
The layout for Joule is designed to organize and present conversational elements in a clear and intuitive manner. This includes structuring messages, input fields, and interactive components to ensure smooth communication between the user and the copilot. It aims to support quick comprehension of responses, easy navigation, and accessibility while maintaining a consistent and aesthetically pleasing appearance.
Horizontal Spacing
Panel Padding: 16pt
The padding between elements to the border of the Joule panel is 16pt. The top padding within the Joule conversation container and the Joule panel is 16pt.
Horizonal padding of 16pt for welcome screen (left) and conversational threads (right)
Vertical Spacing
Padding Between Different Groupings: 24pt
Within the Joule panel, there are three main groupings:
- Timestamp
- Content sent by the user
- Content created by Joule.
The spacing between these different groupings is 24pt.
Vertical padding of 24pt between the timestamp and the content sent by the user as well as between user-created content and content created by Joule
Padding Within Same Grouping
Padding Between User Text Messages: 4pt
Within the same grouping (content sent by user), the spacing between text messages is 4pt.
Padding Between Joule Text Messages: 12pt
Within the same grouping (content sent by Joule), the spacing between Joule text messages is 12pt.
Padding Between Interactive Components: 16pt
Within the content created by Joule, there are five interactive components:
- Quick reply
- Object card
- Illustrated message
- Menu selection
- List
The spacing between these interactive components is 16pt.
The spacing between a text message and any of these interactive components is also 16pt.
Vertical spacing of 4pt between two text messages and 12pt between two Joule text messages (left); spacing of 16pt between interactive components (right)
Response Actions Padding: 4pt
Response actions are placed under every group of Joule responses, regardless of the Joule response type (text message, card, illustrated message, etc.).
The spacing between Joule responses and response actions is 4pt.
Vertical spacing of 4pt between Joule responses and response actions