GitHub — Design System (Light)

Color Palette

Background Colors

White (Canvas)

#FFFFFF

Page Background

#F6F8FA

Subtle Surface

#EAEEF2

Light Gray Green

#E4EBE6

Green Tint

#DAFBE1

Blue Tint

#DDF4FF

Purple Tint (AI)

#F5F0FF

Brand & Accent Colors

Green (Brand)

#1F883D

Green Deep

#08872B

Green Bright

#5FED83

Blue (Link)

#0969DA

Blue Action

#1F6FEB

Purple (AI)

#8250DF

Purple Bright

#A371F7

Black

#000000

Text Colors

Text Primary

#1F2328

Text Secondary

#59636E

Text Muted

#6E7781

Text Secondary 2

#58635B

Danger

#D1242F

Warning

#D29922

Error Bright

#F85149

Border & Shadow Colors

Border Default

#D0D7DE

Border Muted

#D1D9E0

Border Strong

#484F58

Shadow Light

rgba(209,217,224,.5)

Shadow Medium

rgba(31,35,40,.12)

Typography

Primary · Mona Sans VF

Mona Sans

Where the world builds software. Every developer, every idea, every push.

Regular · 400 w440 w460 Medium · 500 Semibold · 600 Bold · 700 Extrabold · 800

Mono · Mona Sans Mono / ui-monospace

Mona Sans Mono

git commit -m "feat: add design system tokens"

Regular · 400 Medium · 500

Change is constant.

Display Hero · 64px · w440 · line-height: 69.12px · letter-spacing: −2.24px

GitHub keeps you ahead.

Heading 4xl · 48px · w440 · line-height: 56.64px

Built for developers

Heading 3xl · 40px · w460 · line-height: 52px

The complete developer platform

Heading 2xl · 32px · w460 · line-height: 48px

Code, collaborate, ship

Heading XL · 24px · Semibold · line-height: 36px · letter-spacing: 0.18px

From open source to enterprise, GitHub is home to 100 million developers building the world's software.

Body Large · 18px · Regular · line-height: 30.8px · letter-spacing: 0.18px

Collaborate without constraints. GitHub brings together the world's largest community of developers.

Body Default · 16px · Regular · line-height: 26.4px

Last pushed 2 hours ago · 4,821 commits · MIT License

Body Small · 14px · Regular · line-height: 22.75px

REPOSITORIES · ISSUES · PULL REQUESTS

Caption / Label · 12px · Semibold · uppercase · letter-spacing: 0.5px

Line Heights

Tight

12px

Snug

14px

Normal

16px

Loose

19.5px

LH-7

22.75px

LH-8

24px

LH-11

30.8px

LH-12

36px

LH-13

48px

LH-14

52px

LH-15

56.64px

LH-16

69.12px

Letter Spacing

GitHub

--letter-spacing-tight

−2.24px · hero display, large headings — dramatic condensing for editorial impact

Build the future

--letter-spacing-normal

0.18px · body text, subheadings — slight open tracking for readability

REPOSITORIES

--letter-spacing-widest

0.5px · uppercase labels, nav items

Spacing

Spacing Scale

27 tokens — 2.4px → 358.5px (includes layout-level spacing)

2.4

26.1

200+

Borders

Border Radii

3px

6px

8px

12px

2xl (top)

12px top

full

16px

r10

24px

r11

48px

r12

50%

r13

60px

Pill

9999px

Border Widths

--border-width-hairline

1px · ×232 — universal hairline border

--border-width-thin

2px · ×24 — active states, focus rings

Shadow / Elevation

Shadow Tokens

6 tokens — layered borders and directional glows

sm — Border + Lift

×5

1px ring + 6px directional lift — cards, popovers

md — Inset Top

×5

Inset 1px top — button pressed, active input

lg — Dramatic Float

×1

80px radial spread — modal overlays, panels

xl — Inset Bottom

×1

Inset bottom line — table headers, dividers

shadow-5 — Inset Top Light

×1

Inset top line — card bevels, panel tops

shadow-6 — Transparent Ring

×1

Invisible inset ring — layout placeholder

Z-Index

Layer	Value	Usage
z-1 (Behind)	-1	Background decorations, canvas layers below content
z-2 (Base)	1	Base content layer
z-3	2	Slight raise, inline floating elements
z-4	3	Tooltips anchored to content
z-5 (Sticky UI)	32	Sticky table headers, pinned sidebar items
z-6	35	Floating action elements, editor toolbars
z-7 (Nav)	98	Navigation bars, top headers
z-8	99	Just below fixed nav — banners, announcements
z-9 (Sticky)	100	Sticky headers, persistent nav elements
z-10 (Dropdown)	999	Dropdown menus, select panels, command palette
z-11 (Overlay)	1000	Overlays, sidesheets, drawers
z-12 (Modal)	99999	Modal dialogs, fullscreen overlays
z-13 (Maximum)	999999	Global toasts, critical alerts, skip-link focus

Breakpoints

GitHub defines 51 breakpoints ranging from 260px to 1728px — an unusually granular system enabling fine-grained responsive control.

📱

--breakpoint-xs

260px

Minimum small device

📲

--breakpoint-bp-26

768px

Tablet threshold

💻

--breakpoint-bp-38

1024px

Desktop threshold

🖥️

--breakpoint-bp-44

1280px

Wide desktop

📺

--breakpoint-bp-51

1728px

Maximum canvas

Token Range	Value Range	Notes
--breakpoint-xs → 3xl	260px → 450px	Named range: micro to compact mobile (7 stops)
--breakpoint-bp-8 → bp-18	451px → 599px	Upper mobile range (11 stops, 1px granularity near 543px)
--breakpoint-bp-19 → bp-25	600px → 767.98px	Large phone / small tablet (7 stops)
--breakpoint-bp-26 → bp-34	768px → 980px	Tablet range (9 stops, includes 803/804px boundary)
--breakpoint-bp-35 → bp-40	1011px → 1029px	Transition desktop zone (6 stops near 1011–1012px)
--breakpoint-bp-41 → bp-45	1150px → 1281px	Standard desktop widths (5 stops)
--breakpoint-bp-46 → bp-51	1320px → 1728px	Wide / ultra-wide displays (6 stops)

Opacity

Opacity Tokens

3 tokens — 0.4 · 0.5 · 0.6

--opacity-40

40% · ×1 — subtle overlays

--opacity-50

50% · ×5 — hover dim states

--opacity-60

60% · ×3 — muted emphasis

GitHub uses a minimal, high-range opacity set — all values above 40%, targeting overlay and hover states rather than deep transparency effects.

Accessibility

WCAG 2.1 thresholds: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1

Text Color	Background Color	Ratio	WCAG Rating
#F0F6FC (Text Primary-inv)	#FFFFFF	1.09:1	Fail
#F0F6FC (Text Primary-inv)	#000000	19.29:1	AAA
#F0F6FC (Text Primary-inv)	#0D1117	17.39:1	AAA
#F0F6FC (Text Primary-inv)	#F6F8FA	1.02:1	Fail
#F0F6FC (Text Primary-inv)	#404651	8.72:1	AAA
#A4AEA6 (Text Muted)	#FFFFFF	2.29:1	Fail
#A4AEA6 (Text Muted)	#000000	9.18:1	AAA
#A4AEA6 (Text Muted)	#0D1117	8.28:1	AAA
#A4AEA6 (Text Muted)	#404651	4.15:1	AA Large
#8DD6FF (Link Blue)	#000000	13.2:1	AAA
#8DD6FF (Link Blue)	#0D1117	11.89:1	AAA
#8DD6FF (Link Blue)	#404651	5.96:1	AA
#1F2328 (Text Dark)	#FFFFFF	15.8:1	AAA
#1F2328 (Text Dark)	#F6F8FA	14.84:1	AAA
#58635B (Text Secondary)	#FFFFFF	6.27:1	AA
#58635B (Text Secondary)	#F6F8FA	5.89:1	AA
#58635B (Text Secondary)	#000000	3.35:1	AA Large

CSS Variables Reference

Background Colors

White (Canvas)--color-white#FFFFFF

Page Background--color-white-3#F6F8FA

Light Gray Green--color-light-gray-2#E4EBE6

Green Tint--bg-brand-tint#DAFBE1

Blue Tint--bg-blue-tint#DDF4FF

Purple Tint (AI)--bg-purple-tint#F5F0FF

Green Brand--color-dark-green#1F883D

Green Deep--color-dark-green-2#08872B

Black--color-black#000000

Dark Canvas--color-dark-gray-3#0D1117

Text & Accent Colors

Text Primary--color-dark-gray#1F2328

Text Secondary--color-blue#59636E

Text Muted--text-tertiary#6E7781

Text Brand Green--text-brand#1A7F37

Text Brand Blue--color-blue-3#0969DA

Purple (AI)--accent-purple#8250DF

Purple Bright--color-light-purple#A371F7

Danger--color-red#D1242F

Warning--color-orange#D29922

Blue Bright--color-blue-2#4493F8

Green Bright--color-green#5FED83

Typography

Mona Sans VF (Primary)--font-family-2Mona Sans VF

Mona Sans Mono--font-family-4Mona Sans Mono

Regular--font-weight-regular400

Variable axis (w425–w480)axis weights425 · 440 · 460 · 480

Semibold--font-weight-semibold600

Bold--font-weight-bold700

Extrabold--font-weight-extrabold800

Caption--font-size-2xs12px

Body Small--font-size-xs14px

Body Default--font-size-sm16px

Heading 2xl--font-size-2xl32px

Display 5xl--font-size-5xl64px

Tight (Hero)--letter-spacing-tight−2.24px

Normal--letter-spacing-normal0.18px

Widest (Labels)--letter-spacing-widest0.5px

Motion, Opacity & Layers

Instant (33ms)--duration-instant0.033s · ×9

Fast (75ms)--duration-fast0.075s · ×2

Normal (80ms)--duration-normal0.08s · ×64

Slow (100ms)--duration-slow0.1s · ×18

200ms--duration-60.2s · ×98

300ms--duration-70.3s · ×70

800ms--duration-120.8s · ×50

Ease Out--easing-ease-outcubic-bezier(.3,.8,.6,1)

Default (Spring)--easing-defaultcubic-bezier(.16,1,.3,1)

Subtle--opacity-4040%

Dim--opacity-5050%

Muted--opacity-6060%

Behind--z-1-1

Base--z-21

Sticky UI--z-532

Nav--z-798

Dropdown--z-10999

Overlay--z-111000

Modal--z-1299999

Maximum--z-13999999

Borders & Radius

Hairline--border-width-hairline1px · ×232

Thin--border-width-thin2px · ×24

sm--radius-sm3px

md--radius-md6px

lg--radius-lg8px

xl--radius-xl12px

r10--radius-r1024px

r12 (Circle)--radius-r1250%

Pill--radius-full9999px

Spacing (selected)

Micro--space-12.4px · ×18

Space 3--space-34px · ×284

Space 6 (SM)--space-68px · ×86

Space 8--space-812px · ×45

Space 12 (MD)--space-1216px · ×126

Space 20--space-2020px · ×58

Space 40--space-4028px · ×37

Space 64--space-6432px · ×32

Space 128--space-12848px · ×37

Space 160--space-16064px · ×16

Space 192--space-19280px · ×5

Space 256 (Max)--space-25696px · ×19

GitHub Design System · Light Theme · Generated 15/04/2026 · 67 color tokens · 45 type tokens · 27 spacing steps · 14 border radii · 2 border widths · 6 shadows · 12 durations · 4 easings · 13 z-index layers · 51 breakpoints · 3 opacity tokens