Aligning on an AI Tanuki Illustration
Purpose
The current Code Suggestions non-purchased state does not include any AI Illustration. It was hard to determine if we had something official to use in these scenarios. I think the addition of an illustration will not only make pages like this more visually appealing but also help with AI feature (brand) recognition within the product.
-
⭐ [Main Goal] To create an illustration for AI addon empty states in GitLab built within our illustrative guidelines. -
🌟 [Stretch Goal] Can we align AI illustration across marketing and product?
Usage Overview
Marketing | Gitlab.com |
---|---|
![]() |
![]() |
Concepts
Initial explorations
Current Proposal
After a few variants and testing through different concepts, I opted to remove the base background and craft a medium + small proposal that is more closely aligned with the current illustration. It's heavily based on the current artistic direction but sits within our illustration Grid structure. I wanted to bring a little more balance to elements to make sure we have clearly defined focal areas with vertical and horizontal alignment.
Below are some examples of before + after executions.
Example of implementation within Gitlab.com
Current | Proposal illustration |
---|---|
![]() |
![]() |
![]() |
![]() |
Explorations can be found in the
Checklists
After all of the following tasks are complete you can close this issue:
Assignee tasks:
See tasks:
-
Start with a branch of the GitLab Illustration file in Figma. Prefix the branch name with the issue number, and add your GitLab username as the suffix. For example, #120-feature-illustration-jelder
. -
Choose/copy a grid frame from the Grid page. Work on your illustration in the appropriate component or library page. A small illustration that can be used as a standalone "spot" illustration, or as a reusable element in a larger illustration can be added in the Components page, while all others can be added to the library page that makes the most sense. -
Ensure that the illustration follows the Illustration guidelines. For third-party trademarks, please review the third-party trademark usage guidelines. -
Request a review from a FE/UX Foundation designer for your Figma branch. If they have the capacity, they should assign themselves to this issue. If not, try pinging another designer.
Reviewer tasks:
See tasks:
-
Review the illustration. Add design-specific comments in Figma to maintain context. Add general comments to this issue, including your approval status. Once approved, assign to a Figma maintainer for final review.
Maintainer tasks:
See tasks:
-
Either merge the branch and publish library changes, or copy/paste the illustration from a draft file to the illustration file under the appropriate page and category. The frame name should match the exported file name (without the extension).
Library addition tasks:
Once the Reviewer or Maintainer has approved your illustration, consider the following tasks to add it to the gitlab-svgs
library.
See tasks:
-
Create a new merge request (MR) from this issue. -
Checkout the new branch locally. -
Export the illustration from the illustration file in Figma to the /illustrations folder in your local instance of the repo. The file name should be lowercase, and use hyphens as a separator between terms. If necessary, place the illustration in one of the sub-directories. -
In a terminal window, run yarn run dev
to preview the SVG library locally. Find the new illustration and ensure it is rendered accurately. -
After you’ve committed the changes and the pipeline passes, double-check your illustration in the review app and test that it matches your expectations. -
Assign the MR to a review by a maintainer, and proceed with any changes.
If you run into any problems, ensure that all other steps in the project README have been followed.