One shared language
Across brand and product storytelling, our motion brings structure and expression into balance. It helps make complexity easier to understand, adapts across different scales and contexts, and remains distinctly GitHub. Together, these principles create a cohesive and enduring motion language that strengthens recognition and builds long-term brand equity.
Our approach is rooted in transformative infrastructure: structured systems that enable new ways of working. The result is motion that feels precise yet expressive, logical yet creative, mechanical yet organic.
What motion should achieve
Every motion choice should support at least one of these outcomes.
- Facilitate: Guide attention, explain what changed, and make the next step clear.
- Engage: Create rhythm and maintain interest without competing with the message.
- Impact: Give important moments enough expression to feel memorable and distinctly GitHub.
Not every moment needs all three. Utility motion should prioritize facilitation. Campaign and storytelling work can lean further into engagement and impact.
Logo animations
The following is our most up-to-date logo animation, primarily used in marketing videos.
Type animations
Mona Sans
Example of motion styles for revealing blocks of text of various lengths.
Mona Sans Mono
Mona Sans Mono is typically animated with more of a mechanical rhythm, drawing from the behavior of terminals, and system interfaces.
The typing effect is paired with a shifting cursor color to signal collaboration and the presence of multiple contributors.
Pre-universe color palette
Post-universe color palette
On our marketing site, it usually is applied as eyebrows on heroes, and testimonials.
Pre-universe color palette
Post-universe color palette
Text animation dont’s
Our motion should never feel like an out-of the box presentation effect. No slapping, rolling, or bouncing. (Unless it’s related to a character’s movement.)
Transitions
These transition patterns help motion feel consistent across brand and product experiences. Each one has a distinct role, making it easier to choose movement based on the relationship between an action, the content, and its outcome.
1. Container transform
An initiating element expands, contracts, or reshapes into its destination, creating a continuous path between interaction and outcome.
2. Container masking
Celebratory response, acknowledging the interaction and signaling that something meaningful has happened.
Post-universe color palette
3. Lateral
Related views move horizontally between destinations at the same level, reinforcing their position within a shared structure.
4. Simple ease
Small changes use restrained movement and familiar easing. The transition should feel almost immediate.
5. Enter and exit
Elements appear and leave in sequence, creating a clear rhythm as content changes.
UI animations
Mona Pixels
Mona Pixels are an expressive part of our brand, designed to bring moments of delight into the experience through a consistent visual system.
In marketing, we use them to represent thinking and processing states that echo familiar product moments, such as page loads or brief periods of latency. They also appear in celebratory and successful moments, including account creation, downloads, and other actions that benefit from a more expressive acknowledgment.
Usage of Mona Pixels in marketing sites
Pre-universe color palette
Post-universe color palette
Usage of Mona Pixels in product
UI animation in product
Below are a few directional examples showing how the principles above could be applied within the product experience.
Tessellations
Tessellation motifs may change seasonally, but the masking reveal is evergreen. This example uses the post-Universe color palette.
Animating product UI demos
When product marketing calls for product UI demos, products should be displayed accurately and with minimal abstraction, and all text and image content should contribute to a cohesive and appropriate overall narrative. We advise working closely with product team to accurately represent GitHub products in motion.