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.
| Pattern | Description and best suited for | Video |
|---|---|---|
| Container transform | Transforms one container into another to create a clear connection between an action and the content that follows. Best suited for modals, expanded views, and moments where one piece of content morphs into another. | |
| Container masking | Reveals a response within the bounds of the initiating element. Use only for celebratory or confirmation states, such as download, copy, paste, save, or submit. Best suited for button actions. | |
| Lateral | Moves between related views along a horizontal axis, reinforcing that they exist at the same level within a shared structure. Best suited for primary navigation, subnavigation, side navigation, tabs, and pricing tables. | |
| Enter and exit | Introduces or removes elements in a deliberate sequence, helping communicate when content has appeared, disappeared, or changed. Best suited for dropdowns, menu reveals, popovers, drawers, and overlays. | |
| Simple ease | Uses restrained movement and familiar easing to make interactions feel responsive without drawing unnecessary attention. This is the most general pattern and should be used when a more specific transition does not add meaning. Best suited for overall interface motion, hover states, resizing, opacity changes, and simple state transitions. |
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.
| Mona Pixel | GIF |
|---|---|
| Wave |  |
| Repo |  |
| Loading |  |
| Kiss |  |
| Heart |  |
| Heart above |  |
| Confetti |  |
| Attention |  |
| Glasses |  |
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.