GitHub Design System

---
name: GitHub
url: https://github.com
version: 4.5.0
tokens:
  colors:
    primary: "#2f81f7"
    background: "#0d1117"
    surface: "#161b22"
    border: "#30363d"
    text-primary: "#e6edf3"
    text-secondary: "#8b949e"
    success: "#238636"
  typography:
    font-sans: "-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    font-mono: "ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace"
    scale:
      - { name: heading, size: "32px", weight: 600, lineHeight: 1.25 }
      - { name: body, size: "14px", weight: 400, lineHeight: 1.5 }
  spacing:
    base: "4px"
    scale:
      space-1: "4px"
      space-2: "8px"
      space-4: "16px"
      space-8: "32px"
  radius:
    sm: "3px"
    md: "6px"
    lg: "12px"
  breakpoints:
    sm: "640px"
    md: "768px"
    lg: "1024px"
---

# GitHub — Primer Design System Specification

## 1. Overview
Powered by GitHub Primer, utilizing dark canvas (`#0d1117`), elevated panel fills (`#161b22`), and vibrant blue interactive elements (`#2f81f7`).

## 2. Color System
- Primer Blue: `#2f81f7`
- Dark Canvas: `#0d1117`
- Surface: `#161b22`

## 3. Typography Scale
- Heading: 32px / Weight 600
- Body: 14px / Weight 400

## 4. Button Variants
- Primary Green Button: `background: #238636`, `color: #ffffff`, `border-radius: 6px`
- Secondary Button: `background: #21262d`, `border: 1px solid #30363d`

## 5. Card Examples
- Repo Card: `background: #161b22`, `border: 1px solid #30363d`

## 6. Form Elements
- Input Field: `background: #0d1117`, `border: 1px solid #30363d`, `border-radius: 6px`

## 7. Spacing Scale
- 4px, 8px, 16px, 24px, 32px, 40px

## 8. Border Radius Scale
- `sm: 3px`, `md: 6px`, `lg: 12px`

## 9. Responsive Behavior
- `sm: 640px`, `md: 768px`, `lg: 1024px`