Gitlines
Gitlines represent GitHub’s core collaborative functions commiting, merging, branching, and forking. Along each Gitline, there are solid or hollow nodes. Gitlines can be represented literally — as in, true to product UI — or modified to scale up or shift based on design and layout needs. We’ve even included them in paintings and illustrations.
Iconography
Our open source icon library is called the Octicon Library. It is included in Primer, with icons meant to serve GitHub’s needs across product. Icons at GitHub represent objects, ideas and workflows. Some icons convey actions and interactivity and others support and represent complex concepts.
Illustration
Alongside our shape library, we also include representational illustrations of characters and objects within the library that derive from Mona the Octocat's world to add a layer of GitHubby- ness to our branding. Some of these include illustrations of Mona, Hubot, elements from Mona’s world building language, and fully rendered gitlines.
Layouts
We make use of our grid when determining our layouts. Our grid works like a base structure, simply add shapes on top to create various compositions. These examples are based on a snapped to grid rationale, we can further create layouts that are more organic and free-floating as well.
Mascots
GitHub has a few mascots. Mona, Copilot and Ducky are close to the brand and well known by GitHub’s users and fans—the holy trinity, some might say. They bring whimsy and fun into all our brand experiences. Each mascot champions a specific product or community, but none are as essential as Mona, whose image has been cemented in GitHub branding and logo since the beginning.
Product UI
Our product UI demos are our best way to show the product in marketing contexts. It embodies both the function of the product features and extends our brand attributes.
Shapes
Shapes are graphic elements that represent GitHub's attributes and product pillars in a playful and conceptual way. We have a shape library with an assortment of abstract illustrations. Each shape was built on top of the grid for a cohesive look.