GitHub

---
name: github-com-design-system
source: https://github.com/
extracted: 2026-07-03
theme: dark  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#25292e"
  ink: "#ffffff"
  text-muted: "#818b98"
  surface: "#3d444d"
  hairline: "#59636e"
  accent: "#010409"  # deep-blue
  accent-2: "#eff2f5"  # pale-cyan
  accent-3: "#151b23"  # deep-cyan
---

# GitHub · Change is constant. GitHub keeps you ahead. · GitHub — Design System

Extracted from **https://github.com/** on 2026-07-03.

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

Every value below is mined from the site's live CSS (1 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as dark: measured neutral usage weighs 1108 dark against 662 light. The palette is chromatic: 12 saturated values against 6 neutrals, led by deep-blue (`#010409`). No custom font families were found — the site runs on system font stacks. No box-shadows were found — depth comes from color contrast, not elevation.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 58% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is dark (measured neutral weight 1108:662). Don't flip individual sections to the opposite mode.
- No elevation shadows were found — build depth with tonal contrast between surfaces, not box-shadows.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 662 | **ink** — lightest neutral, highest contrast against canvas |
| `neutral-400` | `#9198a1` | 54 | — |
| `neutral-500` | `#818b98` | 90 | **text-muted** — most-used mid-luminance neutral |
| `neutral-700` | `#59636e` | 338 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-800` | `#3d444d` | 320 | **surface** — neutral closest to canvas luminance |
| `neutral-900` | `#25292e` | 450 | **canvas** — darkest neutral, matches the measured dark-leaning theme |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `deep-blue` | `#010409` | 360 | **accent** — most-used chromatic color |
| `pale-cyan` | `#eff2f5` | 344 | **accent-2** — supporting chromatic color |
| `deep-cyan` | `#151b23` | 270 | **accent-3** — supporting chromatic color |
| `cyan` | `#d1d9e0` | 250 | — |
| `pale-orange` | `#eeeae2` | 200 | — |
| `blue` | `#0349b4` | 194 | — |
| `deep-red` | `#271817` | 192 | — |
| `cyan-2` | `#0969da` | 190 | — |
| `cyan-3` | `#5cacff` | 186 | — |
| `blue-2` | `#023b95` | 162 | — |
| `pale-cyan-2` | `#d1f0ff` | 152 | — |
| `blue-3` | `#b7bdc8` | 144 | — |

### Dark mode

The source defines 60 dark-mode variants (via prefers-color-scheme). Both halves of the system, first 30:

| Token | Light | Dark |
| --- | --- | --- |
| `--bgColor-success-emphasis` | — | `#1f883d` |
| `--button-outline-bgColor-active` | — | `#0757ba` |
| `--button-primary-bgColor-active` | — | `#197935` |
| `--button-primary-bgColor-disabled` | — | `#95d8a6` |
| `--button-primary-bgColor-hover` | — | `#1c8139` |
| `--buttonCounter-danger-fgColor-rest` | — | `#c21c2c` |
| `--color-ansi-cyan` | — | `#1b7c83` |
| `--color-ansi-cyan-bright` | — | `#3192aa` |
| `--control-checked-bgColor-active` | — | `#0757ba` |
| `--control-checked-bgColor-hover` | — | `#0860ca` |
| `--fgColor-danger` | — | `#d1242f` |
| `--reactionButton-selected-bgColor-hover` | — | `#caecff` |
| `--avatarStack-fade-bgColor-default` | — | `#c8d1da` |
| `--avatarStack-fade-bgColor-muted` | — | `#dae0e7` |
| `--bgColor-accent-emphasis` | — | `#0969da` |
| `--bgColor-accent-muted` | — | `#ddf4ff` |
| `--bgColor-attention-emphasis` | — | `#9a6700` |
| `--bgColor-attention-muted` | — | `#fff8c5` |
| `--bgColor-danger-emphasis` | — | `#cf222e` |
| `--bgColor-danger-muted` | — | `#ffebe9` |
| `--bgColor-disabled` | — | `#eff2f5` |
| `--bgColor-done-emphasis` | — | `#8250df` |
| `--bgColor-done-muted` | — | `#fbefff` |
| `--bgColor-emphasis` | — | `#25292e` |
| `--bgColor-inverse` | — | `#25292e` |
| `--bgColor-muted` | — | `#f6f8fa` |
| `--bgColor-neutral-emphasis` | — | `#59636e` |
| `--bgColor-neutral-muted` | — | `#818b981f` |
| `--bgColor-open-emphasis` | — | `var(--bgColor-success-emphasis)` |
| `--bgColor-severe-emphasis` | — | `#bc4c00` |

`variables.css` ships these as a `prefers-color-scheme: dark` override block.

## Typography

No explicit custom font families found — the site relies on system font stacks.

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #010409 */
  color: var(--color-ink); /* #ffffff — contrast 20.5:1 */
}

.card {
  background: var(--color-surface); /* #3d444d */
  border: 1px solid var(--color-hairline); /* #59636e */
  /* no shadow — this system builds depth with tonal contrast */
}

.input {
  background: var(--color-canvas); /* #25292e */
  color: var(--color-ink); /* #ffffff — contrast 14.6:1 */
  border: 1px solid var(--color-hairline); /* #59636e */
  /* placeholder color: var(--color-text-muted) #818b98 */
}

.nav {
  background: var(--color-canvas); /* #25292e */
  border-bottom: 1px solid var(--color-hairline); /* #59636e */
  color: var(--color-ink); /* #ffffff */
  /* inactive links: var(--color-text-muted) #818b98 */
  /* active link: var(--color-accent) #010409 — contrast vs canvas 1.4:1 */
}

.modal {
  background: var(--color-surface); /* #3d444d */
  border: 1px solid var(--color-hairline); /* no shadows mined — hairline instead */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #ffffff */
}

.input-error {
  border-color: #271817; /* mined token: deep-red */
  /* error text: #271817 on canvas — contrast 1.2:1, below AA; darken for message text */
}
```

## Observations

- 6 of 18 extracted colors are neutrals.

## Native CSS custom properties

First 1 of 1:

```css
:root {
  --tab-size-preference: 4;
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-deep-blue`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.