Utilities / iOS / Android / Web

GitHub

GitHub lets structure do the work: hairline borders on a white canvas, one blue for links and one green for the action that matters, all from role-named tokens that flip cleanly to dark.

Download
  • #1F883D
  • #0969DA
  • #1F2328
  • #F6F8FA
  • #D1D9E0
  • #0D1117

Color

Every color token in the file, grouped by role.

Brand

  • primary#1F883D
  • primary hover#1C8139
  • on primary#FFFFFF
  • accent wash#DDF4FF
  • dark primary#238636

Surfaces

  • canvas#FFFFFF
  • canvas subtle#F6F8FA
  • canvas inverse#25292E
  • dark canvas#0D1117
  • dark canvas subtle#151B23

Text

  • link#0969DA
  • ink#1F2328
  • ink muted#59636E
  • dark ink#F0F6FC
  • dark ink muted#9198A1
  • dark link#4493F8

Lines

  • border#D1D9E0
  • dark border#3D444D

Status

  • success#1A7F37
  • danger#D1242F
  • danger wash#FFEBE9
  • dark danger#F85149

More

  • attention#9A6700
  • attention wash#FFF8C5
  • done#8250DF
  • dark control#212830
  • dark attention#D29922
  • dark done#AB7DF8

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Mona Sans VFOpen font, listed in the open library as Mona Sans.
  • Mona SansOpen font, shown as published.
  • ui-monospaceNot served by an open font library, so it falls back through the file's own stack.
  • title large32px / 600 / 40px

    GitHub

  • title medium24px / 600 / 36px

    Pack my box with five dozen liquor jugs

  • body large16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 21px

    The quick brown fox jumps over the lazy dog

  • button14px / 500 / 20px

    Continue to checkout

  • caption12px / 400 / 16px

    Continue to checkout

  • display64px / 425 / 69px

    GitHub

  • code13px / 400 / 20px

    Sphinx of black quartz, judge my vow 0123456789

Shape

Corner radius tokens.

  • xs3px
  • sm6px
  • md8px
  • lg12px
  • xl24px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button default
    button-default
  • button danger
    button-danger
  • label accent
    label-accent
  • callout attention
    callout-attention
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 132 lines
version: alpha
name: GitHub-design-analysis
description: "A code platform drawn in Primer: white canvas, near-black ink, one link blue, a green primary button, 6px controls, hairline borders and Mona Sans, with a dark marketing site and a full dark theme from the same role-named tokens."
status: Draft
appVersion: "measured in a browser and read from the published Primer token files, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#1f883d"
  primary-hover: "#1c8139"
  on-primary: "#ffffff"
  link: "#0969da"
  ink: "#1f2328"
  ink-muted: "#59636e"
  canvas: "#ffffff"
  canvas-subtle: "#f6f8fa"
  canvas-inverse: "#25292e"
  border: "#d1d9e0"
  accent-wash: "#ddf4ff"
  success: "#1a7f37"
  danger: "#d1242f"
  danger-wash: "#ffebe9"
  attention: "#9a6700"
  attention-wash: "#fff8c5"
  done: "#8250df"
  dark-canvas: "#0d1117"
  dark-canvas-subtle: "#151b23"
  dark-control: "#212830"
  dark-ink: "#f0f6fc"
  dark-ink-muted: "#9198a1"
  dark-link: "#4493f8"
  dark-border: "#3d444d"
  dark-primary: "#238636"
  dark-danger: "#f85149"
  dark-attention: "#d29922"
  dark-done: "#ab7df8"

typography:
  title-large:
    fontFamily: "'Mona Sans VF', -apple-system, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 40px
  title-medium:
    fontFamily: "'Mona Sans VF', -apple-system, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 36px
  body-large:
    fontFamily: "'Mona Sans VF', -apple-system, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body:
    fontFamily: "'Mona Sans VF', -apple-system, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
  button:
    fontFamily: "'Mona Sans VF', -apple-system, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  caption:
    fontFamily: "'Mona Sans VF', -apple-system, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
  display:
    fontFamily: "'Mona Sans', -apple-system, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 425
    lineHeight: 69px
    letterSpacing: -2px
  code:
    fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 20px

rounded:
  xs: 3px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 24px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 32px
    padding: 0 12px
  button-default:
    backgroundColor: "{colors.canvas-subtle}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 32px
    padding: 0 12px
  button-danger:
    backgroundColor: "{colors.canvas-subtle}"
    textColor: "{colors.danger}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 32px
    padding: 0 12px
  label-accent:
    backgroundColor: "{colors.accent-wash}"
    textColor: "{colors.link}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 0 8px
  callout-attention:
    backgroundColor: "{colors.attention-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 16px

Overview

GitHub is the home of open-source code and the place most developers work in every day. Its public pages are drawn in Primer, GitHub's own design system: a white canvas, near-black ink, one blue for links, a green for the main action and thin gray rules between everything. [Observed]

What defines the look:

  1. Role-named tokens. Every color is named for its job (default text, muted text, accent, success, danger, attention, done), and each has a light and a dark value from the same file. [Measured]
  2. A green primary button. Create and confirm actions use green #1f883d, hover #1c8139, white text, 6px corners and a 32px height. Ordinary buttons are #f6f8fa with a hairline border. [Measured]
  3. One link blue. #0969da in light and #4493f8 in dark for links and selected states. [Measured]
  4. Hairline structure. Borders are #d1d9e0 in light and #3d444d in dark and carry most of the layout. Shadows are used for floating panels only. [Measured]
  5. Mona Sans. Mona Sans is the UI font, with system fonts behind it, and a monospace stack for code. [Measured]
  6. A dark marketing site. The logged-out front page is near-black #0d1117 with large light headlines, while repository pages stay white. [Observed]

Source for this file: the home page and a public repository page measured in a browser at 1440 and 390 wide, plus Primer's published token files, read on 2026-10-06. No account screens, iOS or Android captures were used. See Known Gaps.

Core

Colors

RoleLightDarkWhere
Primary button#1f883d, hover #1c8139#238636, hover #29903bPrimer tokens
Text on primary#ffffff#ffffffPrimer tokens
Link and accent#0969da#4493f8Primer tokens, measured on links
Text#1f2328#f0f6fcPrimer tokens, measured on the page
Muted text#59636e#9198a1Primer tokens
Canvas#ffffff#0d1117Primer tokens, measured on the page
Subtle canvas and default control#f6f8fa#151b23, control #212830Primer tokens
Border#d1d9e0#3d444dPrimer tokens
Accent wash#ddf4ff#388bfd at 10 percentPrimer tokens
Success#1a7f37#3fb950Primer tokens
Danger and wash#d1242f, #ffebe9#f85149Primer tokens
Attention and wash#9a6700, #fff8c5#d29922Primer tokens
Done (merged)#8250df#ab7df8Primer tokens

Typography

Mona Sans, in variable form for the UI and in the display cut for large marketing headlines, with system fonts and Noto Sans behind it. Repository pages measured a 32 on 40 title at 600, a 24 on 36 section heading at 600, 16 on 24 and 14 on 21 body at 400. The marketing headline is 64 on 69 at 425 with -2px tracking. Code uses a system monospace stack at 13. [Measured] Primer names its text styles display, title (large, medium, small), subtitle, body (large, medium, small), caption and code block. [Measured]

Shape and spacing

Controls use a 6px corner. Cards and inputs use 8, large panels 12, marketing tiles 24 and chips and avatars use full rounding. Control heights are 28, 32 and 40, with side padding of 8, 12 or 16, and stack gaps of 8, 16 and 24. [Measured] Resting shadows are barely visible (1px blur); floating panels combine a 1px ring with large soft shadows. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light, dark and further accessible variants are published from the same token structure. [Measured]

Platform: iOS

GitHub's iOS app was not captured. The notes below follow from the web design system.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar is expected for the main areas of the app. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A primary action in the navigation bar or a floating button. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The apps use the same role-named colors and the green primary action, drawn with native iOS controls. [Inferred]

Platform: Android

GitHub's Android app was not captured. The notes below follow from the web design system.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A navigation bar for the main areas of the app. [Inferred]

Main action

Expected on Android: Floating action button.

A floating action button for creating things. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The apps use the same role-named colors and the green primary action, drawn with Material controls. [Inferred]

Platform: Web

The github.com front page and a public repository page, measured at 1440 and 390 wide. Signed-in screens were not measured.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back, and a repository path in the page header that links to each level. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A dark top header on the front page with Platform, Solutions, Resources, Open Source and Enterprise menus and a search field, and repository tabs beneath the repository title. [Observed]

Main action

Expected on Web: Page-level button.

A green primary button, 32 high with a 6px corner. [Measured from Primer tokens]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Floating panels with a 1px ring and large soft shadows, and tinted callouts using the wash colors. [Measured from Primer tokens]

Controls

Expected on Web: Native or custom.

Buttons of 28, 32 and 40 height with a 6px corner, and inputs with a hairline border. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are set in rem, so they follow the browser root size. [Measured from Primer tokens]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Control heights of 28, 32 and 40 are below the 44 and 48 touch minimums, so the web UI is pointer first. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

Primer is the standard for both web and the apps: the same names, the same green, the same blue. [Measured for web, Inferred for apps]

Cross-platform consistency

Consistent across platforms: the role names, the green primary action, the link blue, hairline borders and light and dark themes. [Measured for web, Inferred for the apps]

Intentionally different: the marketing site is dark with display type while product pages are white and dense. [Observed]

Do's and Don'ts

Do

  • Name colors by role and give each a light and a dark value.
  • Use green for the one main action on a page and blue for links.
  • Draw structure with hairline borders and keep shadows for floating panels.
  • Keep controls at 28, 32 or 40 high with a 6px corner.

Don't

  • Don't use green for decoration. It means create or confirm.
  • Don't add colors outside the role names.
  • Don't put heavy shadows on cards that sit in the page.

Known Gaps

  • No account screens were measured, so the signed-in header, notifications and settings are not described.
  • The iOS and Android apps were not captured. Their sections are inferred from the web system and platform conventions.
  • Icons and motion were not measured.
  • The accessible theme variants were not read.
  • Account deletion and store policy rules were not verified.