# GitHub design system: colors, fonts and tokens

> GitHub's website (github.com) uses a dark interface with #f0f6fc as its primary color and Mona Sans as the main typeface, with Mona Sans VF alongside it. designlang measured 10 font sizes from 12px to 64px, 11 spacing values, 8 corner radii.

Source: https://github.com, captured 12 June 2026. Page: https://designlang.app/design-system/github

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#f0f6fc` | 650 |
| Secondary | `#08872b` | 2 |
| Accent | `#1f883d` | 2 |

Neutrals: `#ffffff`, `#000000`, `#9198a1`, `#58635b`, `#59636e`, `#a4aea6`, `#d1d9e0`, `#7c8980`, `#404651`, `#484f58`

Backgrounds: `#0d1117`, `#ffffff`, `#e4ebe6`, `#000000`, `#151a22`, `#151b23`

## Fonts

- Mona Sans (sans), 1254 elements
- Mona Sans VF (sans), 476 elements
- Mona Sans Mono (mono), 17 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 64px | 425 | 69.12px | -2.24px | h1 |
| 48px | 800 | 48px | normal | div, span, h2 |
| 40px | 460 | 48px | normal | h2, div, p, span |
| 32px | 600 | 48px | normal | h1 |
| 24px | 600 | 36px | normal | h2 |
| 22px | 400 | 30.8px | 0.24px | p, span, h3 |
| 18px | 400 | 27px | 0.18px | p, span |
| 16px | 400 | normal | normal | html, head, style, meta |
| 14px | 400 | 21px | normal | body, div, a, span |
| 12px | 400 | 18px | 0.5px | span, sup, li, h3 |

## Spacing

1px, 40px, 64px, 80px, 96px, 102px, 112px, 274px, 308px, 384px, 432px

## Radii

3px, 6px, 12px, 16px, 24px, 48px, 60px, pill

## Motion

Feel: mixed. Durations: 75ms, 100ms, 200ms, 300ms, 480ms, 800ms, 33333000ms.

## Audit

Overall 82/100 (grade B).

- Color Discipline: 80/100
- Typography Consistency: 65/100
- Spacing System: 100/100
- Shadow Consistency: 90/100
- Border Radius Consistency: 80/100
- Accessibility: 100/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #f0f6fc;
  --color-secondary: #08872b;
  --color-accent: #1f883d;
  --color-background: #0d1117;
  --color-text: #f0f6fc;
  --color-neutral-1: #ffffff;
  --color-neutral-2: #000000;
  --color-neutral-3: #9198a1;
  --color-neutral-4: #58635b;
  --font-primary: "Mona Sans", sans-serif;
  --font-secondary: "Mona Sans VF", sans-serif;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/github-com/github-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/github-com/github-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/github-com/github-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/github-com/github-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/github-com/github-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/github-com/github-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/github-com/github-com-DESIGN.md)
- [Brand book PDF](https://designlang.app/gallery/github-com/github-com.brand.pdf)

Regenerate: `npx designlang github.com`