Illustration as a Storytelling Tool

GitHub’s design team took a new approach to illustration for the company’s redesigned homepage—one that blends character art, data visualization, and engineering into a single visual narrative. As Design Director Tony Jaramillo explains, the effort was a cross-team collaboration between illustrators and the site team, both working from the same story but from different angles: character and UX/UI.

The core of that story is the octocat, GitHub’s mascot, which has always been meant to represent developers—curious, tenacious, and driven toward innovation. For the homepage, the octo-avatar Mona was sent on a journey that mirrors what developers do on the platform: exploring the unknown with the safety net of GitHub’s tools. The illustrations show her starting on a blank planet, with sprouts and git lines around her feet suggesting growth and potential, while the globe behind her displays real GitHub activity.

A Shared Visual Language

To tie the human world and the octocat universe together, the team developed a common shape language based on git lines. These lines are symbolic of code development and can be manipulated into various forms, making them flexible for use in rocks, plants, and other scenery. Each node on a git line represents a commit, pull request, or branch—an apt metaphor for the connections between developers and the platform.

From there, the illustration pipeline followed a straightforward process: thumbnails, concepts, line art, color, and final asset creation, all based on a shared brief. Characters were drawn using existing model and expression sheets to maintain consistency. All illustrations were digitally hand-painted in-house by senior artist João Ribeiro.

Web-Specific Challenges

Web illustration brings its own constraints: responsiveness, performance, and UI layout must be considered alongside the artwork itself. The team worked closely with the site team to account for these factors, leveraging knowledge around compression to keep the page fast. The effective blending of these concerns is visible in the homepage’s other major visual element: the globe.

The globe concept needed to be engaging, informative, and legible while also reinforcing the connection between the product and the octocat world. Artists created concepts that broadcast the narrative through shape and color, going through multiple iterations before handing off to engineers to build the dynamic WebGL experience. The final result balances visual appeal with data visualization, interactivity, and speed.

For a deeper technical breakdown of the globe, the design team recommends reading the related blog posts by Tobi and Tal, which cover both the engineering and the data behind it.

Color as a Narrative Device

Color proved to be a design challenge in itself. The marketing team aims to represent the GitHub UI as accurately as possible, which means product color palettes—designed for utility—had to be stretched for a more engaging story without losing their connection to the interface.

The visual narrative’s core theme was energy, so the palette needed to illustrate the platform’s potential. The team iterated by increasing saturation while staying close to UI hues, aiming to blend the globe design, character illustrations, typography, and product shots through a shared color scheme. The resulting palette is based on a triad of green, violet, and orange, with a split complementary used to add enough options to distinguish each feature section. A couple of “cheat colors” were needed for UI elements.

Color scripts were then developed to treat the page as a full narrative arc:

  • The header establishes the triad—orange on Mona’s face, violet on the globe, and green on the CTA button.
  • Scrolling down, the palette rotates around the color wheel for each section.
  • The footer anchors back to the primary triad colors, resolving the visual arc.

This combination of art, design, and engineering points toward a new way of telling GitHub’s brand story. It pushed the team into new areas of exploration and experimentation, and according to Jaramillo, the collective design toolbox is larger than ever as a result. Homepage wallpapers are also available to download, offering a piece of the octocat world for desktops in a range of formats and resolutions.