← All designs
Dev Tools

GitHub

A developer-native canvas built around the Primer design system — near-black (#0d1117) in dark mode, white (#ffffff) in light — with GitHub's signature accent blue (#0969DA) for interactive states and a green (#1a7f37) used meaningfully for open issues and successful builds. The system reads as technical documentation made beautiful: monospace code blocks, tight information density, and zero decorative chrome. Mona Sans, GitHub's custom variable font, brings humanity to the heading hierarchy while preserving the utilitarian character of a tool built by engineers for engineers.

Color Tokens

#0969DAprimary
#ffffffon-primary
#0860CAprimary-hover
#1a7f37secondary
#1F2328ink
#636C76ink-muted
#ffffffcanvas
#F6F8FAsurface-1
#EAEEF2surface-2
#D0D7DEborder

version: alpha name: GitHub description: "A developer-native canvas built around the Primer design system — near-black (#0d1117) in dark mode, white (#ffffff) in light — with GitHub's signature accent blue (#0969DA) for interactive states and a green (#1a7f37) used meaningfully for open issues and successful builds. The system reads as technical documentation made beautiful: monospace code blocks, tight information density, and zero decorative chrome. Mona Sans, GitHub's custom variable font, brings humanity to the heading hierarchy while preserving the utilitarian character of a tool built by engineers for engineers."

colors: primary: "#0969DA" on-primary: "#ffffff" primary-hover: "#0860CA" secondary: "#1a7f37" ink: "#1F2328" ink-muted: "#636C76" canvas: "#ffffff" surface-1: "#F6F8FA" surface-2: "#EAEEF2" border: "#D0D7DE" canvas-dark: "#0d1117" surface-dark-1: "#161B22" surface-dark-2: "#21262D" border-dark: "#30363D" ink-dark: "#E6EDF3" ink-muted-dark: "#8B949E" success: "#1a7f37" danger: "#CF222E" warning: "#9A6700" open: "#1a7f37" closed: "#CF222E" merged: "#8250DF" code-bg: "#F6F8FA"

typography: display: fontFamily: "Mona Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" fontSize: 48px fontWeight: 800 lineHeight: 1.1 letterSpacing: -0.5px body: fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 code: fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace" fontSize: 12px fontWeight: 400 lineHeight: 1.45

spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 40, 48, 64, 96]

radius: sm: 3px md: 6px lg: 12px pill: 9999px

shadows: card: "0 1px 0 rgba(27,31,36,0.04), 0 1px 3px rgba(27,31,36,0.06)" elevated: "0 8px 24px rgba(140,149,159,0.2)" overlay: "0 16px 32px rgba(1,4,9,0.85)"

motion: duration-fast: 80ms duration-base: 160ms easing: cubic-bezier(0.3, 0, 0.5, 1)

1. Visual Theme & Atmosphere

GitHub's Primer system is one of the most studied design systems in open source. The interface prioritizes information over aesthetics — repositories, issues, and code are the content; the UI is the transparent container. Dark mode (#0d1117) is the preferred developer context, borrowing from terminal tradition. Light mode is clean and document-like. The three semantic colors — green (open), red (closed), purple (merged) — form a universally understood status language across the platform.

2. Color System

GitHub maintains full light/dark parity through the Primer color system:

  • Light canvas: #ffffff / #F6F8FA (alt surfaces)
  • Dark canvas: #0d1117 / #161B22 (elevated panels)
  • Accent blue: #0969DA — the primary interactive color for links, buttons, focus rings
  • Success/Open: #1a7f37 — open PRs, successful CI checks
  • Danger/Closed: #CF222E — closed issues, failed builds
  • Merged: #8250DF — the unique purple for merged pull requests
  • Muted text: #636C76 (light) / #8B949E (dark)

3. Typography

Mona Sans is GitHub's variable font, used on marketing and homepage at heavy weights (800). Product UI uses the system stack (-apple-system, Segoe UI) at 14px body. Code is always set in ui-monospace/SFMono-Regular. The typographic hierarchy is functional rather than expressive — clear sizing and weight contrast without decorative lettering.

4. Components & Patterns

  • Repository cards: Bordered containers, name in blue link weight, description muted, language dot + star count in footer
  • Issues/PRs: Green/red/purple status badges always lead the list item
  • Code blocks: Monospace, #F6F8FA background, line numbers optional, syntax highlighted
  • Buttons: Primary solid blue, secondary outlined gray, danger outlined red
  • Navigation: Horizontal tab row with underline indicator, very thin 1px border-bottom
  • Labels: Pill-shaped, user-defined colors, small font size

5. Spacing & Layout

Container max-width 1280px, centered. Repository layout: 260px sidebar (file tree/repo meta), flexible content area. Issues list uses a table-like approach: full-width rows, 1px border between. Tight vertical density — GitHub respects that developers want to see more, not fewer, items per screen.

6. Motion & Interaction

Restrained. Hover states change background color (not scale or transform). Page transitions are browser-native. The contribution graph animates on first load. Tooltips appear with 100ms delay, no animation. The focus is on data, not delight.