GitHub

Overview

GitHub is the world's leading AI-powered developer platform, embodying a "Technical Minimalism" aesthetic that prioritizes clarity, precision, and collaborative energy. The design system uses a deep navy-to-black canvas (#0d1117 to #010409) as the foundational surface, allowing vibrant accent colors—particularly the signature GitHub green (#1f883d) and electric blue (#58a6ff)—to command attention on interactive elements. The brand personality is direct, confident, and developer-first: the interface speaks the language of code, version control, and open-source community. Voice is concise and action-oriented, avoiding marketing fluff. Example: "Push your code. Collaborate instantly. Ship faster."

Colors

The color system is built on a dark, high-contrast foundation optimized for extended screen time and code readability. Primary (#1f883d) is GitHub's signature green, used exclusively for affirmative actions (sign-up, merge, deploy) and success states—it conveys trust and forward momentum. Secondary (#58a6ff) is a bright, saturated blue reserved for information, links, and secondary CTAs; it provides visual separation from primary actions. Tertiary (#a371f7) is a purple accent used sparingly for highlights and special states. The surface stack ranges from near-black (#010409 for surface-dim) through mid-tone grays (#161b22 for surface-container) to lighter grays (#30363d for surface-container-high), enabling subtle layering without sacrificing contrast. On-surface text is always #f0f6fc (a

Typography

The type system uses Mona Sans (a GitHub-commissioned variable font) as the primary typeface, with system fallbacks (-apple-system, BlinkMacSystemFont, Segoe UI) for environments where the custom font is unavailable. Display (64px, 700 weight, -0.03em tracking) is reserved for hero headlines and major section breaks; it commands attention through size and negative letter-spacing, creating a dense, forward-leaning presence. Headline-lg (40px, 600 weight) is used for section titles and modal headers. Body-md (16px, 400 weight, 24px line-height) is the default reading size for copy, ensuring comfortable scanning at typical viewing distances. Label-md (14px, 500 weight) is applied to buttons, badges, and form labels—the 500 weight provides visual weight without appearing bold. All small text (

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport. Horizontal gutters are 24px on desktop, collapsing to 16px on tablet and 12px on mobile. Vertical rhythm is established through the spacing scale: section breaks use lg spacing (40px), card stacks use md spacing (24px), and internal component padding uses sm spacing (12px). The hero section occupies the full viewport height with centered content, using a gradient background that transitions from deep navy (#0d1117) at the top through purple tones in the middle, creating visual depth without additional imagery. Content sections below the fold use a consistent 40px vertical margin (lg spacing) to establish breathing room. Cards and containers maintain 24px internal padding (md spacing) with 12px gap

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle surface color shifts rather than dramatic drop shadows. Level 1 (Base): the background surface at #0d1117 with no shadow. Level 2 (Raised Cards): surface-container (#161b22) with a 1px border in outline color (#30363d) and a soft shadow of 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Modals/Overlays): surface-container-high (#21262d) with a 1px border and a deeper shadow of 0 8px 24px rgba(0, 0, 0, 0.2). Interactive elements (buttons, inputs) use no shadow at rest; on hover, they receive a 0 3px 8px rgba(0, 0, 0, 0.15) shadow to signal

Shapes

The shape system follows a "Technical Precision" philosophy: rounded corners are minimal and functional, never decorative. Buttons and inputs use a 6px radius (DEFAULT), providing just enough softness to feel modern without appearing playful or casual. Cards and larger containers use 8px (md radius) to create subtle visual distinction from buttons. Modals and popovers use 12px (lg radius) to signal importance and separation from the main interface. The full radius (9999px) is reserved exclusively for badges and pill-shaped elements like user avatars or status indicators. This graduated approac

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons use the GitHub green (#1f883d) background with white text, 6px padding horizontally and 6px vertically (total height 40px), and a 6px border-radius. On hover, the background shifts to #238636 (a slightly lighter green). On active/pressed state, the background becomes #197935 with an inset shadow of inset 0 1px 0 0 rgba(0, 45, 17, 0.3) to create a tactile "pressed" effect. Secondary buttons have a transparent background with a 1px border in the outline color (#30363d) and text in the secondary color (#58a6ff); on hover, the background becomes rgba(31, 35, 40, 0.4) and the border shifts to the secondary color. All buttons must have a minimum touch target of 44px (height) an

Do's and Don'ts

**Do**

• Do use the primary green (#1f883d) exclusively for affirmative, forward-moving actions like sign-up, merge, or deploy—never for warnings or secondary information.
• Do maintain at least 24px (md spacing) between major sections and 12px (sm spacing) between related components to preserve visual breathing room.
• Do apply the Mona Sans typeface at 600+ weight for all headlines and 500 weight for labels to establish clear visual hierarchy without relying on size alone.
• Do use the secondary blue (#58a6ff) for links, secondary CTAs, and informational elements to create visual separation from primary actions.
• Do test all interactive elements at 44px minimum touch target size on mobile to ensure accessibility for users with motor impairments.

**Don't**

• Don't use the primary green for anything other than affirmative actions; using it for warnings, errors, or secondary information dilutes its meaning and confuses users.
• Don't apply shadows deeper than 0 8px 24px rgba(0, 0, 0, 0.2) or use pure black in shadows; the dark theme requires restraint to avoid visual heaviness.
• Don't mix Mona Sans with system fonts in the same component; always use the full Mona Sans stack with system fallbacks, never serif fonts or monospace in UI text.
• Don't create rounded corners larger than 12px (lg radius) except for badges and pills; excessive rounding makes the interface feel playful and undermines technical credibility.
• Don't place text smaller than 12px on dark backgrounds without a text-shadow; small text becomes illegible and strains the eyes in extended viewing sessions.