---
site: GitHub · Change is constant. GitHub keeps you ahead. · GitHub
url: "https://github.com"
generated_at: "2026-06-12T12:48:14.667Z"
generator: "designlang@12.16.0"
intent: landing
material: material-you
library: bootstrap
tokens:
  colors:
    primary: "#f0f6fc"
    secondary: "#08872b"
    accent: "#1f883d"
    background: "#0d1117"
    foreground: "#f0f6fc"
  typography:
    sans: Mona Sans
    mono: Mona Sans Mono
    base: 16
  spacing:
    base: 2
    scale: "[1, 40, 64, 80, 96, 102, 112, 274, 308, 384]"
  radii:
    sm: 3
    md: 6
    lg: 16
    xl: 24
    full: 48
  shadows:
    sm: "rgb(61, 68, 77) 0px 0px 0px 1px, rgba(1, 4, 9, 0.4) 0px 6px 12px -3px, rgba(1, 4, 9, 0.4) 0px 6px 18px 0px"
---

# Overview

A **landing** page (heuristic confidence 0.61), dressed in **material-you** material (0.45).

Component library appears to be **bootstrap** (0.6).

> "Navigation Menu"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **balanced**.

Reading order detected on the source: `cta → feature-grid → hero → nav → hero → cta → testimonials → nav → content → nav → pricing → nav → testimonials → nav → cta → cta → cta → footer → content → nav → nav → nav → nav → nav → nav`.

Source: <https://github.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#f0f6fc` | 650 |
| secondary | `#08872b` | 2 |
| accent | `#1f883d` | 2 |
| background | `#0d1117` | — |
| foreground | `#f0f6fc` | — |

**Neutrals:** `#ffffff` · `#000000` · `#9198a1` · `#58635b` · `#59636e`

**Total unique colors detected:** 30.

# Typography

**Families**
- `Mona Sans` · 1254 uses
- `Mona Sans VF` · 476 uses
- `Mona Sans Mono` · 17 uses

**Body size:** `16px` / line-height `normal`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `64px` | `425` | `69.12px` |
| h2 | `48px` | `800` | `48px` |
| h3 | `40px` | `460` | `48px` |
| h4 | `32px` | `600` | `48px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `1px` · `40px` · `64px` · `80px` · `96px` · `102px` · `112px` · `274px` · `308px` · `384px`

**Layout primitives:** 64 grid containers · 281 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgba(209, 217, 224, 0.25) 0px 0px 0px 1px, rgba(37, 41, 46, 0.04) 0px 6px 12px -3px, rgba(37, 41, 46, 0.12) 0px 6px 18px 0px`
- `sm` — `rgba(209, 217, 224, 0) 0px 0px 0px 1px, rgba(37, 41, 46, 0.24) 0px 40px 80px 0px`
- `sm` — `rgba(255, 255, 255, 0) 0px 0px 0px 1px inset`
- `sm` — `rgb(61, 68, 77) 0px 0px 0px 1px, rgba(1, 4, 9, 0.4) 0px 6px 12px -3px, rgba(1, 4, 9, 0.4) 0px 6px 18px 0px`
- `xs` — `rgba(31, 35, 40, 0.04) 0px 1px 0px 0px inset`
- `xs` — `rgb(209, 217, 224) 0px -1px 0px 0px inset`

**Z-index layers:** 14 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `sm` — `3px`
- `md` — `6px`
- `lg` — `12px`
- `lg` — `16px`
- `xl` — `24px`
- `full` — `48px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `modals` · `dropdowns` · `badges` · `tabs` · `accordions` · `tooltips` · `progressBars` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | link, secondary | lg, medium | 35 |
| other | — | — | 5 |
| input | — | — | 2 |

# Do's and Don'ts

**Do's**
- Use `sign`, `by`, `read` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **balanced** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't 9 font weights in use — consider standardizing to 3 (regular, medium, bold).
- Don't 4312 !important rules — prefer specificity over overrides.
- Don't 81% of css is unused — consider purging.
- Don't 32949 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.16.0 from <https://github.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._