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.
Horizonal padding of 16pt for welcome screen (left) and conversational threads (right)
Vertical Spacing
Padding Between Different Groupings: 16pt
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 16pt.
Vertical padding of 16pt 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: 4pt
Within the same grouping (content sent by user or content created by Joule), the spacing between two text messages is 4pt.
Between Interactive Components: 8pt
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 8pt.
The spacing between a text message and any of these interactive components is also 8pt.
Vertical spacing of 4pt between two text messages (left) and spacing of 8pt between interactive components (right)