GitHub

Overview

GitHub is the world's leading AI-powered developer platform, serving millions of developers, enterprises, and open-source communities. The design system embodies 'Technical Minimalism'—a philosophy that prioritizes clarity and function over decoration. The aesthetic combines a deep navy canvas (#0d1117) with vibrant accent colors (emerald green #1f883d for primary actions, electric blue #58a6ff for secondary interactions, and purple #a371f7 for tertiary elements), creating a high-contrast, accessible interface that conveys trust, precision, and forward momentum. The UI feels purposeful and energetic without being chaotic.

GitHub's voice is direct, collaborative, and technically grounded. The brand speaks to developers as peers—using clear, jargon-appropriate language without condescension. Tone is confident but not arrogant; helpful but not patronizing. Example sentence in brand voice: 'Collaborate on code with pull requests, review changes, and merge with confidence.'

Colors

The color system uses a dark-first approach optimized for extended screen time and developer workflows. **Surface Stack**: The base (#0d1117) is a true dark navy with minimal blue undertone, reducing eye strain. Surface containers layer from #010409 (lowest, near-black for maximum contrast) through #30363d (highest, for elevated UI elements). **Primary Color** (#1f883d, emerald green) is reserved exclusively for affirmative actions—'Sign up for GitHub', 'Create', 'Merge'—and appears on 40% of CTAs. It conveys growth, success, and forward progress. **Secondary Color** (#58a6ff, electric blue) supports interactive elements like links, focus states, and secondary buttons; it's the accent users see most frequently during navigation. **Tertiary Color** (#a371f7, purple) highlights advanced feat

Typography

The type system uses Mona Sans VF (variable font) as the primary typeface, with system fallbacks (-apple-system, BlinkMacSystemFont, Segoe UI) for reliability. The hierarchy spans from Display (64px, fw 425) for hero headlines down to Label-sm (12px, fw 500) for metadata. Display and Headline weights use 425–600 font-weight to maintain legibility on dark backgrounds without appearing heavy; body text is consistently 400 (regular). Line-height is set to 1.5× font-size for body copy (e.g., 16px body-md with 24px line-height) to ensure readability during long coding sessions. Letter-spacing is negative for large headlines (-0.02em at 64px) to tighten visual mass, and neutral (0em) for body text. On small labels over busy backgrounds (e.g., status badges), apply text-shadow: 0 1px 2px rgba(0,

Layout

The page grid uses a 12-column fluid layout with a max-width of 1280px, centered with auto margins. Gutter spacing is 24px (md) between columns and sections. The spacing scale is semantic: `xs` (4px) for micro-interactions, `sm` (12px) for compact groups, `md` (24px) for standard section padding, `lg` (40px) for major section breaks, and `xl` (64px) for hero/footer spacing. Hero sections use 64px vertical padding (xl) with 40px horizontal padding (lg) on mobile, scaling to 80px vertical on desktop. Card containers use 24px padding (md) internally. The rhythm emphasizes breathing room: sections are separated by lg spacing (40px) to prevent cognitive overload. Container max-width is 1280px to accommodate side-by-side layouts (e.g., code editor + chat panel in Copilot). White-space is treated

Elevation & Depth

Depth is conveyed through subtle layering and shadow rather than dramatic elevation. **Level 1 (Base)**: The background (#0d1117) with no shadow. **Level 2 (Standard Card)**: Surface-container (#161b22) with a 1px solid border at #30363d (outline) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This shadow is soft and spread, suggesting proximity without drama. **Level 3 (Modal/Elevated)**: Surface-container-high (#21262d) with the same border and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), indicating further elevation. Focus states add a 3px glow: box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1) (

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and consistently to signal interactivity without softening the technical aesthetic. **Buttons and inputs** use 6px border-radius (DEFAULT), a subtle curve that feels modern without appearing playful. **Cards and containers** use 8px (md) for slightly more breathing room. **Badges and pills** use 9999px (full) for maximum roundness, creating a distinct visual category for status/metadata. **No sharp corners** (0px) are used on interactive elements; the minimum is 4px (sm) for very small UI details. This constraint

Components

Action Elements **Button-Primary** (#1f883d, 40px height, 6px radius, 6px 20px padding) is the dominant CTA. It uses white text (on-primary) and no border. On hover, the background shifts to #1c8139 (primary-fixed-dim) with a 150ms ease-out transition. **Button-Secondary** is a transparent button with a 1px border in secondary color (#58a6ff) and matching text. On hover, it gains a rgba(88, 166, 255, 0.1) background. **Button-Ghost** (used for 'Sign in' in the header) has a semi-transparent background rgba(31, 35, 40, 0.4) with secondary text color; on hover, the background increases to rgba(31, 35, 40, 0.6). All buttons use label-md typography (14px, fw 500) and support disabled states via opacity: 0.5 and cursor: not-allowed.

Containers & Surfaces **Card** is the standard contai

Do's and Don'ts

**Do**

• Do use primary green (#1f883d) exclusively for affirmative, forward-moving actions—sign up, create, merge, deploy.
• Do apply the secondary-color focus glow (box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1)) to all keyboard-focusable elements for accessibility.
• Do maintain 40px (lg) spacing between major sections to create visual breathing room and reduce cognitive load.
• Do use Mona Sans VF at 425 font-weight for hero headlines to balance geometric precision with warmth.
• Do layer surfaces with 1px solid borders (#30363d) and soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) rather than relying on color alone for depth.

**Don't**

• Don't use primary green for secondary or neutral actions—reserve it for high-intent CTAs only.
• Don't apply sharp corners (0px radius) to interactive elements; minimum is 4px (sm) for small details.
• Don't use harsh shadows (blur > 24px or spread > 0px) on standard cards; reserve dramatic shadows for modals and overlays.
• Don't mix typefaces; Mona Sans VF is the sole brand typeface—system fallbacks are for rendering reliability only.
• Don't use color alone to convey state; combine color changes with border, shadow, or opacity shifts for clarity.