GitHub Design System

GitHub's marketing canvas is a developer-console aesthetic translated into magazine restraint. The page floor is "#0d1117" — the canonical dark-mode surface that ships inside the product itself — with full-bleed "#000000" bands cutting in for hero openers and the Copilot CTA region. Body and headline ink hold "#ffffff" against the dark; the single load-bearing chromatic token is an arctic pale-blue "#8dd6ff" that lights every link rest, hero pill stroke, and Copilot CTA label across the page. Where most developer platforms reach for a brand purple or electric green as primary voltage, GitHub keeps the link blue dominant and reserves "#5fed83" for activity-glow gradients only — never for buttons. The hero atmosphere is a purple-to-indigo radial ("#9350ff", "#5049c2", "#7873cb", "#0e0aa2") sitting behind the Copilot IDE mockup, a single glow event rather than a system-wide gradient language.

This page packages the surface into one DESIGN.md file written to the Google Labs spec. Inside: 21 color tokens grouped into canvas, surface ladder, ink, link/accent, success/danger, and the indigo atmospherics; 12 typography levels covering Mona Sans variable-weight display from 64px down to 12px caption plus ui-monospace for code-tab labels; a 7-step rounded scale running 6px / 8px / 12px / 16px / 24px / 48px / 60px-pill / circle; a 9-step spacing scale anchored at the 4px base unit and topping out at the 96px section rhythm; and 19 component definitions covering the dark top-nav, search field, primary and secondary buttons, the pill segmented switcher, code-tab IDE surface, customer-story card, Copilot prompt card, workflow-runs table, and the customer logo strip.

Feed the file to Claude, Cursor, or Copilot and the agent reproduces GitHub's restraint — single arctic-link-blue voltage, dual-canvas band switching, weight-460 h2 instead of bold display, pill-radius segmented controls, two greens with split duty between glow and button — rather than a generic dark-mode dev landing with a glowing brand-purple CTA. Or reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config, CSS variables, or a shadcn theme registry. GitHub is worth studying because it threads a hard needle: a console-feeling surface that still reads as a magazine page, with no chromatic CTA, no atmospheric gradient outside one Copilot moment, and a display ramp that hovers between weights 425 and 480 — never bold, never timid, always sitting in the variable-axis micro-band that Mona Sans was designed for.