GitHub
Where the world builds software
5 colors
26 components
Mona Sans, Monospace (SF Mono, Consolas)
Mar 30, 2026
Website Preview
Colors
Primary
#24292F
Primary text
#FFFFFF
Page background
#2DA44E
Merge, positive actions
#0969DA
Links, focus rings
#6E7781
Secondary text
Typography
Mona Sans
Role
SizeWeightHeight
Display
40px700—
Heading
24px600—
Body
14px400—
Monospace (SF Mono, Consolas)
Role
SizeWeightHeight
Code
13px400—
DESIGN.md — GitHub
Overview
GitHub's design system (Primer) is built for information-dense developer interfaces. The palette is anchored by a near-black ink with a signature green for positive actions and blue for links. Mona Sans replaced system fonts to give GitHub a distinctive modern voice while maintaining readability across millions of repositories.
Colors
Primary Palette
| Token | Hex | Usage |
|---|---|---|
color-fg-default | #24292F | Primary text |
color-canvas-default | #FFFFFF | Page background |
color-success | #2DA44E | Merge, positive actions |
color-accent | #0969DA | Links, focus rings |
color-fg-muted | #6E7781 | Secondary text |
Typography
| Role | Family | Size | Weight |
|---|---|---|---|
| Display | Mona Sans | 40px | 700 |
| Heading | Mona Sans | 24px | 600 |
| Body | Mona Sans | 14px | 400 |
| Code | Monospace (SF Mono, Consolas) | 13px | 400 |
Components
Repository Card
- Repo name as link in blue, description below
- Language dot + name, star count, fork count
- 1px border, 6px radius
Pull Request Badge
- Open: green icon + text, Merged: purple, Closed: red
- Condensed metadata row: author, reviewers, labels
Action Bar
- Horizontal tab bar: Code, Issues, Pull Requests, Actions...
- Active tab: bottom border 2px in
#FD8C73 - Counter badges next to tab labels
Do's and Don'ts
Do
- Use green exclusively for success/merge states
- Keep information density high — GitHub users expect it
- Use Primer components for consistency across features
Don't
- Don't use rounded corners beyond 6px for containers
- Don't hide metadata that developers rely on (commit SHA, timestamps)
- Don't use color alone to convey status — always pair with icons