--- version: alpha name: GitHub description: A deep navy-black developer canvas where Mona Sans sets bright-white headlines, GitHub's signature green carries the one true CTA, and a constellation of dev-accent blues, purples, and limes glow against the dark — a marketing site that reads like the IDE it serves. colors: # Surface / canvas background: "#0d1117" # the near-black navy canvas surface: "#161b22" # raised panels, code-editor chrome surface-subtle: "#21262d" # subtle muted panel fill surface-overlay: "#010409" # deepest inset (editor gutter) # Ink / text ink: "#ffffff" # bright-white headlines and primary text on dark ink-secondary: "#c9d1d9" # standard body copy on dark ink-muted: "#9198a1" # captions, secondary links, metadata on-accent: "#ffffff" # text on the green primary button # Brand accent — GitHub green primary: "#08872b" # the signature green primary CTA fill primary-hover: "#046f1f" # darker green hover primary-bright: "#5fed83" # bright lime-green accent, glow text, highlights # Dev-accent palette (the multi-color developer constellation) accent-blue: "#8dd6ff" # sky-blue accent text, secondary button text accent-blue-deep: "#036a8c" # deep cyan emphasis accent-purple: "#8957e5" # Copilot/done purple accent-purple-soft: "#8c93fb" # soft periwinkle hero tint accent-coral: "#fc5c5d" # coral eyebrow / gradient terminus accent-yellow: "#895906" # data-yellow emphasis # Borders border: "#30363d" # standard dark hairline divider, card edge border-strong: "#3d444d" # stronger panel outline border-muted: "#21262d" # faint inset border # Shadow tints (opaque approximations for the elevation table) shadow-ambient: "#010409" # was rgba(1,4,9,0.4) — Google format requires hex shadow-ring: "#d1d9e0" # was rgba(209,217,224,0.25) — contact ring on light cards typography: display-hero: fontFamily: "Mona Sans, MonaSansFallback, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 64px fontWeight: 425 lineHeight: 1.08 letterSpacing: -2.24px display: fontFamily: "Mona Sans, MonaSansFallback, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 48px fontWeight: 800 lineHeight: 1.0 letterSpacing: -1px heading: fontFamily: "Mona Sans, MonaSansFallback, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 40px fontWeight: 460 lineHeight: 1.2 letterSpacing: -1px heading-sub: fontFamily: "Mona Sans, MonaSansFallback, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.5px heading-3: fontFamily: "Mona Sans, MonaSansFallback, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0px body-large: fontFamily: "Mona Sans, MonaSansFallback, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.18px body: fontFamily: "Mona Sans, MonaSansFallback, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px button: fontFamily: "Mona Sans, MonaSansFallback, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px link: fontFamily: "Mona Sans, MonaSansFallback, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px caption: fontFamily: "Mona Sans, MonaSansFallback, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px code-mono: fontFamily: "Mona Sans Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.21px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px 4xl: 48px 5xl: 64px 6xl: 96px rounded: sm: 6px md: 8px lg: 12px xl: 16px 2xl: 24px 3xl: 60px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-accent}" typography: "{typography.button}" rounded: "{rounded.sm}" padding: 6px 28px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-accent}" button-secondary: backgroundColor: "{colors.surface-subtle}" textColor: "{colors.accent-blue}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 6px 28px button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.accent-blue}" button-outline: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.link}" rounded: "{rounded.sm}" padding: 4px 12px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" rounded: "{rounded.xl}" padding: 24px card-editor: backgroundColor: "{colors.surface-overlay}" textColor: "{colors.ink-secondary}" rounded: "{rounded.lg}" padding: 16px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 6px 12px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.button}" padding: 16px 24px link: textColor: "{colors.accent-blue}" typography: "{typography.link}" padding: 0px code-ref: backgroundColor: "{colors.surface-overlay}" textColor: "{colors.accent-blue}" typography: "{typography.code-mono}" rounded: "{rounded.sm}" padding: 2px 6px badge-done: backgroundColor: "{colors.surface-subtle}" textColor: "{colors.accent-purple}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px --- # GitHub Design System ## Overview GitHub's marketing site is the rare case where the brand site and the product look like they were drawn by the same hand. The canvas is a deep navy-black (`{colors.background}`) — not a flat black, but the exact dark-mode `#0d1117` GitHub developers stare at all day — so the homepage reads as a continuation of the editor rather than a glossy sales page. Bright white (`{colors.ink}`) headlines sit on it with maximum contrast, and the whole composition leans on glow: soft radial light, gradient halos, and a constellation of dev-accent colors that flicker against the dark like syntax highlighting come to life. The typographic signature is **Mona Sans**, GitHub's own variable typeface. The marquee headline runs at `{typography.display-hero}` — 64px, an unusual variable weight around 425, with aggressive negative tracking pulled to -2.24px so the words sit dense and architectural. Mona Sans is wide, slightly geometric, and engineered to flex across weights, which GitHub exploits openly: display copy ranges from a light 425 to a heavy 800 within the same family. Code blocks and inline references switch to **Mona Sans Mono / ui-monospace** — because on a site about code, the monospace is part of the brand voice, not an afterthought. The color discipline is what separates GitHub from a generic dark SaaS page. There is exactly one workhorse CTA color: GitHub **green** (`{colors.primary}`), the "Sign up" button. Everything else — the sky blues (`{colors.accent-blue}`), the Copilot purple (`{colors.accent-purple}`), the lime highlights (`{colors.primary-bright}`), the coral eyebrow gradients (`{colors.accent-coral}`) — is an accent constellation used for glow, gradient text, and category coding, never for primary action. Cards float as raised dark panels (`{colors.surface}`) with hairline borders (`{colors.border}`), and the hero centers on a literal embedded code editor, the deepest surface on the page. The overall impression is technical, confident, and quietly futuristic — a dark room lit by the work itself. **Key Characteristics:** - Deep navy-black canvas (`{colors.background}`, `#0d1117`) — the literal dark-mode editor color, dark-first by default - Bright-white headlines (`{colors.ink}`) for maximum contrast against the dark - **Mona Sans** variable typeface across display and body, exploiting a wide weight range (425–800) - Aggressive negative tracking on display type (`{typography.display-hero}` at -2.24px) — dense, architectural headlines - **Mona Sans Mono / ui-monospace** for code blocks and inline refs — monospace is part of the brand voice - Exactly one workhorse CTA color: GitHub **green** (`{colors.primary}`) — the "Sign up" button - A dev-accent constellation (blue, purple, lime, coral) used for glow, gradient text, and category coding — never primary action - Glow-and-gradient aesthetic: radial light halos, gradient text, soft luminance against the dark - Raised dark panels (`{colors.surface}`) with hairline borders (`{colors.border}`) and a literal embedded code editor as hero - Compact 6px button radius (`{rounded.sm}`) alongside dramatically large 60px (`{rounded.3xl}`) panel corners - Layered, soft drop shadows on light cards; the dark page leans on borders and glow over shadow ## Colors ### Surface & Canvas - **Navy-Black** (`{colors.background}`): The dominant canvas — GitHub's signature dark-mode `#0d1117`. - **Raised Panel** (`{colors.surface}`): Lifted dark cards and the code-editor chrome. - **Subtle Panel** (`{colors.surface-subtle}`): Muted panel fill and secondary-button backgrounds. - **Deepest Inset** (`{colors.surface-overlay}`): The darkest surface — code-editor gutter and inset wells. ### Ink / Text - **White** (`{colors.ink}`): Headlines and primary text — maximum contrast on the dark. - **Light Slate** (`{colors.ink-secondary}`): Standard body copy on dark. - **Muted Slate** (`{colors.ink-muted}`): Captions, secondary links, metadata. ### Brand Accent - **GitHub Green** (`{colors.primary}`): The single workhorse CTA fill — the "Sign up" button. Hover deepens to `{colors.primary-hover}`. - **Bright Lime** (`{colors.primary-bright}`): Glow text, highlights, and bright-green accent moments. ### Dev-Accent Constellation - **Sky Blue** (`{colors.accent-blue}`): Accent text and secondary-button labels; **Deep Cyan** (`{colors.accent-blue-deep}`) for emphasis. - **Copilot Purple** (`{colors.accent-purple}`) / **Periwinkle** (`{colors.accent-purple-soft}`): "Done"/Copilot states and soft hero tints. - **Coral** (`{colors.accent-coral}`) / **Data Yellow** (`{colors.accent-yellow}`): Gradient termini and category-coded emphasis. ### Borders & Shadow Tints - **Hairline** (`{colors.border}`): Card edges and dividers — the primary structural device on the dark. - **Strong / Muted Border** (`{colors.border-strong}`, `{colors.border-muted}`): Stronger panel outlines and faint insets. - **Shadow Tints** (`{colors.shadow-ambient}`, `{colors.shadow-ring}`): Opaque stand-ins for the layered shadow + contact ring (originals were rgba — flattened for the Google spec). ## Typography ### Font Family - **Primary**: `Mona Sans` (GitHub's variable typeface) with `MonaSansFallback` and system fallbacks — wide, geometric, engineered to flex across weights. - **Monospace**: `Mona Sans Mono`, falling back to `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace` — for code blocks and inline references. - **OpenType / tracking**: heavy negative tracking on display sizes (-2.24px at 64px); variable weights span 425–800; code/mono uses a hint of positive tracking (0.21px). ### Hierarchy The full type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 64px / 425 / -2.24px — the marquee headline | | `display` | 48px / 800 — heavy display statements | | `heading` | 40px / 460 — section titles | | `heading-sub` | 32px / 600 — sub-section headings | | `heading-3` | 24px / 600 — feature headings | | `body-large` | 18px / 400 — lead paragraphs | | `body` | 16px / 400 — standard body and inputs | | `button` | 16px / 500 — button labels | | `link` | 14px / 400 — inline and nav links | | `caption` | 12px / 500 — metadata, badge text | | `code-mono` | 14px / 400 — **Mona Sans Mono** code blocks and inline refs | ### Principles - **Exploit the variable weights**: Mona Sans is built to flex — use a light 425 for the big hero and heavy 800 for punchy statements, within one family. - **Tighten the big**: aggressive negative tracking on display sizes (-2.24px at 64px); near-zero on body. - **Mono is brand voice**: on a site about code, set code blocks and inline refs in Mona Sans Mono — it's a signature, not just a code style. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: 8px, with heavy use of 16px and 24px. Generous vertical rhythm (`{spacing.6xl}` = 96px) separates major marketing sections; panel internals stay compact (`{spacing.lg}`–`{spacing.2xl}`). ### Grid & Container - Max content width: ~1280px, centered - Common pattern: a centered hero (headline + email-capture + green CTA) above a wide embedded code-editor panel - Feature sections use multi-column dark panels, often category-coded with the dev-accent constellation ### Whitespace Philosophy - **Dark room, lit work**: the canvas recedes; glow and accent color draw the eye to the content - **Panels over open space**: content lives in raised dark panels with hairline edges rather than floating on the canvas - **The editor is the hero**: the embedded code surface carries the most visual weight on the page ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, hairline `{colors.border}` only | Most dark panels, section content | | Inset (Level 1) | `0 1px 0 0 inset` at faint ink | Subtle top-edge containment on buttons | | Glow (Level 2) | Radial gradient halo + faint ring | Hero light, accent emphasis on the dark | | Elevated (Level 3) | `0 0 0 1px` ring + `0 6px 12px -3px` + `0 6px 18px` (`{colors.shadow-ambient}`) | Floating cards, popovers, the code editor | | Dramatic (Level 4) | `0 40px 80px` deep ambient (`{colors.shadow-ambient}`) | The most-lifted hero panel | **Shadow Philosophy**: On the dark canvas GitHub leans on **glow and borders** more than drop shadows — radial light halos and hairline edges (`{colors.border}`) do most of the depth work. Where real shadow appears (popovers, the editor panel) it is layered: a contact ring plus a soft mid-shadow plus a wide ambient cast (`{colors.shadow-ambient}`). On the occasional light card, a 1px contact ring (`{colors.shadow-ring}`) plus soft drops keeps it crisp. Depth is spent on the editor and floating UI, never scattered across the page. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `sm` | 6px | Buttons — the default interactive radius | | `md` | 8px | Secondary buttons, small containers | | `lg` | 12px | Code-editor panels, mid containers | | `xl` | 16px | Cards | | `2xl` | 24px | Large panels, top-rounded section caps | | `3xl` | 60px | Dramatic oversized rounded section corners | | `pill` | 9999px | Badges, status pills, avatars | GitHub's radius system is bimodal: tight and functional on interactive elements (6px buttons, 12px panels) but dramatically large (60px, `{rounded.3xl}`) on big decorative section corners. The contrast — precise UI radii against sweeping panel curves — keeps the system feeling both engineered and modern. ## Components The complete component spec lives in the `components:` token block. ### Buttons - **`button-primary`** — GitHub green (`{colors.primary}`) fill, white text, 6px radius. The single workhorse CTA ("Sign up for GitHub"). Hover deepens to `{colors.primary-hover}`. - **`button-secondary`** — Subtle dark panel fill, sky-blue (`{colors.accent-blue}`) text, 8px radius. The "Try GitHub Copilot" pattern. - **`button-outline`** — Transparent on the canvas, white text, hairline outline, compact. The header "Sign up". ### Cards - **`card`** / **`card-editor`** — Raised dark panels (`{colors.surface}`) with hairline edges; the editor variant uses the deepest surface (`{colors.surface-overlay}`) at 12px radius. ### Inputs - **`input`** — Dark fill, white text, hairline edge, 6px radius. **`input-focus`** crisps the border — depth comes from a glow, not a loud ring. ### Navigation - **`nav-bar`** — Transparent over the canvas, light-slate labels, white CTA. Sits flush at the top. ### Accent & Code - **`link`** — Sky-blue text on dark. **`code-ref`** — inline mono chip on the deepest surface, sky-blue text, 6px radius. - **`badge-done`** — Subtle dark fill, Copilot-purple text, pill radius — the "done"/status marker. ## Do's and Don'ts ### Do - Keep the canvas the deep navy-black (`{colors.background}`, `#0d1117`) — the literal dark-mode editor color - Set headlines bright white (`{colors.ink}`) in **Mona Sans** with aggressive negative tracking (`{typography.display-hero}`, -2.24px) - Use GitHub green (`{colors.primary}`) as the single workhorse CTA — the "Sign up" button only - Treat the dev-accent palette (blue, purple, lime, coral) as a constellation for glow, gradient text, and category coding - Set code blocks and inline refs in **Mona Sans Mono** (`{typography.code-mono}`) — monospace is brand voice - Build depth with glow and hairline borders (`{colors.border}`) first; reserve layered shadow for the editor and popovers - Exploit Mona Sans's variable weights — light 425 for the hero, heavy 800 for punch - Keep button radius compact at `{rounded.sm}` (6px); save the big 60px (`{rounded.3xl}`) for decorative panel corners ### Don't - Don't lighten the canvas to a flat black or a gray — it's the specific navy `#0d1117` - Don't make any dev-accent the primary button — only GitHub green (`{colors.primary}`) carries primary action - Don't scatter the accent colors as fills everywhere — they're glow and coding, not surfaces - Don't set code in the sans — code belongs in Mona Sans Mono - Don't loosen display tracking to 0 or positive — large type stays compressed (-2.24px) - Don't drown the page in drop shadows — borders and glow are the default depth device - Don't introduce a light marketing theme — GitHub's homepage is committedly dark --- ## Responsive Behavior ### Breakpoints *(No explicit named breakpoints surfaced; the values below are the standard stops the site behaves to.)* | Name | Width | Key Changes | |---|---|---| | Mobile | <640px | Single column; hero scales 64px → ~36px; nav collapses to a menu; the editor panel goes full-width and scrolls horizontally | | Tablet | 640–1011px | Two-column feature panels begin; editor sits at reduced width | | Desktop | 1012–1279px | Full layout; centered hero above the wide editor | | Large | ≥1280px | Max ~1280px container, centered; generous section padding (`{spacing.6xl}`) | ### Touch Targets - Buttons run comfortably tall with `6px 28px` padding; nav and pill targets keep generous spacing - Code-editor panels become scroll regions rather than shrinking text below legibility ### Collapsing Strategy - **Navigation**: full horizontal nav → menu toggle on mobile; the green CTA persists - **Hero**: headline scales down while keeping proportional negative tracking; email-capture and CTA stack - **Editor**: the embedded code surface goes full-width and scrolls horizontally rather than reflowing code - **Spacing**: section padding compresses from ~96px toward ~48px ### Image Behavior - The "images" are largely live UI (the code editor, product panels) that reflow as flex/grid children; gradient/glow backgrounds scale with their containers --- ## Agent Prompt Guide ### Quick Color Reference - Background: Navy-Black (`{colors.background}`, `#0d1117`) - Text: White (`{colors.ink}`) - Brand accent / CTA: GitHub Green (`{colors.primary}`) - Secondary text: Light Slate (`{colors.ink-secondary}`) - Border: Hairline (`{colors.border}`) - Dev accents: Sky Blue (`{colors.accent-blue}`), Copilot Purple (`{colors.accent-purple}`), Lime (`{colors.primary-bright}`) ### Example Component Prompts - "Create a centered hero on navy-black (`{colors.background}`, `#0d1117`) with a 64px bright-white (`{colors.ink}`) headline in Mona Sans, letter-spacing -2.24px, a soft radial glow behind it, an email-capture input, and a green primary button (`{colors.primary}` fill, white text, `{rounded.sm}` radius, `6px 28px` padding)" - "Build a secondary button: subtle dark panel (`{colors.surface-subtle}`) fill, sky-blue (`{colors.accent-blue}`) text, `{rounded.md}` radius — the 'Try GitHub Copilot' pattern" - "Render an embedded code editor: deepest surface (`{colors.surface-overlay}`) fill, `{rounded.lg}` radius, hairline (`{colors.border}`) edge, code set in Mona Sans Mono (`{typography.code-mono}`) with sky-blue and purple syntax accents" - "Create a raised feature card: dark panel (`{colors.surface}`) fill, hairline (`{colors.border}`) edge, `{rounded.xl}` radius, `{spacing.2xl}` padding, white heading + light-slate body" - "Design an input: dark (`{colors.background}`) fill, white text, hairline (`{colors.border}`) edge, `{rounded.sm}` radius; on focus crisp the border — lean on a glow, not a loud ring" - "Build a status pill: subtle dark (`{colors.surface-subtle}`) fill, Copilot-purple (`{colors.accent-purple}`) text, `{rounded.pill}` radius, `4px 10px` padding" ### Iteration Guide 1. Start on the deep navy-black (`{colors.background}`, `#0d1117`). If you reached for flat black or gray, correct it — it's the specific editor navy. 2. GitHub green (`{colors.primary}`) is the only primary-action color. If a dev-accent is filling your CTA, recolor it green. 3. Headlines are bright-white Mona Sans with heavy negative tracking (-2.24px at hero size) — verify before moving on. 4. Treat the dev-accent palette as glow and category coding, not surfaces — use them in gradient text and highlights. 5. Set any code in Mona Sans Mono (`{typography.code-mono}`) — code is brand voice here. 6. Build depth with glow + hairline borders first; reserve layered shadow (`{colors.shadow-ambient}`) for the editor and popovers. 7. Keep button radius tight (`{rounded.sm}`, 6px); save the dramatic 60px (`{rounded.3xl}`) for big decorative panel corners. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by GitHub. Brand names and trademarks belong to their respective owners.