GitHub Primer

GitHub Primer / 2017– / Style / Platform Screen Languages

GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior.

GitHub Primer — GitHub Primer ViewComponents — official file-tree snapshots across appearance modes — Copyright (c) 2020 GitHub / MIT — GitHub Primer ViewComponents — official file-tree snapshots across appearance modes — Copyright (c) 2020 GitHub / MIT · MIT

GitHub Primer — GitHub Primer ViewComponents — official navigation-list snapshots across appearance modes — Copyright (c) 2020 GitHub / MIT — GitHub Primer ViewComponents — official navigation-list snapshots across appearance modes — Copyright (c) 2020 GitHub / MIT · MIT

GitHub Primer — AI-generated interpretation 1 — AI-generated interpretation, not a reference work

At a glance

Visual cues

Neutral surfaces with blue links and restrained status colors
Octicons paired with short action labels
Thin borders separating lists, tabs and sidebars
Consistent steps of type and spacing even at high density

Best used for

Developer SaaS and admin tools that must hold many states and actions on one screen
Keeping information density and accessibility consistent across product teams

Use this style

Take the compact brief into a project or hand the structured version to an AI tool.

design.md image prompt JSON API MCP & machine access Compose

open in ChatGPT open in Claude open in Google AI

Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats

Dictionary entry

Type: Use one plain sans for body and labels; build hierarchy through weight and color.
Composition: Separate lists, tabs and sidebars with fine rules and hold spacing to a small token set.
Material: Start from neutrals; reserve blue for links and semantic colors for success, warning and danger.
Caution: Adding borders and tiny controls to look like GitHub only creates a cramped admin screen when the work has no clear priority.
Further study: Primer product principles / Octicons and semantic meaning / Responsive design at high density

Related entries

Swiss (スイス・スタイル)Shared effects: Trust / Calm.Compare GitHub Primer and Swiss
GOV.UK Design System (GOV.UK デザインシステム)Same Platform Screen Languages lineage.Compare GitHub Primer and GOV.UK Design System

Cite this entry

The dictionary is meant to be linked to. Take whichever form fits where you are writing.

Link: https://indexstyle.org/styles/github-primer
Markdown: [GitHub Primer — IndexStyle](https://indexstyle.org/styles/github-primer)
HTML: <a href="https://indexstyle.org/styles/github-primer">GitHub Primer — IndexStyle</a>

Back to index position