GitHub

GitHub sets oversized Mona Sans headlines with tight tracking on a dark void canvas. Verdant (#08872b) is reserved for actions, on buttons with 6px corners, while the rest of the page stays with bone white text and neutral surfaces. The most common corner radius is 60px, with 6px and 24px on smaller elements.

github.com ↗

Colors

Verdant

#08872b

Primary actions and links

Deep Cobalt

#151a22

Secondary accent and highlights

Void

#0d1117

Page canvas

Bone White

#f0f6fc

Headlines and body copy

Deep Void

#000000

Surface or divider

Soft Bone White

#ffffff

Surface or divider

Soft Void

#0f1511

Surface or divider

Silver Mist

#a4aea6

Supporting colour

Pale Cobalt

#a2daff

Supporting colour

Type scale

DisplayThe future of building happens togetherMona Sans · 64px · 425

SubheadingYour AI partner everywhere. Copilot is ready to work with you at each step of the softwareMona Sans · 22px · 600

BodyTools and trends evolve, but collaboration endures. With GitHub, developers, agents, and cMona Sans · 18px · 400

NavPricingMona Sans · 16px · 500

Buttons

Style reference measured from the public page at github.com on 2026-10-12 for design education. GitHub and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# GitHub, Style Reference
> GitHub sets oversized Mona Sans headlines with tight tracking on a dark void canvas. Verdant (#08872b) is reserved for actions, on buttons with 6px corners, while the rest of the page stays with bone white text and neutral surfaces. The most common corner radius is 60px, with 6px and 24px on smaller elements.

**Theme:** dark · **Source:** https://github.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens, Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Verdant | `#08872b` | `--color-accent` | Primary actions and links |
| Deep Cobalt | `#151a22` | `--color-secondary` | Secondary accent and highlights |
| Void | `#0d1117` | `--color-canvas` | Page canvas |
| Bone White | `#f0f6fc` | `--color-ink` | Headlines and body copy |
| Deep Void | `#000000` | `--color-surface-1` | Surface or divider |
| Soft Bone White | `#ffffff` | `--color-surface-2` | Surface or divider |
| Soft Void | `#0f1511` | `--color-surface-3` | Surface or divider |
| Silver Mist | `#a4aea6` | `--color-surface-4` | Supporting colour |
| Pale Cobalt | `#a2daff` | `--color-surface-5` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Mona Sans | 64px | 425 | 1.08 | -0.035em |
| Subheading | Mona Sans | 22px | 600 | 1.40 | 0 |
| Body | Mona Sans | 18px | 400 | 1.50 | 0.010em |
| Nav | Mona Sans | 16px | 500 | 1.50 | 0.015em |

Font families on the page: Mona Sans VF, Mona Sans, Mona Sans Mono. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 60px, 6px, 24px, 8px, 50%
- Primary button: background `#08872b`, text `#ffffff`, radius 6px, padding 6px 20px, 14px / 400

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer