Developer & Cloud · Developer platform

GitHub brand colors, fonts & UI tokens

The palette, type, corner geometry and surface tones behind GitHub’s website, with contrast ratios and tokens you can paste into Tailwind, CSS or Figma.

Technical · 4-6 pxNeutral whiteLast scanned 10 Nov 2026

Scan your own site

primary

Primer Green

#1F883D

rgb(31, 136, 61)

hsl(137 63% 33%)

secondary

Emphasis

#25292E

rgb(37, 41, 46)

hsl(213 11% 16%)

accent

Accent Blue

#0969DA

rgb(9, 105, 218)

hsl(212 92% 45%)

surface

White

#FFFFFF

rgb(255, 255, 255)

hsl(0 0% 100%)

text

Fg Default

#1F2328

rgb(31, 35, 40)

hsl(213 13% 14%)

muted

Fg Muted

#59636E

rgb(89, 99, 110)

hsl(211 11% 39%)

border

Border Default

#D1D9E0

rgb(209, 217, 224)

hsl(208 19% 85%)

Canvas Subtle #F6F8FADone Purple #8250DFDanger #CF222E

Typography

Headings: Mona Sans
Body: Mona Sans
Monospace: Monaspace Neon
Free stand-in: Mona Sans / JetBrains Mono

Mona Sans and the Monaspace family are open source (SIL OFL), published by GitHub; Mona Sans is on Google Fonts.

Geometry & surface

Radius style: Technical · 4-6 px
Controls: 6px
Cards: 12px
Scale: 4px · 6px · 12px

Canvas

#FFFFFF

Card

#F6F8FA

Hairline

#D1D9E0

Design language

Primer's semantic tokens (fg.default, canvas.subtle, border.default) map one to one onto UI roles.
Green is reserved for the primary 'create' action; links and focus use Accent Blue (#0969DA).
6 px technical radii and 1 px borders on #D1D9E0 keep dense repository views orderly.

Live UI preview

GitHub’s palette, type and corner geometry on a navbar, hero, pricing table, form field and toast. Switch to the WCAG-fixed palette or dark mode to compare.

Brand surface

GitHub

New

The world's most widely adopted developer platform

Plan, track and release work with your team in one place. Start free and upgrade when you grow.

Open tasks

128

Revenue

12,480.00

Members

24

Workspace ready

Your team can sign in now. Invite links expire in 7 days.

Simple pricing

Every plan includes the core workspace.

Starter

For individuals

$0/ month

3 projects
Basic reporting
Community support

Team

Technical SEO snapshot

github.com · scanned 10 Nov 2026

score / 100

11 of 14 checks pass · sitemap with 376 URLs

warnTitle tag70 chars: “GitHub · Change is constant. GitHub keeps you ahead. · GitHub · GitHub”
warnMeta description186 chars
passSingle H1 heading1 H1 element(s)
passCanonical URLhttps://github.com/
passHTML lang attributelang="en"
passMobile viewportwidth=device-width
passOpen Graph tags3/3 of og:title, og:description, og:image
passTwitter / X cardsummary_large_image
warnStructured data (JSON-LD)No JSON-LD found
passHTTPSServed over HTTPS
passIndexable (robots meta)No robots restrictions
passXML sitemap376 URLs · https://github.com/sitemap_marketing.xml
passFavicon / touch iconIcon link present
passImage alt text100% of 22 images

WCAG contrast ratios

Pairing	Colors	Ratio	WCAG AA
Body text on surface	#1F2328 / #FFFFFF	15.80:1	Pass
Secondary text on surface	#59636E / #FFFFFF	6.11:1	Pass
Primary as link/text on surface	#1F883D / #FFFFFF	4.52:1	Pass
Button label on primary	#FFFFFF / #1F883D	4.52:1	Pass
Accent on surface	#0969DA / #FFFFFF	5.19:1	Pass
Secondary on surface	#25292E / #FFFFFF	14.63:1	Pass
White on secondary	#FFFFFF / #25292E	14.63:1	Pass
Dark mode: text on canvas	#F5F5F7 / #0B0E0E	17.80:1	Pass
Dark mode: primary on canvas	#208D3F / #0B0E0E	4.56:1	Pass

Use the GitHub system in SuiteAnvil

Each tool opens with GitHub preloaded as the active BrandProfile.

StyleExtract ProToken exports and a modular PDF audit, preloaded with GitHub.

Doc EngineWhitepaper, brief and print card templates, preloaded with GitHub.

Asset Converter28-file press kit and social banners, preloaded with GitHub.

Sitemap BotA widget themed in this geometry, preloaded with GitHub.

GitHub tokens for Tailwind CSS v4

Paste into your global stylesheet, or open StyleExtract for CSS variables, Figma tokens, DESIGN.md and .cursorrules.

github.theme.css

/* GitHub design tokens, extracted from https://github.com
   Generated by SuiteAnvil StyleExtract · https://suiteanvil.com */
@import "tailwindcss";

@theme {
  /* Brand roles */
  --color-brand: #1F883D;
  --color-brand-foreground: #FFFFFF;
  --color-secondary: #25292E;
  --color-accent: #0969DA;
  --color-surface: #FFFFFF;
  --color-ink: #1F2328;
  --color-ink-muted: #59636E;
  --color-line: #D1D9E0;

  /* Surfaces (UI vibe: Neutral white) */
  --color-canvas: #FFFFFF;
  --color-card: #F6F8FA;
  --color-hairline: #D1D9E0;

  /* Primary tonal scale */
  --color-brand-50: #F4F9F5;
  --color-brand-100: #E4F1E8;
  --color-brand-200: #C7E1CF;
  --color-brand-300: #9AC9A8;
  --color-brand-400: #62AC77;
  --color-brand-500: #1F883D;
  --color-brand-600: #1C7536;
  --color-brand-700: #18602D;
  --color-brand-800: #154925;
  --color-brand-900: #11361D;
  --color-brand-950: #0F2617;

  /* Typography: brand family first, free stand-in second */
  --font-heading: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Monaspace Neon", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Shape (UI vibe: Technical · 4-6 px) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-button: 6px;
  --radius-control: 6px;
  --radius-card: 12px;
}

/* Dark mode overrides (toggle with <html data-theme="dark">) */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

[data-theme="dark"] {
  --color-brand: #208D3F;
  --color-brand-foreground: #111113;
  --color-accent: #0969DA;
  --color-surface: #0B0E0E;
  --color-canvas: #0B0E0E;
  --color-card: #131718;
  --color-hairline: #232626;
  --color-ink: #F5F5F7;
  --color-ink-muted: #A1A1AA;
  --color-line: #232626;
}

SuiteAnvil extracts publicly visible design tokens, logos, and font references for workflow automation. You are responsible for ensuring you hold valid commercial rights or client authorization for any proprietary fonts, trademarks, and brand assets before commercial publication. Licensing notice

FAQ

What is GitHub’s primary brand color?

GitHub’s primary color is #1F883D (rgb(31, 136, 61)), used for primary actions and emphasis. Text is set in #1F2328 on a #FFFFFF surface.

What font does GitHub use?

GitHub uses Mona Sans for headings, with Monaspace Neon for code. Mona Sans and the Monaspace family are open source (SIL OFL), published by GitHub; Mona Sans is on Google Fonts.

What is a free alternative to GitHub’s font?

Mona Sans is a close free alternative for headings, and JetBrains Mono works for monospace.

What corner radius does GitHub use?

GitHub reads as technical · 4-6 px: controls use 6px, cards about 12px, on a neutral white canvas (#FFFFFF).

Do GitHub’s brand colors meet WCAG contrast?

9 of 9 key pairings pass WCAG 2.1 AA. All tested pairings pass.

More in Developer & Cloud

Linear Vercel Supabase Raycast Cloudflare All 60 brands

Reference snapshot of GitHub’s public website styling for educational and interoperability purposes, scanned 10 Nov 2026. GitHub and its logo are trademarks of their owner, shown for identification only; SuiteAnvil is not affiliated with or endorsed by GitHub.

Compare your website with GitHub

Scan your own site and see its palette, fonts, corner radius, WCAG contrast and SEO score next to GitHub's, side by side.

Audit & kit: github.com brand and SEO audit GitHub brand kit and logo downloads
Comparisons: GitHub vs GitLab
Tools: StyleExtract Pro Doc Engine Asset Converter Sitemap Bot
Guides: Brand guidelines extractor Client audit PDF generator Markdown to branded whitepaper Business cards & email signatures SVG to press kit & favicons