Library of shapes
Shapes are created directly from the grid and should generally follow its contour and alignment. The grid is made up of many parts. Each part can become a shape, or multiple shapes can be combined to create more complex compositions.
The shape library is large, spanning 37 different shapes, with variations for extrusion depth, angle, and color.
This selection of shapes shows them all at the diagonal right angle with a short extrusion, and gradient details.
This selection of shapes shows them all at the horizontal right angle with a long extrusion, and outline details.
While working with the shapes, make sure you’re using the precomposed elements, and not skewing or distorting assets to get the behavior that you want.
Leverage the different angles and dimensions to create variety in key art
Don’t create new angles or skew, flip, or rotate existing shapes or key art.
Library of icons
Use the rendered icons to highlight specific content or products. To keep the meaning clear, try not to use more than one per visual.
Use a mascot when it suits the messaging or audience
Don’t overload a composition with mascots just to make something feel GitHubby or branded.
Conveying meaning
Shapes can combine together or with icons to convey meaning. They can build up tall monuments, surrounding an idea, or blend together to signify connection.
This example uses proximity and space to emphasize the code icon.
This example uses scale to create a quieter moment.