# GitHub: brand book and build spec

GitHub grounds expressive developer creativity in a disciplined technical structure: neutral text panels, green accents, Mona Sans and Mono, visible grid fragments, contribution cells and dither. Detailed daylight 3D worlds and selective mascots supply the imaginative layer.

From unfairly.ai/brand-guidelines/github, checked 2026-10-31. Unofficial study; not affiliated with GitHub.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Developer infrastructure made expressive: a strict grid makes the product feel dependable, while contribution cells expand into playful worlds that show what developers can build together. Based on: Layouts explicitly separate readable infrastructure from expressive creativity; illustration identifies its blocks with daily developer contributions.

## Purpose

Mission: Accelerate human progress through developer collaboration. (published; https://brand.github.com/foundations/accessibility)

Story: 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. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Nerdy | Attend carefully to technical detail and make complexity approachable. | published: https://brand.github.com/brand-identity/attributes |
| Confident | Put the product forward with consistent quality and clear expertise. | published: https://brand.github.com/brand-identity/attributes |
| Authentic | Stay grounded in the product and community, with conversational language and uncluttered design. | published: https://brand.github.com/brand-identity/attributes |
| Imaginative | Make room for surprise, creative ambition and unexpected concepts. | published: https://brand.github.com/brand-identity/attributes |
| Empathetic | Prioritize readers, accessibility and multiple ways to participate. | published: https://brand.github.com/brand-identity/attributes |

## Fixed and flexible

Never changes:
- 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.

## Positioning

- **Statement**: A developer platform bringing collaboration, AI-assisted coding, automation and security into the work of building software. (our reading)
- **Category**: Developer platform with repository hosting and AI coding agents. (our reading)
- **Audience**: Individual developers, open source contributors, development teams and enterprise organizations. (our reading)
- **Problem**: Developers need to coordinate changes, automate repetitive work and address software quality and security while building. (our reading)
- **Promise**: Help people build software together with AI assistance and supporting development infrastructure. (our reading)
- **Differentiators**: A large visible developer community with 225M+ developers and 800M public and open source repositories in the capture.; Repository collaboration and Copilot work presented together as two central platform offers.; Quality, automation, vulnerability detection and secret protection displayed alongside coding tools.; Enterprise social proof: 90% of Fortune 100 organizations reported as GitHub users.

## Messaging

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 (Homepage hero)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Human creativity | Developers remain the authors of software even as AI tools change the work. | 225M+ developers building on GitHub; Homepage presents repository hosting, review and collaboration alongside Copilot coding agents | our reading |
| Collaborative infrastructure | A shared home for repositories, review and collaboration across the developer community. | 800M public and open source repositories; Homepage presents repository hosting, review and collaboration alongside Copilot coding agents | our reading |
| AI that helps ship work | Copilot expands from assistance into tasks, projects and automation. | Mercado Libre customer card reports a 50% reduction in coding time with GitHub Copilot; Homepage presents repository hosting, review and collaboration alongside Copilot coding agents | our reading |
| Enterprise confidence | Security and quality capabilities support teams building at organizational scale. | 90% of the Fortune 100 uses GitHub; Homepage presents Code Security, Secret Protection and Code Quality as distinct capabilities | our reading |

They never claim:
- Keep the exact scope and observation date attached to homepage statistics; these are marketing claims observed in a saved capture.
- Do not imply GitHub endorsement or affiliation through logo or name usage.
- Do not describe a co-hosted or partnered event without explicit GitHub approval.

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Software still starts with you" |  | https://github.com/ |
| "GitHub Platform" |  | https://github.com/ |
| "More ways to use GitHub" |  | https://github.com/ |
| "Join the world's largest developer community" |  | https://github.com/ |

## Voice

Tone words: nerdy, confident, authentic, imaginative, empathetic.

Traits:
- Nerdy, but not Showy technical posturing (our reading)
- Confident, but not Flashy without substance (our reading)
- Authentic, but not Unnecessary marketing language (our reading)
- Imaginative, but not Expected and formulaic (our reading)
- Empathetic, but not Company-first assumptions (our reading)

- 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.

Rules a copy check enforces:
- 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.

Their words: GitHub, Copilot.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| GitHub Green | #0FBF3E | Core recognition hero; restrained green accents, contribution graphics and visual emphasis | Core recognition hero; restrained green accents, contribution graphics and visual emphasis |
| Gray 1 | #F2F5F3 | Core neutral: grounds, hierarchy, borders and readable copy | Core neutral: grounds, hierarchy, borders and readable copy |
| Gray 2 | #E4EBE6 | Core neutral: grounds, hierarchy, borders and readable copy | Core neutral: grounds, hierarchy, borders and readable copy |
| Gray 3 | #B6BFB8 | Core neutral: grounds, hierarchy, borders and readable copy | Core neutral: grounds, hierarchy, borders and readable copy |
| Gray 4 | #909692 | Core neutral: grounds, hierarchy, borders and readable copy | Core neutral: grounds, hierarchy, borders and readable copy |
| Gray 5 | #232925 | Core neutral: grounds, hierarchy, borders and readable copy | Core neutral: grounds, hierarchy, borders and readable copy |
| Gray 6 | #101411 | Core neutral: grounds, hierarchy, borders and readable copy | Core neutral: grounds, hierarchy, borders and readable copy |
| Green 1 | #BFFFD1 | Core green range: contribution graph, accents and illustration | Core green range: contribution graph, accents and illustration |
| Green 2 | #8CF2A6 | Core green range: contribution graph, accents and illustration | Core green range: contribution graph, accents and illustration |
| Green 3 | #5FED83 | Core green range: contribution graph, accents and illustration | Core green range: contribution graph, accents and illustration |
| Green 4 | #0FBF3E | Core green range: contribution graph, accents and illustration | Core green range: contribution graph, accents and illustration |
| Green 5 | #08872B | Core green range: contribution graph, accents and illustration | Core green range: contribution graph, accents and illustration |
| Green 6 | #0A241B | Core green range: contribution graph, accents and illustration | Core green range: contribution graph, accents and illustration |
| Copilot Purple | #8534F3 | Copilot product hero: highlight AI features while keeping the GitHub core visible | Copilot product hero: highlight AI features while keeping the GitHub core visible |
| Purple 1 | #C898FD | Copilot theme primary purple range: AI feature emphasis and illustration | Copilot theme primary purple range: AI feature emphasis and illustration |
| Purple 2 | #B870FF | Copilot theme primary purple range: AI feature emphasis and illustration | Copilot theme primary purple range: AI feature emphasis and illustration |
| Purple 3 | #8534F3 | Copilot theme primary purple range: AI feature emphasis and illustration | Copilot theme primary purple range: AI feature emphasis and illustration |
| Purple 4 | #43179E | Copilot theme primary purple range: AI feature emphasis and illustration | Copilot theme primary purple range: AI feature emphasis and illustration |
| Purple 5 | #26115F | Copilot theme primary purple range: AI feature emphasis and illustration | Copilot theme primary purple range: AI feature emphasis and illustration |
| Purple 6 | #160048 | Copilot theme primary purple range: AI feature emphasis and illustration | Copilot theme primary purple range: AI feature emphasis and illustration |
| Orange 1 | #F4A876 | Copilot theme supporting warm accent: primarily expressive illustration, sparingly | Copilot theme supporting warm accent: primarily expressive illustration, sparingly |
| Orange 2 | #F08A3A | Copilot theme supporting warm accent: primarily expressive illustration, sparingly | Copilot theme supporting warm accent: primarily expressive illustration, sparingly |
| Orange 3 | #FE4C25 | Copilot theme supporting warm accent: primarily expressive illustration, sparingly | Copilot theme supporting warm accent: primarily expressive illustration, sparingly |
| Orange 4 | #C53211 | Copilot theme supporting warm accent: primarily expressive illustration, sparingly | Copilot theme supporting warm accent: primarily expressive illustration, sparingly |
| Orange 5 | #801E0F | Copilot theme supporting warm accent: primarily expressive illustration, sparingly | Copilot theme supporting warm accent: primarily expressive illustration, sparingly |
| Orange 6 | #500A00 | Copilot theme supporting warm accent: primarily expressive illustration, sparingly | Copilot theme supporting warm accent: primarily expressive illustration, sparingly |
| Security Blue | #3094FF | Security product hero: trust, reliability and protection; security feature emphasis | Security product hero: trust, reliability and protection; security feature emphasis |
| Blue 1 | #9EECFF | Security theme primary blue range: product emphasis and illustration | Security theme primary blue range: product emphasis and illustration |
| Blue 2 | #3094FF | Security theme primary blue range: product emphasis and illustration | Security theme primary blue range: product emphasis and illustration |
| Blue 3 | #1A61FE | Security theme primary blue range: product emphasis and illustration | Security theme primary blue range: product emphasis and illustration |
| Blue 4 | #0527FC | Security theme primary blue range: product emphasis and illustration | Security theme primary blue range: product emphasis and illustration |
| Blue 5 | #212183 | Security theme primary blue range: product emphasis and illustration | Security theme primary blue range: product emphasis and illustration |
| Blue 6 | #001C4D | Security theme primary blue range: product emphasis and illustration | Security theme primary blue range: product emphasis and illustration |
| Lime 1 | #DCFF96 | Security theme supporting warm/lime accent: primarily illustration, sparingly | Security theme supporting warm/lime accent: primarily illustration, sparingly |
| Lime 2 | #D3FA37 | Security theme supporting warm/lime accent: primarily illustration, sparingly | Security theme supporting warm/lime accent: primarily illustration, sparingly |
| Lime 3 | #D8BD0E | Security theme supporting warm/lime accent: primarily illustration, sparingly | Security theme supporting warm/lime accent: primarily illustration, sparingly |
| Lime 4 | #DB9D00 | Security theme supporting warm/lime accent: primarily illustration, sparingly | Security theme supporting warm/lime accent: primarily illustration, sparingly |
| Lime 5 | #D67200 | Security theme supporting warm/lime accent: primarily illustration, sparingly | Security theme supporting warm/lime accent: primarily illustration, sparingly |
| Lime 6 | #703100 | Security theme supporting warm/lime accent: primarily illustration, sparingly | Security theme supporting warm/lime accent: primarily illustration, sparingly |
| Primer gray.0 | #F2F5F3 | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries |
| Primer gray.1 | #E4EBE6 | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries |
| Primer gray.2 | #D2D9D4 | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries |
| Primer gray.3 | #C4CCC6 | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries |
| Primer gray.4 | #B6BFB8 | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries |
| Primer gray.5 | #96A199 | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries |
| Primer gray.6 | #77827A | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries |
| Primer gray.7 | #58635B | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries |
| Primer gray.8 | #353D37 | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries |
| Primer gray.9 | #191F1B | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries | Marketing UI neutral ramp for light/dark hierarchy, surfaces and boundaries |
| Primer blue.0 | #DDF4FF | Marketing UI blue ramp for accents and Security-related UI | Marketing UI blue ramp for accents and Security-related UI |
| Primer blue.1 | #BCECFF | Marketing UI blue ramp for accents and Security-related UI | Marketing UI blue ramp for accents and Security-related UI |
| Primer blue.2 | #8DD6FF | Marketing UI blue ramp for accents and Security-related UI | Marketing UI blue ramp for accents and Security-related UI |
| Primer blue.3 | #5FB9FF | Marketing UI blue ramp for accents and Security-related UI | Marketing UI blue ramp for accents and Security-related UI |
| Primer blue.4 | #3094FF | Marketing UI blue ramp for accents and Security-related UI | Marketing UI blue ramp for accents and Security-related UI |
| Primer blue.5 | #0377FF | Marketing UI blue ramp for accents and Security-related UI | Marketing UI blue ramp for accents and Security-related UI |
| Primer blue.6 | #0055D5 | Marketing UI blue ramp for accents and Security-related UI | Marketing UI blue ramp for accents and Security-related UI |
| Primer blue.7 | #0040A7 | Marketing UI blue ramp for accents and Security-related UI | Marketing UI blue ramp for accents and Security-related UI |
| Primer blue.8 | #002F7A | Marketing UI blue ramp for accents and Security-related UI | Marketing UI blue ramp for accents and Security-related UI |
| Primer blue.9 | #001C4D | Marketing UI blue ramp for accents and Security-related UI | Marketing UI blue ramp for accents and Security-related UI |
| Primer green.0 | #EBF9F4 | Marketing UI green ramp for brand accents and themed states | Marketing UI green ramp for brand accents and themed states |
| Primer green.1 | #BFFFD1 | Marketing UI green ramp for brand accents and themed states | Marketing UI green ramp for brand accents and themed states |
| Primer green.2 | #8CF2A6 | Marketing UI green ramp for brand accents and themed states | Marketing UI green ramp for brand accents and themed states |
| Primer green.3 | #5FED83 | Marketing UI green ramp for brand accents and themed states | Marketing UI green ramp for brand accents and themed states |
| Primer green.4 | #23EA57 | Marketing UI green ramp for brand accents and themed states | Marketing UI green ramp for brand accents and themed states |
| Primer green.5 | #0FBF3E | Marketing UI green ramp for brand accents and themed states | Marketing UI green ramp for brand accents and themed states |
| Primer green.6 | #08872B | Marketing UI green ramp for brand accents and themed states | Marketing UI green ramp for brand accents and themed states |
| Primer green.7 | #0D6731 | Marketing UI green ramp for brand accents and themed states | Marketing UI green ramp for brand accents and themed states |
| Primer green.8 | #0E4A2E | Marketing UI green ramp for brand accents and themed states | Marketing UI green ramp for brand accents and themed states |
| Primer green.9 | #0D3024 | Marketing UI green ramp for brand accents and themed states | Marketing UI green ramp for brand accents and themed states |
| Primer yellow.0 | #FFF8C5 | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero |
| Primer yellow.1 | #FFE777 | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero |
| Primer yellow.2 | #FFD743 | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero |
| Primer yellow.3 | #FABF21 | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero |
| Primer yellow.4 | #DB9D00 | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero |
| Primer yellow.5 | #BE7D00 | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero |
| Primer yellow.6 | #A06100 | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero |
| Primer yellow.7 | #824800 | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero |
| Primer yellow.8 | #653200 | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero |
| Primer yellow.9 | #471F00 | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero | Extended marketing UI yellow ramp; expressive supporting accents, not a new core hero |
| Primer orange.0 | #FFF1E5 | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero |
| Primer orange.1 | #FCCEAB | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero |
| Primer orange.2 | #F4A876 | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero |
| Primer orange.3 | #F08A3A | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero |
| Primer orange.4 | #DA7210 | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero |
| Primer orange.5 | #B85B06 | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero |
| Primer orange.6 | #954502 | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero |
| Primer orange.7 | #703100 | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero |
| Primer orange.8 | #5C2300 | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero |
| Primer orange.9 | #471700 | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero | Extended marketing UI orange ramp; expressive supporting accents, not a new core hero |
| Primer red.0 | #FFEBE9 | Extended marketing UI red ramp; expressive supporting accents, not a new core hero | Extended marketing UI red ramp; expressive supporting accents, not a new core hero |
| Primer red.1 | #FFCECB | Extended marketing UI red ramp; expressive supporting accents, not a new core hero | Extended marketing UI red ramp; expressive supporting accents, not a new core hero |
| Primer red.2 | #FFABA8 | Extended marketing UI red ramp; expressive supporting accents, not a new core hero | Extended marketing UI red ramp; expressive supporting accents, not a new core hero |
| Primer red.3 | #FF8182 | Extended marketing UI red ramp; expressive supporting accents, not a new core hero | Extended marketing UI red ramp; expressive supporting accents, not a new core hero |
| Primer red.4 | #FA4549 | Extended marketing UI red ramp; expressive supporting accents, not a new core hero | Extended marketing UI red ramp; expressive supporting accents, not a new core hero |
| Primer red.5 | #CF2230 | Extended marketing UI red ramp; expressive supporting accents, not a new core hero | Extended marketing UI red ramp; expressive supporting accents, not a new core hero |
| Primer red.6 | #AE0B29 | Extended marketing UI red ramp; expressive supporting accents, not a new core hero | Extended marketing UI red ramp; expressive supporting accents, not a new core hero |
| Primer red.7 | #860620 | Extended marketing UI red ramp; expressive supporting accents, not a new core hero | Extended marketing UI red ramp; expressive supporting accents, not a new core hero |
| Primer red.8 | #730019 | Extended marketing UI red ramp; expressive supporting accents, not a new core hero | Extended marketing UI red ramp; expressive supporting accents, not a new core hero |
| Primer red.9 | #420011 | Extended marketing UI red ramp; expressive supporting accents, not a new core hero | Extended marketing UI red ramp; expressive supporting accents, not a new core hero |
| Primer purple.0 | #F0E5FF | Marketing UI purple ramp for expressive and Copilot-themed accents | Marketing UI purple ramp for expressive and Copilot-themed accents |
| Primer purple.1 | #DBBFFD | Marketing UI purple ramp for expressive and Copilot-themed accents | Marketing UI purple ramp for expressive and Copilot-themed accents |
| Primer purple.2 | #C898FD | Marketing UI purple ramp for expressive and Copilot-themed accents | Marketing UI purple ramp for expressive and Copilot-themed accents |
| Primer purple.3 | #B870FF | Marketing UI purple ramp for expressive and Copilot-themed accents | Marketing UI purple ramp for expressive and Copilot-themed accents |
| Primer purple.4 | #9F51FA | Marketing UI purple ramp for expressive and Copilot-themed accents | Marketing UI purple ramp for expressive and Copilot-themed accents |
| Primer purple.5 | #8534F3 | Marketing UI purple ramp for expressive and Copilot-themed accents | Marketing UI purple ramp for expressive and Copilot-themed accents |
| Primer purple.6 | #6619E1 | Marketing UI purple ramp for expressive and Copilot-themed accents | Marketing UI purple ramp for expressive and Copilot-themed accents |
| Primer purple.7 | #43179E | Marketing UI purple ramp for expressive and Copilot-themed accents | Marketing UI purple ramp for expressive and Copilot-themed accents |
| Primer purple.8 | #26115F | Marketing UI purple ramp for expressive and Copilot-themed accents | Marketing UI purple ramp for expressive and Copilot-themed accents |
| Primer purple.9 | #160048 | Marketing UI purple ramp for expressive and Copilot-themed accents | Marketing UI purple ramp for expressive and Copilot-themed accents |
| Primer pink.0 | #FFF0FC | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero |
| Primer pink.1 | #FFC9F2 | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero |
| Primer pink.2 | #F67ED2 | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero |
| Primer pink.3 | #FF80D2 | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero |
| Primer pink.4 | #FF4AC0 | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero |
| Primer pink.5 | #EF2AA4 | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero |
| Primer pink.6 | #CA2186 | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero |
| Primer pink.7 | #952866 | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero |
| Primer pink.8 | #651643 | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero |
| Primer pink.9 | #3D0A28 | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero | Extended marketing UI pink ramp; expressive supporting accents, not a new core hero |
| Primer coral.0 | #FFF0EB | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero |
| Primer coral.1 | #FFCAB8 | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero |
| Primer coral.2 | #FFA387 | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero |
| Primer coral.3 | #FF7B56 | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero |
| Primer coral.4 | #FE4C25 | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero |
| Primer coral.5 | #E13F1B | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero |
| Primer coral.6 | #C53211 | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero |
| Primer coral.7 | #A22710 | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero |
| Primer coral.8 | #801E0F | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero |
| Primer coral.9 | #500A00 | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero | Extended marketing UI coral ramp; expressive supporting accents, not a new core hero |
| Primer lemon.0 | #FDF5B3 | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero |
| Primer lemon.1 | #F5E36B | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero |
| Primer lemon.2 | #F2DA3B | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero |
| Primer lemon.3 | #E1C50F | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero |
| Primer lemon.4 | #C7A60B | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero |
| Primer lemon.5 | #A98906 | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero |
| Primer lemon.6 | #806803 | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero |
| Primer lemon.7 | #614D01 | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero |
| Primer lemon.8 | #413200 | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero |
| Primer lemon.9 | #322400 | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero | Extended marketing UI lemon ramp; expressive supporting accents, not a new core hero |
| Primer lime.0 | #F3FEC8 | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero |
| Primer lime.1 | #E8FC97 | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero |
| Primer lime.2 | #DCFA67 | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero |
| Primer lime.3 | #D1F441 | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero |
| Primer lime.4 | #B2DE28 | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero |
| Primer lime.5 | #92C219 | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero |
| Primer lime.6 | #698E17 | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero |
| Primer lime.7 | #425E13 | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero |
| Primer lime.8 | #2C440B | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero |
| Primer lime.9 | #182C01 | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero | Extended marketing UI lime ramp; expressive supporting accents, not a new core hero |
| Primer teal.0 | #DAF9F5 | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero |
| Primer teal.1 | #A4EFE8 | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero |
| Primer teal.2 | #6EE5DC | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero |
| Primer teal.3 | #39DAD2 | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero |
| Primer teal.4 | #23B1AE | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero |
| Primer teal.5 | #197B7B | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero |
| Primer teal.6 | #136061 | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero |
| Primer teal.7 | #024B4D | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero |
| Primer teal.8 | #083D3D | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero |
| Primer teal.9 | #052B2C | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero | Extended marketing UI teal ramp; expressive supporting accents, not a new core hero |
| Primer indigo.0 | #EFF2FF | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero |
| Primer indigo.1 | #D4DBFF | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero |
| Primer indigo.2 | #B3C1FD | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero |
| Primer indigo.3 | #8E9DF7 | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero |
| Primer indigo.4 | #6B7BEF | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero |
| Primer indigo.5 | #4956E5 | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero |
| Primer indigo.6 | #2D3DD7 | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero |
| Primer indigo.7 | #262DAE | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero |
| Primer indigo.8 | #212183 | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero |
| Primer indigo.9 | #12144F | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero | Extended marketing UI indigo ramp; expressive supporting accents, not a new core hero |
| Primer black.0 | #000000 | Marketing UI black neutral | Marketing UI black neutral |
| Primer white.0 | #FFFFFF | Marketing UI white neutral | Marketing UI white neutral |
| White | #FFFFFF | Neutral text panel / reverse copy | Neutral text panel / reverse copy |
| Black | #000000 | High-contrast logo and copy option | High-contrast logo and copy option |
| White theme subtle text | #77827A | Subtle copy in the white and gray layout examples | Subtle copy in the white and gray layout examples |
| Black theme subtle text | #96A199 | Subtle copy in black layout example | Subtle copy in black layout example |
| White theme text accent | #0FAC39 | Accent copy in white layout example | Accent copy in white layout example |
| Gray theme text accent | #0CA334 | Accent copy in gray layout example | Accent copy in gray layout example |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Mona Sans | SIL OFL 1.1; real supplied open-source face | Mona Sans | "Mona Sans", sans-serif |
| body | Mona Sans | SIL OFL 1.1; real supplied open-source face | Mona Sans | "Mona Sans", sans-serif |
| mono | Mona Sans Mono | SIL OFL 1.1; real supplied open-source face | Geist Mono | "Geist Mono", ui-monospace, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 | --text-display-hero-* | Mona Sans | 56px | 36px | 1.1 desktop (61.6px), 1.2 phone (43.2px) | 0px | 440 |
| Section H2 (GitHub Platform, More ways to use GitHub) | --text-section-* | Mona Sans | 40px | 28px | 1.2 | 0px | 400 |
| Enterprise intro H2 / community H2 | --text-title-xl-* | Mona Sans | 34px | 24px | 1.3 | 0px | 400 |
| Testimonial quote | --text-quote-* | Mona Sans | 32px | 24px | 1.35 | 0px | 480 |
| Platform product title (GitHub, Copilot) | --text-title-l-* | Mona Sans | 28px | 22px | 1.35 | 0px | 400 |
| Customer story title | --text-title-m-* | Mona Sans | 22px | 20px | 1.4 | 0px | 400 |
| Ways product title (Actions, Code Quality...) | --text-title-s-* | Mona Sans | 20px | 18px | 1.3 | 0px | 400 |
| Body / product description | --text-body-l-* | Mona Sans | 18px | 18px | 1.5 | 0.18px | 400 |
| Footer body / testimonial name | --text-body-* | Mona Sans | 16px | 16px | 1.5 | 0.24px | 400 |
| Button large | --text-button-l-* | Mona Sans | 16px | 16px | 1.5 | 0.16px | 500 |
| Button small, nav actions, footer links | --text-button-s-* | Mona Sans | 14px | 14px | 1.5 | 0.21px | 500 |
| Nav link | --text-nav-* | Mona Sans | 14px | 14px | 1.5 | 0.24px | 400 |
| Hero tab label | --text-tab-* | Mona Sans | 16px | 16px | 1.5 | 0px | 400 |
| Big stat number | --text-stat-l-* | Mona Sans Mono | 34px | 24px | 1.3 | 0px | 400 |
| Ticker stat number | --text-stat-m-* | Mona Sans Mono | 28px | 22px | 1.35 | 0px | 400 |
| Stat caption / eyebrow | --text-mono-caption-* | Mona Sans Mono | 14px | 14px | 1.5 | 0.21px | 400 |
| Legal row | --text-mono-legal-* | Mona Sans Mono | 12px | 12px | 1.5 | 0px | 500 |

## Layout

Measured on https://brand.github.com/: 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..

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 128px | 24px |
| Section padding | 88px | 22px |
| Container max width | 1184px | full |
| Hero text width | max 526px | full |
| Grid columns | 2 | 1 |
| Card gap | 0px | 0px |
| Navigation height | 68px | 68px |

Breakpoints from GitHub's CSS: 320, 544, 768, 1012, 1280, 1400px.

Homepage bands, top to bottom (observed):
1. Header
   - Desktop: y 0; h 68
   - Phone: y 0; h 52
   - Black mark, ordered links, search, account actions.
2. Hero
   - Desktop: y 68; end y 1533
   - Phone: y 52; end y 1300
   - Centered headline and CTAs, mascot seam, gridded video, five tabs.
3. Live activity
   - Desktop: y px 1533; end y px 1642; height px 109
   - Phone: y px 1300; end y px 1480; height px 180
   - Desktop row h109; phone row h184 approximately, edge fades, pause control.
   - Dynamic feed: repo forked, pull request, push and branch merged cards. Preserve exact screenshot-visible strings; probe captures a different moment. Desktop: pull request from kairos-code-dev; zlink-systems/zlink · 5 minutes ago; repo forked from howtimeschange; DingTalk-Real-AI/dingtalk-workspace-cli · 5 minutes ago; push from djungelorm; krpc/krpc · yesterday. Phone: push from Commander-hill; Commander-hill/akwaaba-homes; yesterday.
   - Publish 225M+ developers building on GitHub. Phone screenshot catches a clipped animated counter; do not replace published 225M+ with 0M+.
4. GitHub Platform
   - Desktop: y px 1642; end y px 2592; height px 950
   - Phone: y px 1480; end y px 2769; height px 1289
   - Desktop grid x128–1312 split at720; media inside 60px cell inset; center product mark/title and copy, then two compact CTAs.
   - Phone full-width image ground followed by centered white copy panel, then second product; no two-column squeeze.
   - Products in order: GitHub; Copilot. CTAs Learn more; See plans and pricing.
5. More ways to use GitHub
   - Desktop: y px 2592; end y px 3981; height px 1389
   - Phone: y px 2769; end y px 5175; height px 2406
   - Centered heading with 96px vertical spacing on desktop; thin grid divides cards.
   - Actions; Code Quality; Code Security; Secret Protection; Codespaces, in that order. Captions and Explore labels verbatim in text evidence.
   - Desktop first row 592px cells, second row ~395px cells. Phone one full-width image then left-aligned text at x24; five consecutive cards. Product frames carry green, blue, pink, orange and purple left/bottom accents.
6. Enterprise introduction
   - Desktop: y px 3981; end y px 4475; height px 494
   - Phone: y px 5175; end y px 5565; height px 390
   - Pixel texture strip about184px desktop,140px phone, white and muted green-gray cells.
   - Whatever you're building, you can build it on GitHub; Start Enterprise free trial. Desktop heading x177 y4250; phone x24 y5377.
7. Customer proof
   - Desktop: y px 4475; end y px 5136; height px 661
   - Phone: y px 5565; end y px 6506; height px 941
   - Desktop split x855: left quote panel ~727px, right ~457px; each stat half height. Phone quote then 800M then 90%.
   - Resting testimonial: GitHub is one of the de facto tools that engineers want to use, and because of that, we don't have long, expensive onboarding periods or productivity gaps.
   - Rob Witoff; CTO, Coinbase. Green quotation tile, circular 44px bordered avatar, previous/next controls and six position indicators. Carousel transitions animation only.
   - 800M public and open source repositories; 90% of the Fortune 100 uses GitHub. Use these published numbers.
8. Customer logos
   - Desktop: y px 5136; end y px 5306; height px 170
   - Phone: y px 6506; end y px 6626; height px 120
   - FedEx; American Airlines; Postmates; mercado libre; duolingo. Use actual SVGs, muted gray-green.
   - Dynamic marquee position: desktop shows clipped FedEx left followed by American Airlines, Postmates, Mercado Libre, Duolingo. Phone shows clipped FedEx and American Airlines; pause at right. Motion endpoint animation only.
9. Customer stories
   - Desktop: y px 5306; end y px 5768; height px 462
   - Phone: y px 6626; end y px 7495; height px 869
   - Desktop x128–1312, three equal columns; top strip y5358. Phone three stacked story cells with textual blue Read customer story CTA and chevron.
   - Figma streamlines development and strengthens security; Mercedes-Benz standardizes source code and automates onboarding; Mercado Libre cuts coding time by 50%with GitHub Copilot (desktop extraction joins words; phone displays 50% with).
   - Customer logos are flat muted CSS masks using the supplied PNGs, not photographic logo tiles. Desktop round arrow link controls.
10. Community grid
   - Desktop: y px 5768; end y px 6205; height px 437
   - Phone: y px 7495; end y px 8025; height px 530
   - Desktop seam/grid y5850 approximately, 6 columns by4 rows within1184px. Phone 3 columns by6 rows, overflow text ellipsis. Pale #F2F5F3 and #E4EBE6 empty cells.
   - Dynamic tile content; freeze exact reference labels/star counts: Developer-Y / cs-video-courses — 575 new stars this week; coollabsio / coolify — 1837; microsoft / PowerToys — 749; ripienaar / free-for-dev — 867; electron / electron — 182; EvanLi / Github-Ranking — 196; psf / black — 110; tailscale / tailscale — 380; calcom / cal.diy — 349; rustdesk / rustdesk — 1024; pydantic / pydantic — 111; VictoriaMetrics / VictoriaMetrics — 76. Render names/descriptions with screenshot clipping; every number uses suffix new stars this week.
   - Mona crop at upper-right edge; WebGL motion and changing trending rankings are animation/live data only.
11. Community signup
   - Desktop: y px 6205; end y px 6602; height px 397
   - Phone: y px 8025; end y px 8561; height px 536
   - Built with GitHub; Join the world's largest developer community. Green terminal cursor after eyebrow.
   - Every project adds something new to the community. Explore what developers are building across GitHub, then create an account and contribute your own.
   - Desktop x189 heading column, x780 description and inline signup; phone heading panel then description and stacked signup. White spacer follows before green footer rule.
12. Footer
   - Desktop: top rule y px 6602; newsletter top y px 6668; column heading y px 6950; legal y px 7577
   - Phone: top rule y px 8561; newsletter top y px 8627; columns Products/Developers first row at y8930; Support/Company second row y9542; x24 and211, w155; legal row y px 10012; legal wrap uppercase legal links; social row then English selector at x24 y10213
   - Black Invertocat at x112, newsletter heading The developer newsletter with green cursor.
   - Get tips, technical guides, and best practices. Twice a month. Right in your inbox. CTA Subscribe.
   - Four columns separated from newsletter by 1px hairlines; column headings uppercase mono.
   - Legal row below full-width 1px hairline, copyright left, terms/privacy/cookie controls next, seven social icons and language at right.

## Page anatomy

How GitHub's own landing pages are built, part by part (observed; github.com (observed 2026-10-31), 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: Single white header with black Invertocat, five links, search and account actions.
- ground: #FFFFFF
- height: 68
- border: 1px solid #E4EBE6 bottom
- logo: variant black Invertocat; px 32; position x96 y18
- links: count 5; labels Products, Developers, Businesses, Resources, Pricing; size 14; weight 400; color #000000; alignment left, x144 through x635; first four have down chevrons
- actions:
  - Search
  - Sign in
  - Sign up
- sticky: Header appears at y0; scroll persistence not established by static evidence.
- phone: height px 52; logo 24px at x16 y14; what shows Invertocat, Sign in account icon, menu hamburger; menu right 56px cell, closed at rest; CTA no visible desktop signup/search; account icon x286
- phone cells: Phone header 52px: four cells divided by 1px #E4EBE6 vertical rules: logo cell x0-56 (24px mark centred), open middle, account cell x278-334 (Sign in as a 32px person icon button), menu cell x334-390 (hamburger). Bottom rule 1px #E4EBE6.

**Hero**
- summary: Centered announcement and two-line headline above signup and app download, Mona peeks over multicolor seam into full-width grid video ground.
- desktop: column split one centered column; vertical anchors px (announcement 128; heading 190; form 345; mascot canvas 435; grid seam 526; video 595; tabs 1399); text max width px 526; media video x151 y595 w1138 h767; grid x0 y526 w1440 h840; UI clipping with rounded outer frame and green left/bottom edge; CTA form x351 y345 w455 h53; adjacent download button, 12px gap
- phone: order announcement, headline, stacked email and signup, download, Mona, cropped UI, tabs, carousel controls; alignment center; heading 36px/43.2px; two lines; form x16 y280 w358 h106; download x16 y398 w358 h53; grid y581 h500; media x-177 y648 w542 h365; crop at viewport edges; do not fit the entire desktop screenshot
- at rest: hero video Use hero-video-rest-frame.jpg, frame at 12.5 seconds: Fix dark mode toggle session, review-required pane. MP4 playback optional; animation only.; active tab Check the results; mascot hero-mona-peek-crop.png at grid seam; original WebGL animation only
- media:
  - hero-video-rest-frame.jpg
  - hero-video-light.mp4
  - hero-grid-backdrop.svg
  - hero-ducky-badge.png
  - hero-mona-peek-crop.png
- type: See kit.spec.type, exact per-run records.
- cta:
  - Enter your email
  - Sign up for GitHub
  - Download GitHub Copilot app
- proof: Live activity row follows tabs.
- tabs:
  - Review changes
  - Direct the fix
  - Check the results
  - Approve and merge
  - See it shipped
- heading: Software still starts with you
- announcement: GitHub Universe ‘26 Recap
- headline lines:
  - Software still starts
  - with you
- headline rule: Set as two forced lines (two block spans): 'Software still starts' / 'with you', centred, on both desktop (h1 box x457 y190 w526 h123, 56px/61.6px weight 440) and phone (x25 y162 w341, 36px/43.2px, 2 lines). Do not let it rewrap as 'Software still / starts with you'.
- frame rails: The page frame starts in the hero: 1px #E4EBE6 vertical rails at x128 and x1312 run from the bottom of the nav (y68) down to the multicolour seam at y526 and continue through every white section to the footer; horizontal 1px #E4EBE6 rules close each section band edge-to-edge between the rails (and full-bleed where the measured boxes say so). Phone: no rails.
- never:
  - The grey grid ground (#F2F5F3, hero-grid-backdrop.svg) spans y526-1366 only; the tab pills (y1399) and pause button sit on WHITE below it.
  - Seam A runs the full 1440px width uninterrupted; Mona (hero-mona-peek-crop.png, shown at 210x95 desktop, about 150x68 phone) sits ON TOP of it, centred at x720, its bottom edge on y526.
  - Product screenshots keep their aspect ratio: crop with object-fit: cover / object-position: left top inside the frame, never squeeze.
  - Phone hero tabs: same pills, one horizontally scrolled row, then the pause button; never a different control.

**Live activity**
- summary: Full-bleed horizontally clipped activity ticker with a fixed developer statistic.
- ground: #FFFFFF
- desktop: y px 1533; end y px 1642; height px 109; media 
- phone: y px 1300; end y px 1480; height px 180; media 
- anatomy:
  - Desktop row h109; phone row h184 approximately, edge fades, pause control.
  - Dynamic feed: repo forked, pull request, push and branch merged cards. Preserve exact screenshot-visible strings; probe captures a different moment. Desktop: pull request from kairos-code-dev; zlink-systems/zlink · 5 minutes ago; repo forked from howtimeschange; DingTalk-Real-AI/dingtalk-workspace-cli · 5 minutes ago; push from djungelorm; krpc/krpc · yesterday. Phone: push from Commander-hill; Commander-hill/akwaaba-homes; yesterday.
  - Publish 225M+ developers building on GitHub. Phone screenshot catches a clipped animated counter; do not replace published 225M+ with 0M+.
- components:
  - activity cards
  - 225M+ statistic
  - pause
- at rest cards as in reference:
  - card 1 (clipped by the left viewport edge): green-tile pull-request octicon + 'pull request from kairos-code-dev' / 'zlink-systems/zlink · 5 minutes ago'
  - card 2 (white, x~295-600): '225M+' Mona Sans Mono 28px #08872B / 'developers building on GitHub' Mona Sans Mono 14px #58635B
  - card 3: fork octicon + 'repo forked from howtimeschange' / 'DingTalk-Real-AI/dingtalk-workspace-cli · 5 minutes ago'
  - card 4: push octicon + 'push from djungelorm' / 'krpc/krpc · yesterday'
  - card 5 (clipped by the right edge, under a white fade): 'branch merged from ...' / 'yoshigoto/dns-...'
  - 32px white circular pause button with 1px #D2D9D4 ring at the right edge (x~1390), vertically centred
  - each event line: event type in #000 then 'from' in #58635B then the user in #000; second line repo in #000, ' · 5 minutes ago' in #58635B
  - row y1533-1642 (109px), ground #F2F5F3 cards with 1px #D2D9D4 top/bottom rules and 1px dividers; the stat card ground #FFFFFF; left and right ends fade to white (~120px)
- dynamic: Live feed: the strings change constantly; use the reference strings above. Animation only: horizontal scroll.

**GitHub Platform**
- summary: Heading band then two equal bordered product cells.
- ground: #FFFFFF
- desktop: y px 1642; end y px 2592; height px 950
- desktop text:
  - h2 "GitHub Platform" x16 y1730 w1408 h48 · Mona Sans 40/48 wt400 #000000
  - h3 "GitHub" x362 y2374 w125 h38 · Mona Sans 28/37.8 wt400 #000000
  - p "Repository hosting, code review, and collaboration." x207 y2420 w434 h27 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Learn more" x294 y2476 w77 h21 · Mona Sans 14/21 wt500 ls0.21px #FFFFFF
  - span "See plans and pricing" x409 y2476 w146 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
  - h3 "Copilot" x953 y2373 w125 h38 · Mona Sans 28/37.8 wt400 #000000
  - p "AI coding agent for tasks, projects and automated work" x780 y2419 w472 h54 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Learn more" x886 y2503 w77 h21 · Mona Sans 14/21 wt500 ls0.21px #FFFFFF
  - span "See plans and pricing" x1000 y2503 w146 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
- desktop media:
  - svg x189 y1900 w471 h441 .Svg__yJ0wP1
  - img x219 y1932 w441 h376 alt"A pull request with a merge stack" features-platform-1-light.jpg .FeatureGridVisual__image__oUVc
  - svg x362 y2381 w24 h24 .octicon octicon-mark-github
  - svg x781 y1895 w470 h450 .Svg__yJ0wP1
  - img x811 y1932 w440 h376 alt"GitHub Copilot working with repository context" features-platform-2-light.jpg .FeatureGridVisual__image__oUVc
  - svg x953 y2380 w24 h24 .octicon octicon-mark-github
- desktop borders:
  - box x188 y1899 w473 h443 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r6px bgtransparent
  - box x218 y1931 w442 h378 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px 0px 0px 8px bg#FFFFFF
  - box x780 y1899 w472 h443 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r6px bgtransparent
  - box x810 y1931 w441 h378 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px 0px 0px 8px bg#FFFFFF
- phone: y px 1480; end y px 2769; height px 1289
- phone text:
  - h2 "GitHub Platform" x16 y1502 w358 h34 · Mona Sans 28/33.6 wt400 #000000
  - h3 "GitHub" x142 y1982 w105 h29 · Mona Sans 22/28.6 wt400 #000000
  - p "Repository hosting, code review, and collaboration." x24 y2018 w342 h54 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Learn more" x65 y2102 w77 h21 · Mona Sans 14/21 wt500 ls0.21px #FFFFFF
  - span "See plans and pricing" x179 y2102 w146 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
  - h3 "Copilot" x142 y2575 w106 h29 · Mona Sans 22/28.6 wt400 #000000
  - p "AI coding agent for tasks, projects and automated work" x24 y2612 w342 h54 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Learn more" x65 y2695 w77 h21 · Mona Sans 14/21 wt500 ls0.21px #FFFFFF
  - span "See plans and pricing" x179 y2695 w146 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
- phone media:
  - svg x0 y1582 w390 h370 .Svg__yJ0wP1
  - img x32 y1628 w326 h278 alt"A pull request with a merge stack" features-platform-1-light.jpg .FeatureGridVisual__image__oUVc
  - svg x142 y1984 w24 h24 .octicon octicon-mark-github
  - svg x0 y2175 w390 h370 .Svg__yJ0wP1
  - img x32 y2221 w326 h278 alt"GitHub Copilot working with repository context" features-platform-2-light.jpg .FeatureGridVisual__image__oUVc
  - svg x142 y2577 w24 h24 .octicon octicon-mark-github
- phone borders:
  - box x0 y1584 w390 h366 top[1px solid rgb(210, 217, 212)] left[0px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r0px bgtransparent
  - box x31 y1627 w328 h280 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px bg#FFFFFF
  - box x0 y2176 w390 h593 top[1px solid rgb(228, 235, 230)] left[0px none rgb(0, 0, 0)] right[0px none rgb(0, 0, 0)] bottom[0px none rgb(0, 0, 0)] r0px bgtransparent
  - box x0 y2177 w390 h366 top[1px solid rgb(210, 217, 212)] left[0px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r0px bgtransparent
  - box x31 y2220 w328 h280 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px bg#FFFFFF
- anatomy:
  - Desktop grid x128–1312 split at720; media inside 60px cell inset; center product mark/title and copy, then two compact CTAs.
  - Phone full-width image ground followed by centered white copy panel, then second product; no two-column squeeze.
  - Products in order: GitHub; Copilot. CTAs Learn more; See plans and pricing.
- components:
  - platform-github-pr-stack.jpg
  - platform-copilot-agent.jpg
  - card-frame-platform-github.svg
  - card-frame-platform-copilot.svg
  - product-title-github-mark.svg

**More ways to use GitHub**
- summary: Five product cards: two equal upper cards and three equal lower cards.
- ground: #FFFFFF
- desktop: y px 2592; end y px 3981; height px 1389
- desktop text:
  - h2 "More ways to use GitHub" x16 y2681 w1408 h48 · Mona Sans 40/48 wt400 #000000
  - h3 "Actions" x188 y3213 w71 h26 · Mona Sans 20/26 wt400 #000000
  - p "CI/CD and automation" x188 y3239 w195 h27 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Explore Actions" x201 y3287 w108 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
  - h3 "Code Quality" x780 y3212 w123 h26 · Mona Sans 20/26 wt400 #000000
  - p "Quality analysis, fixes, and enforcement" x780 y3238 w341 h27 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Explore Code Quality" x793 y3287 w145 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
  - h3 "Code Security" x168 y3817 w132 h26 · Mona Sans 20/26 wt400 #000000
  - p "Vulnerability detection and response" x168 y3843 w313 h27 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Explore Code Security" x181 y3891 w152 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
  - h3 "Secret Protection" x563 y3817 w162 h26 · Mona Sans 20/26 wt400 #000000
  - p "Secret scanning and leak prevention" x563 y3843 w312 h27 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Explore Secret Protection" x576 y3891 w175 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
  - h3 "Codespaces" x958 y3816 w118 h26 · Mona Sans 20/26 wt400 #000000
  - p "Cloud development environments" x958 y3842 w288 h27 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Explore Codespaces" x971 y3890 w140 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
- desktop media:
  - svg x189 y2849 w471 h333 .Svg__yJ0wP1
  - img x220 y2883 w409 h265 alt"A successful GitHub Actions workflow" features-ways-1-light.jpg .FeatureGridVisual__image__oUVc
  - svg x781 y2850 w470 h330 .Svg__yJ0wP1
  - img x812 y2883 w408 h265 alt"A code quality autofix suggestion" features-ways-2-light.jpg .FeatureGridVisual__image__oUVc
  - svg x169 y3434 w313 h352 .Svg__yJ0wP1
  - img x199 y3467 w283 h286 alt"A code injection security alert" features-ways-3-light.jpg .FeatureGridVisual__image__oUVc
  - svg x564 y3434 w313 h352 .Svg__yJ0wP1
  - img x594 y3467 w283 h286 alt"A leaked password security alert" features-ways-4-light.jpg .FeatureGridVisual__image__oUVc
  - svg x959 y3434 w312 h351 .Svg__yJ0wP1
  - img x989 y3467 w282 h285 alt"A GitHub Codespaces environment selector" features-ways-5-light.jpg .FeatureGridVisual__image__oUVc
- desktop borders:
  - box x188 y2850 w473 h331 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r6px bgtransparent
  - box x219 y2882 w411 h267 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px bg#FFFFFF
  - box x780 y2850 w472 h330 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r6px bgtransparent
  - box x811 y2882 w410 h267 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px bg#FFFFFF
  - box x128 y3374 w395 h604 top[1px solid rgb(228, 235, 230)] left[1px solid rgb(228, 235, 230)] right[0px none rgb(0, 0, 0)] bottom[0px none rgb(0, 0, 0)] r0px bgtransparent
  - box x168 y3435 w315 h350 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r6px bgtransparent
  - box x198 y3466 w284 h288 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px 0px 0px 8px bg#FFFFFF
  - box x523 y3374 w395 h604 top[1px solid rgb(228, 235, 230)] left[1px solid rgb(228, 235, 230)] right[0px none rgb(0, 0, 0)] bottom[0px none rgb(0, 0, 0)] r0px bgtransparent
  - box x563 y3435 w315 h350 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r6px bgtransparent
  - box x593 y3466 w284 h288 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px 0px 0px 8px bg#FFFFFF
  - box x563 y3886 w201 h32 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r6px bg#000000@0.06
  - box x917 y3374 w395 h604 top[1px solid rgb(228, 235, 230)] left[1px solid rgb(228, 235, 230)] right[1px solid rgb(228, 235, 230)] bottom[0px none rgb(0, 0, 0)] r0px bgtransparent
  - box x958 y3435 w314 h349 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r6px bgtransparent
  - box x988 y3466 w283 h287 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px 0px 0px 8px bg#FFFFFF
- phone: y px 2769; end y px 5175; height px 2406
- phone text:
  - h2 "More ways to use GitHub" x16 y2834 w358 h34 · Mona Sans 28/33.6 wt400 #000000
  - h3 "Actions" x24 y3221 w64 h23 · Mona Sans 18/23.4 wt400 #000000
  - p "CI/CD and automation" x24 y3245 w195 h27 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Explore Actions" x37 y3293 w108 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
  - h3 "Code Quality" x24 y3674 w111 h23 · Mona Sans 18/23.4 wt400 #000000
  - p "Quality analysis, fixes, and enforcement" x24 y3697 w341 h27 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Explore Code Quality" x37 y3745 w145 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
  - h3 "Code Security" x24 y4126 w119 h23 · Mona Sans 18/23.4 wt400 #000000
  - p "Vulnerability detection and response" x24 y4149 w313 h27 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Explore Code Security" x37 y4198 w152 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
  - h3 "Secret Protection" x24 y4578 w146 h23 · Mona Sans 18/23.4 wt400 #000000
  - p "Secret scanning and leak prevention" x24 y4602 w312 h27 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Explore Secret Protection" x37 y4650 w175 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
  - h3 "Codespaces" x24 y5031 w106 h23 · Mona Sans 18/23.4 wt400 #000000
  - p "Cloud development environments" x24 y5054 w288 h27 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - span "Explore Codespaces" x37 y5103 w140 h21 · Mona Sans 14/21 wt500 ls0.21px #000000
- phone media:
  - svg x0 y2913 w390 h280 .Svg__yJ0wP1
  - img x32 y2947 w326 h212 alt"A successful GitHub Actions workflow" features-ways-1-light.jpg .FeatureGridVisual__image__oUVc
  - svg x0 y3365 w390 h280 .Svg__yJ0wP1
  - img x32 y3399 w326 h212 alt"A code quality autofix suggestion" features-ways-2-light.jpg .FeatureGridVisual__image__oUVc
  - svg x0 y3817 w390 h280 .Svg__yJ0wP1
  - img x32 y3852 w326 h212 alt"A code injection security alert" features-ways-3-light.jpg .FeatureGridVisual__image__oUVc
  - svg x0 y4270 w390 h280 .Svg__yJ0wP1
  - img x32 y4304 w326 h212 alt"A leaked password security alert" features-ways-4-light.jpg .FeatureGridVisual__image__oUVc
  - svg x0 y4722 w390 h280 .Svg__yJ0wP1
  - img x32 y4756 w326 h212 alt"A GitHub Codespaces environment selector" features-ways-5-light.jpg .FeatureGridVisual__image__oUVc
- phone borders:
  - box x0 y2916 w390 h273 top[1px solid rgb(210, 217, 212)] left[0px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r0px bgtransparent
  - box x31 y2946 w328 h214 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px bg#FFFFFF
  - box x0 y3368 w390 h452 top[1px solid rgb(228, 235, 230)] left[0px none rgb(0, 0, 0)] right[0px none rgb(0, 0, 0)] bottom[0px none rgb(0, 0, 0)] r0px bgtransparent
  - box x0 y3369 w390 h273 top[1px solid rgb(210, 217, 212)] left[0px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r0px bgtransparent
  - box x31 y3398 w328 h214 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px bg#FFFFFF
  - box x0 y3820 w390 h452 top[1px solid rgb(228, 235, 230)] left[0px none rgb(0, 0, 0)] right[0px none rgb(0, 0, 0)] bottom[0px none rgb(0, 0, 0)] r0px bgtransparent
  - box x0 y3821 w390 h273 top[1px solid rgb(210, 217, 212)] left[0px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r0px bgtransparent
  - box x31 y3851 w328 h214 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px bg#FFFFFF
  - box x0 y4272 w390 h452 top[1px solid rgb(228, 235, 230)] left[0px none rgb(0, 0, 0)] right[0px none rgb(0, 0, 0)] bottom[0px none rgb(0, 0, 0)] r0px bgtransparent
  - box x0 y4273 w390 h273 top[1px solid rgb(210, 217, 212)] left[0px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r0px bgtransparent
  - box x31 y4303 w328 h214 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px bg#FFFFFF
  - box x24 y4645 w201 h32 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r6px bg#000000@0.06
  - box x0 y4725 w390 h452 top[1px solid rgb(228, 235, 230)] left[0px none rgb(0, 0, 0)] right[0px none rgb(0, 0, 0)] bottom[0px none rgb(0, 0, 0)] r0px bgtransparent
  - box x0 y4726 w390 h273 top[1px solid rgb(210, 217, 212)] left[0px solid rgb(210, 217, 212)] right[0px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r0px bgtransparent
  - box x31 y4755 w328 h214 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px bg#FFFFFF
- anatomy:
  - Centered heading with 96px vertical spacing on desktop; thin grid divides cards.
  - Actions; Code Quality; Code Security; Secret Protection; Codespaces, in that order. Captions and Explore labels verbatim in text evidence.
  - Desktop first row 592px cells, second row ~395px cells. Phone one full-width image then left-aligned text at x24; five consecutive cards. Product frames carry green, blue, pink, orange and purple left/bottom accents.
- components:
  - ways-actions-checks.jpg
  - ways-code-quality.jpg
  - ways-code-security.jpg
  - ways-secret-protection.jpg
  - ways-codespaces.jpg
  - card-frame-ways-*.svg

**Enterprise introduction**
- summary: Pale pixel contribution texture followed by enterprise heading and CTA.
- ground: #FFFFFF
- desktop: y px 3981; end y px 4475; height px 494; media canvas x-107 y3984 w137 h137 .Canvas__hkCneK
- desktop text:
  - h2 "Whatever you're building, you can build it on GitHub" x177 y4250 w563 h88 · Mona Sans 34/44.2 wt400 #000000
  - span "Start Enterprise free trial" x198 y4381 w189 h22 · Mona Sans 16/24 wt500 ls0.16px #000000
- desktop borders:
  - box x177 y4371 w231 h43 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r6px bg#000000@0.06
- phone: y px 5175; end y px 5565; height px 390; media canvas x-531 y5183 w104 h104 .Canvas__hkCneK
- phone text:
  - h2 "Whatever you're building, you can build it on GitHub" x24 y5377 w342 h62 · Mona Sans 24/31.2 wt400 #000000
  - span "Start Enterprise free trial" x45 y5478 w189 h22 · Mona Sans 16/24 wt500 ls0.16px #000000
- phone borders:
  - box x24 y5468 w231 h43 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r6px bg#000000@0.06
- anatomy:
  - Pixel texture strip about184px desktop,140px phone, white and muted green-gray cells.
  - Whatever you're building, you can build it on GitHub; Start Enterprise free trial. Desktop heading x177 y4250; phone x24 y5377.
- components:
  - contribution-cell texture
  - secondary CTA
- texture: Pixel strip: use enterprise-pixel-strip-desk-crop.png (1184x188, crop of the resting state) STRICTLY inside the rails (never full-bleed, never re-tiled) at x128-1312, y3974-4161 desktop, with a 1px #E4EBE6 rule below. Cells are about 47x23px in white, #F2F5F3-ish and #E4EBE6-ish pale tints, sparse and irregular, densest at the top. Phone: same image, cropped to the viewport width (object-fit cover, left aligned), about 140px tall. The animated Mona that walks through it is animation only.
- headline lines:
  - Whatever you're building, you can
  - build it on GitHub
- headline box: H2 x177 y4250 w563 h88, 34px/44.2px 400, two forced lines; phone x24 y5380 w342, 24px/31.2px.

**Customer proof**
- summary: Testimonial carousel left, two stacked statistics right.
- ground: #FFFFFF
- desktop: y px 4475; end y px 5136; height px 661; media img x179 y4896 w44 h44 avatar-5.jpg .Primer_Brand__Avatar-module__A
- desktop text:
  - span "“" x178 y4584 w55 h64 · Mona Sans Mono 64/64 wt400 #08872B
  - span "GitHub is one of the de facto tools that engineers want to use, and because of t" x177 y4680 w630 h173 · Mona Sans 32/43.2 wt480 #000000
  - span "Rob Witoff" x241 y4893 w115 h24 · Mona Sans 16/24 wt400 ls0.24px #000000
  - span "CTO, Coinbase" x241 y4919 w115 h24 · Mona Sans 16/24 wt400 ls0.24px #58635B
  - span "800M" x904 y4603 w359 h44 · Mona Sans Mono 34/44.2 wt400 #08872B
  - span "800M" x904 y4603 w359 h44 · Mona Sans Mono 34/44.2 wt400 #08872B
  - p "public and open source repositories" x904 y4655 w359 h21 · Mona Sans Mono 14/21 wt400 ls0.21px #58635B
  - span "90%" x904 y4934 w359 h44 · Mona Sans Mono 34/44.2 wt400 #08872B
  - span "90%" x904 y4934 w359 h44 · Mona Sans Mono 34/44.2 wt400 #08872B
  - p "of the Fortune 100 uses GitHub" x904 y4986 w359 h21 · Mona Sans Mono 14/21 wt400 ls0.21px #58635B
- desktop borders:
  - box x856 y4805 w455 h330 top[1px solid rgb(228, 235, 230)] left[0px none rgb(0, 0, 0)] right[0px none rgb(0, 0, 0)] bottom[0px none rgb(0, 0, 0)] r0px bgtransparent
- phone: y px 5565; end y px 6506; height px 941; media img x39 y6014 w44 h44 avatar-5.jpg .Primer_Brand__Avatar-module__A
- phone text:
  - span "“" x38 y5648 w55 h64 · Mona Sans Mono 64/64 wt400 #08872B
  - span "GitHub is one of the de facto tools that engineers want to use, and because of t" x37 y5744 w316 h227 · Mona Sans 24/32.4 wt480 #000000
  - span "Rob Witoff" x101 y6011 w115 h24 · Mona Sans 16/24 wt400 ls0.24px #000000
  - span "CTO, Coinbase" x101 y6037 w115 h24 · Mona Sans 16/24 wt400 ls0.24px #58635B
  - span "800M" x37 y6253 w316 h31 · Mona Sans Mono 24/31.2 wt400 #08872B
  - span "800M" x37 y6253 w316 h31 · Mona Sans Mono 24/31.2 wt400 #08872B
  - p "public and open source repositories" x37 y6292 w316 h21 · Mona Sans Mono 14/21 wt400 ls0.21px #58635B
  - span "90%" x37 y6378 w316 h31 · Mona Sans Mono 24/31.2 wt400 #08872B
  - span "90%" x37 y6378 w316 h31 · Mona Sans Mono 24/31.2 wt400 #08872B
  - p "of the Fortune 100 uses GitHub" x37 y6417 w316 h21 · Mona Sans Mono 14/21 wt400 ls0.21px #58635B
- phone borders:
  - box x21 y6345 w348 h125 top[1px solid rgb(228, 235, 230)] left[0px none rgb(0, 0, 0)] right[0px none rgb(0, 0, 0)] bottom[0px none rgb(0, 0, 0)] r0px bgtransparent
- anatomy:
  - Desktop split x855: left quote panel ~727px, right ~457px; each stat half height. Phone quote then 800M then 90%.
  - Resting testimonial: GitHub is one of the de facto tools that engineers want to use, and because of that, we don't have long, expensive onboarding periods or productivity gaps.
  - Rob Witoff; CTO, Coinbase. Green quotation tile, circular 44px bordered avatar, previous/next controls and six position indicators. Carousel transitions animation only.
  - 800M public and open source repositories; 90% of the Fortune 100 uses GitHub. Use these published numbers.
- components:
  - quote-avatar-rob-witoff.jpg
  - quote carousel
  - 800M
  - 90%
- geometry exact:
  - Band y4475-5136 inside the rails; quote cell x129-856 (727px, 1px #E4EBE6 right rule) with padding 80px 48px; stats column x856-1312.
  - Quote mark tile 56x56 #EBF9F4 radius 12 at x177 y4576; quote text block x177 y4680 w630 (5 lines at 32px/43.2px, weight 480); attribution row y4885: 44px round avatar at x179 y4896, name/title at x241 y4893.
  - Carousel capsule at x177 y5013 (see components: carousel controls).
  - Phone: cell x21-369, padding 40px 16px; tile at x37 y5643; quote y5747 (24px/32.4px); avatar y6017; capsule y6141.

**Customer logos**
- summary: Single clipped marquee with pause button and edge fades.
- ground: #FFFFFF
- desktop: y px 5136; end y px 5306; height px 170; text ; borders 
- desktop media:
  - svg x-2 y5204 w136 h32
  - svg x230 y5204 w106 h32
  - svg x432 y5204 w216 h32
  - svg x744 y5204 w141 h32
  - svg x981 y5204 w77 h32
  - svg x1154 y5204 w136 h32
  - svg x1386 y5204 w106 h32
  - svg x1588 y5204 w216 h32
  - svg x1900 y5204 w141 h32
  - svg x2137 y5204 w77 h32
- phone: y px 6506; end y px 6626; height px 120; text ; borders 
- phone media:
  - svg x-204 y6515 w136 h32
  - svg x28 y6515 w106 h32
  - svg x230 y6515 w216 h32
  - svg x542 y6515 w141 h32
  - svg x779 y6515 w77 h32
  - svg x952 y6515 w136 h32
  - svg x1184 y6515 w106 h32
  - svg x1385 y6515 w216 h32
  - svg x1697 y6515 w141 h32
  - svg x1934 y6515 w77 h32
- anatomy:
  - FedEx; American Airlines; Postmates; mercado libre; duolingo. Use actual SVGs, muted gray-green.
  - Dynamic marquee position: desktop shows clipped FedEx left followed by American Airlines, Postmates, Mercado Libre, Duolingo. Phone shows clipped FedEx and American Airlines; pause at right. Motion endpoint animation only.
- components:
  - logo-strip-*.svg

**Customer stories**
- summary: Three bordered stories beneath multicolor progress strip and a duck at its right end.
- ground: #FFFFFF
- desktop: y px 5306; end y px 5768; height px 462; media img x1284 y5346 w32 h31 ducky-4e03ac3720f4beec.png .Primer_Brand__Image-module__Im; borders 
- desktop text:
  - a "Figma streamlines development and strengthens security" x193 y5493 w208 h93 · Mona Sans 22/30.8 wt400 #000000
  - a "Mercedes-Benz standardizes source code and automates onboarding" x588 y5493 w261 h123 · Mona Sans 22/30.8 wt400 #000000
  - a "Mercado Libre cuts coding time by 50%with GitHub Copilot" x982 y5493 w243 h93 · Mona Sans 22/30.8 wt400 #000000
- phone: y px 6626; end y px 7495; height px 869; media img x342 y6634 w32 h31 ducky-4e03ac3720f4beec.png .Primer_Brand__Image-module__Im; borders 
- phone text:
  - a "Figma streamlines development and strengthens security" x45 y6757 w298 h56 · Mona Sans 20/28 wt400 #000000
  - span "Read customer story" x45 y6845 w162 h24 · Mona Sans 16/24 wt500 ls0.24px #0055D5
  - a "Mercedes-Benz standardizes source code and automates onboarding" x45 y7014 w269 h84 · Mona Sans 20/28 wt400 #000000
  - span "Read customer story" x45 y7130 w162 h24 · Mona Sans 16/24 wt500 ls0.24px #0055D5
  - a "Mercado Libre cuts coding time by 50%with GitHub Copilot" x45 y7299 w293 h56 · Mona Sans 20/28 wt400 #000000
  - span "Read customer story" x45 y7387 w162 h24 · Mona Sans 16/24 wt500 ls0.24px #0055D5
- anatomy:
  - Desktop x128–1312, three equal columns; top strip y5358. Phone three stacked story cells with textual blue Read customer story CTA and chevron.
  - Figma streamlines development and strengthens security; Mercedes-Benz standardizes source code and automates onboarding; Mercado Libre cuts coding time by 50%with GitHub Copilot (desktop extraction joins words; phone displays 50% with).
  - Customer logos are flat muted CSS masks using the supplied PNGs, not photographic logo tiles. Desktop round arrow link controls.
- components:
  - customer-story-logo-figma.png
  - customer-story-logo-mercedes-benz.png
  - customer-story-logo-mercado-libre.png
  - progress-ducky.png

**Community grid**
- summary: Trending repo tiles below a Mona peeking over the upper edge.
- ground: #FFFFFF
- desktop: y px 5768; end y px 6205; height px 437; text ; media canvas x224 y6111 w137 h137 .Canvas__hkCneK; borders 
- phone: y px 7495; end y px 8025; height px 530; media canvas x-144 y7868 w181 h181 .Canvas__hkCneK; borders 
- phone text:
  - span "psf / b+&&$" x14 y7872 w63 h13 · Mona Sans VF 11/14.3 wt400 #000000
  - span "psf / black" x14 y7869 w101 h14 · Mona Sans VF 11/14.3 wt400 #000000
  - p "The uncompromising Python code formatter" x14 y7888 w101 h14 · Mona Sans VF 11/14.3 wt400 #58635B
  - p "110 new stars this week" x14 y7911 w101 h14 · Mona Sans VF 11/14.3 wt400 #58635B
  - span "tailsc]^])?+??*#*^%+)" x274 y7960 w118 h13 · Mona Sans VF 11/14.3 wt400 #000000
  - span "tailscale / tailscale" x274 y7955 w102 h14 · Mona Sans VF 11/14.3 wt400 #000000
  - p "The easiest, most secure way to use WireGuard and 2FA." x274 y7973 w102 h14 · Mona Sans VF 11/14.3 wt400 #58635B
  - p "380 new stars this week" x274 y7997 w102 h14 · Mona Sans VF 11/14.3 wt400 #58635B
- anatomy:
  - Desktop seam/grid y5850 approximately, 6 columns by4 rows within1184px. Phone 3 columns by6 rows, overflow text ellipsis. Pale #F2F5F3 and #E4EBE6 empty cells.
  - Dynamic tile content; freeze exact reference labels/star counts: Developer-Y / cs-video-courses — 575 new stars this week; coollabsio / coolify — 1837; microsoft / PowerToys — 749; ripienaar / free-for-dev — 867; electron / electron — 182; EvanLi / Github-Ranking — 196; psf / black — 110; tailscale / tailscale — 380; calcom / cal.diy — 349; rustdesk / rustdesk — 1024; pydantic / pydantic — 111; VictoriaMetrics / VictoriaMetrics — 76. Render names/descriptions with screenshot clipping; every number uses suffix new stars this week.
  - Mona crop at upper-right edge; WebGL motion and changing trending rankings are animation/live data only.
- components:
  - community-mona-peek-crop.png
  - trending tiles
- cell map desktop:
  - 6 columns x 4 rows inside the rails (x128-1312, each cell ~197x89), y5845-6202, 1px #E4EBE6 cell rules; text cells white, empty cells either #F2F5F3 (light) or #E4EBE6 (darker). Each text cell: repo name Mona Sans 11px/14.3px #000 (measured on phone; desktop reads the same size in the screenshot) at top-left (12px padding), description 11px #58635B one line with ellipsis, 'N new stars this week' 11px #58635B at the bottom.
  - Row 1: [Developer-Y / cs-video-cou... | List of Computer Science c... | 575] [light] [darker] [coollabsio / coolify | An open-source, self-hosta... | 1837] [microsoft / PowerToys | Microsoft PowerToys is a c... | 749] [light]
  - Row 2: [light] [light] [ripienaar / free-for-dev | A list of SaaS, PaaS and Iaa... | 867] [electron / electron | :electron: Build cross-platf... | 182] [light] [darker]
  - Row 3: [darker] [EvanLi / Github-Ranking | :star:Github Ranking:star: ... | 196] [psf / black | The uncompromising Pytho... | 110] [white] [darker] [tailscale / tailscale | The easiest, most secure w... | 380]
  - Row 4: [calcom / cal.diy | Scheduling infrastructure f... | 349] [rustdesk / rustdesk | An open-source remote de... | 1024] [light] [darker] [pydantic / pydantic | Data validation using Pytho... | 111] [VictoriaMetrics / VictoriaMe... | VictoriaMetrics: fast, cost-... | 76]
  - Mona (community-mona-peek-crop.png, 90x70) peeks over the grid's top rule above column 6, around x1205-1285, y5780-5845, on the white band above the grid (band y5768-5845).
  - All strings above are the reference's resting state (a live trending feed).

**Community signup**
- summary: Two-column closing signup with mono eyebrow and developer-community heading.
- ground: #FFFFFF
- desktop: y px 6205; end y px 6602; height px 397; media 
- desktop text:
  - span "Built with GitHub" x189 y6264 w151 h21 · Mona Sans Mono 14/21 wt400 ls0.21px #58635B uppercase
  - span "Built with GitHub" x189 y6264 w151 h21 · Mona Sans Mono 14/21 wt400 ls0.21px #58635B uppercase
  - h2 "Join the world's largest developer community" x189 y6365 w459 h88 · Mona Sans 34/44.2 wt460 #000000
  - p "Every project adds something new to the community. Explore what developers are b" x780 y6264 w471 h81 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - label "Enter your email" x801 y6416 w109 h21 · Mona Sans 14/21 wt400 ls0.21px #58635B
  - span "Sign up for GitHub" x1082 y6416 w143 h22 · Mona Sans 16/24 wt500 ls0.16px #FFFFFF
- desktop borders:
  - box x780 y6400 w471 h53 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px bg#F2F5F3
  - box x785 y6405 w272 h43 top[1px solid rgba(0, 0, 0, 0)] left[1px solid rgba(0, 0, 0, 0)] right[1px solid rgba(0, 0, 0, 0)] bottom[1px solid rgba(0, 0, 0, 0)] r8px bgtransparent
- phone: y px 8025; end y px 8561; height px 536; media 
- phone text:
  - span "Built with GitHub" x16 y8059 w151 h21 · Mona Sans Mono 14/21 wt400 ls0.21px #58635B uppercase
  - span "Built with GitHub" x16 y8059 w151 h21 · Mona Sans Mono 14/21 wt400 ls0.21px #58635B uppercase
  - h2 "Join the world's largest developer community" x16 y8104 w327 h62 · Mona Sans 24/31.2 wt460 #000000
  - p "Every project adds something new to the community. Explore what developers are b" x16 y8231 w358 h108 · Mona Sans 18/27 wt400 ls0.18px #58635B
  - label "Enter your email" x37 y8375 w109 h21 · Mona Sans 14/21 wt400 ls0.21px #58635B
  - span "Sign up for GitHub" x124 y8428 w143 h22 · Mona Sans 16/24 wt500 ls0.16px #FFFFFF
- phone borders:
  - box x16 y8359 w358 h106 top[1px solid rgb(210, 217, 212)] left[1px solid rgb(210, 217, 212)] right[1px solid rgb(210, 217, 212)] bottom[1px solid rgb(210, 217, 212)] r8px bg#F2F5F3
  - box x21 y8364 w348 h43 top[1px solid rgba(0, 0, 0, 0)] left[1px solid rgba(0, 0, 0, 0)] right[1px solid rgba(0, 0, 0, 0)] bottom[1px solid rgba(0, 0, 0, 0)] r8px bgtransparent
  - box x21 y8417 w348 h43 top[1px solid rgba(0, 0, 0, 0)] left[1px solid rgba(0, 0, 0, 0)] right[1px solid rgba(0, 0, 0, 0)] bottom[1px solid rgba(0, 0, 0, 0)] r6px bg#08872B
  - box x0 y8558 w390 h1715 top[2px solid rgb(13, 103, 49)] left[0px none rgb(0, 0, 0)] right[0px none rgb(0, 0, 0)] bottom[0px none rgb(0, 0, 0)] r0px bg#F2F5F3
- anatomy:
  - Built with GitHub; Join the world's largest developer community. Green terminal cursor after eyebrow.
  - Every project adds something new to the community. Explore what developers are building across GitHub, then create an account and contribute your own.
  - Desktop x189 heading column, x780 description and inline signup; phone heading panel then description and stacked signup. White spacer follows before green footer rule.
- components:
  - email signup
- divider: Two cells split by a 1px #E4EBE6 vertical rule at x~720 (desktop): left cell eyebrow 'BUILT WITH GITHUB' + green square, H2; right cell body + signup form.
- headline lines:
  - Join the world's
  - largest developer community
- headline box: H2 x189 y6365 w459 h88, 34px/44.2px weight 460, two forced lines; phone x16 y8104 w327 24px/31.2px.

**Footer**
- summary: Full-width pale green-gray footer under a 1px green rule; newsletter above four link columns and legal row.
- ground: #F2F5F3
- anatomy:
  - Black Invertocat at x112, newsletter heading The developer newsletter with green cursor.
  - Get tips, technical guides, and best practices. Twice a month. Right in your inbox. CTA Subscribe.
  - Four columns separated from newsletter by 1px hairlines; column headings uppercase mono.
  - Legal row below full-width 1px hairline, copyright left, terms/privacy/cookie controls next, seven social icons and language at right.
- columns: Products GitHub, Actions, Code Quality, Copilot, Codespaces, Code Security, Secret Protection, Pricing, Team, Resources, Roadmap, Compare GitHub, All Features; Developers Developer API, Education, GitHub CLI, GitHub Desktop, GitHub Mobile, Integrations, MCP Registry, Training, Build with Copilot; Support Docs, Community Forum, Professional Services, Premium Support, GitHub Status, Contact GitHub, Sitemap; Company About, Why GitHub, Customer Stories, Blog, Careers, Inclusion, Partners, Social Impact, Shop, What is Git?
- legal:
  - © 2026 GitHub, Inc.
  - Terms
  - Privacy
  - Manage cookies
  - Do not share my personal information
- legal rendered:
  - © 2026 GITHUB, INC.
  - TERMS
  - PRIVACY
  - MANAGE COOKIES
  - DO NOT SHARE MY PERSONAL INFORMATION
- social icons:
  - LinkedIn
  - Instagram
  - YouTube
  - X
  - TikTok
  - Twitch
  - GitHub
- language selector: English
- contact note: No public postal address or telephone appears in the saved homepage.
- desktop: top rule y px 6602; newsletter top y px 6668; column heading y px 6950; legal y px 7577
- phone: top rule y px 8561; newsletter top y px 8627; columns Products/Developers first row at y8930; Support/Company second row y9542; x24 and211, w155; legal row y px 10012; legal wrap uppercase legal links; social row then English selector at x24 y10213
- structure:
  - Footer ground #F2F5F3 with a 2px solid #0D6731 top rule; container x80 w1280 padding 64px 32px 40px, content x112-1328.
  - Newsletter block (x112, w520) stacked: GitHub mark 32x32 at y6668; 28px below it the heading 'THE DEVELOPER NEWSLETTER' Mona Sans Mono 14px weight 480 uppercase #000 with a 9x14 #0D6731 square before it (y6728); body 'Get tips, technical guides, and best practices. / Twice a month. Right in your inbox.' Mona Sans 16px/24px #58635B two lines (y6769, w384); Subscribe small green button 95x32 at y6837.
  - Link columns start y6917: four NAV columns 286px wide at x112, 422, 732, 1042 (24px gaps); each has ONLY a 1px #E4EBE6 top border and 32px top padding, no side rules or boxes. Column heading Mona Sans Mono 14px 480 uppercase #58635B, then links Mona Sans 14px/21px 500 #000, 40px row pitch (link tops 6987, 7027, 7067 ...).
  - Bottom bar y7537: 1px #E4EBE6 top rule, full width; legal text left, social octicons (#58635B, 20px) and an English language button right.
  - Phone: newsletter block first, then columns two per row (155px wide, 32px gap), then legal links stacked.
  - The longest column (Products, 12 links) ends near y7430; the bottom bar's top rule is at y7537. Desktop page ends at y7634.

**On dark grounds**
- scope: No dark-ground homepage band in these references; these are guide/observed token applications only.
- secondary button: transparent ground, #FFFFFF text
- link: #FFFFFF
- muted text: #B7C2BA
- hairline: #3D444D
- logo variant: white Invertocat

## Components

- **button primary** (observed): fill #08872B, text #FFFFFF, border 1px solid transparent, radius 6, padding 6px 20px (large, 43px tall inside the signup form); 0 12px (small, 32px), height 43, text style Mona Sans 16px/24px weight 500, letter-spacing 0.16px (large); 14px/21px 500, 0.21px (small: Learn more, Subscribe), example Sign up for GitHub 185x43 (hero form, inset 5px from the form edge); Learn more 64-ish x32; Subscribe 95x32, padding x 20, font size 16, weight 500
  - hover (observed): background-color color-mix(in srgb, #08872B, #000 16%)
  - active (observed): background linear-gradient(#0000003D,#0000003D), #08872B, border-color #0D6731
  - disabled (observed): background-color #B6BFB8, color #D2D9D4
- **button secondary** (observed): fill #F0F0F0, text #000000, border 1px solid #D2D9D4, radius 6, padding 6px 20px large (53px tall: Download GitHub Copilot app 272x53); small 0 12px, 32px tall (See plans and pricing, Explore Actions 201x32 at its widest), height 53, text style Mona Sans 16px/24px 500, 0.16px (large); 14px/21px 500, 0.21px (small), example Download GitHub Copilot app 272x53; Start Enterprise free trial 231x43; Explore Code Security 32px tall, padding x 20, font size 16, weight 500, ring px 1, ring #D2D9D4, fill note rgba(0,0,0,0.06) over the ground; #F0F0F0 is that over white
  - hover (observed): background-color rgba(0,0,0,0.12)
  - active (observed): background-color rgba(0,0,0,0.21)
- **button nav signup** (observed): fill #000000, text #FFFFFF, radius 6, height 32, padding 0 12px, text style Mona Sans 14px/21px 500, 0.21px, example Sign up at x1267 y18, 77x32; Sign in is a plain 14px/500 black text link at x1199, padding x 12, font size 14, weight 500
- **signup form** (observed): fill rgba(0,0,0,0.06) on white (hero); #F2F5F3 on the community band, border 1px solid #D2D9D4, radius 8, height 53, padding 5px (the green button sits inset 5px from top/right/bottom), text style label 'Enter your email' Mona Sans 14px/21px 400 #58635B, 20px from the left edge; no visible input border, example Hero 455x53 at x351 y345, button 185x43 at x616; community form 471x53. Desktop: one row, label left, green button right. Phone: the hero form stacks into a 358x106 box (input row above, full-width 348x43 button below).
- **announcement pill** (observed): fill #F9FBF9, border 1px solid #E4EBE6, radius pill, height 46, padding 8px, text style Mona Sans 16px/24px 400 #000000, 0.21px, example 316x46 pill at x562 y128 (phone 291x46 at x49 y100): 8px padding; 48x28 hero-ducky-badge.png at its left (x571); label 'GitHub Universe '26 Recap' 16px #000 at x627; then a 24x24 circle (#F2F5F3 fill, 1px #D2D9D4 ring) holding a 16px #58635B chevron-right at x845. Never a bare chevron.
- **search field** (observed): fill #FFFFFF, border 1px solid #B6BFB8, radius 6, height 36, padding 1px 4px 1px 12px, text style Mona Sans 16px/24px 400 #58635B 'Search', example 200x36 at x978 y16 with a 20x20 '/' key badge (1px #B6BFB8 ring, radius 4) at its right
- **product frame** (observed): fill transparent outer card on the white ground; inner screenshot surface #FFFFFF, border outer 1px solid #D2D9D4 radius 6; inner screenshot 1px #D2D9D4 radius 8 0 0 8 (or 8 all round for the 2-up 'ways' cards), radius 6, padding 30px top/left; the screenshot bleeds off the right edge of the outer card (and off the bottom for the platform cards), example Platform card 473x443 holding a 442x378 shot; ways card 315x350 holding 284x288. The outer card is a #F2F5F3 field ruled with a 1px #D2D9D4 grid (~10px cells, fading to white towards the bottom): use card-frame-*.svg as its backdrop. A 4px solid accent rule runs down the screenshot's left edge (starting 4px outside it) and along its bottom edge, sampled from the reference: GitHub and Actions #08872B, Copilot and Code Quality #5FB9FF, Code Security #FF80D2, Secret Protection #DA7210, Codespaces #4956E5. The hero video frame has the same treatment in #08872B.. card-frame-*.svg and hero-grid-backdrop.svg are drawn in 10px user units (viewBox 48x45 etc., preserveAspectRatio none): place them as <img> stretched to the card box (width:100%;height:100%). Their grid lines carry stroke-width 0.094 so they render about 1px, #D2D9D4 on #F2F5F3, faint: the grid must read as a pale ruled field, never a dark pattern. The gradient inside each SVG fades the grid out towards the top. Screenshot images are never distorted: object-fit cover, anchored top-left, the frame clips the overflow.
- **activity ticker card** (observed): fill #F2F5F3, border 1px top and bottom #D2D9D4, no side borders except a 1px divider between cards, radius 0, height 109, padding 24px, text style event line Mona Sans 14px/21px 400 #000 with a 20px rounded green octicon tile; repo line 14px #58635B; the stat card is white with '225M+' Mona Sans Mono 28px/37.8px #08872B and 'developers building on GitHub' Mona Sans Mono 14px #58635B, example Row of ~300-380px cards spanning the full width at y1533; a 32px circular pause button at the right edge. Phone keeps ONE horizontal row: y1300, 142px tall, cards 290-325px wide in the same order, clipped by both viewport edges; the 225M+ card is the second card (x303). Never stack the stat above the row.
- **stat cell** (observed): fill #FFFFFF, border 1px top #E4EBE6 between the two stacked cells; 1px #E4EBE6 left rule, radius 0, text style number Mona Sans Mono 34px/44.2px 400 #08872B; caption Mona Sans Mono 14px/21px 400 #58635B, 0.21px, example 800M / public and open source repositories; 90% / of the Fortune 100 uses GitHub (text x904)
- **quote mark tile** (observed): fill #EBF9F4, text #08872B, radius 8, height 56, example 56x56 tile holding a bold green open-quote glyph, above the testimonial. Primer Brand token --brand-Testimonial-quoteMarkBackground-green #EBF9F4 with quoteMarkColor-green #08872B (live CSS); pixel-checked on the screenshot
- **carousel controls** (observed): fill #F2F5F3 capsule, no border, radius pill, height 42, padding 6px, gap 10px, example One capsule 155x42 at x177 y5013 (desktop; phone x37 y6141): [30px white circle, 1px #D2D9D4 ring, chevron-left] [dots group 63px: active dash 15x6 #58635B, then four 6x6 dots #77827A, 6px gaps] [30px white circle, chevron-right]. All inside the one grey capsule; never loose circles.
- **story card** (observed): fill #FFFFFF, border 1px #E4EBE6 column rules, no card box, radius 0, text style title Mona Sans 22px/30.8px 400 #000 (3-4 lines in a 208px-wide column); logo PNG used as a CSS mask, flat #58635B, about 40px tall, at the top of the cell; under the title (about 50px below) a 32x32 circular button: 1px solid #B6BFB8 ring, white fill, a 16px chevron-right #0055D5 centred. Every card's button sits at the same y (5654 on desktop) regardless of title length.. The live site tints each customer-story PNG with a CSS mask. From a local file:// page Chromium blocks a mask URL, so either inline the PNG as a data URL in the mask or use <img> with a grey filter; the visible result must be a flat #58635B logo.
- **footer link** (observed): text #000000, text style links Mona Sans 14px/21px 500 #000, 40px row pitch (GitHub y6987, Actions y7027 ...); column heading Mona Sans Mono 14px/21px 480 #58635B uppercase at y6950; legal row Mona Sans Mono 12px/18px 500 uppercase #58635B
- **hero tabs** (observed): fill #F2F5F3 (inactive) / #F9FBF9 (active), text #58635B inactive, #000000 active, border inactive 1px transparent; active 1px solid #D2D9D4, radius pill, height 42, padding 8px 16px, text style Mona Sans 16px/24px 400, example Five pills in one row centred under the hero video: Review changes 154px, Direct the fix, Check the results (active at rest), Approve and merge, See it shipped; gap 12px; list x283-1106 at y1399 on desktop; a 42px circular pause button (1px #D2D9D4 ring, octicon-pause) follows the last pill. The active pill carries a progress fill #E4EBE6 from its left edge (about half its width at rest). Phone: the same pills in one horizontally scrolling row starting x24, clipped at the right edge (no wrapping), y1108.
- **multicolor seam** (observed): fill six equal 240px segments, 4px tall, edge to edge (0-1440), example SEAM A at y526-529 between the white hero top and the grey video ground: #0377FF, #0FBF3E, #0377FF, #C898FD, #FF80D2, #08872B (left to right). SEAM B at y2590-2593 closing the GitHub Platform band: #C898FD, #FF80D2, #5FB9FF, #0FBF3E, #5FB9FF, #0D6731. Both are NEVER omitted: they are the page's signature dividers.. Phone: the same segments scaled to 390 (65px each), still 4px tall.
- **story progress bar** (observed): fill eight equal 148px segments across the 1184px frame (x128-1312), 7px tall, y5357-5364, example left to right: #D2D9D4, #B6BFB8, #8DD6FF, #FF80D2, #C898FD, #08872B, #0FBF3E, #C898FD; progress-ducky.png (32x31) sits on its right end at x1284 y5346

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| facilitate |  |  | Guide attention, show change and clarify the next step; first priority for utility motion. | published |
| engage |  |  | Create rhythm without competing with the message. | published |
| impact |  |  | Give important campaign or storytelling moments memorable expression. | published |
| container-transform |  |  | Morph an initiating container into the destination for modals and expanded views. | published |
| container-masking |  |  | Confine celebratory confirmation to the initiating element; copy, save, submit and similar actions only. | published |
| lateral |  |  | Move horizontally among related views at the same hierarchy level, including tabs and pricing. | published |
| enter-exit |  |  | Sequence arrivals and departures for menus, popovers, drawers and overlays. | published |
| simple-ease |  |  | Restrained, nearly immediate-feeling changes for hover, opacity, resizing and generic state changes. | published |
| mono-typing |  |  | Mechanical terminal rhythm; shifting cursor color represents contributors in hero eyebrows and testimonials. | published |
| mona-pixels |  |  | Processing, loading and successful outcomes; context-specific delight. | published |
| primer-stagger |  | 100ms | AnimationProvider default delay increment between children, not the duration of an animation. Default trigger on-visible; apply animation to River.Content rather than the whole river; use sparingly. | published |

## Icon tokens

Grid not published in saved toolkit, stroke not published in saved toolkit (published).

## Signature moves

### Neutral text / expressive visual

Where: Core marketing compositions.
Do: Separate text and visuals with one green accent divider. Choose White, Gray or Black text panels, reserving color for the visual..
Don't: Place copy over busy illustration or use color as the only meaning..

### Selective visible grid

Where: Layouts, publications, event cards.
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..
Don't: Draw every grid line or crowd content into boxes..

### Contribution graph cells

Where: Light branding, community and creative expression.
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..
Don't: Scatter cells, enlarge individual objects beyond a cell, texture product UI with the graph or combine it with dithering..

### Dither wallpaper

Where: Backgrounds, surfaces and event/environmental pattern.
Do: Binary on/off abstraction of contribution history. Scale to the application while keeping a wallpaper role; fade away from important UI..
Don't: Treat the pattern as key art or combine with contribution graph patterns..

### Optimistic daylight building blocks

Where: Key announcement art.
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..
Don't: Force every story into mascot-over-cubes or use night lighting as the default illustration world..

### Technical mono detail

Where: Eyebrows, captions and system-like animated text.
Do: Mona Sans Mono supports short technical labels; pair with expressive Sans headlines or legible caption copy..
Don't: Use uppercase multiline mono or manually tracked headline/body text..

## Messaging: rules

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.

Why it works: Product demonstrations and scoped evidence make aspirational developer language more credible.

|  |  |
|---|---|
| Mission | Accelerate human progress through developer collaboration |
| Observed hero | Software still starts with you |
| Observed proof | 225M+ developers; 800M public/open source repositories; 90% Fortune 100 usage |
| Formal message architecture / official boilerplate | not published in toolkit; book provides labeled synthesis |

- Use the mission’s collaboration framing as the stable purpose.
- Treat the four pillars in this book as analysis of the homepage, not GitHub’s officially named messaging pillars.
- Keep the 2026-10-31 date and original scope on all observed homepage statistics.
- Use concise feature descriptions and task-based actions; separate product capabilities from marketing claims.
- Preserve exact product naming and avoid implied partner endorsement.
- Don't Invent a permanent tagline or official boilerplate
- Don't Treat the Mercado Libre result as a universal benchmark
- Don't Convert community counts into unsupported paid-customer counts

Real examples, to look at on GitHub's own pages (not for reuse):
- Observed platform and feature messaging: https://github.com/
- Observed enterprise proof and scoped statistics: https://github.com/

Sources: https://brand.github.com/foundations/accessibility, https://brand.github.com/brand-identity/attributes, https://github.com/

## Voice: rules

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.

Why it works: Technical confidence works best when it helps a reader do something and makes room for creative ambition.

|  |  |
|---|---|
| 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 |

- 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.
- 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

Real examples, to look at on GitHub's own pages (not for reuse):
- Public copy instructions for the brand attributes: https://brand.github.com/brand-identity/attributes
- Observed hero: Software still starts with you: https://github.com/
- Observed invitation to join and contribute to the community: https://github.com/

Sources: https://brand.github.com/brand-identity/attributes, https://brand.github.com/brand-identity/voice-and-tone, https://github.com/, https://primer.style/brand/components/Button/

## Logo: rules

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.

Why it works: A stable primary mark makes a broad product and community ecosystem recognizable without flattening product context.

|  |  |
|---|---|
| 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 |

- 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

Real examples, to look at on GitHub's own pages (not for reuse):
- Invertocat clear space and optical circular-crop instruction: https://brand.github.com/foundations/logo
- Current corporate wordmark lockup: https://brand.github.com/foundations/logo
- Default and expanded product lockup hierarchy: https://brand.github.com/foundations/logo
- Product navigation without repeated Invertocat: https://brand.github.com/foundations/logo
- Approved co-brand arrangement patterns: https://brand.github.com/brand-identity/cobranding
- Universe 25 and ReadME initiative examples: https://brand.github.com/foundations/logo
- Misuse: split colors and insufficient contrast: https://brand.github.com/foundations/logo
- Misuse: added shadow/glow: https://brand.github.com/foundations/logo

Sources: https://brand.github.com/foundations/logo, https://brand.github.com/brand-identity/cobranding, https://brand.github.com/brand-identity/copilot

## Color: rules

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.

Why it works: Restraint keeps the interface technical and trustworthy while product-specific colors help identify the subject.

|  |  |
|---|---|
| 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 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

Real examples, to look at on GitHub's own pages (not for reuse):
- Speaker cards: neutral-dominant color balance: https://brand.github.com/foundations/color
- Secondary colors used in expressive key art: https://brand.github.com/foundations/color
- Copilot rendered ratio labels and neutral text panels: https://brand.github.com/foundations/color
- Security rendered ratio labels and blue visual area: https://brand.github.com/foundations/color
- Published text-color hex labels by layout theme: https://brand.github.com/graphic-elements/layouts

Sources: https://brand.github.com/foundations/color, https://brand.github.com/brand-identity/copilot, https://brand.github.com/graphic-elements/layouts, https://brand.github.com/foundations/accessibility, https://primer.style/brand/primitives/color/

## Typography: rules

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.

Why it works: The same family spans expressive headlines and clear information, while mono links the language to terminals and developer practice.

|  |  |
|---|---|
| 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 |

- 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 examples, to look at on GitHub's own pages (not for reuse):
- Mona Sans character set: https://brand.github.com/foundations/typography
- Published H0, H2 and Body Large specimen values: https://brand.github.com/foundations/typography
- Pairing options: equal sizes, eyebrows, captions and contrast: https://brand.github.com/foundations/typography
- Misuse: alternate widths in core material: https://brand.github.com/foundations/typography
- Misuse: uppercase multiline mono: https://brand.github.com/foundations/typography
- Misuse: ligatures: https://brand.github.com/foundations/typography
- Misuse: manual tracking: https://brand.github.com/foundations/typography

Sources: https://brand.github.com/foundations/typography, https://brand.github.com/foundations/accessibility, https://github.com/github/mona-sans

## Graphic elements: rules

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.

Why it works: The visual vocabulary is native to GitHub’s daily use, so even abstract compositions retain developer meaning.

|  |  |
|---|---|
| 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 |

- 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

Real examples, to look at on GitHub's own pages (not for reuse):
- Graph rules: greens, one icon/mascot, balanced negative space: https://brand.github.com/graphic-elements/textures
- Four-square identity in restrained applications: https://brand.github.com/graphic-elements/textures
- Dither as background, surface and supporting visual detail: https://brand.github.com/graphic-elements/textures
- Misuse: graph and dither patterns combined: https://brand.github.com/graphic-elements/textures
- UI frame against a technical ground: https://brand.github.com/graphic-elements/product-ui
- Product story with a focused UI detail: https://brand.github.com/graphic-elements/product-ui

Sources: https://brand.github.com/graphic-elements/textures, https://brand.github.com/graphic-elements/product-ui, https://brand.github.com/guides/getting-started

## Iconography: rules

Octicons are the stable default across product and brand. Larger spot icons bend gitline timelines and commit circles into topic-based symbols.

Why it works: Reusing product symbols builds familiarity; the gitline-derived spot layer adds expression while retaining technical roots.

|  |  |
|---|---|
| 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 |

- 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

Real examples, to look at on GitHub's own pages (not for reuse):
- Octicon default library: https://brand.github.com/graphic-elements/iconography
- Spot icon grammar: open linework and commit-like dots: https://brand.github.com/graphic-elements/iconography
- Octicons supporting metrics: https://brand.github.com/graphic-elements/iconography
- Spot icon gives abstract content a topic: https://brand.github.com/graphic-elements/iconography
- Symbols support the key art and Copilot: https://brand.github.com/graphic-elements/iconography

Sources: https://brand.github.com/graphic-elements/iconography

## Illustration: rules

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.

Why it works: Daily contributions become a world of potential, turning infrastructure into a creative and collaborative story.

|  |  |
|---|---|
| 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 |

- 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

Real examples, to look at on GitHub's own pages (not for reuse):
- The three expression levels: https://brand.github.com/graphic-elements/illustration
- Isometric contribution landscape: https://brand.github.com/graphic-elements/illustration
- Alternative viewpoints and flat storytelling options: https://brand.github.com/graphic-elements/illustration
- Cryptographic, solid and transparent building blocks: https://brand.github.com/graphic-elements/illustration
- Current Mona visual reference: https://brand.github.com/graphic-elements/mascots
- Current Copilot visual reference: https://brand.github.com/graphic-elements/mascots
- Ducky visual reference: https://brand.github.com/graphic-elements/mascots
- Misuse: mascots on serious topics: https://brand.github.com/graphic-elements/mascots

Sources: https://brand.github.com/graphic-elements/illustration, https://brand.github.com/graphic-elements/mascots, https://brand.github.com/brand-identity/copilot

## Photography: rules

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.

Why it works: Real people establish credibility while neutral portrait treatments preserve hierarchy beside colorful art.

|  |  |
|---|---|
| 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 |

- 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

Real examples, to look at on GitHub's own pages (not for reuse):
- Grayscale speaker portraits within an expressive grid: https://brand.github.com/graphic-elements/layouts
- Event photography in its Universe-specific context: https://brand.github.com/brand-in-action/experiential
- Avoid full photographic booth coverage: https://brand.github.com/brand-in-action/experiential

Sources: https://brand.github.com/graphic-elements/layouts, https://primer.style/brand/components/Testimonial/, https://brand.github.com/brand-in-action/experiential

## Motion: rules

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.

Why it works: Movement should explain interaction and preserve comprehension before adding delight.

|  |  |
|---|---|
| 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 |

- 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

Real examples, to look at on GitHub's own pages (not for reuse):
- Published transition taxonomy and example video posters: https://brand.github.com/motion/principles
- Terminal-like mono animation with contributor cursor colors: https://brand.github.com/motion/principles
- Container-transform example: https://brand.github.com/motion/principles
- Confirmation masking example: https://brand.github.com/motion/principles
- Mona Pixel wave example; community delight: https://brand.github.com/motion/principles

Sources: https://brand.github.com/motion/principles, https://brand.github.com/motion/logo, https://brand.github.com/motion/events, https://primer.style/brand/introduction/animation/

## Interface and layout: rules

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.

Why it works: The visible structure communicates dependable infrastructure, and open space gives each story room to register.

|  |  |
|---|---|
| Key art divisions | 1/3, 1/2, 2/3 |
| Border default | 2px (layout-02 and layout-03) |
| Accent border | 4px, once; twice default (layout-03) |
| Margin | Variable; consistent within each content group, may be larger for visuals |
| Text grounds | White / Gray / Black |
| Universal spacing scale / grid column count / radius | not published in saved toolkit |
| Website anatomy | Deferred to next step |

- Choose primary page divisions and internal margins before other design decisions; use them consistently.
- Allocate key art 1/3, 1/2 or 2/3 of the layout to maintain geometric relationships.
- Use one accent border, usually between copy and visual, at twice the normal border weight; example is 4px against 2px.
- Reveal the grid selectively and keep small details, footnotes, logos and lists aligned; allow content to float to edges and leave large central empty areas.
- Use White, Gray or Black text themes and satisfy normal-text AA contrast.
- eBook interiors favor sustained reading: restrained type sizes and minimal distracting illustration; covers may express the topic.
- Primer Hero introduces the page with a heading no longer than two lines and a description of 3–4 lines; description contrast at least 4.5:1.
- Primer River text should stay within 160 characters, preferably one paragraph; default image/text ratio 50:50, or 60:40 for visual emphasis. Keep stacked alignment consistent; no zig-zag gridline rivers.
- Break long River sequences with another content type. Story scroll uses 3–6 rivers, at most twice per page, with shared alignment and visual aspect ratio.
- CTA banner/form typically closes the journey. Use a Hero early; contextualize the form and size its field to expected input.
- Primer Bento is deprecated; choose CTA Banner or River for new work.
- Don't Crowd every region with boxes or borders
- Don't Lay paragraphs directly on busy key art
- Don't Stack many identical rivers without a break
- Don't Place CTA form early without surrounding context
- Don't Treat toolkit examples as homepage measurements

Real examples, to look at on GitHub's own pages (not for reuse):
- Published division ratios, variable margins and single accent divider: https://brand.github.com/graphic-elements/layouts
- Edge alignment, open center and 2px default border: https://brand.github.com/graphic-elements/layouts
- 4px accent versus 2px default; conditional grayscale portraits: https://brand.github.com/graphic-elements/layouts
- Three neutral text themes: https://brand.github.com/graphic-elements/layouts
- Reading-led interiors with consistent grids and footer detail: https://brand.github.com/brand-in-action/eBooks

Sources: https://brand.github.com/graphic-elements/layouts, https://brand.github.com/foundations/accessibility, https://brand.github.com/brand-in-action/eBooks, https://brand.github.com/brand-in-action/web, https://primer.style/brand/components/Hero/, https://primer.style/brand/components/River/, https://primer.style/brand/components/CTAForm/, https://primer.style/brand/components/CTABanner/, https://primer.style/brand/components/Bento/

## Rules: rules

GitHub’s system pairs consistency and accessibility with context-sensitive expression. Technical and serious contexts require restraint; community and major launches allow more visual personality.

Why it works: A few enforceable constraints preserve identity while giving designers room to tell different stories.

|  |  |
|---|---|
| Legal / permissions | https://brand.github.com/foundations/logo |
| Co-brand review | https://brand.github.com/brand-identity/cobranding |
| Mascot review | https://brand.github.com/graphic-elements/mascots |
| Accessible documents | https://brand.github.com/foundations/accessibility |
| Base asset reuse | https://brand.github.com/guides/getting-started |

- 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
- Don't Recreate the brand through generic mascot art or stock icon families
- Don't Use color or animation at the expense of reading and accessibility
- Don't Publish numbers without scope or observation date

Real examples, to look at on GitHub's own pages (not for reuse):
- Misuse: rearranging logo elements: https://brand.github.com/foundations/logo
- Misuse: mascots as identity: https://brand.github.com/graphic-elements/mascots
- Functional charts rather than decorative illustration: https://brand.github.com/graphic-elements/diagrams
- Misuse: abandoning contribution grid structure: https://brand.github.com/graphic-elements/textures

Sources: https://brand.github.com/foundations/logo, https://brand.github.com/brand-identity/cobranding, https://brand.github.com/graphic-elements/mascots, https://brand.github.com/foundations/accessibility, https://brand.github.com/foundations/typography, https://brand.github.com/graphic-elements/textures, https://brand.github.com/graphic-elements/diagrams, https://brand.github.com/graphic-elements/product-ui, https://brand.github.com/guides/getting-started, https://brand.github.com/brand-in-action/experiential

## Campaigns

### Universe evolving identity

Universe sets a new product vision each year and receives an incrementally changing visual identity.

How the system shows: Developer culture, tactile materials and intentional expressive moments; the event examples are explicitly not general core-brand direction.
Why it works: A dedicated event identity creates anticipation while retaining recognition.
Channels: event, stage, environment, swag. Source: https://brand.github.com/brand-in-action/experiential

### GitHub Universe ’26 Recap homepage moment

Observed announcement above the homepage hero on 2026-10-31.

How the system shows: Small event marker above the human-centered headline, with product UI taking the main demonstration role.
Why it works: Links a current community moment to the persistent platform story.
Channels: homepage. Source: https://github.com/

## Applications

| Format | What | Source |
|---|---|---|
| Web | Built on open-source Primer Brand; toolkit web samples are marked coming soon. | https://brand.github.com/brand-in-action/web |
| eBooks | Expressive topic-led covers and restrained reading-led interiors with accessibility requirements. | https://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. | https://brand.github.com/brand-in-action/social |
| Experiential | Developer-grounded, welcoming spaces; booths use at least one premium non-printed material and reusable elements. | https://brand.github.com/brand-in-action/experiential |
| Swag | High-quality fit and material details; stickers and collectibles draw on developer lore. | https://brand.github.com/brand-in-action/swag |
| Presentations | Use updated templates; PowerPoint template is staff-only. | https://brand.github.com/brand-in-action/presentations |
| Diagrams | Precise, instructional and readable; color blocking only for clarity or key product pillars. | https://brand.github.com/graphic-elements/diagrams |

## By format

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. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | 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 | 2 | 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 | 1 | 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 | 4 | 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 | 1 | 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 | 4 | 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 | 0 | 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 | 3 | Quality material and fit; authorized logo/mascot assets and applicable permission review. | Developer lore, collectibles and context-appropriate expressive treatments. |

## Checks before anything ships

- **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?

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is GitHub's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- 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.

Logos and reference images belong to GitHub. Look at them on GitHub's own pages; don't reuse them.