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 Joule. It aims to support quick comprehension of responses, easy navigation, and accessibility while maintaining a consistent and aesthetically pleasing appearance.
Horizontal Spacing
Panel Padding: 16dp
The padding between elements to the border of the Joule panel is 16dp.
Horizonal padding of 16dp for welcome screen (left) and conversational threads (right)
Vertical Spacing
Padding Between Different Groupings: 16dp
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 16dp.
Vertical padding of 16dp 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
Between Two Text Messages: 4dp
Within the same grouping (content sent by user or content created by Joule), the spacing between two text messages is 4dp.
Between Interactive Components: 8dp
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 8dp.
The spacing between a text message and any of these interactive components is also 8dp.
Vertical spacing of 4dp between two text messages (left) and spacing of 8dp between interactive components (right)