--- 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 | Role | Light | Dark | Where | |------|-------|------|-------| | Primary button | `#1f883d`, hover `#1c8139` | `#238636`, hover `#29903b` | Primer tokens | | Text on primary | `#ffffff` | `#ffffff` | Primer tokens | | Link and accent | `#0969da` | `#4493f8` | Primer tokens, measured on links | | Text | `#1f2328` | `#f0f6fc` | Primer tokens, measured on the page | | Muted text | `#59636e` | `#9198a1` | Primer tokens | | Canvas | `#ffffff` | `#0d1117` | Primer tokens, measured on the page | | Subtle canvas and default control | `#f6f8fa` | `#151b23`, control `#212830` | Primer tokens | | Border | `#d1d9e0` | `#3d444d` | Primer tokens | | Accent wash | `#ddf4ff` | `#388bfd` at 10 percent | Primer tokens | | Success | `#1a7f37` | `#3fb950` | Primer tokens | | Danger and wash | `#d1242f`, `#ffebe9` | `#f85149` | Primer tokens | | Attention and wash | `#9a6700`, `#fff8c5` | `#d29922` | Primer tokens | | Done (merged) | `#8250df` | `#ab7df8` | Primer 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.