GitHub Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

19tokens

9type steps

1radius steps

5pxspacing base

GitHub, in one page

GitHub's iOS app is the Primer design system rendered for mobile — a developer's tool that is dense, information-first, and engineered to make code, diffs, and project state legible at a glance. The default experience is dark mode (Primer "dark default"): a deep blue-tinted near-black canvas (#0D1117) with surfaces stepping up in measured increments — #161B22 (subtle/raised), #21262D (buttons, inset rows) — each separated by a precise #30363D border. Light mode (#FFFFFF canvas, #F6F8FA subtle) is a first-class peer. The atmosphere is utilitarian and trustworthy: no flourish, no gratuitous motion, every pixel devoted to repository content.

The signature screens — the ones that must be reproduced faithfully — are the repository home and the code browser. The repo home leads with owner / name (both segments in accent blue #2F81F7, the name bold), a one-line description, language dot + star + fork stats, a horizontally-scrolling tab strip (Code · Issues · Pull requests · Actions) with an orange (#F78166) active underline, a branch pill, a latest-commit strip, the file tree, and then the README rendered inline in a bordered card. The code browser is a monospace file viewer with a sticky path breadcrumb. This "repo header → file tree → inline README" composition is GitHub's home and the heart of the product.

Color in GitHub is semantic and disciplined. There is one link/accent blue (#2F81F7), and one famous green — #238636 — that is *strictly reserved* for the "Code" download button and the "Merge pull request" button (it literally signals "go / merge"). State is color-coded by meaning, not decoration: an open issue/PR is green (#3FB950), a merged PR is purple (#A371F7), a closed issue/PR is red (#F85149), a draft is grey. The most recognizable GitHub visual of all is the contributions heatmap — a grid of squares ramping #161B22 → #0E4429 → #006D32 → #26A641 → #39D353 ("Less → More"). These colors are not interchangeable; each carries a fixed meaning a developer reads instantly.

Typography is Mona Sans (GitHub's own variable grotesque, OFL) for UI, with a monospace (SF Mono / GitHub's "Monaspace" / JetBrains Mono as fallbacks) for all code, SHAs, file names in trees, and diffs. The monospace is load-bearing: a commit SHA, a branch name, a file path, and a code blob are always monospace because alignment and character distinction matter. Body UI text is 14pt regular; the type system is conventional and reading-optimized — the personality is in the semantic color and the dense, structured layouts, not the letterforms.

Key Characteristics:

Primer dark default: canvas #0D1117, surfaces #161B22 / #21262D, borders #30363D; light mode a first-class peer
One accent blue (#2F81F7) for links/active; one reserved green (#238636) for Code / Merge buttons only
Repo home: owner / name + description + language/stars/forks + tab strip + branch pill + file tree + inline README
Code browser: monospace file viewer with sticky path breadcrumb and a latest-commit strip
Semantic state colors: open = green #3FB950, merged = purple #A371F7, closed = red #F85149, draft = grey
Contributions heatmap: 5-step ramp #161B22 → #0E4429 → #006D32 → #26A641 → #39D353
Issue/PR labels as bordered pills tinted by the label's own color (bug red, enhancement purple, etc.)
Mona Sans for UI; monospace for ALL code, SHAs, file names, branch names, diffs
Diff rendering: additions on a green wash, deletions on a red wash, line numbers in a muted gutter
Octocat mark + the "Code" <> button as fixed brand anchors
Bottom tab bar (Home / Notifications / Explore / Profile) with an orange-coral active underline on segmented strips

Do's and don'ts

Do

Use Primer dark default: canvas #0D1117, surfaces #161B22 / #21262D, borders #30363D
Reserve green #238636 for the "Code" download and "Merge pull request" buttons ONLY
Use accent blue #2F81F7 for links, owner/name, and active/selected states
Color state semantically: open = green #3FB950, merged = purple #A371F7, closed = red #F85149, draft = grey
Render the contributions heatmap with the exact 5-step ramp #161B22 → #0E4429 → #006D32 → #26A641 → #39D353
Use monospace for ALL code, SHAs, file/branch names, and diffs — alignment is functional
Define regions with 1pt #30363D borders + luminance steps, not drop-shadows
Render the README inline in a bordered card on the repo home
Give the active tab an orange-coral #F78166 2pt underline
Tint issue labels by the label's own color (text + 40% border + 10% fill)
Render diffs with green/red line washes and a muted line-number gutter

Don't

Don't use the green #238636 for generic CTAs — it specifically means "download code / merge"
Don't swap state colors — merged is ALWAYS purple, closed is ALWAYS red; developers read these instantly
Don't render code, SHAs, or file paths in the sans face — monospace is the contract
Don't use drop-shadows to separate cards — use borders + surface steps
Don't wrap long code lines — code scrolls horizontally
Don't use a pure-black canvas — Primer dark is the blue-tinted #0D1117
Don't tint the active bottom tab with a pill — active is #E6EDF3 glyph+label
Don't recolor the contributions ramp — it's GitHub's single most recognizable visual
Don't soften the dense layout with large whitespace — this is a developer tool, density is the point
Don't use accent blue for body text — blue is links/active only
Don't animate aggressively — motion is quiet, functional, 150–300ms ease-out

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the GitHub design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- Accent FG: #2f81f7
- Accent Emphasis: #1f6feb
- Button Primary: #238636
- Button Primary Hover: #2ea043
- Canvas Default: #0d1117
- Canvas Subtle: #161b22
- Canvas Inset / Surface: #21262d
- Surface Pressed: #30363d
- Border Default: #30363d
- Border Muted: #21262d

Type:
- families: Mona Sans, SF Mono, Monospace, Monaspace
- scale: 10, 11, 12, 13, 14, 16, 20, 24, 32
- weights: 400, 500, 600, 700, 800

Shape:
- radius: 6

Spacing: 5, 9, 10, 14

Rules:
- Use Primer dark default: canvas `#0D1117`, surfaces `#161B22` / `#21262D`, borders `#30363D`
- Reserve green `#238636` for the "Code" download and "Merge pull request" buttons ONLY
- Use accent blue `#2F81F7` for links, `owner/name`, and active/selected states
- Color state semantically: open = green `#3FB950`, merged = purple `#A371F7`, closed = red `#F85149`, draft = grey
- Render the contributions heatmap with the exact 5-step ramp `#161B22 → #0E4429 → #006D32 → #26A641 → #39D353`
- Use monospace for ALL code, SHAs, file/branch names, and diffs — alignment is functional

Avoid:
- Don't use the green `#238636` for generic CTAs — it specifically means "download code / merge"
- Don't swap state colors — merged is ALWAYS purple, closed is ALWAYS red; developers read these instantly
- Don't render code, SHAs, or file paths in the sans face — monospace is the contract
- Don't use drop-shadows to separate cards — use borders + surface steps
- Don't wrap long code lines — code scrolls horizontally
- Don't use a pure-black canvas — Primer dark is the blue-tinted `#0D1117`

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Primary (Interactive)

Accent FG (#2F81F7 dark / #0969DA light): Hyperlinks, owner/name, active text, selected states, focus rings.
Accent Emphasis (#1F6FEB dark / #0969DA light): Pressed link, primary-info button fill.
Button Primary (#238636 dark / #1F883D light): RESERVED — the "Code" download button and "Merge pull request" button only.
Button Primary Hover (#2EA043 dark / #1A7F37 light): Pressed/hover of the green button.

Canvas & Surfaces (Dark — default)

Canvas Default (#0D1117): Primary canvas — blue-tinted near-black.
Canvas Subtle (#161B22): Raised surfaces, README/file-list card headers, contributions level-0.
Canvas Inset / Surface (#21262D): Default button background, code-block background, inset rows, count pills.
Surface Pressed (#30363D): Pressed rows, hovered list items.
Border Default (#30363D): Primary 1pt borders (cards, file list, buttons).
Border Muted (#21262D): Hairline row dividers inside lists.

Canvas & Surfaces (Light)

Canvas Default Light (#FFFFFF): Primary canvas.
Canvas Subtle Light (#F6F8FA): Raised surfaces, code blocks, card headers.
Border Default Light (#D0D7DE): Primary borders.
Border Muted Light (#D8DEE4): Hairline dividers.

Text (Foreground)

FG Default (#E6EDF3 dark / #1F2328 light): Primary text, file names, headings.
FG Muted (#7D8590 dark / #656D76 light): Descriptions, metadata, secondary text.
FG Subtle (#6E7681 dark / #6E7781 light): Timestamps, very low-emphasis, placeholders.
FG on Emphasis (#FFFFFF): Text on green/blue/red emphasis fills.

Semantic State

Role	Dark	Light	Meaning
Open (success)	`#3FB950`	`#1A7F37`	Open issue/PR, passing check, success label
Merged (done)	`#A371F7`	`#8250DF`	Merged PR (purple is "done")
Closed (danger)	`#F85149`	`#CF222E`	Closed issue/PR, failing check, delete
Draft / Neutral	`#6E7681`	`#6E7781`	Draft PR, neutral state
Attention	`#D29922`	`#9A6700`	Pending check, warning, "needs attention"
Sponsor (pink)	`#DB61A2`	`#BF3989`	Sponsor heart, GitHub Sponsors

Contributions Heatmap (the iconic ramp)

Level	Dark	Light
0 (none)	`#161B22`	`#EBEDF0`
1	`#0E4429`	`#9BE9A8`
2	`#006D32`	`#40C463`
3	`#26A641`	`#30A14E`
4 (most)	`#39D353`	`#216E39`

Diff Colors

Addition line bg (rgba(63,185,80,0.15) dark) · marker #3FB950
Deletion line bg (rgba(248,81,73,0.15) dark) · marker #F85149
Diff gutter (#6E7681 line numbers on #161B22)

Type scaleRead the full spec

Font Family

UI: Mona Sans (by GitHub, SIL OFL) — a variable grotesque. Fallback -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif.
Monospace: Monaspace / SF Mono on iOS; 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace as the open fallback. Used for all code, SHAs, file/branch names, diffs, inline code.
Heading variant: Mona Sans (GitHub uses one family for display + body; weight + size establish hierarchy).

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Mona Sans	32pt	800	1.15	-0.4pt	Marketing/empty-state hero
Repo Title	Mona Sans	24pt	700	1.2	-0.3pt	`owner / name` heading
Section	Mona Sans	20pt	600	1.3	-0.2pt	"Pull requests", profile sections
Subtitle	Mona Sans	16pt	600	1.4	0pt	"Latest commit", card titles
Body	Mona Sans	14pt	400	1.5	0pt	Descriptions, issue/PR body
Body Strong	Mona Sans	14pt	600	1.5	0pt	File names, emphasized inline
Code / Blob	Monospace	13pt	400	1.45	0pt	Code viewer, diffs, code blocks
Code Inline	Monospace	13pt	400	1.4	0pt	`inline code` on `#21262D`
SHA / Branch	Monospace	12pt	600	1.0	0pt	Commit SHA, branch chips
Metadata	Mona Sans	12pt	400	1.4	0pt	"opened 3 days ago by …"
Label	Mona Sans	12pt	500	1.0	0pt	Issue labels, state pills
Count Pill	Mona Sans	11pt	600	1.0	0pt	Tab counts ("2.3k")
Tab Label	Mona Sans	10pt	500	1.0	0.1pt	Bottom tab labels
Caption	Mona Sans	11pt	400	1.3	0pt	Heatmap legend, fine print

Principles

Monospace is the contract: code, SHAs, file names in trees, branch names, and diffs are ALWAYS monospace — alignment and glyph distinction (0 vs O, l vs 1) are functional, not stylistic.
Weight + size for hierarchy: one family (Mona Sans); 800 display, 700 repo title, 600 sections/subtitles/strong, 400 body. No thin.
Reading-optimized, not expressive: the type system is conventional; GitHub's identity is the semantic color and dense structured layouts.
Numbers and counts are tabular: star/fork counts, tab counts, line numbers use tabular figures so columns align.
Dynamic Type: titles, body, code scale; tab labels, count pills, SHAs stay fixed (table/tree-layout-sensitive).

Components and layoutRead the full spec

Buttons

Primary Button (Code / Merge pull request — RESERVED green)

Shape: rounded rectangle, 6pt corner radius
Background: #238636 (dark) / #1F883D (light) — used ONLY for "Code" download and "Merge pull request"
Text/icon: #FFFFFF
Border: 1pt rgba(240,246,252,0.1) (subtle top highlight)
Padding: 10pt vertical, 16pt horizontal
Font: Mona Sans 14pt weight 600
Pressed: background #2EA043

Default Button (Watch / Fork / Star / secondary actions)

Background: #21262D (dark) / #F6F8FA (light)
Text: #E6EDF3 (dark) / #24292F (light)
Border: 1pt #30363D (dark) / #D0D7DE (light)
Corner radius: 6pt
Padding: 10pt vertical, 16pt horizontal
Font: Mona Sans 14pt weight 600
Pressed: background #30363D

Danger Button (Close issue / Delete)

Background: #21262D, text #F85149, border 1pt #30363D
On confirm/destructive primary: background #DA3633, text #FFFFFF
Corner radius: 6pt, same padding/font as default

Link / Text Button (View all branches / counterfactual nav)

Font: Mona Sans 14pt weight 500
Color: #2F81F7 (accent)
No background, no border
Pressed: underline

Counter Button (Star with count)

Two-segment: a default button + an attached count pill (#161B22 bg, #7D8590 text, left border)

Repository Components (the core)

Repo Header

Octocat-less; leads with a repo glyph (17pt #7D8590) + owner (#2F81F7) + / (#7D8590) + name (#2F81F7 bold), Mona Sans 15–24pt
Description: Mona Sans 13–14pt #7D8590
Stats row: language dot (11pt circle, language color e.g. TS #3178C6) + label, star (#7D8590 + count), fork (#7D8590 + count), Mona Sans 12pt

Tab Strip (Code / Issues / Pull requests / Actions)

Horizontally scrollable; each item Mona Sans 14pt
Inactive: #7D8590; Active: #E6EDF3 weight 600 + 2pt orange-coral underline #F78166
Count badge: #161B22 pill, #6E7681 text, Mona Sans 11pt w600

Branch Pill

#161B22 bg, 1pt #30363D border, 6pt radius
Leading branch glyph (13pt), branch name in monospace 12pt w600 #E6EDF3

Latest-Commit Strip

#161B22 bg, bottom border #30363D
Avatar (18pt circle) + commit message (#E6EDF3 truncated) + monospace short SHA (#7D8590 11pt) + relative time

File Tree Row

Folder glyph #7D8590 (filled) or file glyph #7D8590 (outline), 15pt
File/dir name: #E6EDF3 13pt (monospace for file names is acceptable; GitHub uses sans for the tree list label but mono in the path breadcrumb)
Trailing: last-commit message (#7D8590 12pt, truncated) + relative time (#6E7681 11pt)
Row divider: 1pt #21262D

Inline README Card

1pt #30363D border, 8pt radius
Header: file glyph + "README.md" (#E6EDF3 13pt w600) on #161B22, bottom border #30363D
Body: rendered markdown — h1 19pt w700 with a #21262D bottom rule; body 13pt #7D8590; code chips on #21262D; status badges as small monospace pills

State & Labels

State Pill (Open / Merged / Closed / Draft)

Pill, 999pt radius, Mona Sans 12pt w600, #FFFFFF text
Open #3FB950 (leading ● dot or issue-opened glyph), Merged #A371F7 (⑂ merge glyph), Closed #F85149 (● or x glyph), Draft #6E7681 (○)
Padding: 5pt vertical, 12pt horizontal

Issue Label (bug / enhancement / good first issue / custom)

Pill, 999pt radius, 1pt border, Mona Sans 12pt w500
Color-tinted by the label's own color: text = label color, border = label color @ 40%, fill = label color @ 10%
Examples: bug #F85149, enhancement #A371F7, good first issue #3FB950, documentation #0075CA

Contributions Heatmap (signature)

Grid of squares, each aspect-ratio: 1, 2pt radius, 3pt gap
Fill by activity level: L0 #161B22 (1pt rgba(110,118,129,0.15) border) · L1 #0E4429 · L2 #006D32 · L3 #26A641 · L4 #39D353
Legend row: "Less" + 5 swatches L0→L4 + "More", Mona Sans 11pt #7D8590
Tap a square → tooltip "{n} contributions on {date}"

Diff Viewer (signature for PRs)

Monospace blob, 13pt, #161B22 background
Addition line: rgba(63,185,80,0.15) row bg, leading + marker #3FB950
Deletion line: rgba(248,81,73,0.15) row bg, leading - marker #F85149
Line-number gutter: #6E7681 on #0D1117, right-aligned, 1pt right border #21262D
File header: filename (monospace #E6EDF3) + additions +N (#3FB950) / deletions -N (#F85149)

Navigation

Bottom Tab Bar

Height: 66pt + safe area
Background: rgba(13,17,23,0.94) with backdrop-filter: blur(20px), 1pt top border #21262D
Tabs (4): Home, Notifications, Explore, Profile
Icon size: 22pt
Active: glyph + label #E6EDF3 (thicker stroke); no tint pill
Inactive: #7D8590
Labels: Mona Sans 10pt w500, always shown
Notifications tab shows a #F85149 unread dot when applicable

Top Bar (repo view)

Responsive behaviourRead the full spec

Device Sizes

Device	Width	Key Changes
iPhone SE (3rd gen)	375pt	Tab strip scrolls; stats may wrap to 2 lines
iPhone 13/14/15	390pt	Standard layout
iPhone 15/16 Pro	393pt	Dynamic Island accommodated in top bar
iPhone 15/16 Pro Max	430pt	Wider file tree; more visible heatmap weeks
iPad (portrait)	768pt	2-pane: file tree (left) + blob/README (right)
iPad (landscape)	1024pt+	3-pane possible: nav + tree + content; split diff (old/new)

Dynamic Type

Repo title, section, body, code: full scale
Tab labels, count pills, SHAs, heatmap squares: FIXED (table/tree-layout-sensitive)
Code blocks: scale to XL (stay monospace, still horizontally scroll)

Orientation

All screens support rotation
iPad split view: persistent file tree (primary) + blob/diff (secondary)
Diff viewer switches to side-by-side (old | new) in landscape/iPad

Touch Targets

Tab strip item: 44pt min hit, 14pt label
File tree row: full-row 44pt hit
Bottom tab icons: 22pt glyph, 44pt hit
Heatmap square: small visual, 28pt effective hit (tooltip)
Buttons: 36–44pt tall

Safe Area Handling

Top: top bar respects safe area and Dynamic Island
Bottom: bottom tab bar respects home indicator; comment composer docks above keyboard
Keyboard: file finder / comment composer scrolls above keyboard
Sides: 16pt content inset; code blocks scroll horizontally within insets

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-github {--page-bg: #0d1117;
  --page-bg-gradient: none;
  --text-color: #8fa7c2;
  --heading-color: #8fa7c2;
  --link-color: #2f81f7;
  --link-hover-color: #0965ea;
  --border-color: #242c36;
  --card-bg: #0d1117;
  --card-shadow: 0 1px 2px rgba(143,167,194,0.06);
  --card-hover-shadow: 0 6px 18px rgba(143,167,194,0.12);
  --header-bg: #20242a;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #0d1117;
  --footer-text-color: #76879b;
  --button-bg: #2f81f7;
  --button-text-color: #000000;
  --button-hover-bg: #0965ea;
  --button-border: none;
  --button-border-radius: 6px;
  --button-secondary-bg: #151a21;
  --button-secondary-text-color: #8fa7c2;
  --button-secondary-hover-bg: #1d232c;
  --button-secondary-border: 1px solid #242c36;
  --prompt-bg: #141920;
  --prompt-text-color: #8fa7c2;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-mono);
  --card-border-radius: 6px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

pandora 88.8%
spotify 76.6%
fabrictokyo 74.9%
spotify 74.3%
itochu 73.9%

Where this came from

Source document: ios/design-md/misc/github/DESIGN.md · 25.3 KB
Repository: Meliwat/awesome-ios-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.