---
version: alpha
name: "github.com"
description: "Design system extracted from https://github.com/ on 2026-10-28"
colors:
  background: "#0d1117"
  surface: "#000000"
  surface-2: "#1c1f25"
  surface-3: "#3d4145"
  foreground: "#ffffff"
  muted-foreground: "#a4aea6"
  primary: "#08872b"
  on-primary: "#ffffff"
  secondary: "#1f6feb"
  border: "#25292e"
typography:
  headline-display:
    fontFamily: "Mona Sans"
    fontSize: "64px"
    fontWeight: 425
    lineHeight: "69.12px"
    letterSpacing: "-2.24px"
  headline-lg:
    fontFamily: "Mona Sans"
    fontSize: "40px"
    fontWeight: 460
    lineHeight: "48px"
  headline-md:
    fontFamily: "Mona Sans"
    fontSize: "22px"
    fontWeight: 480
    lineHeight: "30.8px"
  body-md:
    fontFamily: "Mona Sans"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "27px"
    letterSpacing: "0.18px"
  label-md:
    fontFamily: "Mona Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "24px"
    letterSpacing: "0.24px"
  button:
    fontFamily: "Mona Sans"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: "24px"
    letterSpacing: "0.24px"
  code:
    fontFamily: "Mona Sans Mono"
    fontSize: "11px"
    fontWeight: 400
    lineHeight: "10px"
    letterSpacing: "0.21px"
rounded:
  none: "0px"
  md: "6px"
  xl: "16px"
  2xl: "60px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "40px"
  9: "48px"
  10: "64px"
  11: "96px"
components:
  button-ghost:
    backgroundColor: "#eaedec"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "0px"
    height: "42px"
    padding: "5px 5px"
  button-secondary:
    backgroundColor: "#0d1117"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "6px"
    height: "32px"
    padding: "1px 12px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "6px"
    height: "48px"
    padding: "6px 20px"
  input:
    backgroundColor: "transparent"
    rounded: "8px"
    height: "41px"
  card:
    backgroundColor: "transparent"
    rounded: "16px"
    padding: "0px"
---

# github.com

## Overview

GitHub · Change is constant. GitHub keeps you ahead. · GitHub · GitHub: Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

Gently rounded controls, one soft shadow for depth, large display type at 64px / 425, a single green accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 1662 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-logo.png`: primary logo lockup
- `screenshots/brand-symbol.png`: possible standalone brand symbol
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-symbol-source-hd.png`: possible standalone brand symbol / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/desktop-1440-light.png`: Desktop 1440, light mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/phone-390-menu.png`: Phone 390, navigation menu open
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-symbol-upscaled.png`: possible standalone brand symbol / upscaled.png
- `screenshots/media-symbol-transparent.png`: possible standalone brand symbol / transparent.png
- `screenshots/media-symbol-optimized.webp`: possible standalone brand symbol / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/c-button-1--rest.png`: Button 1 ("Automate your path to pr"), rest
- `screenshots/c-button-1--focus.png`: Button 1 ("Automate your path to pr"), focus
- `screenshots/c-button-1--disabled.png`: Button 1 ("Automate your path to pr"), disabled
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--hover.png`: Icon button 1, hover
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled
- `screenshots/c-link-1--rest.png`: Text link 1 ("Explore GitHub Copilot"), rest
- `screenshots/c-link-1--hover.png`: Text link 1 ("Explore GitHub Copilot"), hover
- `screenshots/c-link-1--focus.png`: Text link 1 ("Explore GitHub Copilot"), focus
- `screenshots/c-link-1--active.png`: Text link 1 ("Explore GitHub Copilot"), active
- `screenshots/c-close-button-1--rest.png`: Close / dismiss button 1, rest
- `screenshots/c-close-button-1--focus.png`: Close / dismiss button 1, focus
- `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Pricing"), rest
- `screenshots/c-nav-link-1--hover.png`: Navigation link 1 ("Pricing"), hover
- `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Pricing"), focus
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Platform"), rest
- `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Platform"), hover
- `screenshots/c-menu-button-1--selected.png`: Menu / dropdown trigger 1 ("Platform"), clicked
- `screenshots/c-tabs-1--rest.png`: Tabs 1 ("CodePlanCollaborateAutom"), rest
- `screenshots/c-tabs-1--selected.png`: Tabs 1 ("CodePlanCollaborateAutom"), another tab selected
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Features"), rest
- `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Features"), hover
- `screenshots/c-social-links-1--rest.png`: Social icon links 1, rest
- `screenshots/c-language-switch-1--rest.png`: Language / region switch 1 ("English"), rest
- `screenshots/c-language-switch-1--hover.png`: Language / region switch 1 ("English"), hover
- `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by language-switch "English"
- `screenshots/c-language-switch-1--open.png`: Language / region switch 1 ("English"), open (trigger)
- `screenshots/c-card-1--rest.png`: Card 1 ("A Copilot chat window wi"), rest
- `screenshots/c-accordion-1--rest.png`: Accordion / disclosure 1 ("Automate your path to pr"), rest
- `screenshots/c-accordion-1--open.png`: Accordion / disclosure 1 ("Automate your path to pr"), closed
- `screenshots/c-divider-1--rest.png`: Divider 1, rest
- `screenshots/c-kbd-1--rest.png`: Keyboard key 1 ("/"), rest
- `screenshots/c-blockquote-1--rest.png`: Blockquote 1 ("It helps us onboard new "), rest
- `screenshots/c-video-1--rest.png`: Video / media embed 1, rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#0d1117` | Page background |
| surface | `#000000` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#1c1f25` | Secondary surface |
| surface-3 | `#3d4145` | Secondary surface |
| foreground | `#ffffff` | Primary text |
| muted-foreground | `#a4aea6` | Secondary text, captions |
| primary | `#08872b` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#1f6feb` | Secondary accent (blue) |
| border | `#25292e` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#000000`, `#0d1117`, `#1c1f25`, `#3d4145`, `#31353a`, `#ffffff`, `#eaedec`, `#08872b`.

Gradients in use: `linear-gradient(rgb(0, 2, 64), rgba(0, 0, 0, 0))`; `radial-gradient(circle at 0px 100%, rgb(230, 183, 254) 10%, rgb(80, 73, 194) 20%, rgba(87, 78, 255, 0) 60%)`; `linear-gradient(rgb(0, 2, 64), rgb(0, 0, 0) 117%)`.

The accent `#08872b` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Mona Sans** for h1, h2, h3, body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **Mona Sans VF** for button: unknown source; use **Inter** as the stand-in if it does not load.
- **Mona Sans Mono** for code: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Mona Sans | 64px | 425 | 69.12px | -2.24px |
| headline-lg | Mona Sans | 40px | 460 | 48px | normal |
| headline-md | Mona Sans | 22px | 480 | 30.8px | normal |
| body-md | Mona Sans | 18px | 400 | 27px | 0.18px |
| label-md | Mona Sans | 16px | 400 | 24px | 0.24px |
| button | Mona Sans | 16px | 500 | 24px | 0.24px |
| code | Mona Sans Mono | 11px | 400 | 10px | 0.21px |

Type scale in use: 11px, 12px, 14px, 16px, 18px, 22px, 24px, 40px, 64px. Base body size 18px.

The hero heading (h1) renders at 64px / 425, center aligned, up to 924px wide, tracking -2.24px. Sample: "The future of building happens together".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96 (px).
- Flex and grid gaps: 4, 8, 12, 16, 24, 32, 44, 48 px.
- Content max width: 1280px, centred.
- Header: 72px tall, fixed, background `rgba(0, 0, 0, 0)`; 12 nav links at 16px / 400 (GitHub CopilotWrite better code with AI · GitHub Copilot appDirect agents from issue to merge · MCP RegistryIntegrate external tools · ActionsAutomate any workflow · CodespacesInstant dev environments · IssuesPlan and track work · Code ReviewManage code changes · Code QualityEnforce quality at merge).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgb(25, 31, 27) 0px -1px 0px 0px inset`

## Shapes

- Buttons: 6px
- Inputs: 8px
- Cards and panels: 16px
- Images and media: 0px
- Radius scale: none 0px, md 6px, xl 16px, 2xl 60px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#eaedec`, so place it on that colour) with gradient `linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%)`, text `#000000`, border none, radius 0px, height 42px, padding 5px 5px, 14px / 600.

### Button, secondary

Background transparent (it sits on `#0d1117`, so place it on that colour), text `#ffffff`, border 1px solid #262c28, radius 6px, height 32px, padding 1px 12px, 16px / 400. Sample label: "Search/".

### Button, primary

Background `#08872b`, text `#ffffff`, border 1px solid transparent, radius 6px, height 48px, padding 6px 20px, 14px / 400. Sample label: "Sign up for GitHub".

### Input

Height 41px, background `transparent`, border 0px solid #000000, radius 8px, 16px text, padding 18px 12px.

### Card

Background `transparent`, border 1px solid #484f5880, radius 16px, padding 0px, no shadow. Typical size about 378×332px.

### Link

Colour `#ffffff`, no underline at rest, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (30 of 87 in the checklist, 46 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 16 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | ghost-icon-right, ghost-icon-right lg, primary lg, ink lg, ghost sm, outline, ink, primary | focus, disabled | "Automate your path to producti" |
| Icon button | ghost, ink | hover, focus, disabled |  |
| Text link | plain, underlined, plain, underlined | hover, focus, active | "Explore GitHub Copilot" |
| Close / dismiss button | filled | focus |  |
| Text input | outlined | rest only |  |
| Field label | other | rest only | "Enter your email" |
| Header / navbar | default | rest only | "Navigation MenuSign inPlatform" |
| Navigation link | plain | hover, focus | "Pricing" |
| Menu / dropdown trigger | ghost, outline | hover, open | "Platform" |
| Tabs | plain, plain | rest only | "CodePlanCollaborateAutomateSec" |
| Footer | default | rest only | "Site-wide LinksThe developer n" |
| Footer link | plain | hover | "Features" |
| Skip link | default | rest only | "Skip to content" |
| Social icon links | default | rest only |  |
| Language / region switch | default | hover, open | "English" |
| Alert / callout | subtle-filled | rest only | "GitHub Universe 2026Day 1: Ope" |
| Card | outlined-with-media | rest only | "A Copilot chat window with the" |
| Accordion / disclosure | aria, aria | rest only | "Automate your path to producti" |
| Divider | vertical, horizontal | rest only |  |
| Keyboard key | default | rest only | "/" |
| Blockquote | default | rest only | "It helps us onboard new softwa" |
| Image / figure | aspect-0.82, aspect-1.14-rounded, aspect-0.9 | rest only |  |
| Video / media embed | default | rest only |  |
| Logo strip | default | rest only | "GitHub customersAmerican Airli" |
| Newsletter / signup form | default | rest only | "Enter your emailSign up for Gi" |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Pagination, Stepper / progress steps, Sidebar navigation, Back to top, Theme toggle, Tooltip, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, Styled list, List row / menu row, Table, Table row, Avatar, Avatar stack, Code block / inline code, Carousel / slider, Icon, Eyebrow / kicker, FAQ block, Call-to-action band, Search results / listing row, Sticky bar.

## Dark Mode

Both themes exist; the default render is dark and the light theme was reached via data-color-mode=light. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#ffffff` | `#0d1117` |
| surface | `#eaedec` | `#000000` |
| foreground | `#ffffff` | `#ffffff` |
| primary | `#08872b` | `#08872b` |
| on-primary | `#ffffff` | `#ffffff` |
| secondary | `#0969da` | `#1f6feb` |
| border | `#ffffff` | `#25292e` |

Light-theme shadows: `rgb(25, 31, 27) 0px -1px 0px 0px inset`

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1280px | 297px | 14px | 64px, 2 lines, center | 72px, 3 links, 3 CTA | text only | 2→2 col; 2→1 col; 2→2 col | content-width |
| laptop 1024px | 928px | 50px | 14px | 64px, 2 lines, center | 72px, 3 links, 3 CTA | text only | 2→2 col; 2→1 col; 2→2 col | content-width |
| tablet 768px | 574px | 48px | 14px | 56px, 2 lines, center | 65px, hamburger (Toggle navigation), 1 CTA | text only | 2→2 col; 2→1 col; 2→2 col | content-width |
| phone 390px | 342px | 48px | 14px | 40px, 4 lines, center | 65px, hamburger (Toggle navigation), 1 CTA | text only | 4→2 col | 13 full-width |

- H1 goes 64px → 40px (63%), 2 → 4 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 72px → 65px.
- Body text is 14px at the sampled desktop and phone widths.
- Phone side gutter 48px.
- 13 buttons stretch full-width on phones.
- Section top padding 114px → 205px.

## Interaction & Motion

100 elements carry transitions; typical 0.2s with cubic-bezier(0.165, 0.84, 0.44, 1), mostly on opacity, transform, background-color. 2 running keyframe animations (flip-in__8hw43S 0.55s 1; Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4 60s infinite).

- Hover on button-primary ("Search/"): background transparent → #ffffff29, border #262c28 → #ffffff1f; cursor pointer; transition background-color, border-color | 0.2s, 0.2s | ease, ease | delay 0s, 0s.
- Hover on button-secondary ("Sign in"): background transparent → #ffffff29, border #262c28 → #ffffff1f; cursor pointer; transition background-color, border-color | 0.2s, 0.2s | ease, ease | delay 0s, 0s.
- Hover on nav-link ("Pricing"): text #ffffff → #a4aea6, border #ffffff → #a4aea6; cursor pointer.
- Hover on input: no visible change; cursor text; transition color, background-color, box-shadow | 0.08s | cubic-bezier(0.33, 1, 0.68, 1).
- Focus on button-primary: outline 2px solid rgb(48, 148, 255).
- Focus on input: no visible focus style measured (may rely on :focus-visible with keyboard only).
- No tooltip could be triggered from the first viewport, but the stylesheet defines tooltip rules (.tooltipped): position: relative.
- 4 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- 14 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).
- Portal roots present: PortalRoot__W2cBoj.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#08872b` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 18px in Mona Sans.
- Do match corner radii per element class (buttons 6px, cards 16px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.