---
name: github-design-reference
provider: DesignSkill (https://designskill.dev)
reference: github.com
source_url: https://github.com/
tool: designskill-extract/3.2.0
extracted_at: 2026-07-27T08:31:05.544Z
mode: full-render
classification: reference_only
---

# GitHub — Design Reference (measured)

Measured design tokens extracted from `https://github.com/` by designskill-extract/3.2.0.
Every value below was observed in the live page (×N = observation count). Values not listed were **not observed** — do not invent them.
This document is `reference_only`: an analysis of a third-party site, not a license to its brand assets.

## Overview

- Extraction mode: **full-render** (viewports 390/768/1440px × light/dark), 1 page(s), 503 observation records.
- Primary action color observed as `#197935` (basis: declared, confidence 0.85).
- Dominant font family: **Mona Sans** (×874; secondary Mona Sans Mono ×72).
- Type scale observed at 8 sizes from 14px to 40px.
- Corner radius values in use: 6px, 60px, 16px, 8px….
- Not observed in this extraction: cards, badges, elevation.

## Colors

### Role Tokens

Semantic roles inferred from observed usage. `basis` tells how the role was established (declared CSS var > cross-validated > inferred).

| Token | Value | Basis | Confidence | Observed |
|---|---|---|---|---|
| `{color.primary}` | `#197935` | declared | 0.85 | ×0 — --button-primary-bgColor-active |
| `{color.background}` | `#0d1117` | cross-validated | 0.94 | ×378 |
| `{color.ink}` | `#ffffff` | cross-validated | 0.94 | ×563 |
| `{color.muted}` | `#dae0e7` | declared | 0.9 | ×0 — --avatarStack-fade-bgColor-muted |
| `{color.surface}` | `#393f46` | inferred | 0.7 | ×40 |
| `{color.accent}` | `#0969da` | declared | 0.9 | ×15 — --bgColor-accent-emphasis |

### Observed Palette

Full measured palette ordered by usage share. `Used in` lists the CSS properties the color appeared on.

| Hex | Share | Used in | Observed |
|---|---|---|---|
| `#ffffff` | 27.1% | --avatar-bgcolor, color, border-color, custom-property | ×563 (cross-validated, 0.94) |
| `#a4aea6` | 13.9% | color | ×288 (observed, 0.78) |
| `#0d1117` | 18.2% | background-color, --bgcolor-transparent, --shadow-resting-small | ×378 (cross-validated, 0.94) |
| `#8dd6ff` | 6.1% | color | ×126 (observed, 0.77) |
| `#ffffff` | 4.4% | background-color, border-color | ×92 (observed, 0.77) |
| `#25292e` | 3.0% | --shadow-floating-medium, custom-property, --shadow-resting-small | ×62 (inferred, 0.61) |
| `#ffffff` | 1.8% | color, border-color | ×38 (observed, 0.75) |
| `#191f1b` | 1.7% | border-color | ×36 (observed, 0.75) |
| `#d1d9e0` | 2.2% | --color-prettylights-syntax-markup-ignored-text, custom-property, border-color, --avatarstack-fade-bgcolor-muted, --avatarstack-fade-bgcolor-default | ×45 (cross-validated, 0.91) |
| `#08872b` | 0.9% | background-color | ×18 (observed, 0.74) |
| `#484f58` | 0.9% | border-color | ×18 (observed, 0.74) |
| `#818b98` | 0.7% | --color-ansi-white-bright, custom-property, border-color | ×15 (cross-validated, 0.89) |
| `#59636e` | 0.9% | --bordercolor-neutral-emphasis, custom-property, --bordercolor-disabled | ×18 (inferred, 0.59) |
| `#eff2f5` | 1.5% | --buttonkeybindinghint-default-bgcolor-rest, custom-property, --data-gray-color-muted, --button-outline-bgcolor-rest | ×31 (inferred, 0.6) |
| `#393f46` | 1.9% | --color-ansi-black-bright, border-color, background-color, --bgcolor-neutral-emphasis, --avatarstack-fade-bgcolor-default | ×40 (cross-validated, 0.9) |
| `#f2e9e9` | 0.6% | --data-auburn-color-muted | ×12 (inferred, 0.59) |

## Typography

### Font Families

| Family | Observed |
|---|---|
| `Mona Sans` | ×874 |
| `Mona Sans Mono` | ×72 |
| `Mona Sans VF` | ×22 |

Use **Mona Sans** as the default family — it accounts for the overwhelming majority of observed text nodes.

### Type Scale

| Token | Size | Observed |
|---|---|---|
| `{type.display}` | 40px | ×30 |
| `{type.h1}` | 32px | ×20 |
| `{type.h2}` | 24px | ×18 |
| `{type.h3}` | 22px | ×42 |
| `{type.body-lg}` | 20px | ×72 |
| `{type.body}` | 18px | ×222 |
| `{type.body-sm}` | 16px | ×190 |
| `{type.caption}` | 14px | ×364 |

The most frequently observed size is **14px** (×364) — treat it as the default body size.

## Spacing

| Value | Observed |
|---|---|
| `4px` | ×236 |
| `24px` | ×184 |
| `8px` | ×172 |
| `12px` | ×143 |
| `16px` | ×119 |
| `64px` | ×116 |
| `32px` | ×89 |
| `20px` | ×64 |
| `6px` | ×48 |
| `48px` | ×32 |
| `2px` | ×32 |
| `96px` | ×30 |

## Shape (Border Radius)

| Value | Observed |
|---|---|
| `6px` | ×78 |
| `60px` | ×58 |
| `16px` | ×54 |
| `8px` | ×36 |
| `24px` | ×30 |
| `12px` | ×17 |
| `48px` | ×6 |

## Motion

| Duration | Observed |
|---|---|
| `0.2s` | ×110 |
| `0.3s` | ×34 |
| `0.8s` | ×34 |
| `0.5s` | ×22 |
| `0.08s` | ×18 |

## Components

Measured computed styles of representative components (desktop viewport).

| Component | Measured spec | Samples |
|---|---|---|
| button.primary | bg `#08872b` · text `#ffffff` · radius `6px` · padding `6px 20px` · font `16px/400` | ×3 |
| button.outline | text `#ffffff` · border `1px solid rgba(0, 0, 0, 0)` · radius `60px` · padding `8px 16px` · font `16px` | ×8 |
| form.input | bg `#000000` · text `#000000` · border `0px solid rgb(0, 0, 0)` · radius `8px` · padding `18px 12px 0px 18px` · height `41` | ×2 |
| nav | height `72px` · position `absolute` · link `#ffffff` | — |

### Hero Gradient (observed)

```css
background-image: linear-gradient(rgb(0, 2, 64), rgba(0, 0, 0, 0));
```

### Interaction States (observed)

| State | Property | From | To |
|---|---|---|---|
| focus | outline-width | `3px` | `2px` |
| focus | outline-width | `3px` | `2px` |
| focus | outline-width | `3px` | `2px` |

## Accessibility (WCAG Contrast)

| FG | BG | Ratio | AA | Source |
|---|---|---|---|---|
| `#ffffff` | `#0f1511` | 18.49 | pass | observed ×120 |
| `#ffffff` | `#000000` | 21 | pass | observed ×119 |
| `#a4aea6` | `#000000` | 9.18 | pass | observed ×93 |
| `#8dd6ff` | `#000000` | 13.2 | pass | observed ×63 |
| `#a4aea6` | `#0f1511` | 8.09 | pass | observed ×51 |
| `#ffffff` | `#0d1117` | 18.92 | pass | observed ×14 |
| `#ffffff` | `#08872b` | 4.66 | pass | observed ×9 |
| `#24292f` | `#000000` | 1.43 | fail | observed ×6 |
| `#7c8980` | `#000000` | 5.75 | pass | observed ×6 |
| `#ffffff` | `#1f6feb` | 4.63 | pass | observed ×3 |
| `#ffffff` | `#0d1117` | 18.92 | pass | ink_on_background |
| `#ffffff` | `#197935` | 5.49 | pass | white_on_primary |
| `#dae0e7` | `#0d1117` | 14.24 | pass | muted_on_background |

1 measured pair(s) fail AA — if you reuse those pairs, adjust lightness until the ratio reaches 4.5:1.

## Usage Rules

### Do
- Use `{color.primary}` (`#197935`) for primary actions only — that is where it was observed.
- Default text pairing: `{color.ink}` (`#ffffff`) on `{color.background}` (`#0d1117`).
- Set all text in `Mona Sans` (fallbacks only for glyph coverage).
- Pick corner radii from the measured set (6px, 60px, 16px, 8px) — no intermediate values were observed.
- Cite this file's token names (`{color.*}`, `{type.*}`) when generating UI so output stays traceable to observations.

### Don't
- Don't invent colors, sizes, shadows, or spacing not listed above — absence means *not observed*, and this document records observations only.
- Don't assume the missing blocks (cards, badges, elevation) don't exist on the site — they were simply not captured in this run.
- Don't copy brand assets (logo, wordmark, imagery, copy) — `reference_only` covers measured style values, not brand identity.

## Provenance

- Source: https://github.com/ (1 page(s))
- Tool: designskill-extract/3.2.0 · extracted 2026-07-27T08:31:05.544Z
- Mode: full-render — 풀렌더 모드 — 3뷰포트 × 라이트/다크 computed style + 상태 관측.
- Blocks observed: 00, 01, 02, 03, 04, 05, 06, 09, 10, 12 · missing: cards, badges, elevation
- Warning: primary 불일치: static=#0969da vs render=#197935 — render 채택

---

<sub>Generated & served by [DesignSkill](https://designskill.dev)</sub>