Skip to main content

Layouts

Our layout style is dependent on strict adherence to a grid. Applying the grid logic in the right way will create a technical and consistent feel between assets.

Grids and margins

Our grid focuses on two elements: the primary division of the page (visualized here in red) and the margin within the layout boxes (visualized here in red). Every design decision after that should feel consistent with those first two choices.

A layout example showing grid divisions and margins with annotations for proportion, insets, and accent borders.

Borders

Our parent level grid is a visible part of our brand. But not all of it should be shown. Reveal the grid with borders a couple times, then utilize the grid invisibly through conscious use of negative space.

A layout example showing how borders are used to reveal the grid structure, with annotations for headlines, small details, and border weight.

Layouts with speaker photos can mix photography with illustration by gray-scaling photos. Not all photos need to be treated this way — only in scenarios where they might compete with the other visuals.

A marketing layout with speaker photos mixed with illustration in a grayscale treatment.

Text and visuals

Our text layouts and visuals are distinctly separated, often marked by a solid GitHub green line. We utilize three text layout themes—White, Gray, and Black—to maintain the neutral essence of the GitHub brand. By overlaying text on these neutral backgrounds, we can use color strategically to highlight our icons, illustrations, and product visuals. This dual visual system embodies the twofold nature of our offerings:

  • Text represents the accessible infrastructure of GitHub’s repositories and developer tools.
  • Visual captures the expressive journey of programming and creativity with code.
Three examples of the same layout in White, Gray, and Black themes showing how text and visuals are separated.

With all copy, we work with a restricted palette. Use neutrals and accents to achieve high contrast combos. All text should meet WCAG AA standards in Normal Text size.