← GitHub

Guidelines deck

6 boards · page order preserved

  1. developer tools and software collaboration2008

    GitHub

    Let's build from here.

    GitHubCover
    01Covercover
  2. Identity · Marks

    The Invertocat

    primaryclear 1× cap heightmin 20px · screen
    GitHub
    light
    GitHub
    dark
    GitHub
    brand
    mark“Invertocat”clear 0.5× mark widthmin 16px · screen
    GI
    light
    GI
    dark
    GI
    brand
    inverseclear 1× cap heightmin 20px · screen
    GitHub
    light
    GitHub
    dark
    GitHub
    brand
    favicon
    GI
    light
    GI
    dark
    GI
    brand
    monoclear 1× logo heightmin 24px · screen
    GitHub
    light
    GitHub
    dark
    GitHub
    brand
    Favicon legibilityfavicon · at native px
    GI
    16px
    GI
    20px
    GI
    24px
    GitHubThe Invertocat
    02The Invertocatlogo-suite
  3. Tokens · Color

    Primer Color

    GitHub Black
    primary#181717
    50950
    AA 17.9
    Primer Blue
    accent#0969DA
    50950
    AA 5.2
    text
    text#1F2328
    50950
    AA 15.8
    textMuted
    textMuted#57606A
    50950
    AA 6.4
    border
    border#D0D7DE
    50950
    success
    success#1A7F37
    50950
    GitHubPrimer Color
    03Primer Colorcolor-system
  4. Tokens · Typography

    Mona Sans & Hubot Sans

    Aa
    Mona SansGitHub · commissioned · variable

    The quick brown fox commits early and often.

    Regular400Medium500SemiBold600Bold700Black900
    Aa
    Hubot SansGitHub · commissioned · variable

    The quick brown fox commits early and often.

    Medium500Bold700
    GitHubMona Sans & Hubot Sans
    04Mona Sans & Hubot Sanstype-specimen
  5. Product · buttons

    Buttons & States

    primary
    Get startedDefault
    Get startedHover
    Get startedDisabled
    secondary
    Get startedDefault
    Get startedHover
    Get startedDisabled
    ghost
    Get startedDefault
    Get startedHover
    Get startedDisabled
    GitHubButtons & States
    05Buttons & Statesui-preview
  6. Identity · Voice

    Voice & Tone

    technical·clear·confident·developer-first
    Sample · headline
    “Let's build from here.”
    Do
    • +Write for developers — precise, unpatronizing
    • +Prefer concrete verbs and real examples
    • +Respect the reader's time; get to the command
    Don't
    • –Never talk down or over-explain the basics
    • –Avoid marketing fluff and hype adjectives
    • –Don't anthropomorphize the product
    GitHubVoice & Tone
    06Voice & Tonevoice