Company
GitHub — The world’s leading AI-powered developer platform.
Context
In 2019, GitHub reached a pivotal design maturity milestone, with several high-impact projects poised to significantly transform the interface. This made the need for a simpler, more modern visual language undeniable. As part of this evolution, the component refresh became a cornerstone of a larger visual redesign effort. Under the leadership of Diana Mounter, we successfully shipped key redesigns, including the Code tab within repositories and the Primer Octicon library. These updates not only modernized the interface but also laid the foundation for a more cohesive and scalable design system across GitHub.
Highlights
Bluesky explorations.
We approached the redesign with fresh eyes and no constraints, starting with the basics: buttons. By rethinking button styles, we established a foundation that informed broader design decisions across the system. This iterative process allowed us to refine each component with intention, ensuring consistency and alignment with the new visual language.
What feels like GitHub?
After a phase of open exploration, we began adding constraints to guide the process and find direction. We worked on three distinct directions, a pattern that has since become a cornerstone of my design process: Practical Option: A solution that made sense and could be implemented efficiently within cost and time constraints. North Star: A visionary solution to inspire and guide long-term goals. Middle Ground: A stepping-stone approach that bridged the gap between the practical and the aspirational. This structured exploration ensured we could deliver immediate impact while keeping an eye on the future, balancing feasibility with innovation.
Visual language in context
In the beginning, we focused our explorations on a small subset of core components—often starting with just the primary buttons. This approach allowed us to iterate quickly and establish certainties about the directions we wanted to test. Once we had clarity, we expanded the testing to include these primitives and styles in as much context as possible, ensuring they worked cohesively across different scenarios. This phase not only refined our design decisions but also uncovered valuable insights that added to the backlog. It also served as the perfect prelude to what later became the dark mode project, laying the groundwork for its success.
Resolution
Summer 2020 — Primer update
In the summer of 2020, we achieved a major milestone by shipping the full visual refresh and releasing a significant library update across all implementations of Primer, GitHub’s open-source design system. This update unified the redesigned core components and set a new standard for consistency and scalability in GitHub’s design language. Below, you’ll find the final sticker sheet showcasing all the redesigned core components, along with a video of Diana Mounter’s talk, where she delves into the details of this transformative project.
