Skip to content

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

service-desk-modified

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.
✅ Do 🛑 Don’t
02-Do-scale-illustration 02-Dont-scale-illustration
  • 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.
✅ Do 🛑 Don’t
01-Do-combined-2-elements 01-Dont-combined-2-elements
  • 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.
✅ Do 🛑 Don’t
03-Do-light-background-color 03-Dont-light-background-color
  • 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.

  1. Ensure that you have broken things down into atoms, molecules, and organisms.
  2. Check that you have not created a duplicate of an existing pattern.
  3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
  4. Make sure that text is created using text styles. When applicable used shared styles for colors.
Edited by Hazel Yang