GitHub · Change is constant. GitHub keeps you ahead. · GitHub

DesignScan preview · https://github.com · 2026-06-13

Colors

primary#08872b
on-primary#ffffff
primary-hover#077124
background#0d1117
text#ffffff
accent-1#9198a1
accent-2#a4aea6
on-accent-2#111111
border#484f58
error#fa383d
success#238636

Typography

display48px · 400 · lh 1.5
The quick brown fox jumps
display-4040px · 400 · lh 1.5
The quick brown fox jumps
headline-sm24px · 400 · lh 1.5
The quick brown fox jumps
headline-sm-2222px · 400 · lh 1.5
The quick brown fox jumps
title18px · 400 · lh 1.5
The quick brown fox jumps
body-lg16px · 400 · lh 1.5
The quick brown fox jumps
body14px · 400 · lh 1.5
The quick brown fox jumps
label12px · 400 · lh 1.5
The quick brown fox jumps

Spacing

xs4px
sm8px
md12px
lg16px
xl20px
2xl24px
3xl32px

Radius

xs6px
sm8px
md12px
lg16px
xl24px
2xl60px

Layout

--brand-breakpoint-small544px
--breakpoint-medium768px
--breakpoint-large1012px
xl1024px
--breakpoint-xlarge1280px
3xl1400px
containermax-width 1280px

Elevation

sm

Components

button-primary · :hover #077124
surface · input · body-text · border

Body text on the surface color — this is what reading copy looks like.

divider
link
Inline link example →
badge Badge
feedback messages
error · Something went wrong — please try again.
success · Saved. Your changes are live.