---
title: "GitHub design system"
variant: extended
source: https://github.com/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/github-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# GitHub · Design System

> A dark canvas for bold developer stories

**Theme:** dark · **Industry:** devtools · **Source:** https://github.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

GitHub pairs a near-black, spacious canvas with vivid violet and blue atmospheric glows to foreground its developer tools. Crisp typography, fine dividers, product-interface imagery, and modular content panels carry the story from platform features to customer proof and a structured footer.

## North star

Keep the interface nearly black and quiet, reserving luminous gradients and accent colors for product storytelling and clear actions.

## Overview

The page is anchored by a near-black canvas, with deep navy-violet gradients concentrated behind hero and product media rather than used as flat brand fills. White headings and muted gray supporting copy create a high-contrast reading hierarchy; pale blue links and restrained green signup actions provide precise points of emphasis. Mona Sans supplies the clean, contemporary voice, with measured headings set firmly and body copy kept open and readable. Content alternates between centered introductions and broad two-column or multi-column modules, using thin charcoal dividers to organize long stretches of dark space. Product screenshots and interface mockups sit inside softly rounded frames, while atmospheric purple-blue light gives them depth without adding heavy card chrome. Generous section breathing room lets each feature story stand independently, then compact footer columns restore navigation density.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#000000` | `--color-midnight-canvas` | brand | Primary page background and broad dark section bands. |
| Bright Paper | `#ffffff` | `--color-bright-paper` | neutral | Headings, navigation, primary button text, and high-contrast labels. |
| GitHub Charcoal | `#0d1117` | `--color-github-charcoal` | surface | Dark surface used in the measured footer and interface-like areas. |
| Soft Sage | `#a4aea6` | `--color-soft-sage` | neutral | Muted body copy and secondary navigation text. |
| Glacier Link | `#a2daff` | `--color-glacier-link` | accent | Link text and select cool-toned emphasis. |
| Divider Slate | `#21262d` | `--color-divider-slate` | semantic | Fine section, card, and interface borders. |
| Action Green | `#08872b` | `--color-action-green` | accent | Signup and newsletter subscribe button backgrounds. |
| Deep Graphite | `#0f0f0f` | `--color-deep-graphite` | surface | Dark secondary surfaces and button-area backgrounds. |
| Quiet Silver | `#d9d9d9` | `--color-quiet-silver` | neutral | Secondary light text detected in small supporting copy. |
| Violet Night | `#000240` | `--color-violet-night` | accent | Gradient stop within atmospheric section lighting, not a general surface color. |
| Forest Black | `#0f1511` | `--color-forest-black` | surface | Measured footer surface with a subtle green cast. |
| Border Graphite | `#1a1a1a` | `--color-border-graphite` | semantic | Subtle borders around cards and sections. |
| Panel Gray | `#333333` | `--color-panel-gray` | surface | Surface detected in product mockup cards, not the primary page canvas. |
| Button Charcoal | `#262626` | `--color-button-charcoal` | surface | Small dark button and interface details. |
| Muted Steel | `#999999` | `--color-muted-steel` | neutral | Low-emphasis interface details and secondary outlines. |
| Blue Black | `#151a22` | `--color-blue-black` | surface | Dark media-area surface detected behind product content. |
| Lilac Glow | `#e6b7fe` | `--color-lilac-glow` | accent | Violet-pink gradient highlight appearing in atmospheric product imagery. |

### Semantic aliases

`--color-canvas` → `#000000` (Midnight Canvas) · `--color-surface` → `#0d1117` (GitHub Charcoal) · `--color-surface-2` → `#0f0f0f` (Deep Graphite) · `--color-surface-3` → `#0f1511` (Forest Black) · `--color-surface-4` → `#333333` (Panel Gray) · `--color-text` → `#ffffff` (Bright Paper) · `--color-text-muted` → `#a4aea6` (Soft Sage) · `--color-text-subtle` → `#a2daff` (Glacier Link) · `--color-border` → `#21262d` (Divider Slate) · `--color-accent` → `#a2daff` (Glacier Link) · `--color-accent-2` → `#08872b` (Action Green) · `--color-accent-3` → `#e6b7fe` (Lilac Glow) · `--color-on-accent` → `#ffffff` (Bright Paper)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#0d1117` | 18.92:1 | AAA |
| `#ffffff` | `#0f0f0f` | 19.17:1 | AAA |
| `#ffffff` | `#0f1511` | 18.49:1 | AAA |
| `#a4aea6` | `#000000` | 9.18:1 | AAA |
| `#a4aea6` | `#0d1117` | 8.28:1 | AAA |
| `#a4aea6` | `#0f0f0f` | 8.38:1 | AAA |
| `#a4aea6` | `#0f1511` | 8.09:1 | AAA |
| `#a2daff` | `#000000` | 14.01:1 | AAA |
| `#a2daff` | `#0d1117` | 12.62:1 | AAA |

### Gradients

- `linear-gradient(rgb(0, 2, 64), rgba(0, 0, 0, 0))`
- `radial-gradient(circle at 0px 100%, rgb(230, 183, 254) 10%, rgb(80, 73, 194) 20%, rgba(87, 78, 255, 0) 60%)`
- `linear-gradient(rgb(0, 2, 64), rgb(0, 0, 0) 117%)`
- `linear-gradient(rgba(255, 255, 255, 0) -8.14%, rgba(255, 255, 255, 0.1) 62.09%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Mona Sans | `--font-body` | webfont | 400, 500, 425, 480, 460, 600, 440, 800 | Main display and interface sans for headings, body, buttons, and navigation. | Inter |
| Mona Sans VF | `--font-display` | system | 400, 600 | Supporting headings, captions, links, and interface text. | Inter |
| Mona Sans Mono | `--font-mono` | webfont | 500, 480, 400 | Compact code-like labels and technical metadata. | Space Mono |

- **Mona Sans:** Use clean sans-serif forms; headings are prominent, body remains open, and button or nav labels use modest tracking.
- **Mona Sans VF:** Variable sans styling supports clear hierarchy; use restrained weights and normal casing.
- **Mona Sans Mono:** Monospaced technical accents; measured code role is uppercase and compact.

### Type scale — Perfect Fourth (ratio ≈ 1.305, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 460 | 1.2 | 0 | — | Mona Sans | Primary hero or feature headline. |
| h2 | 24px | 600 | 1.5 | 0 | — | Mona Sans VF | Section titles and prominent content headings. |
| h3 | 22px | 400 | 1.4 | 0 | — | Mona Sans | Supporting feature and customer-story headings. |
| body | 18px | 400 | 1.5 | 0.01em | — | Mona Sans | Explanatory copy beneath headings and within feature panels. |
| caption | 14px | 400 | 1.5 | 0 | — | Mona Sans VF | Small labels, footnotes, and image or interface captions. |
| button | 16px | 500 | 1.5 | 0.015em | — | Mona Sans | Signup, subscribe, and other action labels. |
| nav | 14px | 500 | 1.5 | 0.015em | — | Mona Sans | Header navigation and compact menu labels. |
| link | 14px | 400 | 1.5 | 0 | — | Mona Sans VF | Inline feature links and customer-story actions. |
| code | 12px | 500 | 1.5 | 0 | uppercase | Mona Sans Mono | Compact technical labels or code-oriented metadata. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 8, 12, 16, 20, 24, 32, 40, 44, 48, 64, 96 px.
- Section rhythm 96px · element gap 12px · card padding 8px · max content width 1280px.

Use a spacious centered content frame with a measured maximum width of 1280px and a measured base spacing unit of 8px. The page moves between centered feature introductions, wide media-led sections, and two- or four-column content and footer layouts. Keep section transitions generous, with a measured section gap of 96px, while content-level spacing stays tighter. Thin borders define card and column edges without enclosing every text group. The visual density is low across feature stories and higher in the footer link columns.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `16px` · media `16px` · nav `4px` · xs `6px` · sm `8px` · md `16px` · lg `24px` · pill `9999px`
- Shadow `inset` (nav): `rgb(25, 31, 27) 0px -1px 0px 0px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The design is mostly flat, relying on charcoal hairlines and dark panel boundaries rather than strong drop shadows. Rounded media frames and overlapping product mockups create depth, while the purple-blue glow provides the most visible elevation. Keep navigation and content surfaces restrained; a subtle inset treatment is measured in the navigation.

## Imagery

Favor product UI mockups, code and dashboard screenshots, customer marks, and occasional Octocat or character illustrations over conventional photography. Frame media in dark, rounded panels and let soft violet, blue, and lilac glows bloom behind it. Keep the surrounding page black so each interface image reads as a luminous focal point; treat screenshot colors as content, not as a replacement for the brand palette.

## Components

### Top navigation

Compact horizontal header with GitHub mark, white navigation links, search, sign-in, and signup controls against the dark canvas.

### Signup action

Green (#08872b) action with white text; the measured signup button has a compact rounded treatment.

### Feature link

Pale blue (#a2daff) text link used for product exploration and customer-story actions.

### Product media panel

Dark framed interface imagery with rounded corners, fine charcoal edges, and atmospheric purple-blue light behind the media.

### Feature split

Alternating text and product media in broad columns, separated from adjacent stories by thin dark rules.

### Footer newsletter

Newsletter heading and supporting copy above a green subscribe button, followed by dense multi-column site links.

### Measured component styles

- **Primary button** (“Sign up for GitHub”): background #08872b · text #ffffff · border 1px solid · radius 6px · padding 6px 20px · 400 14px Mona Sans
- **Secondary button** (“Code”): transparent background · text #ffffff · border 1px solid · radius 60px · padding 8px 16px · 400 14px Mona Sans VF
- **Link** (“Explore GitHub Copilot”): transparent background · text #a2daff · radius 0px · padding 0px 0px 2.1px 0px · 400 14px Mona Sans VF
- **Input**: transparent background · text #000000 · radius 8px · padding 18px 12px 0px 18px · 400 16px Mona Sans
- **Card** (“A Copilot chat window with the 'Ask' mod”): background #333333 · text #ffffff · border 1px solid #1a1a1a · radius 24px · padding 8px · 400 14px Mona Sans VF
- **Navigation item** (“Platform Solutions Resources Open Source”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Mona Sans VF

## Do

- Use near-black as the dominant page canvas.
- Reserve violet-blue gradients for hero and product media backgrounds.
- Use white for key headings and navigation.
- Apply pale blue to text links and selective emphasis.
- Use green for clear signup and subscribe actions.
- Separate long content with fine charcoal dividers.
- Give feature sections generous breathing room.

## Don't

- Do not turn gradient colors into broad flat section fills.
- Do not use bright accents for ordinary body copy.
- Do not frame every text block as a card.
- Do not add heavy shadows to otherwise flat content.
- Do not let product screenshots dictate the overall palette.
- Do not compress feature sections into a dense dashboard layout.

## Agent prompt

Build a new page in GitHub’s developer-platform visual style. Use Midnight Canvas (#000000) as the main background, with GitHub Charcoal (#0d1117) and Forest Black (#0f1511) only for measured dark surfaces. Set clear white headings and navigation, Soft Sage (#a4aea6) for secondary copy, and Glacier Link (#a2daff) for links. Use Action Green (#08872b) sparingly for primary actions. Place violet and lilac glow gradients behind product screenshots, not as broad solid fills. Use Mona Sans or a close sans-serif substitute, a centered wide content frame, generous section spacing, thin Divider Slate (#21262d) rules, and softly rounded media panels. Alternate centered introductions with modular feature splits; keep ordinary text areas mostly unboxed and the footer more compact.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | cta | Centered headline and form area across two columns, set against a dark canvas with a soft violet glow. | Email signup form, Primary signup action | Dark canvas, Purple-blue atmospheric glow, Centered heading |
| 2 | footer | Four-column link directory with newsletter content at the top and compact utility links along the bottom. | Newsletter subscription, Grouped site navigation | Near-black green-tinted surface, Fine green top rule, Compact multi-column links |

## Source CSS custom properties (selected)

```css
--base-duration-0: 0s;
--base-duration-100: .1s;
--base-duration-1000: 1s;
--base-duration-200: .2s;
--base-duration-300: .3s;
--base-duration-400: .4s;
--base-duration-50: 50ms;
--base-duration-500: .5s;
--base-duration-600: .6s;
--base-duration-700: .7s;
--base-duration-800: .8s;
--base-duration-900: .9s;
--base-easing-ease: cubic-bezier(.25, .1, .25, 1);
--base-easing-easeIn: cubic-bezier(.7, .1, .75, .9);
--base-easing-easeInOut: cubic-bezier(.6, 0, .2, 1);
--base-easing-easeOut: cubic-bezier(.3, .8, .6, 1);
--base-text-lineHeight-loose: 1.75;
--base-text-lineHeight-normal: 1.5;
--base-text-lineHeight-relaxed: 1.625;
--base-text-lineHeight-snug: 1.375;
--base-text-lineHeight-tight: 1.25;
--base-text-size-2xl: 2.5rem;
--base-text-size-lg: 1.25rem;
--base-text-size-md: 1rem;
--base-text-size-sm: .875rem;
--base-text-size-xl: 2rem;
--base-text-size-xs: .75rem;
--base-text-weight-light: 300;
--base-text-weight-medium: 500;
--base-text-weight-normal: 400;
--base-text-weight-semibold: 600;
--motion-duration-long: .5s;
--motion-duration-medium: .3s;
--motion-duration-micro: .1s;
--motion-duration-short: .2s;
--borderWidth-thick: .125rem;
--borderWidth-thicker: .25rem;
--borderWidth-thin: .0625rem;
--borderWidth-default: .0625rem;
--boxShadow-thick: inset 0 0 0 .125rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/github-com