Human creativity
Developers remain the authors of software even as AI tools change the work. Our reading
The system
Fixed, everywhere
- Unaltered current Invertocat and GitHub spelling
- Neutral readable text separated from expressive visuals
- GitHub Green as the core connecting accent
- Mona Sans and Mona Sans Mono
- Grid logic and accessibility
The one thing that varies
All five attributes remain present, while one or two may lead for a particular audience or task. Expressiveness varies from subtle four-cell branding to key art. Universe identities are event-specific and do not redefine the core brand.
Source: brand.github.com/brand-identity/attributesbrand.github.com/graphic-elements/illustrationbrand.github.com/graphic-elements/texturesbrand.github.com/brand-in-action/experiential
How loud each format gets
SilentChart / diagram
QuieteBook / whitepaperTechnical demo
CalmLanding pageDeck
WarmSwag
LoudSocial postEvent / booth
Loudest
Our engine's setting, built from their rules.
Every piece passes 3 checks
Logo hidden
Does the composition still carry GitHub through Mona Sans/Mono, green, contribution-derived geometry and neutral/expressive separation?
Functional or expressive
Can the chosen intensity be explained by audience, task and context? Technical demos stay precise; community and launch moments can carry more delight.
Readable without color
Can a reader understand the hierarchy, labels and data without relying on color alone?
Strategy
A developer platform bringing collaboration, AI-assisted coding, automation and security into the work of building software. Our reading
Collaborative infrastructure
A shared home for repositories, review and collaboration across the developer community. Our reading
AI that helps ship work
Copilot expands from assistance into tasks, projects and automation. Our reading
Enterprise confidence
Security and quality capabilities support teams building at organizational scale. Our reading
Software still starts with you
GitHub Platform
More ways to use GitHub
Join the world's largest developer community
Full spec
- For Our reading
- Individual developers, open source contributors, development teams and enterprise organizations.
- Problem Our reading
- Developers need to coordinate changes, automate repetitive work and address software quality and security while building.
- Promise Our reading
- Help people build software together with AI assistance and supporting development infrastructure.
- Mission Published
- Accelerate human progress through developer collaboration.
Proof behind each pillar
- Human creativity. 225M+ developers building on GitHub
- Human creativity. Homepage presents repository hosting, review and collaboration alongside Copilot coding agents
- Collaborative infrastructure. 800M public and open source repositories
- Collaborative infrastructure. Homepage presents repository hosting, review and collaboration alongside Copilot coding agents
- AI that helps ship work. Mercado Libre customer card reports a 50% reduction in coding time with GitHub Copilot
- AI that helps ship work. Homepage presents repository hosting, review and collaboration alongside Copilot coding agents
- Enterprise confidence. 90% of the Fortune 100 uses GitHub
- Enterprise confidence. Homepage presents Code Security, Secret Protection and Code Quality as distinct capabilities
Story Published
The visual language turns developers’ daily contributions into a system of cells, building blocks and shared infrastructure. More expressive layers suggest what developers can create together using GitHub and Copilot.
Values
Nerdy
Attend carefully to technical detail and make complexity approachable.
PublishedConfident
Put the product forward with consistent quality and clear expertise.
PublishedAuthentic
Stay grounded in the product and community, with conversational language and uncluttered design.
PublishedImaginative
Make room for surprise, creative ambition and unexpected concepts.
PublishedEmpathetic
Prioritize readers, accessibility and multiple ways to participate.
PublishedCategory. Developer platform with repository hosting and AI coding agents. Our reading
Why them
- A large visible developer community with 225M+ developers and 800M public and open source repositories in the capture. Our reading
- Repository collaboration and Copilot work presented together as two central platform offers. Our reading
- Quality, automation, vulnerability detection and secret protection displayed alongside coding tools. Our reading
- Enterprise social proof: 90% of Fortune 100 organizations reported as GitHub users. Our reading
Boilerplate Our reading
GitHub supports software development through repositories, code review, collaboration, automation, security tools and AI coding assistance, connecting developers and organizations through a large community.
Taglines
Software still starts with you Observed
They never claim
- Keep the exact scope and observation date attached to homepage statistics; these are marketing claims observed in a saved capture. Our reading
- Do not imply GitHub endorsement or affiliation through logo or name usage. Published
- Do not describe a co-hosted or partnered event without explicit GitHub approval. Published
The toolkit states a mission and five brand attributes rather than a complete message architecture. The saved homepage centers developer agency, the GitHub/Copilot platform, enterprise proof and community participation.
Source: brand.github.com/foundations/accessibilitybrand.github.com/brand-identity/attributesgithub.com
Personality and voice
Nerdybut not Showy technical posturingOur reading
Confidentbut not Flashy without substanceOur reading
Authenticbut not Unnecessary marketing languageOur reading
Imaginativebut not Expected and formulaicOur reading
Empatheticbut not Company-first assumptionsOur reading
Technical confidence works best when it helps a reader do something and makes room for creative ambition.
Full spec
- Write GitHub with capital G and H as a single word.
- Use exact technical language and correct punctuation; explain technical concepts accessibly.
- Use short, conversational, plainspoken sentences; remove unnecessary jargon and marketing filler.
- Address the reader with you more often than referring to the company with we.
- Explain what the reader can accomplish, rather than merely describing the company.
- Present problems and solutions with clear technical expertise and concise language.
- Connect the immediate task to developers’ creative goals and a better future.
- Include expert and hobbyist voices; celebrate both modest experiments and major achievements.
- Review copy for accessibility and readability in its actual context.
- Use sentence-case, succinct button labels without line breaks.
nerdyconfidentauthenticimaginativeempathetic
The five public brand attributes provide specific copy behaviors. The complete cross-channel voice guide is private and not publicly available. Homepage copy observed on 2026-10-31 gives examples of direct address, practical verbs and developer agency.
- Write GitHub with capital G and H as a single word.
- Use exact technical language and correct punctuation; explain technical concepts accessibly.
- Use short, conversational, plainspoken sentences; remove unnecessary jargon and marketing filler.
- Address the reader with you more often than referring to the company with we.
- Explain what the reader can accomplish, rather than merely describing the company.
- Present problems and solutions with clear technical expertise and concise language.
- Connect the immediate task to developers’ creative goals and a better future.
- Include expert and hobbyist voices; celebrate both modest experiments and major achievements.
- Review copy for accessibility and readability in its actual context.
- Use sentence-case, succinct button labels without line breaks.
- The complete voice-and-tone guide is not published publicly: its private GitHub document returns 404. Rules here come from the public Attributes page and Primer button guidance. Homepage examples are observed 2026-10-31, not a replacement style guide. Attribute page spells Imaginative as Imaginitive.
Their words
GitHubCopilot
Source: brand.github.com/brand-identity/attributes
- Don’t Present inferred editorial choices as rules from the unavailable voice document
- Don’t Invent banned words, punctuation conventions, numeric sentence limits or official before/after examples
- Don’t Treat homepage claims as timeless or remove their scope
| Tone | Nerdy / Confident / Authentic / Imaginative / Empathetic |
|---|---|
| Full voice-and-tone guide | not published publicly; linked private document returns 404 |
| Approved / banned lexicon | not published; observed phrases are examples only |
| Homepage evidence | Observed 2026-10-31; screenshots home-desk-00 through home-desk-04 |
Source: brand.github.com/brand-identity/attributesbrand.github.com/brand-identity/voice-and-tonegithub.comprimer.style/brand/components/Button
Logo
These local files are native toolkit example plates, not extracted production logo SVGs. Several plates contain multiple lockups. Use the official downloadable logo package for production, follow the published legal permissions, and never substitute a mascot.
A stable primary mark makes a broad product and community ecosystem recognizable without flattening product context.
Full spec
- Use standalone Invertocat in GitHub-owned or already established GitHub contexts; otherwise prefer the full lockup.
- Preserve 25% clear space on all sides of the Invertocat; balance top and bottom optically in circular crops.
- Use white or black by default, with gray or green in limited cases; maintain accessibility and choose highest contrast when uncertain.
- Default product lockups pair Invertocat with Security or Copilot; expanded lockups include GitHub where familiarity is low.
- Navigational names may omit Invertocat when the GitHub platform is obvious.
- Use Universe or other event identities only for their specific time-bound experiences; ReadME is a distinct initiative identity.
- Co-brand logos need similar optical size, considering both height and width, and optical centering; horizontal full-name form is available, stacked is last choice.
- Seek Brand Studio guidance and approval for co-brand lockups; keep third-party GitHub use secondary to their own identity.
- Don’t Rearrange, distort, skew, stretch or alter logo elements
- Don’t Mix mark and wordmark colors
- Don’t Add shadows, gradients or other graphic effects
- Don’t Place on busy or low-contrast grounds
- Don’t Replace the logo with Mona or another mascot
- Don’t Use deprecated Invertocat, logotype or standalone Copilot icon logo
- Don’t Imply endorsement, affiliation or ownership of GitHub marks
| Clear space | Invertocat: 0.25x on each side, x = mark height (logo-02) |
|---|---|
| Minimum size | not published |
| Lockup-specific spacing | not published beyond the Invertocat plate and co-brand visual examples |
| Product examples | Security; Copilot; GitHub Copilot; GitHub Spark; GitHub Enterprise |
| Co-brand | Equal optical size; symbol form default, full-name horizontal when required, stacked last choice |
The current Invertocat is the primary pictogram; the wordmark lockup provides corporate recognition. Product names can use default, expanded or navigational forms according to context.
Source: brand.github.com/foundations/logobrand.github.com/brand-identity/cobrandingbrand.github.com/brand-identity/copilot
Color
Restraint keeps the interface technical and trustworthy while product-specific colors help identify the subject.
Full spec
- Neutrals dominate; GitHub Green connects core applications. Secondary colors appear sparingly, primarily in illustrations.
- Copilot theme composition: 80% neutral, 5% gray, 5% green, 10% purple.
- Security theme composition: 80% neutral, 5% gray, 5% green, 10% blue.
- Separate copy from expressive imagery; use White, Gray or Black text panels and ensure AA for normal text.
- Never communicate meaning through color alone.
- Keep toolkit and Primer color names separate: their gray, green and product-theme scales are not identical.
- Use the explicit layout text colors for White, Gray and Black themes; test each actual foreground/background combination.
- Don’t Make secondary accents the general core brand identity
- Don’t Apply product color behind paragraphs where it harms readability
- Don’t Treat observed pixels as published hex values
- Don’t Silently replace toolkit swatches with similarly named Primer colors
| Core hero | GitHub Green #0FBF3E |
|---|---|
| Copilot hero | Purple #8534F3 |
| Security hero | Blue #3094FF |
| Theme ratio | 80% neutral / 5% gray / 5% green / 10% purple or blue, from rendered labels |
| Core-only numeric proportions | not published |
| White/gray subtle copy | #77827A |
| Black subtle copy | #96A199 |
| White text accent | #0FAC39 |
| Gray text accent | #0CA334 |
| Black text accent | #0FBF3E |
| Complete values | See study.swatches / kit.palette.extras; brand swatches and all saved Primer UI scale entries retained separately |
Neutrals carry the bulk of layouts, with GitHub Green as the core hero. Copilot adds purple and warm accents; Security adds blue with lime/warm supporting colors. Primer Brand publishes a separate, broader UI scale.
Source: brand.github.com/foundations/colorbrand.github.com/brand-identity/copilotbrand.github.com/graphic-elements/layoutsbrand.github.com/foundations/accessibilityprimer.style/brand/primitives/color
Typography
Software still starts with you
The same family spans expressive headlines and clear information, while mono links the language to terminals and developer practice.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Mona Sans | Display headlines and titles; specimen H0 110/110 Display. Keep normal width except special events. | SIL OFL 1.1; real supplied open-source face | No stand-in required; the real family is open source and supplied locally. |
| Mona Sans | Medium headline and body examples; H2 38/44 and Body Large 17/26. Prioritize hierarchy and readability. | SIL OFL 1.1; real supplied open-source face | No stand-in required; the real family is open source and supplied locally. |
| Mona Sans Mono | Short technical eyebrows, captions and terminal-like motion. No uppercase multiline treatments. | SIL OFL 1.1; real supplied open-source face | Geist Mono Mona Sans Mono (OFL, github.com/github/mona-sans) is not on Google Fonts/Fontsource. Geist Mono is the closest open mono by measured metrics (capsize, 2026-10-31): x-height 0.530 vs 0.517 em, cap height 0.710 vs 0.729, advance 0.600 vs 0.618 em. |
- Load the real supplied open-source faces; no substitute is necessary.
- Use default width styles; other widths are reserved for special events such as Universe.
- Keep headline and body ligatures off.
- Do not manually letterspace; rely on the font’s optical sizing behavior (the guide calls this OPS2).
- Avoid uppercase multiline mono. Short technical eyebrows can be uppercase, as the pairing examples show.
- Use clear hierarchy; pair equal Body XL styles without unnecessary hierarchy or equal Medium styles with one emphasized.
- Pair technical eyebrows with expressive headlines, or technical labels with legible captions; headline/body pairing may use large contrast.
- Scale relationships are starting points for the environment; accessibility page also says to preserve its legible type-pairing primitives. Resolve adaptations through readability rather than arbitrary rescaling.
- Don’t Use condensed or expanded widths as everyday core typography
- Don’t All-caps multiline monospace
- Don’t Ligatures in headlines or body
- Don’t Manual negative tracking like the illustrated -5px misuse
- Don’t Treat the specimen numbers as a measured responsive website scale
| Real faces | Mona Sans; Mona Sans Mono; Mona Sans Italic supplied |
|---|---|
| License | SIL OFL 1.1 |
| H0 specimen | 110/110; Display |
| H2 specimen | 38/44; Medium |
| Body Large specimen | 17/26; Medium |
| Specimen units | not stated in image; preserve printed values without assuming CSS pixels |
| Numerical Display / Mono weights | not published |
| Complete type scale | not published in the supplied material |
Mona Sans is the open-source superfamily; Mona Sans Mono adds the technical voice. The specimens emphasize a large Display title, Medium subheadline/body and short mono labels.
Source: brand.github.com/foundations/typographybrand.github.com/foundations/accessibilitygithub.com/github/mona-sans
Graphic elements
Do Separate text and visuals with one green accent divider. Choose White, Gray or Black text panels, reserving color for the visual..
Neutral text / expressive visual · Core marketing compositions
Do Choose primary division and internal margins first. Key art occupies 1/3, 1/2 or 2/3. Default borders 2px; one accent border 4px. Preserve invisible grid through negative space..
Selective visible grid · Layouts, publications, event cards
Do Use the provided cell compositions; varying greens, subordinate gray, balanced positive/negative space. Light branding may use four squares in a row or column. In graph visuals, limit to one icon and one mascot, each within a cell..
Contribution graph cells · Light branding, community and creative expression
Do Binary on/off abstraction of contribution history. Scale to the application while keeping a wallpaper role; fade away from important UI..
Dither wallpaper · Backgrounds, surfaces and event/environmental pattern
Do Detailed 3D and isometric contribution landscapes; combine solid, cryptographic and transparent blocks with semantic icons. Flat profile is permitted when it tells the story better..
Optimistic daylight building blocks · Key announcement art
Do Mona Sans Mono supports short technical labels; pair with expressive Sans headlines or legible caption copy..
Technical mono detail · Eyebrows, captions and system-like animated text
Specimens use sample copy, not GitHub’s.
The visual vocabulary is native to GitHub’s daily use, so even abstract compositions retain developer meaning.
Full spec
- Use premade contribution graph visuals; modify only when necessary rather than recreating the base elements.
- Vary greens to read as contribution history; keep gray cells subordinate.
- Balance occupied and empty cells; graph examples limit the composition to one icon and one mascot.
- Keep all graph elements within a cell; light branding can reduce to four squares in a row or column.
- Dither is wallpaper, suitable for backgrounds, physical surfaces and supporting illustration detail, not the main narrative.
- For product visuals, define one focal point, remove nonessential UI, and keep the product recognizable.
- Frame UI against dither with a visible stroke matching the square thickness; gradient/opacity strokes must not become fully transparent.
- Maintain consistent spacing across multiple UI images and include alt text describing meaningful content and interactions.
- Don’t Scatter contribution cells or break their grid
- Don’t Use the contribution graph as background texture behind product UI
- Don’t Supersize individual cell contents
- Don’t Combine dither and contribution graph patterns in one composition
- Don’t Let simplified UI become an inaccurate product redesign
| Light contribution signature | Four squares, row or column |
|---|---|
| Graph art semantic limit | One icon and one mascot per visual (textures-01) |
| UI stroke | Match dither square thickness; numeric value not published |
| Numeric cell size / radius / dither density | not published |
The contribution calendar supplies a recognizable square-cell grammar. Dithering abstracts it into binary wallpaper; product frames, mono details and selective borders add technical structure.
Source: brand.github.com/graphic-elements/texturesbrand.github.com/graphic-elements/product-uibrand.github.com/guides/getting-started
Iconography
Reusing product symbols builds familiarity; the gitline-derived spot layer adds expression while retaining technical roots.
Full spec
- Choose Octicons first; use them for navigation, content-related bullets and small visual accents.
- Use spot icons at larger illustration scale; they supplement Octicons.
- Keep spot palettes to neutrals and core/product hero colors.
- Use a spot icon to connect abstract art to a concrete topic.
- In key art, keep iconography subordinate to the art and mascots.
- Don’t Replace small UI Octicons with detailed spot art
- Don’t Invent a new general icon family
- Don’t Let symbols displace the key illustration or mascot
- Don’t Assign an unsourced grid or stroke recipe
| Default library | Octicons, open source, included in Primer |
|---|---|
| Spot construction | Gitline timeline plus commit-circle geometry |
| Grid / stroke / optical sizes | not published in the supplied pages; toolkit delegates optical size detail to Octicons documentation |
Octicons are the stable default across product and brand. Larger spot icons bend gitline timelines and commit circles into topic-based symbols.
Illustration
Daily contributions become a world of potential, turning infrastructure into a creative and collaborative story.
Full spec
- Reserve detailed key art for major brand moments; modulate expression to the task.
- Default key art is detailed, 3D and isometric; flat profile is allowed when it tells the story better.
- Set illustrations in optimistic daylight.
- Use solid, cryptographic and glass-like blocks to represent different contributions; icons can add meaning.
- Choose the right story rather than forcing every composition into a mascot above cubes.
- Mona belongs to open source community stories; Copilot accompanies AI product topics; use Ducky less frequently because recognition is lower.
- Use mascots sparingly for community, celebration, inspiration and entertainment. Public-facing mascot use requires Brand & Marketing Design approval.
- Treat original flat Octocat as historical/throwback, outline style as being deprecated, and Monamoji as community reactions rather than the company voice.
- Don’t Use mascots as logos or sub-team/product/co-brand identities
- Don’t Use mascots as filler, interruption, instruction or sales devices
- Don’t Use mascots for money, security, sales, enterprise, apologies, politics or crises
- Don’t Produce new default work in obsolete mascot styles
| Illustration levels | Key art / contribution graph / textures |
|---|---|
| Light | Optimistic daylight |
| Mona | Official Octocat mascot; community context |
| Copilot | Cool soft purple/blue shading with pink; AI pair-programmer context |
| Ducky | Rubber-duck debugging reference; least frequent of the three |
| Camera angle / lighting power / material numeric recipe | not published |
Three expression levels span detailed key art, contribution graph compositions and textures. Key art uses daylight 3D contribution landscapes, blocks, semantic icons and selective mascots.
Source: brand.github.com/graphic-elements/illustrationbrand.github.com/graphic-elements/mascotsbrand.github.com/brand-identity/copilot
Photography
Real people establish credibility while neutral portrait treatments preserve hierarchy beside colorful art.
Full spec
- Convert speaker portraits to grayscale when needed to avoid competing with illustration; this is conditional, not universal.
- For Primer testimonials use a real customer photo or company logo, not generic imagery or illustration.
- Keep image/logo treatment, size and alignment consistent within a testimonial group.
- In booths avoid covering architecture entirely with photography; use physical materials and selective graphic moments.
- Don’t Apply grayscale to all photography as a blanket rule
- Don’t Use generic or illustrated avatars as customer evidence
- Don’t Treat Universe-specific event imagery as universal core-brand direction
| Standalone photo art-direction chapter | not published |
|---|---|
| Lighting / lens / grading / crop ratios | not published |
| Published portrait treatment | Conditional grayscale for speaker photos mixed with illustration |
The public toolkit provides situational photography guidance and examples rather than a standalone photographic system. Speaker photos may be grayscale when competing with illustration; event photography demonstrates real people in developer environments.
Source: brand.github.com/graphic-elements/layoutsprimer.style/brand/components/Testimonialbrand.github.com/brand-in-action/experiential
Motion
Movement should explain interaction and preserve comprehension before adding delight.
Full spec
- Every motion choice should facilitate, engage or create impact; utility motion prioritizes facilitation.
- Use container transform for action-to-content continuity, masking only for celebration/confirmation, lateral movement for peers, and sequenced enter/exit for transient UI.
- Use restrained simple easing when a more specific transition has no explanatory value.
- Animate Mono with terminal-like rhythm; a changing cursor color can represent multiple contributors.
- Use Mona Pixels for brief processing states and successful actions in appropriate contexts.
- Keep animated product UI accurate and minimally abstracted; coordinate with product teams.
- Use the latest supplied Invertocat animation for marketing video end tags and bumpers; source file available on request.
- Primer animations are sparse; default on-visible trigger, DOM-order staggering and 100ms stagger increment; animate River.Content rather than the whole River.
- Event promos may emphasize delight; technical demos emphasize precision. Avoid effects that look broken in the viewing context.
- Don’t Slap, roll or bounce type like presentation presets unless motivated by character movement
- Don’t Distract from legibility or create interaction obstacles
- Don’t Ship an unpolished complex animation when a simple one would work
- Don’t Convert example clip lengths into official timing tokens
| Outcomes | Facilitate / Engage / Impact |
|---|---|
| Transition patterns | Container transform / Container masking / Lateral / Enter and exit / Simple ease |
| Brand duration / easing curves | not published |
| Primer stagger increment | 100ms; delay increment, not animation duration |
| Logo source file | Available upon request; not publicly supplied here |
Motion balances precise structure with expression. The toolkit names three outcomes and five transition relationships, with terminal-like mono type, Mona Pixels, product demos and event examples.
Source: brand.github.com/motion/principlesbrand.github.com/motion/logobrand.github.com/motion/eventsprimer.style/brand/introduction/animation
Interface & layout
The page, band by band
Header
Hero
Live activity
GitHub Platform
More ways to use GitHub
Enterprise introduction
Customer proof
Customer stories
Community grid
Community signup
Buttons
Full spec
A strict primary division and consistent insets define the composition. Only selected grid lines appear; text panels remain neutral and separate from expressive visuals. Primer supplies reusable web patterns.
Measured from brand.github.com's Published guide retained; homepage anatomy added from all ten saved homepage slices, computed bands and Chrome probes observed 2026-10-31. Screenshot resting state takes precedence for animation; headless Chromium missing-video state is not a design state..
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 128px | 24px |
| Section padding | 88px | 22px |
| Hero text width | max 526px, centered | full width |
| Card gap | 0px | 0px |
| Navigation | 68px | 68px |
Type, at size
Hero H1
Mona Sans · 56px (phone 36) · line 1.1 desktop (61.6px), 1.2 phone (43.2px) · weight 440
Section H2 (GitHub Platform, More ways to use GitHub)
Mona Sans · 40px (phone 28) · line 1.2 · weight 400
Enterprise intro H2 / community H2
Mona Sans · 34px (phone 24) · line 1.3 · weight 400
Testimonial quote
Mona Sans · 32px (phone 24) · line 1.35 · weight 480
Platform product title (GitHub, Copilot)
Mona Sans · 28px (phone 22) · line 1.35 · weight 400
Customer story title
Mona Sans · 22px (phone 20) · line 1.4 · weight 400
Ways product title (Actions, Code Quality...)
Mona Sans · 20px (phone 18) · line 1.3 · weight 400
Body / product description
Mona Sans · 18px · line 1.5 · tracking 0.18px · weight 400
Footer body / testimonial name
Mona Sans · 16px · line 1.5 · tracking 0.24px · weight 400
Button large
Mona Sans · 16px · line 1.5 · tracking 0.16px · weight 500
Button small, nav actions, footer links
Mona Sans · 14px · line 1.5 · tracking 0.21px · weight 500
Nav link
Mona Sans · 14px · line 1.5 · tracking 0.24px · weight 400
Hero tab label
Mona Sans · 16px · line 1.5 · weight 400
Big stat number
Mona Sans · 34px (phone 24) · line 1.3 · weight 400
Ticker stat number
Mona Sans · 28px (phone 22) · line 1.35 · weight 400
Stat caption / eyebrow
Mona Sans · 14px · line 1.5 · tracking 0.21px · weight 400
Legal row
Mona Sans · 12px · line 1.5 · weight 500
- Motion
- Precise but expressive; choose movement by action/content relationship and give utility motion priority to comprehension.
Page anatomy
How GitHub’s own landing pages are built, observed on github.com (observed 2026-10-31), 2026-10-31. The full measurements are in spec.md.
- Navigation
- Single white header with black Invertocat, five links, search and account actions.
- Hero
- Centered announcement and two-line headline above signup and app download, Mona peeks over multicolor seam into full-width grid video ground.
- Live activity
- Full-bleed horizontally clipped activity ticker with a fixed developer statistic.
- GitHub Platform
- Heading band then two equal bordered product cells.
- More ways to use GitHub
- Five product cards: two equal upper cards and three equal lower cards.
- Enterprise introduction
- Pale pixel contribution texture followed by enterprise heading and CTA.
- Customer proof
- Testimonial carousel left, two stacked statistics right.
- Customer logos
- Single clipped marquee with pause button and edge fades.
- Customer stories
- Three bordered stories beneath multicolor progress strip and a duck at its right end.
- Community grid
- Trending repo tiles below a Mona peeking over the upper edge.
- Community signup
- Two-column closing signup with mono eyebrow and developer-community heading.
- Footer
- Full-width pale green-gray footer under a 1px green rule; newsletter above four link columns and legal row.
Source: brand.github.com/graphic-elements/layoutsbrand.github.com/foundations/accessibilitybrand.github.com/brand-in-action/eBooksbrand.github.com/brand-in-action/webprimer.style/brand/components/Heroprimer.style/brand/components/Riverprimer.style/brand/components/CTAFormprimer.style/brand/components/CTABannerprimer.style/brand/components/Bento
In use
Universe evolving identity
A dedicated event identity creates anticipation while retaining recognition. Our reading
GitHub Universe ’26 Recap homepage moment
Links a current community moment to the persistent platform story. Our reading
Full spec
Our application recipe derived from the cited rules. Levels 0–5 express relative visual intensity; these are editorial labels, not GitHub-published measurements. Website page anatomy is deferred.
- Universe evolving identity. Universe sets a new product vision each year and receives an incrementally changing visual identity. brand.github.com/brand-in-action/experiential
- GitHub Universe ’26 Recap homepage moment. Observed announcement above the homepage hero on 2026-10-31. github.com
| Format | What they did | Source |
|---|---|---|
| Web | Built on open-source Primer Brand; toolkit web samples are marked coming soon. | brand.github.com/brand-in-action/web |
| eBooks | Expressive topic-led covers and restrained reading-led interiors with accessibility requirements. | brand.github.com/brand-in-action/eBooks |
| Social | Announcements follow event/content-specific identity; swag promotions can be expressive with clear branding; other engagement may be human and unbranded. | brand.github.com/brand-in-action/social |
| Experiential | Developer-grounded, welcoming spaces; booths use at least one premium non-printed material and reusable elements. | brand.github.com/brand-in-action/experiential |
| Swag | High-quality fit and material details; stickers and collectibles draw on developer lore. | brand.github.com/brand-in-action/swag |
| Presentations | Use updated templates; PowerPoint template is staff-only. | brand.github.com/brand-in-action/presentations |
| Diagrams | Precise, instructional and readable; color blocking only for clarity or key product pillars. | brand.github.com/graphic-elements/diagrams |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | Real Mona Sans, neutral reading panels, green connective accents, recognizable product visuals, concise descriptive copy, accessible contrast and CTA hierarchy. Use Primer guidance for Hero, River, forms and proof. | A major announcement may use daylight key art, dither, terminal-like eyebrows or a context-appropriate approved mascot. | |
| Deck | Use the official template where authorized; retain logo, type, grid and neutral copy hierarchy. | Expressive cover and restrained four-cell contribution signature on functional slides. | |
| eBook / whitepaper | Comfortable interior reading, subtle type hierarchy, consistent grid and footer detail, tagged accessible PDF, heading structure and alt text. | Cover can tell the topic through illustration; interior expressive detail stays subordinate. | |
| Social post | Match the audience and content context; event announcements follow their own identity, swag promotions retain clear branding. | Community engagement may be human and unbranded; relevant approved mascots may delight. | |
| Technical demo | Accurate product UI, clear primary focal point, readable copy and motion that explains what changed. | Crop and simplify UI while retaining recognizability; use restrained dither support. | |
| Event / booth | Developer culture, accessibility, reusable physical elements and at least one premium non-printed material. | Event-specific identity, tactile play and controlled full-bleed key art; Universe visuals remain event-specific. | |
| Chart / diagram | Clear labels and technical accuracy, sufficient text size, non-color identifiers and alternative descriptions. | Color grouping only where essential; product-theme blocks where they clarify the diagram. | |
| Swag | Quality material and fit; authorized logo/mascot assets and applicable permission review. | Developer lore, collectibles and context-appropriate expressive treatments. |
Ads
Rules
Do
- Keep current logos unaltered and high contrast; protect Invertocat clear space.
- Use GitHub as a single word with capital G and H.
- Separate copy from expressive visuals and meet WCAG AA for normal text.
- Never encode meaning by color alone; label charts and supply alt descriptions for complex visuals.
- Use Mona Sans normal width, no manual tracking and no headline/body ligatures.
- Use existing approved graphic libraries rather than inventing new base shapes and illustrations.
- Keep contribution cells on-grid and separate contribution patterns from dither.
- Mascots never replace logos, interrupt flows, sell, teach or address serious topics; public usage needs design-team approval.
- Charts and graphs prioritize accuracy and accessible comparison, without decorative illustrations, gradients or adjacent color effects. Color grouping is allowed only when essential.
- Maintain recognizable product UI even when simplifying a marketing demonstration.
- Tag PDFs for screen readers, use semantic heading hierarchy, and provide image alt text in eBooks and whitepapers.
- Follow co-branding approvals and avoid unauthorized affiliation claims, event naming, trademarked merchandise and product/mascot naming.
- Treat Universe-specific identities as event examples, not general core-brand rules.
Don’t
- Imply GitHub affiliation or endorsement without approval
- Recreate the brand through generic mascot art or stock icon families
- Use color or animation at the expense of reading and accessibility
- Publish numbers without scope or observation date
Source: brand.github.com/foundations/logobrand.github.com/brand-identity/cobrandingbrand.github.com/graphic-elements/mascotsbrand.github.com/foundations/accessibilitybrand.github.com/foundations/typographybrand.github.com/graphic-elements/texturesbrand.github.com/graphic-elements/diagramsbrand.github.com/graphic-elements/product-uibrand.github.com/guides/getting-startedbrand.github.com/brand-in-action/experiential
Steal this kit
Your name and logo, GitHub’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What GitHub doesn’t publish
- Full voice-and-tone guide: not published publicly. The toolkit links a private GitHub document that returns 404; this book uses public Attributes guidance and homepage copy observed 2026-10-31.
- Official banned/approved vocabulary, punctuation rules and channel-specific before/after copy examples: not published in the saved public toolkit.
- Formal message architecture, permanent tagline, official boilerplate, named competitors and alternatives matrix: not published in the supplied toolkit. Homepage-based analysis is explicitly inferred or observed 2026-10-31.
- Logo minimum digital/print sizes and lockup-specific numeric clear space beyond the Invertocat 25% plate: not published.
- Complete title/headline/body type-scale tables and numeric Display/Mono weights: not published in supplied pages. Only H0 110/110 Display, H2 38/44 Medium and Body Large 17/26 Medium are printed; their units are not stated.
- Standalone photography art direction with lighting, lens, grading and crop ratios: not published. Conditional grayscale portraits and genuine testimonial imagery are published.
- Universal column count, breakpoint system, spacing/inset scale, corner radii and UI frame stroke sizes: not published in the saved toolkit. Illustration divisions and the 2px/4px border example are published.
- Icon construction grid, stroke widths and numeric optical sizes: not published in the saved pages; iconography delegates optical-size detail to Octicons documentation, which is not supplied.
- Brand motion duration tokens, bezier coordinates and a comprehensive reduced-motion specification: not published in the saved toolkit. Primer publishes a 100ms stagger delay increment, not an animation duration.
- Logo animation working source: not published as an included public file; available upon request. Event videos provide examples rather than timing tokens.
- Color proportions conflict: alt text for color-03 and color-05 states 80% black/white, 10% neutral, 5% green, 5% theme. Those files are key art. Rendered ratio plates color-04 and color-06 explicitly label 80% neutral, 5% gray, 5% green, 10% theme, also visible in color screenshots. This book follows visible labels.
- Core-only quantitative color proportions: not published; core examples are mostly neutral with small green moments. Product theme ratios must not be generalized silently.
- Toolkit and Primer palette scales differ. For example toolkit Gray 4 is #909692 while Primer gray.5 is #96A199; toolkit Green 6 is #0A241B, not Primer green.9 #0D3024. Keep both namespaces and their source URLs.
- Security Blue 3 metadata conflict: printed HEX #1A61FE differs from printed RGB 0/110/219. HEX is preserved as published; confirm before cross-color-space production.
- Typography guidance tension: type page permits environment-specific starting sizes/leading; accessibility page says not to rescale its pairing primitives. Preserve pair relationships and accessibility, and seek template guidance for specific environments.
- Presentation template and eBook working guidelines/assets: not published as accessible local templates; presentation link is staff-only and eBook detail requires Brand Studio access.
- Complete base asset libraries and illustration working files: not published in this saved toolkit; agencies/contractors are directed to their GitHub contact.
- Web example gallery: not published yet (toolkit says samples coming soon). Linked Primer guidance is included separately; page anatomy comes in the next step.
- Some Primer and motion embedded image/video URLs have no matching local file. The book references only existing local examples, with page screenshots where needed.
- Observed homepage figures and wording are dated 2026-10-31 and have not been independently verified beyond the supplied capture.
- Print production values are retained as printed, including comma/slash formatting and named Pantone references; no conversion or reconciliation was invented. Security Blue 3 has a known printed HEX/RGB conflict.
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-31. Not affiliated with GitHub.