GitHub

---
version: alpha
name: GitHub-design-analysis
description: GitHub's Primer design language is a developer-tool interface built on a neutral gray system with a confident accent blue. The canvas toggles between a crisp light `#ffffff` and a deep dark `#0d1117`, with functional green/red/purple accents reserved for states and status. Typography is system-first and compact, and every surface is defined by 6px radii, subtle 1px borders, and hairline dividers.

colors:
  primary: "#0969da"
  primary_emphasized: "#1f883d"
  accent_success: "#1a7f37"
  accent_danger: "#cf222e"
  accent_attention: "#9a6700"
  accent_purple: "#8250df"
  canvas: "#ffffff"
  canvas_dark: "#0d1117"
  canvas_inset: "#f6f8fa"
  canvas_inset_dark: "#161b22"
  fg_default: "#1f2328"
  fg_muted: "#656d76"
  border_default: "#d0d7de"
  border_muted: "#d8dee4"
  border_dark: "#30363d"

typography:
  display-xxl:
    fontFamily: "-apple-system, "Segoe UI", Helvetica, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: "-apple-system, "Segoe UI", Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: "-apple-system, "Segoe UI", Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: "-apple-system, "Segoe UI", Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: "-apple-system, "Segoe UI", Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: "-apple-system, "Segoe UI", Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: "-apple-system, "Segoe UI", Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: "-apple-system, "Segoe UI", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: "-apple-system, "Segoe UI", Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "-apple-system, "Segoe UI", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: "-apple-system, "Segoe UI", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by GitHub (Primer)

## 1. Visual Theme & Atmosphere

GitHub's interface reads as a precision instrument: quiet, dense, and unopinionated so the code takes center stage. The canvas is a near-white `#ffffff` that inverts cleanly to a deep ink `#0d1117` in dark mode. Surfaces are separated almost entirely by 1px hairline borders (`#d0d7de`) and a very subtle inset wash (`#f6f8fa`) rather than shadows. The single loud moment is the accent blue `#0969da`, reserved for primary actions and links.

## 2. Color System

- **Accent blue** `#0969da` — links, primary buttons, focus rings.
- **Success green** `#1a7f37` — merged states, positive status.
- **Danger red** `#cf222e` — destructive actions, critical errors.
- **Attention yellow** `#9a6700` — warnings, draft states.
- **Purple** `#8250df` — reviews, sponsorship, distinctive highlights.
- Neutrals run from `#ffffff` to `#0d1117` in 1px-bordered steps; text muted to `#656d76`.

## 3. Typography

System-first stack (Segoe UI on Windows, SF Pro on macOS). Body sits at 14px/1.5, with 12px captions for metadata. Headings stay modest in size and weight (600 max) — hierarchy is carried by size and spacing, never heavy weights.

## 4. Components & Shape

Buttons are 6px-radius rounded rectangles with a 1px border; the primary button fills with accent blue and inverts text to white. Inputs use a single 1px border that shifts to a 2px blue focus ring. Cards, avatars, and code blocks all share the same 6px radius. Labels and state badges are pill-shaped.

## 5. Layout & Spacing

A strict 8px base grid. Sidebars and file trees use 16px gutters; dense tables and code views drop to 8px. The overall density is high but never cramped — vertical rhythm stays a multiple of 8.

## 6. Motion

Transitions are fast (80-150ms) and limited to opacity and color. Nothing bounces; interaction feels immediate and mechanical, matching the developer-tool tone.