# GitHub Primer (GitHub Primer)

> 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.

- IndexStyle No.543 — https://indexstyle.org/styles/github-primer
- Kind: Style · Family: Platform Screen Languages · Era: 2017–
- Mood: Technique, Trust, Calm
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- 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

## Composition recipe

- Typography & lettering: Use one plain sans for body and labels; build hierarchy through weight and color.
- Layout & structure: Separate lists, tabs and sidebars with fine rules and hold spacing to a small token set.
- Material & texture: Start from neutrals; reserve blue for links and semantic colors for success, warning and danger.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #F6F8FA
- The colour it is remembered by: #0969DA
- Text and outlines: #24292F

## What to avoid

Adding borders and tiny controls to look like GitHub only creates a cramped admin screen when the work has no clear priority.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: Neutral surfaces with blue links and restrained status colors
- [ ] Visible in the piece: Octicons paired with short action labels
- [ ] Visible in the piece: Thin borders separating lists, tabs and sidebars
- [ ] Visible in the piece: Consistent steps of type and spacing even at high density
- [ ] The layout follows: Separate lists, tabs and sidebars with fine rules and hold spacing to a small token set.
- [ ] The lettering follows: Use one plain sans for body and labels; build hierarchy through weight and color.
- [ ] The material and surface follow: Start from neutrals; reserve blue for links and semantic colors for success, warning and danger.
- [ ] The colour relation holds: #F6F8FA as ground, #0969DA carrying the style, #24292F for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Swiss (スイス・スタイル)** — Puts order front and center and makes the information itself the protagonist. → https://indexstyle.org/styles/swiss
- **GOV.UK Design System (GOV.UK デザインシステム)** — The design language the UK government's Government Digital Service publishes and maintains for public services. Everything runs in one undecorated left aligned column set in GDS Transport, and the green button keeps square corners while carrying a darker green band along its bottom edge, dropping by exactly that depth when pressed. Whatever holds keyboard focus turns yellow with a black rule under it. → https://indexstyle.org/styles/govuk-design-system

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=github-primer+swiss

## Further study

- Primer product principles
- Octicons and semantic meaning
- Responsive design at high density

## Reference works

- GitHub Primer — Product — https://primer.style/product/getting-started/

## Source of record

- GitHub Primer — Product — https://primer.style/product/getting-started/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/github-primer
- Image-generation prompt (legally clean): https://indexstyle.org/styles/github-primer/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)