GitHub design system

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.

Captured 12 June 2026Dark UI1,926 elements read

Download tokens Read it yourself

GitHub colors

The brand roles and neutrals github.com renders, with how many elements use each one.

Brand colors

Primary#f0f6fc650 uses
Secondary#08872b2 uses
Accent#1f883d2 uses

Neutrals

#ffffff1,752 uses
#000000360 uses
#9198a1224 uses
#58635b140 uses
#59636e100 uses
#a4aea6100 uses
#d1d9e012 uses
#7c89808 uses
#4046516 uses
#484f585 uses

Backgrounds

#0d1117
#ffffff
#e4ebe6
#000000
#151a22
#151b23

Text colors

#f0f6fc17.39:1 on #0d1117
#1f23281.2:1 on #0d1117
#ffffff18.92:1 on #0d1117
#0000001.11:1 on #0d1117
#58635b3.02:1 on #0d1117
#005dd53.18:1 on #0d1117
#59636e3.1:1 on #0d1117
#d1242f3.61:1 on #0d1117

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 100% of them pass.

Text	Background	Ratio	Result
`#25292e`	`#f6f8fa`	13.74:1	AAA
`#ffffff`	`#1f883d`	4.52:1	AA
`#ffffff`	`#1f6feb`	4.63:1	AA
`#000000`	`#efefef`	18.26:1	AAA

GitHub fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Mona Sans: sans, most text (1,254 elements)
Mona Sans VF: sans, most text (476 elements)
Mona Sans Mono: mono, most text (17 elements)

Body text: 16px at weight 400, line height normal.

Weights in use: 400, 500, 600, 460, 480, 425, 800, 440, 700.

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 and radii

Spacing scale

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

Corner radii

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

Medium radii lead, with a few larger ones. 7 distinct box shadows.

Motion

The motion reads as mixed.

Durations

instant: 75ms
xs: 100ms
sm: 200ms
md: 300ms
lg: 480ms
xl: 800ms
xxl: 33333000ms

Easing

linear (12 uses): linear
ease-out (74 uses): cubic-bezier(0.16, 1, 0.3, 1)
custom (35 uses): cubic-bezier(0.65, 0, 0.35, 1)
ease-in-out (36 uses): ease

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

82/100, grade B

Components found: buttons (53), cards (9), inputs (14), links (154), navigation (287), footer (21).

By category

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

9 font weights in use — consider standardizing to 3 (regular, medium, bold)
4312 !important rules — prefer specificity over overrides
81% of CSS is unused — consider purging
32949 duplicate CSS declarations

Download the tokens

The files designlang wrote for github.com. Run it yourself for a fresh read: npx designlang github.com.

The core values as CSS variables

: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;
}

Read github.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Resend design system

Dark UI, inter, #d6ebfd

Railway design system

Dark UI, Inter, #59497a

Framer design system

Dark UI, Inter, #0066ff

Sentry design system

Dark UI, Rubik, #150f23

Quick answers

What font does GitHub use?

github.com sets most of its text in Mona Sans (1,254 elements), with Mona Sans VF and Mona Sans Mono alongside it. designlang read this from the computed styles of the live page on 12 June 2026.

What are GitHub's brand colors?

The brand roles on github.com are primary #f0f6fc, secondary #08872b and accent #1f883d, on a #0d1117 background. The neutrals used most are #ffffff, #000000 and #9198a1.

How do I use the GitHub design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang github.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from github.com's public pages on 12 June 2026, so it shows what the site renders, not GitHub's internal source files. GitHub is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of github.com on 12 June 2026. GitHub is a trademark of its owner; designlang is not affiliated with it. More: the full GitHub brand kit, the token extraction guide and the markdown version of this page.