We have a shape library with an assortment of abstract illustrations representing our base pillars. Each shape was built on top of the grid for a cohesive look. We heavily discourage creating new shapes and recommend using what is readily available. Please note that certain shapes are not mutually exclusive to one pillar alone.
The grid as a base
The grid is separated by modules, one module can be the base for creation of different elements but also can be united by more modules to create more complex compositions.
Grid module
Shapes are created directly from the grid and should generally follow its contour and alignment.
Extra and off-grid modules
It is possible to create a more complex shape using various modules of the grid. It’s also possible to break from the grid in specific cases to create more whimsical shapes. Follow the outer ring for sizing reference.
Render complexity range
Here is a range of render complexity, using a Security shape as an example. The shape library contains both render styles available for all shapes and illustrations.
How our shapes are built
There's a rhyme and reason to how we build our shapes. Below you will find the conceptual thinking behind why shapes from different pillars are built the way they are.
Collaboration
Here, elements show different ways of combination. Shapes combine and blend together to signify connection.
Security
Here, we use our "glass shield" as a key element to visualize protection. We also represent security and safety by encapsulating shapes within shapes.
Productivity
Here, our shapes allude to acceleration. Some of the shapes also resemble the ‘contribution graph’, which is how GitHub represents a developer’s productivity in product.
AI
Our AI-themed shapes focus on force multiplication. Shapes start out singularly, and multiply manifold to signify amplification in productivity.
Enterprise
Since our Enterprise offering encapsulates all of our base pillars, we use an assortment of shapes from all pillars adjusted with the Enterprise color palette.