Switch between the rendered Visual preview and the Raw DESIGN.md.
GitHub's design system embodies a modern, developer-centric aesthetic that prioritizes clarity and efficiency in a dark-first environment. The visual language combines deep navy and black backgrounds with crisp white typography and vibrant accent colors, creating a professional yet approachable interface. The design favors minimal ornamentation, with subtle gradients and glowing elements (like animated orbs) providing visual interest without distraction. This system supports both light and dark themes, with careful attention to contrast and readability for extended coding sessions. The overall mood is forward-thinking, collaborative, and technically confident—reflecting GitHub's position as the platform where global development happens.
Key Characteristics
#010409): Primary background for dark theme layouts, hero sections, and full-page backgrounds#1F2328): Secondary dark background for nested containers and elevated surfaces#25292E): Tertiary dark background for further nesting and component backgrounds#1A7F37): Primary call-to-action buttons, success states, and positive confirmations (inferred from sign-up button)#1F6FEB): Links, interactive elements, and secondary CTAs#CF222E): Error states, deletions, and destructive actions#D1D9E0): Input borders, dividers, and subtle separators in light contexts#B7BDC8): Secondary borders and less prominent dividers#FFF0): Transparent white overlay for hover states and subtle backgrounds#FFFFFF): Primary text, body content, and high-contrast elements (used 483 times)#000000): Text on light backgrounds and semantic dark elements (used 403 times)#F0F6FC): Light theme background, code backgrounds, and low-emphasis surfaces#59636E): Secondary text, metadata, and disabled states#656C76): Tertiary text and less prominent UI elements#58635B): Used for dark theme secondary text and borders#E4EBE6): Light theme card backgrounds and elevated surfaces#25292E): Dark theme elevated surfaces above the base background#CF222E): Validation errors, warnings, and destructive confirmations#1A7F37): Positive confirmations, successful operations (inferred)Primary: Mona Sans VF (variable font)
Fallback stack: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Secondary: Mona Sans (non-variable)
Fallback stack: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Code: Menlo, monospace (inferred for syntax highlighting contexts)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Mona Sans VF | 32px | 600 | 48px | -0.02em | Hero headlines, page titles |
| Heading / H2 | Mona Sans VF | 24px | 600 | 36px | -0.01em | Section headings, major dividers |
| Subheading / H3 | Mona Sans VF | 12px | 600 | 19.5px | 0em | Small headings, labels, badges |
| Body Text | Mona Sans VF | 14px | 400 | 21px | 0em | Primary content, descriptions |
| Body List | Mona Sans | 16px | 400 | 24px | 0em | List items, narrative content |
| Button Text | Mona Sans VF | 16px | 400 | 24px | 0em | Button labels, actions |
| Button Label Weight | Mona Sans VF | 16px | 500 | 24px | 0em | Emphasized button states |
| Form Label | Mona Sans VF | 14px | 600 | 21px | 0em | Input labels, form fields |
| Caption / Small | Mona Sans VF | 12px | 400 | 18px | 0em | Metadata, helper text, timestamps |
| Code / Monospace | Menlo | 14px | 400 | 21px | 0em | Inline code, code blocks |
Primary Button (CTA)
#1A7F37#FFFFFF16px500Mona Sans VF12px 24px6px1px solid #1A7F37none24px#228D41, Box Shadow rgba(37, 41, 46, 0.1) 0px 4px 8px -2px#0F5F2C, Box Shadow inset rgba(0, 0, 0, 0.2) 0px 2px 4pxSecondary Button
rgba(209, 217, 224, 0.1)#FFFFFF16px500Mona Sans VF12px 24px6px1px solid #D1D9E0none24pxrgba(209, 217, 224, 0.15), Border #FFFFFFrgba(209, 217, 224, 0.25)Ghost Button
rgba(0, 0, 0, 0)#FFFFFF16px400Mona Sans VF8px 16px6px1px solid #656C76none24pxrgba(255, 255, 255, 0.1), Border #FFFFFFrgba(255, 255, 255, 0.2)Small Icon Button
rgba(0, 0, 0, 0)#FFFFFF16px500Mona Sans VF4px 4px6px0px nonenone24pxrgba(255, 255, 255, 0.1)Standard Card (Dark)
#1F2328#FFFFFF14px400Mona Sans VF16px6px1px solid #656C76rgba(209, 217, 224, 0.25) 0px 0px 0px 1px, rgba(37, 41, 46, 0.04) 0px 6px 12px -3px, rgba(37, 41, 46, 0.12) 0px 6px 18px 0px21pxElevated Card
#25292E#FFFFFF14px400Mona Sans VF24px8px1px solid rgba(209, 217, 224, 0.1)rgba(209, 217, 224, 0) 0px 0px 0px 1px, rgba(37, 41, 46, 0.24) 0px 40px 80px 0px21pxCode Block Container
#0F1419#C5CED114px400Menlo, monospace16px6px1px solid #656C76rgba(37, 41, 46, 0.04) 0px 1px 0px 0px inset21pxText Input
#0F1419#FFFFFF14px400Mona Sans VF8px 12px6px1px solid #656C76rgba(31, 35, 40, 0.04) 0px 1px 0px 0px inset32px21px#59636E#1F6FEB, Box Shadow 0px 0px 0px 3px rgba(31, 111, 235, 0.3)Text Area
#FFFFFF#1F232814px400Mona Sans VF8px 12px6px1px solid #D1D9E0rgba(31, 35, 40, 0.04) 0px 1px 0px 0px insetauto (minimum 120px)21pxvertical#1F6FEB, Box Shadow 0px 0px 0px 3px rgba(31, 111, 235, 0.2)Search Input
#0F1419#FFFFFF14px400Mona Sans VF5px 12px6px1px solid #656C76rgba(31, 35, 40, 0.04) 0px 1px 0px 0px inset32px300px (responsive)20px#59636EForm Label
#E4EBE612px600Mona Sans VF6px18pxPrimary Navigation
rgba(1, 4, 9, 0.8) (semi-transparent dark)#FFFFFF16px400Mona Sans0px (inline items spaced)24px64px24px1px solid rgba(209, 217, 224, 0.1)#FFFFFF, Background rgba(255, 255, 255, 0.1)#1F6FEB, Border Bottom 2px solid #1F6FEBNav Item Link
rgba(0, 0, 0, 0)#FFFFFF14px400Mona Sans VF8px 12px6px1px solid transparent21pxrgba(209, 217, 224, 0.1), Border 1px solid #D1D9E0Badge / Tag (Default)
rgba(209, 217, 224, 0.15)#FFFFFF12px600Mona Sans VF4px 8px20px1px solid rgba(209, 217, 224, 0.3)16pxBadge / Status Green
rgba(26, 127, 55, 0.15)#58E84D12px600Mona Sans VF4px 8px20px1px solid rgba(26, 127, 55, 0.3)16pxBadge / Status Red
rgba(207, 34, 46, 0.15)#F8514912px600Mona Sans VF4px 8px20px1px solid rgba(207, 34, 46, 0.3)16pxTab Container
rgba(0, 0, 0, 0)1px solid #656C76autoTab Item (Inactive)
rgba(0, 0, 0, 0)#59636E14px500Mona Sans VF12px 16px2px solid transparent21px#FFFFFFTab Item (Active)
rgba(0, 0, 0, 0)#FFFFFF14px500Mona Sans VF12px 16px2px solid #1F6FEB21pxBase Unit: 4px
Spacing Scale:
4px — Micro spacing within components, icon-text gaps8px — Small gaps between related elements, tight component padding12px — Form field padding, button interior spacing16px — Default padding, section separators20px — Medium gaps between content blocks24px — Gap between major sections, card spacing32px — Large padding for prominent containers40px — Vertical spacing between sections48px — Extra-large vertical rhythm64px — Full section padding, hero spacing80px — Large feature block spacing96px — Maximum spacing between unrelated sectionsUsage Context:
Max Width: 1280px for primary content, 100% for edge-to-edge sections
Column Strategy:
96px columns with 24px gutters72px columns with 16px gutters100% width with 16px side marginsSection Patterns:
80px vertical padding24px gap32px gapGitHub prioritizes breathing room and visual clarity through generous whitespace. The design avoids clustering; related elements are grouped with 16px–24px spacing, while unrelated sections use 40px–80px separation. This creates natural visual hierarchy and reduces cognitive load for users scanning long pages or reading code. Dark backgrounds amplify the effect of whitespace, making content feel more spacious and less overwhelming.
3px — Minimal rounding for compact buttons and badges6px — Standard radius for inputs, cards, and interactive elements8px — Elevated cards and larger containers16px — Feature images, large asset elements, hero overlays20px — Pill-shaped buttons and tag containers60px — Full-circle avatars, fully rounded badges| Level | Treatment | Use |
|---|---|---|
| Base (0) | No shadow, background-color only | Page backgrounds, content areas |
| Raised (1) | rgba(209, 217, 224, 0.25) 0px 0px 0px 1px, rgba(37, 41, 46, 0.04) 0px 6px 12px -3px, rgba(37, 41, 46, 0.12) 0px 6px 18px 0px | Dropdown menus, hover cards, tooltips |
| Lifted (2) | rgba(209, 217, 224, 0) 0px 0px 0px 1px, rgba(37, 41, 46, 0.24) 0px 40px 80px 0px | Modal dialogs, popovers, overlay cards |
| Floating (3) | Custom: 0px 20px 60px rgba(37, 41, 46, 0.35), 0px 0px 0px 1px rgba(209, 217, 224, 0.2) | Toast notifications, floating action buttons |
Shadow Philosophy: GitHub's shadow system balances subtlety with clarity. Shadows are used sparingly to indicate elevation and focus, never applied to base backgrounds. The color palette—using dark gray overlaid on the background—ensures shadows remain visible in dark mode without appearing jarring. Blur and spread values increase proportionally with elevation, creating depth without harshness. Borders (1px light or semi-transparent) complement shadows to ensure contrast against dark backgrounds.
44px height for interactive touch targets on mobile#FFFFFF on #1F2328 achieves 11:1)12px vertical spacing6px border radius for standard buttons and inputs#1A7F37) exclusively for primary CTAs and confirmations#CF222E) for neutral feedback; reserve it for errors and destructive actions#010409 → #1F2328 → #25292E)12px without explicit accessibility review#000000 black on dark backgrounds; use neutrals from the scale instead2px borders; use 1px as the standard| Name | Width | Key Changes |
|---|---|---|
| Mobile | <576px | Single-column layout, full-width containers, 16px side margin, stacked navigation, 14px body text |
| Tablet | 576px–768px | Two-column layout for grids, 20px side padding, condensed navigation, 16px line height |
| Small Desktop | 768px–1024px | Three-column grids, 32px side padding, sidebar layouts enabled, standard typography |
| Desktop | 1024px–1280px | Four-column grids, 48px side padding, full navigation, max-width containers |
| Large Desktop | >1280px | Full 12-column grid, 64px side padding, multi-section layouts, max-width 1280px for content |
44px for buttons, links, and form controls44px for circular buttons and icon buttons8px minimum gap between adjacent touch targets on mobile40px height acceptable for non-critical actions (secondary buttons, navigation items)32px height for inputs, minimum 12px padding on all sides80px (desktop) to 48px (tablet) to 32px (mobile)24px gap<768px)100% in narrow viewports32px H1 (desktop) → 24px (tablet) → 20px (mobile)32px horizontal (desktop) → 24px (tablet) → 16px (mobile)100%, scale proportionally, border-radius 16px maintained across breakpoints#1A7F37)#1F6FEB)#CF222E)#010409)#1F2328)#FFFFFF)#59636E)#0F1419)#D1D9E0) or Medium Gray (#656C76)rgba(255, 255, 255, 0.1) on dark backgrounds#1F2328) and light (#FFFFFF) backgrounds4px base unit; gaps between elements should always be multiples of 4 (8px, 12px, 16px, 20px, 24px, etc.)6px for standard UI (buttons, inputs, cards); 20px for pills/tags; 16px for images; 3px for minimal/compact elements44px height/width on mobile; maintain 8px minimum gap between targets600 weight for all headings (H1–H3); use 400 for body and 500 for button labels; never use weights outside 400–600 range for primary text#FFFFFF or #F0F6FC backgrounds14px size minimum