Skip to main content

Grid system

A key element for composition and image creation in our system.

Most graphic assets in this toolkit derive from a grid system. Shapes, illustrations, and layouts are all guided by the same grid for visual harmony and consistency.

The grid

The grid is inspired by the Golden Ratio, and is primarily used as a guideline to inform our designs. We sometimes leave the grid slightly visible in our designs as a textural embellishment, although rarely. Below are quick examples of how we implement the grid. For more information on how to apply the grid to these specific elements, please see their respective sections in this guide.

Illustration of our circular grid system using black lines on a white background

Shapes

Grid as guidelines for shapes:

Two abstract shapes overlaid on the circular grid on a black background

Illustration

Grid as guidelines for illustration:

An illustration of Mona the Octocat and an illustration of Copilot, both overlaid on our circular grid on a black background

Layout

Grid as guidelines for layout:

An example social asset with a black background featuring illustrations of Copilot, gitlines, and an abstract outlined shape paired with placeholder lorem ipsum copy and a small invertocat logo in the corner

Textural embellishment

Grid as a textural embellishment:

A black rectangular asset with colorful abstract shapes coming in from the edges. The logo for GitHub Univers 2023 is in the corner.