Typography
scale ratio 1.176- Mona Sansdisplay + body400 440 460 480 50091%
- Mona Sans Monomono400 480 5008%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Mona Sans | 56px | 440 | 1.1 | 0em |
| headline | Mona Sans | 34px | 400 | 1.3 | 0em |
| title | Mona Sans | 20px | 400 | 1.3 | 0em |
| body | Mona Sans | 18px | 400 | 1.5 | 0.01em |
| body-sm | Mona Sans | 14px | 500 | 1.5 | 0.015em |
| label | Mona Sans Mono | 12px | 500 | 1.5 | 0em |
| mono | Mona Sans Mono | 14px | 400 | 1.5 | 0.015em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa22Aa28Aa32Aa34Aa40Aa56
- Body size
- 18px / 1.5
- Display size
- 56px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 6.27:1
- Accent on bg
- 4.66:1
- Dark mode
- none
Declared accent tokens
- --brand-Link-color-accent#0055D5painted
- --bgColor-accent-emphasis#0969DApainted
- --brand-color-accent-primary#0D6731painted
- --brand-Token-bgColor-accent#08872Bpainted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 12
- 16
- 20
- 24
- 32
- 48
- 59
- 60
- 64
- 80
Corner radii
468pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 88px
Components
exact computed valuesbutton-primary
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 6px
- padding
- 0px 12px
- height
- 32px
- fontFamily
- Mona Sans VF
- fontSize
- 16px
- fontWeight
- 400
button-secondary
- backgroundColor
- #08872B
- textColor
- #FFFFFF
- rounded
- 6px
- padding
- 6px 20px
- height
- 43px
- fontFamily
- Mona Sans VF
- fontSize
- 14px
- fontWeight
- 400
card
- rounded
- 6px
- padding
- 0px
- border
- 1px solid #D2D9D4
input
- rounded
- 8px
- height
- 41px
- padding
- 16px 12px
Layout & motion
- Container
- 1184px
- Grid columns
- 12
- Hero
- centered+media-below
- Navigation
- top-static
- Page height
- 7,634px
- Easing
- ease
- Durations
- 80ms 200ms 300ms 475ms
- Transitions
- 51
- Keyframes
- 8
- Stack
- hotwire, contentful, github-pages
Page sections (8)
01nav
02logos
03heroyou with starts still Software
04featuresGitHub Platform
05featuresMore ways to use GitHub
06testimonialsWhatever you're building, you can build it on GitHub
07newsletterJoin the world's largest developer community
08footerCompany
How GitHub compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.18×: flatter than 92% of indexed sites (median 1.28×).
- Container
- 1184px: narrower than 65% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 7,634px: shorter than 56% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Mona Sans
- The only site in the index that loads Mona Sans.
- Mona Sans Mono
- The only site in the index that loads Mona Sans Mono.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does GitHub use?
GitHub uses Mona Sans for headings and body text. Mona Sans Mono is used for code.
What are GitHub's brand colors?
GitHub's website uses a light scheme: background #FFFFFF, surface #F2F5F3, text #000000, muted text #58635B and borders #D2D9D4.
How is GitHub's website laid out?
The most common corner radius is 0px, body text is 18px with 1.5 line height, and the page container is 1184px wide.
