Icons

Icons are quickly identifiable graphics that represent common items in a redacted way. Our marketing icons are the building blocks of our illustration style, but they can also be used as individual units. They should be straightforward and simplistic, visualizing a single topic or call to action. They take a secondary role to the copy and are used at smaller scale; anything larger should default to an illustration and anything intended for functional use within the product should use the Product icon set instead.

Construction

The marketing icons are created using an 8px grid system. The icon set exists in two scales: 24px for smaller assets and 96px for larger assets. They are stylized in the following ways:

  • Our icon set consists entirely of linework, using a stroke weight of 1px or 2px, respectively.
  • In general, default to either white or charcoal linework for contrast purposes.
  • The icons should contain one rounded corner, if possible within the shape, with a radius of 3px or 12px, respectively.
  • Our icons aren’t fully enclosed; we create an open feeling by incorporating line breaks throughout, which also speaks to our iterative processes.
Construction of small (24px) and large (94px) brand icons
Construction of small and large brand icons

Software development lifecycle

This specific set of icons represents each stage of our software development lifecycle at each stage of the process. They are designed to be presented as a set when referring to the entire journey of the lifecycle or individually when referring to a specific stage.

A preview of the icons within the software development lifecycle set
Software development lifecycle icon samples

Patterns

Patterns consist of smaller, repeated graphics that create a singular, larger visual. They serve a variety of purposes, such as: adding structure to an asset, providing visual relief from other design elements, adding visual texture to the background of an asset, or filling negative space within a layout.

Patterns are typically added as a supporting element within a design. We have three main types of patterns that serve different functions:

  1. Patterns with icons speak to our culture. They are created using the marketing icon set with generous padding applied around each icon. These icons can be selected and arranged to tell a story. Their arrangement should be organic, and accents can be used to fill in negative space.
  2. Patterns with accents speak to our technology. The accents and symbols point back to our product. These patterns should be more structured and used as a textural element within a design.
  3. Patterns with grids speak to our structure and efficiency. This type of pattern can capture depth, represent framework, or serve as an anchoring element in the design. These patterns can be used subtly in content-heavy pieces or general-purpose collateral.
Three visual examples of patterns
Three examples of patterns using icons, accents, and grids

Last updated at: