W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
GitHub
GitHub is the world's most-used software-collaboration platform — source control, code review, CI/CD, package distribution, and the social graph of open source. The brand voice is technical, inviting, and developer-first: precise without ceremony, inclusive without sentimentality. The visual identity is anchored on the Primer Design System (canonical light/dark color tokens) and Mona Sans, GitHub's open-source variable typeface for marketing and brand surfaces.
1 palette 3 fonts 0 assets 7 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/github/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/github/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
GitHub
GitHub is the world's most-used software-collaboration platform — source control, code review, CI/CD, package distribution, and the social graph of open source. The brand voice is technical, inviting, and developer-first: precise without ceremony, inclusive without sentimentality. The visual identity is anchored on the Primer Design System (canonical light/dark color tokens) and Mona Sans, GitHub's open-source variable typeface for marketing and brand surfaces.
Tags: github, developer-tools, source-control, devops, parent-brand, open-source-tools
Atoms
Palette
GitHub Primer · [email protected] · MIT
The GitHub Primer color system extracted from @primer/primitives. Provides the canonical "GitHub Light" and "GitHub Dark" themes used across github.com, including the full neutral scale (0–13) and eight functional color families (blue, green, yellow, orange, red, purple, pink, coral) at ten stops each. Light mode uses low-numbered neutrals for backgrounds and high-numbered for text; dark mode inverts. Functional scales are tuned per-mode so each role has the correct contrast — the blue used for the primary "link" role is a deeper blue-5 in light and a brighter blue-3 in dark.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Mona Sans ([email protected]) |
OFL-1.1 | sans-serif |
body |
Mona Sans ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
light-neutral-0 |
Light Neutral 0 | #FFFFFF |
light-neutral-1 |
Light Neutral 1 | #F6F8FA |
light-neutral-2 |
Light Neutral 2 | #EFF2F5 |
light-neutral-3 |
Light Neutral 3 | #E6EAEF |
light-neutral-4 |
Light Neutral 4 | #E0E6EB |
light-neutral-5 |
Light Neutral 5 | #DAE0E7 |
light-neutral-6 |
Light Neutral 6 | #D1D9E0 |
light-neutral-7 |
Light Neutral 7 | #C8D1DA |
light-neutral-8 |
Light Neutral 8 | #818B98 |
light-neutral-9 |
Light Neutral 9 | #59636E |
light-neutral-10 |
Light Neutral 10 | #454C54 |
light-neutral-11 |
Light Neutral 11 | #393F46 |
light-neutral-12 |
Light Neutral 12 | #25292E |
light-neutral-13 |
Light Neutral 13 | #1F2328 |
light-blue-0 |
Light Blue 0 | #DDF4FF |
light-blue-1 |
Light Blue 1 | #B6E3FF |
light-blue-2 |
Light Blue 2 | #80CCFF |
light-blue-3 |
Light Blue 3 | #54AEFF |
light-blue-4 |
Light Blue 4 | #218BFF |
light-blue-5 |
Light Blue 5 | #0969DA |
light-blue-6 |
Light Blue 6 | #0550AE |
light-blue-7 |
Light Blue 7 | #033D8B |
light-blue-8 |
Light Blue 8 | #0A3069 |
light-blue-9 |
Light Blue 9 | #002155 |
light-green-0 |
Light Green 0 | #DAFBE1 |
light-green-1 |
Light Green 1 | #ACEEBB |
light-green-2 |
Light Green 2 | #6FDD8B |
light-green-3 |
Light Green 3 | #4AC26B |
light-green-4 |
Light Green 4 | #2DA44E |
light-green-5 |
Light Green 5 | #1A7F37 |
light-green-6 |
Light Green 6 | #116329 |
light-green-7 |
Light Green 7 | #044F1E |
light-green-8 |
Light Green 8 | #003D16 |
light-green-9 |
Light Green 9 | #002D11 |
light-yellow-0 |
Light Yellow 0 | #FFF8C5 |
light-yellow-1 |
Light Yellow 1 | #FAE17D |
light-yellow-2 |
Light Yellow 2 | #EAC54F |
light-yellow-3 |
Light Yellow 3 | #D4A72C |
light-yellow-4 |
Light Yellow 4 | #BF8700 |
light-yellow-5 |
Light Yellow 5 | #9A6700 |
light-yellow-6 |
Light Yellow 6 | #7D4E00 |
light-yellow-7 |
Light Yellow 7 | #633C01 |
light-yellow-8 |
Light Yellow 8 | #4D2D00 |
light-yellow-9 |
Light Yellow 9 | #3B2300 |
light-orange-0 |
Light Orange 0 | #FFF1E5 |
light-orange-1 |
Light Orange 1 | #FFD8B5 |
light-orange-2 |
Light Orange 2 | #FFB77C |
light-orange-3 |
Light Orange 3 | #FB8F44 |
light-orange-4 |
Light Orange 4 | #E16F24 |
light-orange-5 |
Light Orange 5 | #BC4C00 |
light-orange-6 |
Light Orange 6 | #953800 |
light-orange-7 |
Light Orange 7 | #762C00 |
light-orange-8 |
Light Orange 8 | #5C2200 |
light-orange-9 |
Light Orange 9 | #471700 |
light-red-0 |
Light Red 0 | #FFEBE9 |
light-red-1 |
Light Red 1 | #FFCECB |
light-red-2 |
Light Red 2 | #FFABA8 |
light-red-3 |
Light Red 3 | #FF8182 |
light-red-4 |
Light Red 4 | #FA4549 |
light-red-5 |
Light Red 5 | #CF222E |
light-red-6 |
Light Red 6 | #A40E26 |
light-red-7 |
Light Red 7 | #82071E |
light-red-8 |
Light Red 8 | #660018 |
light-red-9 |
Light Red 9 | #4C0014 |
light-purple-0 |
Light Purple 0 | #FBEFFF |
light-purple-1 |
Light Purple 1 | #ECD8FF |
light-purple-2 |
Light Purple 2 | #D8B9FF |
light-purple-3 |
Light Purple 3 | #C297FF |
light-purple-4 |
Light Purple 4 | #A475F9 |
light-purple-5 |
Light Purple 5 | #8250DF |
light-purple-6 |
Light Purple 6 | #6639BA |
light-purple-7 |
Light Purple 7 | #512A97 |
light-purple-8 |
Light Purple 8 | #3E1F79 |
light-purple-9 |
Light Purple 9 | #2E1461 |
light-pink-0 |
Light Pink 0 | #FFEFF7 |
light-pink-1 |
Light Pink 1 | #FFD3EB |
light-pink-2 |
Light Pink 2 | #FFADDA |
light-pink-3 |
Light Pink 3 | #FF80C8 |
light-pink-4 |
Light Pink 4 | #E85AAD |
light-pink-5 |
Light Pink 5 | #BF3989 |
light-pink-6 |
Light Pink 6 | #99286E |
light-pink-7 |
Light Pink 7 | #772057 |
light-pink-8 |
Light Pink 8 | #611347 |
light-pink-9 |
Light Pink 9 | #4D0336 |
light-coral-0 |
Light Coral 0 | #FFF0EB |
light-coral-1 |
Light Coral 1 | #FFD6CC |
light-coral-2 |
Light Coral 2 | #FFB4A1 |
light-coral-3 |
Light Coral 3 | #FD8C73 |
light-coral-4 |
Light Coral 4 | #EC6547 |
light-coral-5 |
Light Coral 5 | #C4432B |
light-coral-6 |
Light Coral 6 | #9E2F1C |
light-coral-7 |
Light Coral 7 | #801F0F |
light-coral-8 |
Light Coral 8 | #691105 |
light-coral-9 |
Light Coral 9 | #510901 |
dark-neutral-0 |
Dark Neutral 0 | #010409 |
dark-neutral-1 |
Dark Neutral 1 | #0D1117 |
dark-neutral-2 |
Dark Neutral 2 | #151B23 |
dark-neutral-3 |
Dark Neutral 3 | #212830 |
dark-neutral-4 |
Dark Neutral 4 | #262C36 |
dark-neutral-5 |
Dark Neutral 5 | #2A313C |
dark-neutral-6 |
Dark Neutral 6 | #2F3742 |
dark-neutral-7 |
Dark Neutral 7 | #3D444D |
dark-neutral-8 |
Dark Neutral 8 | #656C76 |
dark-neutral-9 |
Dark Neutral 9 | #9198A1 |
dark-neutral-10 |
Dark Neutral 10 | #B7BDC8 |
dark-neutral-11 |
Dark Neutral 11 | #D1D7E0 |
dark-neutral-12 |
Dark Neutral 12 | #F0F6FC |
dark-neutral-13 |
Dark Neutral 13 | #FFFFFF |
dark-blue-0 |
Dark Blue 0 | #CAE8FF |
dark-blue-1 |
Dark Blue 1 | #A5D6FF |
dark-blue-2 |
Dark Blue 2 | #79C0FF |
dark-blue-3 |
Dark Blue 3 | #58A6FF |
dark-blue-4 |
Dark Blue 4 | #388BFD |
dark-blue-5 |
Dark Blue 5 | #1F6FEB |
dark-blue-6 |
Dark Blue 6 | #1158C7 |
dark-blue-7 |
Dark Blue 7 | #0D419D |
dark-blue-8 |
Dark Blue 8 | #0C2D6B |
dark-blue-9 |
Dark Blue 9 | #051D4D |
dark-green-0 |
Dark Green 0 | #AFF5B4 |
dark-green-1 |
Dark Green 1 | #7EE787 |
dark-green-2 |
Dark Green 2 | #56D364 |
dark-green-3 |
Dark Green 3 | #3FB950 |
dark-green-4 |
Dark Green 4 | #2EA043 |
dark-green-5 |
Dark Green 5 | #238636 |
dark-green-6 |
Dark Green 6 | #196C2E |
dark-green-7 |
Dark Green 7 | #0F5323 |
dark-green-8 |
Dark Green 8 | #033A16 |
dark-green-9 |
Dark Green 9 | #04260F |
dark-yellow-0 |
Dark Yellow 0 | #F8E3A1 |
dark-yellow-1 |
Dark Yellow 1 | #F2CC60 |
dark-yellow-2 |
Dark Yellow 2 | #E3B341 |
dark-yellow-3 |
Dark Yellow 3 | #D29922 |
dark-yellow-4 |
Dark Yellow 4 | #BB8009 |
dark-yellow-5 |
Dark Yellow 5 | #9E6A03 |
dark-yellow-6 |
Dark Yellow 6 | #845306 |
dark-yellow-7 |
Dark Yellow 7 | #693E00 |
dark-yellow-8 |
Dark Yellow 8 | #4B2900 |
dark-yellow-9 |
Dark Yellow 9 | #341A00 |
dark-orange-0 |
Dark Orange 0 | #FFDFB6 |
dark-orange-1 |
Dark Orange 1 | #FFC680 |
dark-orange-2 |
Dark Orange 2 | #FFA657 |
dark-orange-3 |
Dark Orange 3 | #F0883E |
dark-orange-4 |
Dark Orange 4 | #DB6D28 |
dark-orange-5 |
Dark Orange 5 | #BD561D |
dark-orange-6 |
Dark Orange 6 | #9B4215 |
dark-orange-7 |
Dark Orange 7 | #762D0A |
dark-orange-8 |
Dark Orange 8 | #5A1E02 |
dark-orange-9 |
Dark Orange 9 | #3D1300 |
dark-red-0 |
Dark Red 0 | #FFDCD7 |
dark-red-1 |
Dark Red 1 | #FFC1BA |
dark-red-2 |
Dark Red 2 | #FFA198 |
dark-red-3 |
Dark Red 3 | #FF7B72 |
dark-red-4 |
Dark Red 4 | #F85149 |
dark-red-5 |
Dark Red 5 | #DA3633 |
dark-red-6 |
Dark Red 6 | #B62324 |
dark-red-7 |
Dark Red 7 | #8E1519 |
dark-red-8 |
Dark Red 8 | #67060C |
dark-red-9 |
Dark Red 9 | #490202 |
dark-purple-0 |
Dark Purple 0 | #EDDEFF |
dark-purple-1 |
Dark Purple 1 | #E2C5FF |
dark-purple-2 |
Dark Purple 2 | #D2A8FF |
dark-purple-3 |
Dark Purple 3 | #BE8FFF |
dark-purple-4 |
Dark Purple 4 | #AB7DF8 |
dark-purple-5 |
Dark Purple 5 | #8957E5 |
dark-purple-6 |
Dark Purple 6 | #6E40C9 |
dark-purple-7 |
Dark Purple 7 | #553098 |
dark-purple-8 |
Dark Purple 8 | #3C1E70 |
dark-purple-9 |
Dark Purple 9 | #271052 |
dark-pink-0 |
Dark Pink 0 | #FFDAEC |
dark-pink-1 |
Dark Pink 1 | #FFBEDD |
dark-pink-2 |
Dark Pink 2 | #FF9BCE |
dark-pink-3 |
Dark Pink 3 | #F778BA |
dark-pink-4 |
Dark Pink 4 | #DB61A2 |
dark-pink-5 |
Dark Pink 5 | #BF4B8A |
dark-pink-6 |
Dark Pink 6 | #9E3670 |
dark-pink-7 |
Dark Pink 7 | #7D2457 |
dark-pink-8 |
Dark Pink 8 | #5E103E |
dark-pink-9 |
Dark Pink 9 | #42062A |
dark-coral-0 |
Dark Coral 0 | #FFDDD2 |
dark-coral-1 |
Dark Coral 1 | #FFC2B2 |
dark-coral-2 |
Dark Coral 2 | #FFA28B |
dark-coral-3 |
Dark Coral 3 | #F78166 |
dark-coral-4 |
Dark Coral 4 | #EA6045 |
dark-coral-5 |
Dark Coral 5 | #CF462D |
dark-coral-6 |
Dark Coral 6 | #AC3220 |
dark-coral-7 |
Dark Coral 7 | #872012 |
dark-coral-8 |
Dark Coral 8 | #640D04 |
dark-coral-9 |
Dark Coral 9 | #460701 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
light-neutral-0 |
#FFFFFF |
surface |
light-neutral-1 |
#F6F8FA |
surface-elevated |
light-neutral-0 |
#FFFFFF |
text-primary |
light-neutral-13 |
#1F2328 |
text-secondary |
light-neutral-9 |
#59636E |
text-tertiary |
light-neutral-8 |
#818B98 |
primary |
light-blue-5 |
#0969DA |
primary-hover |
light-blue-6 |
#0550AE |
accent |
light-purple-5 |
#8250DF |
accent-hover |
light-purple-6 |
#6639BA |
warning |
light-yellow-5 |
#9A6700 |
warning-hover |
light-yellow-6 |
#7D4E00 |
error |
light-red-5 |
#CF222E |
success |
light-green-5 |
#1A7F37 |
border |
light-neutral-6 |
#D1D9E0 |
severe |
light-orange-5 |
#BC4C00 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
dark-neutral-1 |
#0D1117 |
surface |
dark-neutral-2 |
#151B23 |
surface-elevated |
dark-neutral-3 |
#212830 |
text-primary |
dark-neutral-12 |
#F0F6FC |
text-secondary |
dark-neutral-9 |
#9198A1 |
text-tertiary |
dark-neutral-8 |
#656C76 |
primary |
dark-blue-3 |
#58A6FF |
primary-hover |
dark-blue-2 |
#79C0FF |
accent |
dark-purple-3 |
#BE8FFF |
accent-hover |
dark-purple-2 |
#D2A8FF |
warning |
dark-yellow-3 |
#D29922 |
warning-hover |
dark-yellow-2 |
#E3B341 |
error |
dark-red-3 |
#FF7B72 |
success |
dark-green-3 |
#3FB950 |
border |
dark-neutral-7 |
#3D444D |
severe |
dark-orange-3 |
#F0883E |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
primary |
light-blue-5 |
#0969DA |
primary-hover |
light-blue-6 |
#0550AE |
accent |
light-purple-5 |
#8250DF |
accent-hover |
light-purple-6 |
#6639BA |
success |
light-green-5 |
#1A7F37 |
warning |
light-yellow-5 |
#9A6700 |
error |
light-red-5 |
#CF222E |
text-primary-light |
light-neutral-13 |
#1F2328 |
text-primary-dark |
dark-neutral-12 |
#F0F6FC |
background-light |
light-neutral-0 |
#FFFFFF |
background-dark |
dark-neutral-1 |
#0D1117 |
surface-light |
light-neutral-1 |
#F6F8FA |
surface-dark |
dark-neutral-2 |
#151B23 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast for body text. Primer's light-neutral-13 (#1F2328) on light-neutral-0 (#FFFFFF) and dark-neutral-12 (#F0F6FC) on dark-neutral-1 (#0D1117) both exceed 4.5:1 by a wide margin.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Primer documents Blue 5 (#0969DA) as the AA-compliant link color on light surfaces and Blue 3 (#58A6FF) on dark. Other blue stops in the ramp do not clear AA against the canvas and must not be used for body-text links.
colorChoice → roles.colors.primary
- allowed: light-blue-5, dark-blue-3
- forbidden: light-blue-0, light-blue-1, light-blue-2, light-blue-3, light-blue-4, dark-blue-0, dark-blue-1
Primer pins the "default link / primary action" role to Blue 5 in light mode and Blue 3 in dark mode. Lighter stops are reserved for subtle backgrounds and badges, not for interactive primary actions.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo
GitHub's Logos and Usage policy forbids deforming, recoloring, or otherwise modifying the Invertocat / Octocat marks. Use the official monochrome variants on light or dark surfaces; do not generate derivative treatments.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Primer is designed AA-out-of-the-box; consumers must not pair tokens that defeat that property (e.g. mid-neutrals on mid-neutrals).
⚠️ warning (2)
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.25
Mona Sans serves as both heading and body face on the Primer Brand site. Maintaining at least a 1.25× size differential between heading and body keeps the typographic hierarchy legible without a second family.
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700, 800
Primer Brand documents heading uses at Medium (500), SemiBold (600), Bold (700), and ExtraBold (800). Lighter weights compromise readability of large display headings; the variable font supports weights down to 200 but those are reserved for fine UI labels.
Provenance
- Source: https://primer.style/foundations/color
- License:
MIT - Attribution: GitHub, Inc. — visual identity derived from the publicly available Primer Design System (github.com/primer) and the open-source Mona Sans typeface (github.com/github/mona-sans). The Primer color primitives are MIT-licensed; Mona Sans is OFL-1.1. The GitHub name, Octocat, and Invertocat logos are trademarks of GitHub, Inc. and are not redistributed by this atom.
- Imported:
2026-05-17 - Notes: This atom intentionally reuses the existing
github-primer@1palette (the canonical Primer Primitives token set) rather than introducing a brand-specific palette, because the GitHub marketing site, github.com product surfaces, and Primer all share the same color foundation. The primary brand interactive color is Primer Blue 5 (#0969DA) in light mode and Blue 3 (#58A6FF) in dark.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by GitHub
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
GitHub
A clear hierarchy in GitHub's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
GitHub Primer
[email protected]font · heading
Mona Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Mona Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ light-purple-5 #8250DF accent-hover
→ light-purple-6 #6639BA background-dark
→ dark-neutral-1 #0D1117 background-light
→ light-neutral-0 #FFFFFF error
→ light-red-5 #CF222E primary
→ light-blue-5 #0969DA primary-hover
→ light-blue-6 #0550AE success
→ light-green-5 #1A7F37 surface-dark
→ dark-neutral-2 #151B23 surface-light
→ light-neutral-1 #F6F8FA text-primary-dark
→ dark-neutral-12 #F0F6FC text-primary-light
→ light-neutral-13 #1F2328 warning
→ light-yellow-5 #9A6700 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Mona Sans prose
→ body Mona Sans Palette mode mappings (from github-primer)
Light mode (16 roles)
accent
→ light-purple-5 accent-hover
→ light-purple-6 background
→ light-neutral-0 border
→ light-neutral-6 error
→ light-red-5 primary
→ light-blue-5 primary-hover
→ light-blue-6 severe
→ light-orange-5 success
→ light-green-5 surface
→ light-neutral-1 surface-elevated
→ light-neutral-0 text-primary
→ light-neutral-13 text-secondary
→ light-neutral-9 text-tertiary
→ light-neutral-8 warning
→ light-yellow-5 warning-hover
→ light-yellow-6 Dark mode (16 roles)
accent
→ dark-purple-3 accent-hover
→ dark-purple-2 background
→ dark-neutral-1 border
→ dark-neutral-7 error
→ dark-red-3 primary
→ dark-blue-3 primary-hover
→ dark-blue-2 severe
→ dark-orange-3 success
→ dark-green-3 surface
→ dark-neutral-2 surface-elevated
→ dark-neutral-3 text-primary
→ dark-neutral-12 text-secondary
→ dark-neutral-9 text-tertiary
→ dark-neutral-8 warning
→ dark-yellow-3 warning-hover
→ dark-yellow-2 Rules (7 typed constraints)
error · 5 rules
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast for body text. Primer's light-neutral-13 (#1F2328) on light-neutral-0 (#FFFFFF) and dark-neutral-12 (#F0F6FC) on dark-neutral-1 (#0D1117) both exceed 4.5:1 by a wide margin.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA Primer documents Blue 5 (#0969DA) as the AA-compliant link color on light surfaces and Blue 3 (#58A6FF) on dark. Other blue stops in the ramp do not clear AA against the canvas and must not be used for body-text links.
colorChoice roles.colors.primary allowed light-blue-5, dark-blue-3 forbidden light-blue-0, light-blue-1, light-blue-2, light-blue-3, light-blue-4, dark-blue-0, dark-blue-1 Primer pins the "default link / primary action" role to Blue 5 in light mode and Blue 3 in dark mode. Lighter stops are reserved for subtle backgrounds and badges, not for interactive primary actions.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo GitHub's Logos and Usage policy forbids deforming, recoloring, or otherwise modifying the Invertocat / Octocat marks. Use the official monochrome variants on light or dark surfaces; do not generate derivative treatments.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Primer is designed AA-out-of-the-box; consumers must not pair tokens that defeat that property (e.g. mid-neutrals on mid-neutrals).
warning · 2 rules
fontPairing typography.heading requires body minSizeRatio 1.25 Mona Sans serves as both heading and body face on the Primer Brand site. Maintaining at least a 1.25× size differential between heading and body keeps the typographic hierarchy legible without a second family.
enumMembership typography.heading.fontWeight allowed 500, 600, 700, 800 Primer Brand documents heading uses at Medium (500), SemiBold (600), Bold (700), and ExtraBold (800). Lighter weights compromise readability of large display headings; the variable font supports weights down to 200 but those are reserved for fine UI labels.
Provenance
- Source
- https://primer.style/foundations/color
- License
MIT- Attribution
- GitHub, Inc. — visual identity derived from the publicly available Primer Design System (github.com/primer) and the open-source Mona Sans typeface (github.com/github/mona-sans). The Primer color primitives are MIT-licensed; Mona Sans is OFL-1.1. The GitHub name, Octocat, and Invertocat logos are trademarks of GitHub, Inc. and are not redistributed by this atom.
- Imported
2026-05-17- Notes
- This atom intentionally reuses the existing `github-primer@1` palette (the canonical Primer Primitives token set) rather than introducing a brand-specific palette, because the GitHub marketing site, github.com product surfaces, and Primer all share the same color foundation. The primary brand interactive color is Primer Blue 5 (#0969DA) in light mode and Blue 3 (#58A6FF) in dark.