Developer Collaboration Platform

GitHub Design System

Dark, precise, and developer-first — tokens and components that power the world's leading software development platform.

18 Color tokens 7 Type styles 4 Shadow levels 7 Radius tokens Mona Sans

Foundation

Color Tokens

The full color palette extracted from GitHub's design system, including brand primaries, interactive states, neutrals, and surfaces.

GitHub Black
#010409
Page background · Darkest surface
GitHub Charcoal
#1F2328
Cards · Panel surface · Elevated bg
Off Black
#25292E
Input backgrounds · Subtle surface
Action Green
#1F883D
Primary CTA · Success · Accent
Copilot Purple
#8957E5
AI features · Secondary accent
Link Blue
#1F6FEB
Hyperlinks · Info states · Focus ring
Danger Red
#CF222E
Destructive actions · Error state
White
#FFFFFF
Primary text on dark · Icon fill
Border Gray
#D1D9E0
Default borders · Dividers
Gray 500
#656C76
Muted text · Placeholder · Icons
Light Blue
#F0F6FC
High-emphasis text · Highlights

Typography

Type Scale

Mona Sans drives GitHub's voice — variable-weight, wide optical range, designed for technical precision and developer tooling.

Primary Mona Sans UI · Headings · Body · Buttons
Monospace Courier New Code · Token values · Badges
Display Build what matters clamp(40–56px) · 425 · −0.035em
H1 The quick brown fox 32px · 600 · −0.5px
H2 The quick brown fox jumps 24px · 600 · −0.4px
Body Lg The quick brown fox jumps over the lazy dog 17px · 400 · 1.6
Body The quick brown fox jumps over the lazy dog 14px · 400 · 1.5
Small The quick brown fox jumps over the lazy dog 12px · 400 · 1.5
Label DESIGN SYSTEM LABEL 11px · 600 · uppercase
Code const token = '#1F883D'; 13px · 400 · monospace

Layout

Spacing & Shapes

4px base grid — every spacing token is a multiple of 4. Border radii range from sharp (0) to pill (9999px) to match component context.

Spacing Scale

4px xs
8px sm
12px sm+
16px md
24px lg
32px xl
48px 2xl
64px 3xl

Border Radius

None 0px
SM 3px
MD 6px
LG 8px
XL 12px
2XL 16px
Full 9999px

Shadows

Level 0 Flat · no elevation
Level 1 Cards · subtle lift
Level 2 Dropdowns · popovers
Level 3 Modals · overlays

Elevation

Depth & Surfaces

Three dark surface levels create spatial hierarchy. Background (L0) → Panel (L1) → Card (L2) — each step lifts slightly from the base plane.

Page Background
Base layer — the canvas everything sits on
L0 · #010409
Panel Surface
Navigation · sidebars · primary containers
L1 · #1F2328
Card Surface
Inputs · inline code · nested containers
L2 · #25292E
Base #010409
Panel #1F2328
Card #25292E
Border #D1D9E0

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states.

Buttons
Interactive triggers — Primary, Secondary, Ghost, Disabled
.btn

Primary: #1F883D bg · #FFFFFF text · 6px radius · 8/16px padding · 40px height. Secondary: transparent bg · #D1D9E0 border. Ghost: link-style, no border.

Text Input
Form control — Default and Focused states
.input

Default: #FFFFFF bg · #D1D9E0 border · 6px radius · 32px height. Focus: #1F6FEB border · 3px focus ring rgba(31,111,235,.15).

Card
Content container — elevated surface with shadow
.card
Repository name
A brief description of this project. It's open source and has 12k stars.

#1F2328 bg · #D1D9E0 border · 8px radius · L2 shadow. Title: 14px/600/#F0F6FC. Body: 13px/#656C76. CTA: primary green button.

Badges
Status indicators — Success, Error, Info
.badge
Open Closed Draft

12px/600 · 4/8px padding · 12px radius. Success: #1F883D. Error: #CF222E. Info: #1F6FEB.

Guidelines

Do's & Don'ts

Principles for consistent application of the GitHub design language across surfaces and contexts.

Do — Embrace
  • Use Action Green (#1F883D) as the sole primary CTA color
  • Maintain the three-level dark surface hierarchy (L0→L1→L2)
  • Apply Mona Sans at variable weights for typographic contrast
  • Use 4px base grid for all spacing decisions
  • Reserve Copilot Purple exclusively for AI-powered features
Don't — Avoid
  • Mix light and dark surface tones within a single panel
  • Use Link Blue (#1F6FEB) for primary actions — it signals navigation
  • Apply Danger Red (#CF222E) outside of destructive or error contexts
  • Stack more than two surface levels in one component
  • Use non-monospace fonts for code or token display