GitHub
The complete developer platform — functional density and open-source culture shape every decision in the Primer design system.
Colors
Primary
fgColor-accent
#0969DA
Links, interactive
success-emphasis
#1F883D
Primary button bg
Surfaces
bgColor-default
#FFFFFF
Page background
bgColor-muted
#F6F8FA
Sidebar, code bg
bgColor-emphasis
#25292E
Tooltips
borderColor-default
#D1D9E0
Dividers, borders
Text
fgColor-default
#1F2328
Primary text
fgColor-muted
#59636E
Secondary text
fgColor-disabled
#818B98
Disabled states
Semantic
success
#1A7F37
Open, success
danger
#D1242F
Closed, error
attention
#9A6700
Warnings
done
#8250DF
Merged, done
Typography
h1
Repository overview
32px600lh 1.25
h2
Pull requests
24px600lh 1.25
h3
Conversation
20px600lh 1.25
h4
Component heading
16px600lh 1.5
body
This pull request implements the new authentication middleware and updates session handling logic.
14px400lh 1.5
caption
opened 3 hours ago by octocat
12px400lh 1.25
mono
git commit -m "feat: add auth"
14pxmono400
Components
Buttons
Inputs
Badges
Open
Merged
Closed
Draft
Approved
Neutral
Sample Card
feat: add dark mode support
Open
2 reviewers requested · 14 comments · CI passing
Spacing
space-xxs
2px
space-xs
4px
space-sm
8px
space-md
12px
space-lg
16px
space-xl
24px
size-32
32px
size-64
64px
size-128
128px
Guardrails
DO
Use semantic tokens — ensures light/dark mode correctness automatically
Use weight 600 for button labels, headings, and emphasized UI text
Reserve primary buttons for one-per-context; others use Default or Invisible
Use 6px border radius as default for interactive elements
Use monospace stack for all code, SHAs, file paths, and terminal output
DON'T
Use color as the only signal — always pair with a label, icon, or pattern
Use more than one primary button in a single action group
Use the Danger button without a confirmation step
Use purple outside the done/merged state context
Center-align body text — Primer explicitly discourages it