Illustrations

GitLab illustration banner
Illustration sample

Illustrations are a form of brand storytelling, adding clarity and context to complex ideas. Illustrations elevate the messaging, so they are typically accompanied by copy; the two together are necessary and should balance and complement one another.

Our marketing illustrations are an extension of our custom iconography system, and they reinforce our brand personality, company values, and product in the following ways:

  • Speed and movement are conveyed through lines and gradients. By creating motion in our static work, we show efficiency and a sense of forward momentum.
  • Linework is inspired by lines of code, which grounds the illustration in our product.
  • UI-centric iconography is incorporated throughout an illustration.
  • Dashed lines speak to our iterative processes.
  • Combining elements shows collaboration and how multiple systems are working alongside one another.
  • Inviting elements, such as color and diversity, add vibrancy and life to the story.

Construction

When building illustrations, adhere to the following guidelines to maintain visual consistency:

  1. Linework creates the overall foundation of an illustration.
    1. A single stroke weight should be used consistently throughout any asset.
    2. Discretion should be used to ensure that lines appear thin; in general, lines can be set to 2px for digital assets and 15px for large print assets (such as event booths).
  2. Solid shapes add weight to the illustration and fill out the form laid out from the linework of the piece.
    1. A single shape can also be used as a background element to ground the visual. In this case, the illustration should break out of the container shape.
    2. Solid shapes can be added to icons to create contrast.
    3. Solid shapes can also be used as background elements to add texture or fill out negative space.
  3. Detail should be purposeful by providing additional context to the overall story.
    1. Additional lines, shapes, and gradients can be incorporated to depict motion and direction.
  4. Corners use a mix of angles and curves to create a dynamic visual.
    1. Generally, a curved corner radius should be 25-30% of the width of the square.
    2. For shapes with a curve applied to all corners, the radius should be 5-10%.
  5. Color should be used intentionally to communicate different aspects and features; use colors that resonate with our product to pull the story of the illustration forward.
GitLab illustration construction
Illustration construction on a light and dark background

Last updated at: