Design Pattern Library - Illustration elements
Ensure all illustrations/empty states have been uploaded to the brand.ai library
Example(s)
See definition in https://gitlab.com/gitlab-org/gitlab-ce/issues/40468
Usage
See definition in https://gitlab.com/gitlab-org/gitlab-ce/issues/40468
Illustrations are powerful to deliver the brand image and help people understand the specific context.
Where illustrations are used:
- Empty states
- Banners (e.g., feature promotions, feature introductions)
- On-boarding process (e.g., Service Desk)
When illustrations can be used:
- It's hard to clearly explain a complex situation with only words.
- There is a need to deliver information in an attractive way (e.g., new features, feature suggestions, etc.)
- There is too much information being displayed at the same time and you want to simplify it.
Detailed specs
- Font
- Header title:
$font-ui-04-section-primary
- Description:
$font-ui-06-text-primary
- Paragraph & Title
- If the description needs to wrap on desktop, align it to the left.
- If the title needs to wrap on desktop, align both the title and description to the left.
- If the title and description do not wrap on desktop, center them horizontally.
- Button
- The Call To Action button in the empty state should be a
primary button
. - There is only one primary button since there can only be one primary button per form. If there is a need for more than one button, the other should be a
secondary button
.
- Mobile
- On mobile, the layout is same to the one on desktop. It only scales down the illustrations and changes the width of paragraph.
Dos and Don'ts
- Don't scale illustrations or a single element inside an illustration. They are catered to specific area sizes on a desktop. Scaling would break the visual consistency and increase the border thickness. However, for a good responsive design, illustrations are allowed to scale down on small screens.
|
|
---|---|
- Don't pick up elements from different illustrations and combine them to create a new one. It would lead to unnatural and unbalanced visual effects.
|
|
---|---|
- The background color of illustrations should be light and soft. The colors we suggest to use:
$white
-
$purple-50
,$purple-100
-
$orange-50
,$orange-100
-
$grey-50
.
|
|
---|---|
- When working on illustrations for a specific page, create a mockup where you place the illustration on the actual page to make sure that the placement and proportions are perfect.
- Follow the GitLab UX guide to create illustrations.
- Before exporting illustrations as SVGs, please check our SVG contributing guidelines.
See definition in https://gitlab.com/gitlab-org/gitlab-ce/issues/40468
Related patterns
(List any related or similar solutions. If none, write: No related patterns)
Links / references
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that text is created using text styles. When applicable used shared styles for colors.
Edited by Hazel Yang