designlang
Brand guidelines #08872b

June 12, 2026

github.com

A reading of the visual language at https://github.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
B 82/100
Tokens
30 colours · 10 sizes
Generated
designlang
Chapter 01

About

Page intent
landing 61% confidence
Material language
material-you
Imagery style
photography
Component library
bootstrap
Stack
unknown
Voice tone
neutral
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 13 neutrals · 30 total

Primary #F0F6FC
RGB
240, 246, 252
HSL
210°, 67%, 96%
Secondary #08872B
RGB
8, 135, 43
HSL
137°, 89%, 28%
Accent #1F883D
RGB
31, 136, 61
HSL
137°, 63%, 33%

Neutrals

#FFFFFF
#000000
#9198A1
#58635B
#59636E
#A4AEA6
#D1D9E0
#7C8980
#404651
#484F58
#E4EBE6
#2E374A

Full palette

#FFFFFF
#F0F6FC
#000000
#8DD6FF
#9198A1
#1F2328
#58635B
#59636E
#A4AEA6
#D1D9E0
#5FED83
#D1242F
#F85149
#0D1117
#D29922
#7C8980
#4493F8
#404651
#484F58
#0969DA
#E4EBE6
#1F6FEB
#005DD5
#1F883D
#08872B
#0D3024
#2E374A
#818B98

WCAG 100% · 6 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

3 families · 10 sizes · 9 weights

Display
Mona Sans
Body
Mona Sans VF
Weights
400, 500, 600, 460, 480, 425, 800, 440, 700

Specimen

Navigation Menu
Search code, repositories, users, issues, pull requests...

Scale

StepSizeSample
t00 64px Navigation Menu
t01 48px Navigation Menu
t02 40px Navigation Menu
t03 32px Navigation Menu
t04 24px Navigation Menu
t05 22px Navigation Menu
t06 18px Navigation Menu
t07 16px Navigation Menu
t08 14px Navigation Menu
t09 12px Navigation Menu
Chapter 05

Spacing

Base 2px · 11 steps captured

Rhythm

1px
40px
64px
80px
96px
102px
112px
274px
308px
384px
Chapter 06

Shape

8 radii · 6 elevation tiers

Border radii

3px
6px
12px
16px
24px
48px

Elevation

xs
sm
md
lg
xl
2xl
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
fillDominant
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: mixed · 7 durations · 11 easings

Duration scale

75ms
100ms
200ms
300ms
480ms
800ms

Easings

Chapter 09

Components

bootstrap · 3 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
link, secondary
Sizes
lg, medium

other

Slots
—
Variants
—
Sizes
—

input

Slots
leading, trailing
Variants
—
Sizes
—
Chapter 10

Voice

neutral · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
6 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #f0f6fc;
  --font-display: "Mona Sans";
  --space-base: 2px;
  --radius-md: 6px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#f0f6fc' },
      fontFamily: { display: ['Mona Sans', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '6px' },
    },
  },
};

Run npx designlang pack github.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.