github.com
MIT
GitHub's production design system with 568 CSS custom properties, featuring clean typography, accessible colour tokens, and motion primitives built for developer platforms and collaborative workflows
Published by Layout4 importsminimal tierLayout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install github-comUI themeReskin shadcn or Layout UI components to match github.com.
npx shadcn add https://layout.design/r/github-com/theme.json# layout.md — GitHub Design System
---
## 0. Quick Reference
**Stack:** GitHub.com · Primer Design System · CSS custom properties (568 vars extracted, high confidence)
**Token source:** `extracted-css-vars` — use original variable names exactly as shown.
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.
```css
/* ── Core Tokens ── */
/* Fonts */
--fontStack-sansSerif: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
--brand-fontStack-monospace: "Mona Sans Mono", monospace;
/* Colours */
--brand-primary-cta: rgb(8, 135, 43); /* Primary CTA background — green sign-up buttons */
--brand-surface-2: rgba(46, 55, 74, 0.82); /* Dark frosted surface — nav/modal backgrounds */
--brand-mark-1: rgb(163, 113, 247); /* Brand illustration accent — purple */
--brand-mark-2: rgb(141, 214, 255); /* Brand illustration accent — sky blue */
/* Spacing */
--github-space-xs: 4px; --github-space-sm: 12px;
--github-space-md: 16px; --github-space-lg: 32px;
--github-space-xl: 44px; --github-space-2xl: 48px;
--github-space-3xl: 96px;
/* Radius */
--github-radius-sm: 3px; --github-radius-md: 6px;
--github-radius-lg: 8px; --github-radius-full: 60px; /* pill — used on tabs/toggles */
/* Motion */
--github-duration-fast: 0.08s; --github-duration-base: 0.2s;
--github-duration-slow: 0.5s; --github-ease-default: ease;
/* Typography scale (brand) */
--brand-text-size-400: 1.375rem; --brand-text-size-500: 1.75rem;
--brand-text-size-600: 2.125rem; --brand-text-size-700: 2.5rem;
--brand-text-size-800: 3rem; --brand-text-size-900: 3.5rem;
--brand-text-size-1000: 4rem;
```
```tsx
/* Primary CTA Button — production-ready */
const PrimaryButton = ({ children, disabled }: { children: React.ReactNode; disabled?: boolean }) => (
<button
disabled={disabled}
style={{
fontFamily: 'var(--fontStack-sansSerif)',
fontSize: '16px', fontWeight: 500,
backgroundColor: disabled ? 'var(--button-primary-bgColor-disabled, #94d3a2)' : 'var(--brand-primary-cta)',
color: '#ffffff',
borderRadius: 'var(--github-radius-full)', /* pill shape */
padding: 'var(--base-size-20) var(--base-size-32)',
border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
transition: `background-color var(--github-duration-fast) var(--github-ease-default)`,
}}
>{children}</button>
);
```
**NEVER rules:**
- NEVER use `Inter`, `Roboto`, or `Arial` as the primary font — always use `var(--fontStack-sansSerif)` (Mona Sans VF)
- NEVER hardcode hex colours — always reference a `--brand-*` or `--github-*` token
- NEVER use `border-radius: 8px` on pill-shaped tabs/toggles — use `var(--github-radius-full)` (60px)
- NEVER omit hover, focus, active, and disabled states on any interactive element
- NEVER construct Tailwind class names dynamically (e.g. `bg-${color}`) — classes won't be generated
- NEVER use `!important` to override design tokens
- NEVER use arbitrary spacing values — always use `--base-size-*` or `--github-space-*` tokens
**Full design system → see layout.md**
---
## 1. Design Direction & Philosophy
### Character & Aesthetic Intent
GitHub's design system (Primer) projects **technical credibility fused with approachability**. The brand voice is precise and functional at the product level (repository UI, code review), and warmer and more expressive at the marketing level (github.com homepage, feature pages). The two-layer system — Primer (product) and Primer Brand (marketing) — co-exist on the same domain.
**Mood:** Professional, trustworthy, subtly expressive. Dark surfaces with luminous green CTAs. Monochromatic depth with selective colour for status and illustration.
**Aesthetic pillars:**
- **Variable font expressiveness:** Mona Sans VF supports optical sizing and weight axes — use weight variation for hierarchy, not size alone at large scales
- **Functional minimalism:** UI chrome is restrained; colour is deployed purposefully (green = action, blue = link/info, red = danger)
- **Code-native:** Monospace type (`Mona Sans Mono`, `ui-monospace`) is a first-class citizen, not an afterthought
### What This Design Explicitly Rejects
- **Rounded-for-cute-sake:** Dialog radius is 12px (`role_dialog`), not the pill shapes used for toggles. Match context exactly
- **Warm colour palettes as primary surfaces:** No beige, no warm grey backgrounds — surfaces are cool dark (`rgba(46, 55, 74, 0.82)`) or pure white (`#ffffff`)
- **Heavy drop shadows:** GitHub uses inset box-shadows (border simulation) and very light elevation shadows — never `box-shadow: 0 8px 32px rgba(0,0,0,0.3)`
- **Generic system fonts:** Arial/Helvetica are fallbacks only — NEVER set as the first font-family
- **Decorative gradients on UI chrome:** Gradients are reserved for brand illustration/hero contexts, not buttons or cards
---
## 2. Colour System
### Tier 1 — Primitive Scale Aliases
```css
/* Resolved at runtime via GitHub's base colour scale.
These are references — concrete values live in the scale tokens.
Confidence: high (directly extracted) */
/* Brand icon fill colours */
--brand-Icon-color-green: var(--base-color-scale-green-6); /* Default icon colour */
--brand-Icon-color-blue: var(--base-color-scale-blue-5);
--brand-Icon-color-red: var(--base-color-scale-red-5);
--brand-Icon-color-orange: var(--base-color-scale-orange-5);
--brand-Icon-color-yellow: var(--base-color-scale-yellow-5);
--brand-Icon-color-teal: var(--base-color-scale-teal-5);
--brand-Icon-color-purple: var(--base-color-scale-purple-5);
--brand-Icon-color-pink: var(--base-color-scale-pink-5);
--brand-Icon-color-indigo: var(--base-color-scale-indigo-5);
--brand-Icon-color-coral: var(--base-color-scale-coral-5);
--brand-Icon-color-lime: var(--base-color-scale-lime-5);
--brand-Icon-color-lemon: var(--base-color-scale-lemon-5);
--brand-Icon-color-gray: var(--base-color-scale-gray-6);
--brand-Icon-color-default: var(--brand-Icon-color-green);
/* Brand icon background tints */
--brand-Icon-background-green: var(--base-color-scale-green-0);
--brand-Icon-background-blue: var(--base-color-scale-blue-0);
--brand-Icon-background-red: var(--base-color-scale-red-0);
--brand-Icon-background-yellow: var(--base-color-scale-yellow-0);
--brand-Icon-background-teal: var(--base-color-scale-teal-0);
--brand-Icon-background-purple: var(--base-color-scale-purple-0);
--brand-Icon-background-pink: var(--base-color-scale-pink-0);
--brand-Icon-background-orange: var(--base-color-scale-orange-0);
--brand-Icon-background-indigo: var(--base-color-scale-indigo-0);
--brand-Icon-background-coral: var(--base-color-scale-coral-0);
--brand-Icon-background-lime: var(--base-color-scale-lime-0);
--brand-Icon-background-lemon: var(--base-color-scale-lemon-0);
--brand-Icon-background-gray: var(--base-color-scale-gray-0);
--brand-Icon-background-default: var(--brand-Icon-background-green);
```
### Tier 2 — Semantic Aliases (Curated)
```css
/* ── Action / Brand ── */
--brand-primary-cta: rgb(8, 135, 43);
/* Primary CTA button background. Confirmed on "Sign up for GitHub" buttons.
Extracted: high confidence */
--brand-surface-2: rgba(46, 55, 74, 0.82);
/* Frosted dark surface for nav search bar, modals, overlays.
Extracted: medium confidence */
/* ── Status ── */
--github-success: var(--base-color-scale-green-6); /* Success states, completion indicators */
--github-warning: var(--base-color-scale-orange-5); /* Warning banners, caution states */
--github-error: var(--base-color-scale-red-5); /* Error messages, danger actions */
--github-info: var(--base-color-scale-blue-5); /* Informational banners, links */
/* ── State tokens (Primer product system) ── */
--color-accent-emphasis: Highlight; /* System accent, defers to browser */
--color-fg-on-emphasis: LinkText; /* Foreground on emphasis surfaces */
--fgColor-onEmphasis: LinkText;
--fgColor-accent: Highlight;
/* ── Video / Media ── */
--brand-VideoPlayer-closedCaption-text-bgColor: #000000bf; /* CC caption background, 75% opacity black */
--brand-VideoPlayer-closedCaption-text-fgColor: var(--base-color-scale-white-0); /* CC text */
```
### Tier 3 — Accent / Brand Illustration
```css
/* These are SVG fill colours for the GitHub mascot/illustration system.
NEVER use as UI surface or text colours. Decorative only. */
--brand-mark-1: rgb(163, 113, 247); /* Purple — brand illustration accent (8 SVG paths) */
--brand-mark-2: rgb(141, 214, 255); /* Sky blue — brand illustration accent (4 SVG paths) */
```
### Colour Role Reference
| Role | Token | Resolved Value | Usage |
|---|---|---|---|
| Primary CTA | `--brand-primary-cta` | `rgb(8, 135, 43)` | Sign-up buttons, primary actions |
| Dark Surface | `--brand-surface-2` | `rgba(46, 55, 74, 0.82)` | Nav search, modals, overlays |
| Body Text | `rgb(31, 35, 40)` | — | Computed from `body`, `h1`, `label` |
| Muted Text | `rgb(89, 99, 110)` | — | Computed from `h3`, `card` elements |
| Danger Text | `rgb(209, 36, 47)` | — | Alert/validation error text |
| Link Surface | `rgb(31, 111, 235)` | — | Link background (computed) |
| Tooltip BG | `rgb(61, 68, 77)` | — | Tooltip background (computed) |
| Dialog BG | `rgb(255, 255, 255)` | — | Role dialog background |
| Dropdown BG | `rgb(255, 255, 255)` | — | Dropdown menu background |
| Brand Purple | `--brand-mark-1` | `rgb(163, 113, 247)` | Illustration only |
| Brand Sky | `--brand-mark-2` | `rgb(141, 214, 255)` | Illustration only |
---
## 3. Typography System
### Font Stacks
```css
--fontStack-sansSerif: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
/* Primary UI and body font. Variable font (weight 200–900, width axis). */
--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
/* Code blocks, inline code, terminal output. */
--brand-fontStack-monospace: "Mona Sans Mono", monospace;
/* GitHub's proprietary mono font for brand/marketing contexts. */
/* NOTE: --fontStack-sansSerifDisplay is referenced in shorthand tokens but
was not fully extracted. Use --fontStack-sansSerif for display contexts.
[TBD - extract --fontStack-sansSerifDisplay manually] */
```
### Composite Typography Groups
```css
/* ── Body Text ── */
/* body-large: 400 16px / 1.5 sansSerif */
--text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
/* body-medium: 400 14px / 1.5 sansSerif — default body text */
--text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
/* body-small: 400 12px / 1.625 sansSerif */
--text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
/* ── Caption ── */
/* caption: 400 12px / 1.25 sansSerif */
--text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
/* ── Code ── */
/* code-block: 400 13px / 1.5 monospace */
--text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
/* code-inline: 400 0.9285em monospace */
--text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
/* ── Display / Hero ── */
/* display: 500 40px / 1.375 sansSerifDisplay */
--text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerif);
/* ── Subtitle ── */
/* subtitle: 400 20px / 1.625 sansSerifDisplay */
--text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerif);
/* ── Title Scale ── */
/* title-large: 600 32px / 1.5 sansSerifDisplay */
--text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerif);
/* title-medium: 600 20px / 1.625 sansSerifDisplay */
--text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerif);
/* title-small: 600 16px / 1.5 sansSerif */
--text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
```
### Brand / Marketing Typography Scale
| Token | Size | Line Height | Letter Spacing | Weight | Usage |
|---|---|---|---|---|---|
| `--brand-text-size-100` | 0.875rem (14px) | 1.5 | 0.21px | 400 | Smallest brand text |
| `--brand-text-size-200` | 1rem (16px) | 1.5 | 0.24px | 400 | Body |
| `--brand-text-size-300` | 1.125rem (18px) | 1.5 | 0.18px | 400 | Large body |
| `--brand-text-size-350` | 1.25rem (20px) | 1.5 | 0.18px | 400 | Subhead sm |
| `--brand-text-size-400` | 1.375rem (22px) | 1.4 | 0 | 400 | Subhead lg |
| `--brand-text-size-500` | 1.75rem (28px) | 1.35 | 0 | 400 | Section heading |
| `--brand-text-size-600` | 2.125rem (34px) | 1.3 | 0 | 400 | Large heading |
| `--brand-text-size-700` | 2.5rem (40px) | 1.2 | 0 | 400 | H2 hero |
| `--brand-text-size-800` | 3rem (48px) | 1.18 | 0 | 400 | H1 hero |
| `--brand-text-size-900` | 3.5rem (56px) | 1.1 | 0 | 400 | Display large |
| `--brand-text-size-1000` | 4rem (64px) | 1.08 | -0.035em | 400 | Display XL |
### Brand Heading Line Heights
```css
--brand-heading-lineHeight-400: 1.3; /* 22px sizes */
--brand-heading-lineHeight-500: 1.3; /* 28px sizes */
--brand-heading-lineHeight-600: 1.2; /* 34px sizes */
--brand-heading-lineHeight-700: 1.2; /* 40px sizes */
--brand-heading-lineHeight-800: 1.2; /* 48px sizes */
--brand-heading-lineHeight-900: 1.0; /* 56px sizes */
--brand-heading-lineHeight-1000: 1.0; /* 64px sizes */
```
### Weight Scale
```css
/* Primer product weights (base) */
--base-text-weight-normal: 400;
--base-text-weight-medium: 500;
--base-text-weight-semibold: 600;
--base-text-weight-bold: 700;
/* Brand / Mona Sans VF variable weights */
--brand-text-weight-normal: 400;
--brand-text-weight-medium: 500;
--brand-text-weight-semibold: 525; /* VF axis — NOT 600 */
--brand-text-weight-bold: 537; /* VF axis — NOT 700 */
--brand-text-weight-extrabold: 543;
--brand-text-weight-heavy: 550;
```
> **Critical:** Mona Sans VF uses non-standard variable font weight values (525, 537, 543, 550). Do NOT substitute standard CSS weight values when using `--brand-text-weight-*` tokens with this font.
### Computed Element Defaults
| Element | Font Size | Weight | Line Height | Color |
|---|---|---|---|---|
| `body` | 14px | 400 | 21px (1.5) | `rgb(31, 35, 40)` |
| `h1` | 32px | 600 | 48px (1.5) | `rgb(31, 35, 40)` |
| `h2` | 24px | 600 | 36px (1.5) | `rgb(255, 255, 255)` |
| `h3` | 12px | 600 | 19.5px | `rgb(89, 99, 110)` |
| `label` | 14px | 600 | 21px | `rgb(31, 35, 40)` |
| `button` | 14px | 500 | 21px | — |
| `tooltip` | 12px | 400 | 19.5px | `rgb(255, 255, 255)` |
---
## 4. Spacing & Layout
### Base Size Scale
```css
/* 4px base unit. Full extracted scale. */
--base-size-2: 0.125rem; /* 2px */
--base-size-4: 0.25rem; /* 4px */
--base-size-6: 0.375rem; /* 6px */
--base-size-8: 0.5rem; /* 8px */
--base-size-12: 0.75rem; /* 12px */
--base-size-16: 1rem; /* 16px — base layout unit */
--base-size-20: 1.25rem; /* 20px */
--base-size-24: 1.5rem; /* 24px */
--base-size-28: 1.75rem; /* 28px */
--base-size-32: 2rem; /* 32px */
--base-size-36: 2.25rem; /* 36px */
--base-size-40: 2.5rem; /* 40px */
--base-size-44: 2.75rem; /* 44px */
--base-size-48: 3rem; /* 48px */
--base-size-60: 3.75rem; /* 60px */
--base-size-64: 4rem; /* 64px */
--base-size-80: 5rem; /* 80px */
--base-size-88: 5.5rem; /* 88px */
--base-size-96: 6rem; /* 96px */
--base-size-112: 7rem; /* 112px */
--base-size-128: 8rem; /* 128px */
```
### Semantic Spacing (Curated Aliases)
```css
--github-space-xs: 4px; /* var(--base-size-4) — icon gaps, micro spacing */
--github-space-sm: 12px; /* var(--base-size-12) — tight component padding */
--github-space-md: 16px; /* var(--base-size-16) — standard component padding */
--github-space-lg: 32px; /* var(--base-size-32) — section internal gaps */
--github-space-xl: 44px; /* var(--base-size-44) — large component padding */
--github-space-2xl: 48px; /* var(--base-size-48) — section padding */
--github-space-3xl: 96px; /* var(--base-size-96) — major section vertical rhythm */
```
### Brand Stack / Grid Spacing
```css
/* Brand component spacing system */
--brand-stack-gap-condensed: var(--base-size-16); /* 16px — tight stacks */
--brand-stack-gap-normal: var(--base-size-24); /* 24px — default stacks */
--brand-stack-gap-spacious: var(--base-size-48); /* 48px — open stacks */
--brand-stack-padding-condensed: var(--base-size-16);
--brand-stack-padding-normal: var(--base-size-24);
--brand-stack-padding-spacious: var(--base-size-48);
/* Brand grid */
--brand-Grid-spacing-margin: var(--base-size-16); /* 16px outer margins */
--brand-Grid-spacing-column-gap: var(--base-size-48); /* 48px column gutter */
--brand-Grid-spacing-row: var(--base-size-48); /* 48px row gap */
```
### Control Sizing
```css
/* Control height tokens */
--control-xsmall-size: 1.5rem; /* 24px */
--control-small-size: 1.75rem; /* 28px */
--control-medium-size: 2rem; /* 32px */
--control-large-size: 2.5rem; /* 40px */
--control-xlarge-size: 3rem; /* 48px */
/* Brand control heights (larger, marketing-oriented) */
--brand-control-small-size: var(--base-size-32); /* 32px */
--brand-control-medium-size: 2.6875rem; /* 43px */
--brand-control-large-size: 3.75rem; /* 60px */
/* Padding inline */
--brand-control-large-paddingInline-normal: var(--base-size-20); /* 20px */
--brand-control-large-paddingInline-spacious: var(--base-size-32); /* 32px */
--brand-control-medium-paddingInline-normal: var(--base-size-16); /* 16px */
--brand-control-medium-paddingInline-spacious: var(--base-size-28); /* 28px */
```
### Border Radius
```css
--borderRadius-small: 0.1875rem; /* 3px — pill indicators, small badges */
--borderRadius-medium: 0.375rem; /* 6px — default, buttons, inputs, dropdowns */
--borderRadius-large: 0.75rem; /* 12px — dialogs, large cards */
--borderRadius-full: 624.938rem; /* ~10000px — fully pill-shaped */
--borderRadius-default: var(--borderRadius-medium); /* 6px */
/* Brand radius system */
--brand-borderRadius-small: var(--base-size-4); /* 4px */
--brand-borderRadius-medium: var(--base-size-8); /* 8px */
--brand-borderRadius-large: var(--base-size-16); /* 16px */
--brand-borderRadius-xlarge: var(--base-size-24); /* 24px */
--brand-borderRadius-full: 624.938rem; /* pill */
/* Curated shorthand */
--github-radius-sm: 3px; /* Checkboxes, tight borders */
--github-radius-md: 6px; /* Buttons, inputs, tooltips, modals (standard) */
--github-radius-lg: 8px; /* Text inputs (brand), larger elements */
--github-radius-full: 60px; /* Tab toggles, pill buttons */
/* Bento / feature card radius */
--brand-Bento-item-borderRadius-large: var(--brand-borderRadius-xlarge); /* 24px */
--brand-Bento-item-borderRadius-medium: var(--brand-borderRadius-xlarge); /* 24px */
--brand-Bento-item-borderRadius-small: var(--brand-borderRadius-large); /* 16px */
/* EyebrowBanner pill */
--brand-EyebrowBanner-borderRadius: 6.25rem; /* ~100px — announcement pill banners */
```
### Border Widths
```css
--borderWidth-thin: 0.0625rem; /* 1px — default border */
--borderWidth-thick: 0.125rem; /* 2px — emphasis border */
--borderWidth-thicker: 0.25rem; /* 4px — high-contrast/focus */
--borderWidth-default: var(--borderWidth-thin);
/* Box shadow border simulation */
--boxShadow-thin: inset 0 0 0 var(--borderWidth-thin);
--boxShadow-thick: inset 0 0 0 var(--borderWidth-thick);
--boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
```
### Grid & Breakpoints
GitHub uses a highly granular responsive system with 50+ breakpoints. Key semantic breakpoints:
| Label | Value | Notes |
|---|---|---|
| xs | 544px | Mobile/narrow threshold (Primer canonical) |
| sm | 768px | Tablet |
| md | 1012px | Desktop (Primer canonical) |
| lg | 1280px | Wide desktop |
| xl | 1400px | Extra wide |
| xxl | 1600px | Brand hero sections |
```css
/* Layout system tokens */
--Layout-pane-width: 220px;
--Layout-content-width: 100%;
--Layout-column-gap: var(--base-size-16);
--Layout-row-gap: var(--base-size-16);
```
### Hero Section Padding
```css
--brand-Hero-regular-padding: var(--base-size-128) 0; /* 128px top/bottom */
--brand-Hero-narrow-padding: var(--base-size-96) 0; /* 96px top/bottom */
```
---
## 5. Page Structure & Layout Patterns
> All sections below are **(inferred)** from the Layout Digest component inventory and computed styles. No screenshots were provided. Anchor values are drawn from computed styles and the brand token system.
### 5.1 Section Map
| # | Section | Layout Type | Approx. Height | Key Elements | Notes |
|---|---|---|---|---|---|
| 1 | Global Navigation | Horizontal flex, full-width | 64px | Logo, nav links, search (brand-surface-2), sign-in/sign-up CTAs | `role_navigation` → `display:block`; search = frosted dark surface |
| 2 | Hero / Above-the-Fold | Full-width, centered column | 768–896px | H1 headline, subtitle, primary CTA (green pill), secondary CTA (outline) | `--brand-Hero-regular-padding` = 128px vertical; CTA = `--brand-primary-cta` |
| 3 | Feature / Bento Grid | CSS Grid, contained | 600–1200px | Feature cards (24px radius), icon tiles, short headings, body copy | `--brand-Bento-item-borderRadius-large` = 24px; `--brand-Grid-spacing-column-gap` = 48px |
| 4 | River / Content Alternating | Two-column flex, alternating image/text | ~480px per row | Visual asset + heading + body + inline CTA link | `--brand-River-spacing-inner` = 24px; outer block = 48px |
| 5 | Social Proof / Logo Suite | Full-width marquee or static grid | ~200px | Partner/customer logos, animated horizontal scroll | `--Primer_Brand__LogoSuite-module__LogobarScrollX` animation |
| 6 | CTA Banner / Sign-Up | Full-width, centered | ~320px | Eyebrow pill badge, large heading, primary CTA | `--brand-EyebrowBanner-borderRadius` = 100px; CTA = `--brand-primary-cta` |
| 7 | Footer | Multi-column flex grid | ~400px | Links grouped by category, GitHub logo, legal text | Display: flex; columns likely 4–5; gap = `--brand-stack-gap-normal` (24px) |
### 5.2 Layout Patterns
**Navigation:**
- `display: block` at root, inner content flex row
- Search bar uses `--brand-surface-2` (dark frosted background)
- Sign-up button: `background-color: var(--brand-primary-cta)`, `border-radius: var(--github-radius-full)` (pill)
- Tab/toggle nav items: `border-radius: 60px`, padding `8px 16px`
**Feature/Bento Grid:**
```css
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--brand-Grid-spacing-column-gap); /* 48px */
padding: var(--brand-stack-padding-spacious); /* 48px */
}
.bento-card {
border-radius: var(--brand-Bento-item-borderRadius-large); /* 24px */
padding: var(--brand-box-spacing-normal); /* 24px */
}
```
**River (Alternating Content):**
```css
.river-row {
display: flex;
flex-direction: row; /* alternates with row-reverse */
gap: var(--brand-River-spacing-inner); /* 24px */
padding-block: var(--brand-River-spacing-outerBlock); /* 48px */
}
/* Visual and text columns typically 50/50 or 40/60 */
```
**Modal/Overlay:**
- `display: flex`, `flex-direction: row`, `align-items: center`
- `background-color: var(--brand-surface-2)` = `rgba(46, 55, 74, 0.82)`
- `border-radius: var(--github-radius-md)` = `6px`
- `border: 1px solid rgb(129, 139, 152)`
### 5.3 Visual Hierarchy
- **Primary CTA colour:** `rgb(8, 135, 43)` (green) — confirmed on "Sign up for GitHub" buttons
- **CTA placement:** Above the fold in hero, repeated at bottom CTA banner section
- **Pill CTAs** use `border-radius: var(--github-radius-full)` (60px), not the standard 6px button radius
- **Muted text** (`rgb(89, 99, 110)`) is used for labels, nav sub-items, and card metadata
- **Whitespace rhythm:** 48px between major sections (`--brand-stack-gap-spacious`), 24px within sections
- **Icon tiles** use coloured background tints (`--brand-Icon-background-*`) with matching icon fill (`--brand-Icon-color-*`)
### 5.4 Content Patterns
**Icon + Heading + Body (feature item):**
```
[Icon tile — 40×40px, coloured bg tint, 8px radius]
[Heading — brand-text-size-400 (22px), weight 400]
[Body — brand-text-size-200 (16px), weight 400, line-height 1.5]
[Optional: arrow CTA link]
```
**Eyebrow + Heading + CTA (hero/banner):**
```
[Pill badge — border-radius 100px, small caps label]
[H1 — brand-text-size-800/900, line-height 1.0–1.2]
[Subtitle — brand-text-size-350/400, weight 400]
[Primary CTA — green pill, 60px radius, padding 20px 32px]
[Secondary CTA — outline or text link]
```
**River row:**
```
[Left: Visual asset (screenshot/illustration, shadow: --brand-River-visual-shadow)]
[Right: Label margin 16px → Heading margin 16px → Body → CTA link]
```
---
## 6. Component Patterns
### 6.1 Button
**Anatomy:** `[optional-leading-icon] [label] [optional-trailing-icon]`
- Uses `display: grid`, `justify-content: center`, `align-items: center`, `gap: 4px`
- Font: 14px / 500 / `--fontStack-sansSerif`
- Transition: `color, fill, background-color, border-color` at `var(--github-duration-fast)` `cubic-bezier(0.65, 0, 0.35, 1)`
**Token-to-property mapping:**
| State | Background | Border | Color | Radius | Transition |
|---|---|---|---|---|---|
| Default (primary) | `--brand-primary-cta` | none | `#ffffff` | `--github-radius-full` (pill) or `--github-radius-md` (standard) | — |
| Hover | `--button-primary-bgColor-hover` | — | `#ffffff` | — | `0.08s` |
| Focus | — | inset 0 0 0 3px `--fgColor-onEmphasis` | — | — | — |
| Focus (no :focus-visible) | — | none | — | — | — |
| Active/Selected | `--button-primary-bgColor-active` | `--button-primary-shadow-selected` | — | — | 0s (instant) |
| Disabled | `--button-primary-bgColor-disabled` | none | `--button-primary-fgColor-disabled` | — | — |
```tsx
// Production-ready GitHub-style Primary Button
import React from 'react';
interface ButtonProps {
children: React.ReactNode;
variant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'invisible';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
loading?: boolean;
onClick?: () => void;
type?: 'button' | 'submit';
}
const sizeStyles = {
sm: {
padding: 'var(--brand-control-small-paddingBlock) var(--brand-control-small-paddingInline-normal)',
fontSize: 'var(--base-text-size-sm)',
height: 'var(--brand-control-small-size)',
borderRadius: 'var(--github-radius-md)',
},
md: {
padding: 'var(--brand-control-medium-paddingBlock-normal) var(--brand-control-medium-paddingInline-normal)',
fontSize: 'var(--base-text-size-sm)',
height: 'var(--brand-control-medium-size)',
borderRadius: 'var(--github-radius-md)',
},
lg: {
padding: 'var(--brand-control-large-paddingBlock-normal) var(--brand-control-large-paddingInline-normal)',
fontSize: 'var(--base-text-size-md)',
height: 'var(--brand-control-large-size)',
borderRadius: 'var(--github-radius-full)', /* pill for brand CTA */
},
};
const variantStyles = {
primary: {
backgroundColor: 'var(--brand-primary-cta)',
color: '#ffffff',
border: 'none',
},
secondary: {
backgroundColor: 'var(--button-default-bgColor-rest, transparent)',
color: 'inherit',
border: `var(--borderWidth-thin) solid currentColor`,
},
outline: {
backgroundColor: 'transparent',
color: 'var(--brand-primary-cta)',
border: `var(--borderWidth-thin) solid var(--brand-primary-cta)`,
},
danger: {
backgroundColor: 'var(--button-danger-bgColor-rest, #cf222e)',
color: '#ffffff',
border: 'none',
},
invisible: {
backgroundColor: 'transparent',
color: 'inherit',
border: 'none',
},
};
export const Button: React.FC<ButtonProps> = ({
children,
variant = 'primary',
size = 'md',
disabled = false,
loading = false,
onClick,
type = 'button',
}) => {
const isDisabled = disabled || loading;
return (
<button
type={type}
disabled={isDisabled}
aria-disabled={isDisabled}
onClick={!isDisabled ? onClick : undefined}
style={{
/* Layout */
display: 'grid',
gridAutoFlow: 'column',
justifyContent: 'center',
alignItems: 'center',
gap: 'var(--github-space-xs)', /* 4px */
/* Typography */
fontFamily: 'var(--fontStack-sansSerif)',
fontWeight: 'var(--brand-text-weight-medium)', /* 500 */
lineHeight: 'var(--brand-control-large-lineBoxHeight)',
/* Visual */
...variantStyles[variant],
...sizeStyles[size],
/* Interaction */
cursor: isDisabled ? 'not-allowed' : 'pointer',
opacity: isDisabled ? 0.6 : 1,
transition: [
`color var(--github-duration-fast) cubic-bezier(0.65, 0, 0.35, 1)`,
`background-color var(--github-duration-fast) cubic-bezier(0.65, 0, 0.35, 1)`,
`border-color var(--github-duration-fast) cubic-bezier(0.65, 0, 0.35, 1)`,
].join(', '),
/* Focus ring via CSS — use :focus-visible in stylesheet */
outlineOffset: '2px',
}}
onMouseDown={(e) => { /* active state: background-color → --button-primary-bgColor-active */ }}
>
{loading ? (
<span aria-live="polite" aria-label="Loading">
<span style={{ display: 'inline-block', animation: 'rotate-keyframes 1s linear infinite', width: 'var(--spinner-size-small)', height: 'var(--spinner-size-small)' }}>⟳</span>
</span>
) : children}
</button>
);
};
/* CSS (add to global stylesheet):
.gh-button:focus-visible {
outline: var(--focus-outline-width) solid var(--fgColor-accent, Highlight);
outline-offset: -2px;
box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis, LinkText);
}
.gh-button:hover:not(:disabled) {
background-color: var(--button-primary-bgColor-hover, #1a7f37);
}
.gh-button:active:not(:disabled) {
background-color: var(--button-primary-bgColor-active, #116329);
transition: none;
}
*/
```
### 6.2 Input Field
**Anatomy:** `[label] [input wrapper [leading-icon?] [text-input] [trailing-icon?]] [validation-message]`
| State | Box Shadow | Border | Background |
|---|---|---|---|
| Default | `rgba(31, 35, 40, 0.04) 0px 1px 0px 0px inset` | none (simulated via shadow) | white |
| Hover | enhanced shadow | — | — |
| Focus | focus ring `--focus-outline-width` (2px) | accent | — |
| Disabled | reduced opacity | — | muted bg |
| Error | red bottom border | red accent | — |
```tsx
interface InputProps {
label: string;
placeholder?: string;
error?: string;
disabled?: boolean;
id: string;
}
export const Input: React.FC<InputProps> = ({ label, placeholder, error, disabled, id }) => (
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--github-space-xs)' }}>
<label
htmlFor={id}
style={{
font: 'var(--text-body-shorthand-medium)',
fontWeight: 'var(--base-text-weight-semibold)', /* 600 */
color: 'rgb(31, 35, 40)',
}}
>{label}</label>
<input
id={id}
placeholder={placeholder}
disabled={disabled}
aria-invalid={!!error}
aria-describedby={error ? `${id}-error` : undefined}
style={{
fontFamily: 'var(--fontStack-sansSerif)',
fontSize: 'var(--base-text-size-sm)', /* 14px */
borderRadius: 'var(--github-radius-md)', /* 6px */
padding: `var(--control-medium-paddingBlock) var(--control-medium-paddingInline-normal)`,
border: error ? `var(--borderWidth-thin) solid rgb(209, 36, 47)` : 'none',
boxShadow: error
? `inset 0 0 0 var(--borderWidth-thin) rgb(209, 36, 47)`
: `rgba(31, 35, 40, 0.04) 0px 1px 0px 0px inset`,
backgroundColor: disabled ? 'rgba(175, 184, 193, 0.2)' : '#ffffff',
opacity: disabled ? 0.7 : 1,
cursor: disabled ? 'not-allowed' : 'text',
width: '100%',
transition: [
`background-color var(--github-duration-fast) cubic-bezier(0.33, 1, 0.68, 1)`,
`box-shadow var(--github-duration-fast) cubic-bezier(0.33, 1, 0.68, 1)`,
`border-color var(--github-duration-fast) cubic-bezier(0.33, 1, 0.68, 1)`,
].join(', '),
}}
/>
{error && (
<span
id={`${id}-error`}
role="alert"
style={{
font: 'var(--text-body-shorthand-small)',
fontWeight: 'var(--base-text-weight-semibold)',
color: 'rgb(209, 36, 47)',
animation: 'Primer_Brand__FormControl-module__FormControlValidationFadeIn___hRw_R 0.2s ease',
}}
>{error}</span>
)}
</div>
);
```
### 6.3 Navigation Item
**Anatomy:** `[optional-icon] [label] [optional-counter-badge]`
- Base: `display: block`, transparent bg, white text (dark nav context)
- Tab variant: `border-radius: var(--github-radius-full)` (60px), `padding: 8px 16px`
| State | Background | Color | Notes |
|---|---|---|---|
| Default | transparent | `rgb(255, 255, 255)` | On dark nav surface |
| Hover | `--button-default-bgColor-hover` | `--fgColor-accent` | Subtle fill |
| Focus | — | — | Focus ring via `--focus-outline-width` |
| Active | `--button-default-bgColor-selected` | `--fgColor-accent` | |
| Current/Selected (tab) | opaque fill | contrast text | pill shape |
```tsx
interface NavItemProps {
label: string;
href: string;
isActive?: boolean;
variant?: 'default' | 'tab';
}
export const NavItem: React.FC<NavItemProps> = ({ label, href, isActive, variant = 'default' }) => (
<a
href={href}
aria-current={isActive ? 'page' : undefined}
style={{
display: 'inline-block',
fontFamily: 'var(--fontStack-sansSerif)',
fontSize: 'var(--base-text-size-md)', /* 16px */
fontWeight: isActive ? 'var(--base-text-weight-medium)' : 'var(--base-text-weight-normal)',
color: '#ffffff',
textDecoration: 'none',
borderRadius: variant === 'tab' ? 'var(--github-radius-full)' : 'var(--github-radius-md)',
padding: variant === 'tab' ? '8px 16px' : '4px 8px',
border: variant === 'tab' ? '1px solid transparent' : 'none',
backgroundColor: isActive ? 'rgba(255,255,255,0.15)' : 'transparent',
transition: `background-color var(--github-duration-fast) var(--github-ease-default)`,
}}
>{label}</a>
);
```
### 6.4 Tooltip
**Anatomy:** `[trigger element] → [tooltip: text]`
- Background: `rgb(61, 68, 77)`
- Text: `rgb(255, 255, 255)`, 12px / 400
- Radius: `var(--github-radius-md)` (6px)
- Padding: `4px 8px`
- Animation: `tooltip-appear` keyframe (opacity 0→1)
```tsx
export const Tooltip: React.FC<{ text: string; children: React.ReactNode }> = ({ text, children }) => (
<span style={{ position: 'relative', display: 'inline-flex' }}>
{children}
<span
role="tooltip"
style={{
position: 'absolute',
bottom: 'calc(100% + 4px)',
left: '50%',
transform: 'translateX(-50%)',
backgroundColor: 'rgb(61, 68, 77)',
color: '#ffffff',
fontFamily: 'var(--fontStack-sansSerif)',
fontSize: 'var(--base-text-size-xs)', /* 12px */
fontWeight: 'var(--base-text-weight-normal)',
lineHeight: '1.625',
borderRadius: 'var(--github-radius-md)',
padding: '4px 8px',
whiteSpace: 'nowrap',
pointerEvents: 'none',
animation: 'tooltip-appear var(--github-duration-fast) var(--github-ease-default)',
zIndex: 100,
}}
>{text}</span>
</span>
);
```
### 6.5 Badge / Label
**Anatomy:** `[icon?] [text label]`
- Not a pill by default — `border-radius: 0` in computed styles
- Font: 16px / 400 on brand badge; 12px / 600 on card/alert badge
- Padding: `0 24px 0 0` (right-pad for icon)
```tsx
interface BadgeProps {
label: string;
color?: 'green' | 'blue' | 'red' | 'orange' | 'purple' | 'yellow';
}
export const Badge: React.FC<BadgeProps> = ({ label, color = 'green' }) => (
<span
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--github-space-xs)',
fontFamily: 'var(--fontStack-sansSerif)',
fontSize: 'var(--base-text-size-xs)', /* 12px */
fontWeight: 'var(--base-text-weight-semibold)', /* 600 */
color: `var(--brand-Icon-color-${color})`,
backgroundColor: `var(--brand-Icon-background-${color})`,
borderRadius: 'var(--github-radius-sm)', /* 3px */
padding: '2px 6px',
}}
>{label}</span>
);
```
### 6.6 Dropdown / Action Menu
**Anatomy:** `[trigger button] → [overlay: [menu-items]]`
- Background: `rgb(255, 255, 255)`
- Border radius: `var(--github-radius-md)` (6px)
- Box shadow: `var(--github-shadow-sm)` (full multi-layer shadow)
- Animation: `opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)`
```tsx
export const Dropdown: React.FC<{ items: { label: string; onClick: () => void }[] }> = ({ items }) => (
<ul
role="menu"
style={{
display: 'block',
backgroundColor: 'rgb(255, 255, 255)',
borderRadius: 'var(--github-radius-md)',
boxShadow: 'var(--github-shadow-sm)',
padding: 'var(--overlay-padding-condensed)',
margin: 0,
listStyle: 'none',
minWidth: 'var(--overlay-width-xsmall)', /* 12rem */
animation: `scale-in var(--github-duration-base) cubic-bezier(0.16, 1, 0.3, 1)`,
}}
>
{items.map((item) => (
<li key={item.label} role="menuitem">
<button
onClick={item.onClick}
style={{
display: 'block',
width: '100%',
textAlign: 'start',
fontFamily: 'var(--fontStack-sansSerif)',
fontSize: 'var(--base-text-size-sm)',
padding: `var(--control-medium-paddingBlock) var(--control-medium-paddingInline-normal)`,
background: 'none',
border: 'none',
cursor: 'pointer',
borderRadius: 'var(--github-radius-sm)',
}}
>{item.label}</button>
</li>
))}
</ul>
);
```
---
## 7. Elevation & Depth
### Shadow Tokens
```css
/* Extracted shadow — high confidence */
--github-shadow-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;
/* Usage: dropdowns, cards, floating panels */
/* River visual shadow (large decorative feature images) */
--brand-River-visual-shadow:
0px 100px 80px #00000004,
0px 41.7776px 33.4221px #00000006,
0px 22.3363px 17.869px #00000007,
0px 12.5216px 10.0172px #00000009,
0px 6.6501px 5.32008px #0000000b,
0px 2.76726px 2.21381px #00000012;
/* Usage: hero product screenshots, river section visuals */
/* Sub-nav marketing shadow */
--sub-nav-mktg-shadow: 0 0 0 1px #35485b24, 0 3px 2px #0000000a, 0 7px 7px #00000008;
/* Usage: sticky marketing sub-navigation */
/* Inset border simulation (no actual borders used) */
--boxShadow-thin: inset 0 0 0 0.0625rem; /* 1px — default divider */
--boxShadow-thick: inset 0 0 0 0.125rem; /* 2px — emphasis */
--boxShadow-thicker: inset 0 0 0 0.25rem; /* 4px — high contrast */
/* Input inset shadow (subtle bottom border effect) */
/* rgba(31, 35, 40, 0.04) 0px 1px 0px 0px inset — computed from input element */
```
### Z-Index Scale (inferred from component stacking)
| Layer | z-index | Usage |
|---|---|---|
| Base content | 0 | Normal document flow |
| Sticky nav | 10 | `role_navigation`, sub-nav |
| Dropdown overlay | 100 | Action menus, dropdowns |
| Modal backdrop | 200 | Overlay backdrops |
| Dialog | 300 | `role_dialog` (12px radius) |
| Tooltip | 400 | Tooltips (always topmost) |
### Border System
GitHub uses **inset box-shadows** to simulate borders rather than CSS `border` on most components. This preserves box-model dimensions.
```css
/* Focus ring */
--focus-outline-width: 0.125rem; /* 2px */
--outline-focus-width: var(--focus-outline-width);
/* Primary focus pattern on buttons */
/* box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis); outline-offset: -2px; */
/* Modal computed border */
/* border: 1px solid rgb(129, 139, 152) */
```
---
## 8. Motion
### Timing Tokens
```css
--github-duration-fast: 0.08s; /* Micro-interactions: color, bg-color changes */
--github-duration-base: 0.2s; /* Standard transitions: overlays, dropdowns */
--github-duration-slow: 0.5s; /* Page-level: nav enter, large surface transitions */
--github-ease-default: ease; /* Default easing — 172 elements confirmed */
/* Extracted easing curves */
--base-easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--base-easing-easeIn: cubic-bezier(0.7, 0.1, 0.75, 0.9);
--base-easing-easeInOut: cubic-bezier(0.6, 0, 0.2, 1);
--base-easing-easeOut: cubic-bezier(0.3, 0.8, 0.6, 1);
--base-easing-linear: cubic-bezier(0, 0, 1, 1);
/* Button-specific easing (extracted from computed styles) */
/* color/fill/bg/border: cubic-bezier(0.65, 0, 0.35, 1) — ease-in-out, snappy */
/* input transitions: cubic-bezier(0.33, 1, 0.68, 1) — ease-out, smooth */
/* dropdown enter: cubic-bezier(0.16, 1, 0.3, 1) — ease-out, spring-like */
```
### Named Animation Keyframes
| Name | Effect | Usage |
|---|---|---|
| `fade-in` | opacity 0→1 | Component mount, hero reveal |
| `fade-out` | opacity 1→0 | Component unmount |
| `fade-up` | translateY(100%)→0 + opacity | Toast, bottom-sheet entry |
| `fade-down` | translateY(0)→100% + opacity | Toast, bottom-sheet exit |
| `scale-in` | scale(0.5)→1 + opacity | Modal/overlay enter |
| `tooltip-appear` | opacity 0→1 | Tooltip reveal |
| `rotate-keyframes` | rotate(360deg) | Spinner loading state |
| `pulse` | opacity 0.3→1→0.3 | Skeleton loading, live indicators |
| `shimmer` | mask-position scroll | Skeleton loading shimmer |
| `float-translate` | translateY(0→-7px) | Decorative hero illustration |
| `float` | rotate+translateY combined | Decorative mascot float |
| `BlinkingCursor` | opacity 1→0 (45–55%) | Typewriter cursor blink |
| `checkmarkIn` | clip-path reveal | Checkbox check animation |
| `grow-x` / `shrink-x` | width 0→100% | Progress bar |
| `Overlay--motion-scaleFade` | scale(0.5)→1 | Dialog/overlay enter |
| `skeleton-loading` | translateX(-33%→33%) | Skeleton shimmer |
### Motion Rules
- **Use `0.08s` (`--github-duration-fast`)** for all colour and background transitions on interactive elements
- **Use `0.2s` (`--github-duration-base`)** for overlay/dropdown enter/exit
- **Use `0.5s` (`--github-duration-slow`)** for page-level transitions, large surface fades
- **`transition: none` on `:active`** — GitHub buttons snap instantly on press (no easing delay for active state)
- **`prefers-reduced-motion`:** Respect this media query; skip transforms, reduce opacity-only transitions to instant
---
## 9. Anti-Patterns & Constraints
1. **NEVER use `Inter`, `Roboto`, or `Arial` as a primary font.**
→ AI agents default to these because they appear in standard component boilerplate. Mona Sans VF is GitHub's proprietary variable font — using a system fallback breaks brand identity and eliminates variable font features (weight axes, optical sizing).
→ Always set `font-family: var(--fontStack-sansSerif)` which resolves to `"Mona Sans VF", -apple-system, ...`.
2. **NEVER hardcode hex or rgb colour values directly in component styles.**
→ AI agents frequently inline `color: #1f2328` or `background: #0d1117` when generating components from visual references. This makes theme changes impossible and will drift from the token system.
→ Reference `--brand-primary-cta`, `--brand-surface-2`, and Primer semantic tokens. Use the computed literal values only as comments for documentation.
3. **NEVER apply `border-radius: 8px` to pill-shaped navigation tabs or toggle buttons.**
→ AI reads the `--github-radius-lg: 8px` token and applies it universally. The border-radius census clearly shows tabs/toggles use `60px` (`--github-radius-full`). Using 8px on these elements violates the brand shape language.
→ Use `var(--github-radius-full)` for tab toggles and marketing pill CTAs. Use `var(--github-radius-md)` (6px) for standard buttons and inputs.
4. **NEVER omit interactive states (hover, focus, active, disabled).**
→ AI generates visually correct default states but skips hover and focus — the most common interactive states users experience. GitHub's system has explicit token slots for every state (`--button-primary-bgColor-hover`, focus shadow patterns, etc).
→ Document and implement all five states: default, hover, focus (`:focus-visible` with inset box-shadow), active (instant, no transition), disabled (opacity + `cursor: not-allowed`).
5. **NEVER construct Tailwind class names dynamically from string interpolation.**
→ AI produces patterns like `` `bg-[var(--${colorToken})]` `` or `` `text-${size}` `` which Tailwind's static analysis cannot detect. These classes are never included in the output bundle.
→ Use complete, literal class names or inline `style` props with `var(--token-name)` for dynamic values.
6. **NEVER use `!important` to override design tokens.**
→ AI generates `!important` as a shortcut when specificity conflicts arise in complex component trees. This permanently breaks the cascade and prevents theming, dark mode, and responsive overrides.
→ Fix specificity at the source: use CSS custom property inheritance, or restructure component class hierarchies.
7. **NEVER use absolute positioning as a primary layout mechanism.**
→ AI defaults to `position: absolute` for multi-column layouts when it cannot infer the correct grid/flex structure. GitHub's layout system uses CSS Grid (`--brand-Grid-*`) and Flexbox throughout.
→ Use `display: grid` with `gap: var(--brand-Grid-spacing-column-gap)` for feature grids; `display: flex` with `gap: var(--brand-River-spacing-inner)` for river/alternating content. Reserve `position: absolute` for overlays, tooltips, and positioned decorative elements.
8. **NEVER use standard CSS weight values (600, 700) with Mona Sans VF brand tokens.**
→ AI substitutes `font-weight: 600` when it sees "semibold" in a token name. Mona Sans VF uses non-standard variable font axis values: semibold = 525, bold = 537, extrabold = 543, heavy = 550.
→ Use `--brand-text-weight-semibold` (525), `--brand-text-weight-bold` (537) — not hardcoded CSS weight values — when targeting the VF axis.
9. **NEVER mix `--base-text-weight-*` and `--brand-text-weight-*` tokens on the same element.**
→ The base scale (400, 500, 600, 700) is for Primer product UI (GitHub app). The brand scale (400, 500, 525, 537, 543, 550) is for Mona Sans VF on marketing pages. Mixing them produces inconsistent rendering.
→ Match the weight token namespace to the font stack in use: `--base-text-weight-*` with `--fontStack-sansSerif` in product UI; `--brand-text-weight-*` in brand/marketing contexts.
10. **NEVER use placeholder lorem ipsum text in any component.**
→ AI fills empty content areas with placeholder text. GitHub components must use realistic content (repository names, commit messages, usernames) to validate truncation behaviour, accessibility, and layout stability.
→ Always provide realistic sample content that matches production data structures.
11. **NEVER use a single `transition: all` on interactive elements.**
→ AI generates `transition: all 0.2s ease` as a universal shortcut. GitHub explicitly scopes transitions to specific properties (`color, fill, background-color, border-color`) to avoid unintended layout-triggering transitions.
→ Always list specific transition properties: `transition: color var(--github-duration-fast) cubic-bezier(0.65, 0, 0.35, 1), background-color var(--github-duration-fast) cubic-bezier(0.65, 0, 0.35, 1)`.
---
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (51) */
--brand-Timeline-strokeWidth: .125rem;
--color-accent-emphasis: Highlight;
--color-fg-on-emphasis: LinkText;
--progressBar-track-bgColor: CanvasText;
--brand-Icon-color-yellow: var(--base-color-scale-yellow-5);
--brand-Icon-color-teal: var(--base-color-scale-teal-5);
--brand-Icon-color-red: var(--base-color-scale-red-5);
--brand-Icon-color-purple: var(--base-color-scale-purple-5);
--brand-Icon-color-pink: var(--base-color-scale-pink-5);
--brand-Icon-color-orange: var(--base-color-scale-orange-5);
--brand-Icon-color-lime: var(--base-color-scale-lime-5);
--brand-Icon-color-lemon: var(--base-color-scale-lemon-5);
--brand-Icon-color-indigo: var(--base-color-scale-indigo-5);
--brand-Icon-color-gray: var(--base-color-scale-gray-6);
--brand-Icon-color-green: var(--base-color-scale-green-6);
--brand-Icon-color-coral: var(--base-color-scale-coral-5);
--brand-Icon-color-blue: var(--base-color-scale-blue-5);
--brand-Icon-color-default: var(--brand-Icon-color-green);
--brand-Icon-background-yellow: var(--base-color-scale-yellow-0);
--brand-Icon-background-teal: var(--base-color-scale-teal-0);
--brand-Icon-background-red: var(--base-color-scale-red-0);
--brand-Icon-background-purple: var(--base-color-scale-purple-0);
--brand-Icon-background-pink: var(--base-color-scale-pink-0);
--brand-Icon-background-orange: var(--base-color-scale-orange-0);
--brand-Icon-background-lime: var(--base-color-scale-lime-0);
--brand-Icon-background-lemon: var(--base-color-scale-lemon-0);
--brand-Icon-background-indigo: var(--base-color-scale-indigo-0);
--brand-Icon-background-gray: var(--base-color-scale-gray-0);
--brand-Icon-background-green: var(--base-color-scale-green-0);
--brand-Icon-background-coral: var(--base-color-scale-coral-0);
--brand-Icon-background-blue: var(--base-color-scale-blue-0);
--brand-Icon-background-default: var(--brand-Icon-background-green);
--brand-VideoPlayer-closedCaption-text-bgColor: #000000bf;
--brand-VideoPlayer-closedCaption-text-fgColor: var(--base-color-scale-white-0);
--brand-primary-cta: rgb(8, 135, 43); /* Primary CTA background, dominant on 2 buttons — e.g. "Sign up for GitHub" /* mined from computed styles */ */
--brand-surface-2: rgba(46, 55, 74, 0.82); /* Brand surface, dominant on 1 element — e.g. "Search or jump to...
" /* mined from computed styles */ */
--brand-mark-1: rgb(163, 113, 247); /* Brand mark fill on 8 svg shapes — e.g. "path" /* mined from svg fill */ */
--brand-mark-2: rgb(141, 214, 255); /* Brand mark fill on 4 svg shapes — e.g. "path" /* mined from svg fill */ */
--brand-primary-cta: rgb(8, 135, 43);
--brand-surface-2: rgba(46, 55, 74, 0.82);
--brand-mark-1: rgb(163, 113, 247);
--brand-mark-2: rgb(141, 214, 255);
--fgColor-onEmphasis: LinkText;
--fgColor-accent: Highlight;
--borderWidth-thin: 0.0625rem;
--borderWidth-thick: 0.125rem;
--borderWidth-thicker: 0.25rem;
--borderWidth-default: var(--borderWidth-thin);
--brand-borderWidth-thin: max(1px, 0.0625rem);
--brand-borderWidth-thick: max(2px, 0.125rem);
--brand-borderWidth-thicker: max(4px, 0.25rem);
/* Typography (155) */
--tab-size-preference: 4;
--base-easing-ease: cubic-bezier(.25, .1, .25, 1);
--base-easing-easeIn: cubic-bezier(.7, .1, .75, .9);
--base-easing-easeInOut: cubic-bezier(.6, 0, .2, 1);
--base-easing-easeOut: cubic-bezier(.3, .8, .6, 1);
--base-easing-linear: cubic-bezier(0, 0, 1, 1);
--base-size-112: 7rem;
--base-text-size-xs: 0.75rem;
--base-size-128: 8rem;
--brand-text-subhead-size-medium: 1rem;
--base-size-2: .125rem;
--brand-text-subhead-size-large: 1.25rem;
--h2-size: 1.5rem;
--control-small-size: 1.75rem;
--base-text-size-xl: 2rem;
--base-size-36: 2.25rem;
--base-size-4: .25rem;
--base-text-size-2xl: 2.5rem;
--base-size-44: 2.75rem;
--h00-size: 3rem;
--base-size-6: .375rem;
--spinner-size-large: 4rem;
--base-size-8: .5rem;
--base-size-80: 5rem;
--base-size-96: 6rem;
--base-size-negative-12: -.75rem;
--base-size-negative-16: -1rem;
--base-size-negative-2: -.125rem;
--base-size-negative-20: -1.25rem;
--base-size-negative-24: -1.5rem;
--base-size-negative-28: -1.75rem;
--base-size-negative-32: -2rem;
--base-size-negative-36: -2.25rem;
--base-size-negative-4: -.25rem;
--base-size-negative-40: -2.5rem;
--base-size-negative-44: -2.75rem;
--base-size-negative-48: -3rem;
--base-size-negative-6: -.375rem;
--base-size-negative-8: -.5rem;
--base-text-lineHeight-loose: 1.75;
--base-text-lineHeight-normal: 1.5;
--base-text-lineHeight-relaxed: 1.625;
--base-text-lineHeight-snug: 1.375;
--base-text-lineHeight-tight: 1.25;
--base-text-size-sm: 0.875rem;
--base-text-weight-light: 300;
--brand-text-weight-medium: 500;
--brand-text-weight-normal: 400;
--base-text-weight-semibold: 600;
--fontStack-monospace: ui-monospace, SFMono-Regular, ...;
--fontStack-sansSerif: "Mona Sans VF", -apple-system, ...;
--text-codeBlock-size: .8125rem;
--text-codeInline-size: .9285em;
--text-body-lineHeight-large: var(--base-text-lineHeight-normal);
--text-body-lineHeight-small: var(--base-text-lineHeight-relaxed);
--text-body-size-large: var(--base-text-size-md);
--text-body-size-medium: var(--base-text-size-sm);
--text-caption-size: var(--base-text-size-xs);
--text-caption-weight: var(--base-text-weight-normal);
--text-caption-lineHeight: var(--base-text-lineHeight-tight);
--text-display-lineHeight: var(--base-text-lineHeight-snug);
--text-display-size: var(--base-text-size-2xl);
--text-display-weight: var(--base-text-weight-medium);
--text-subtitle-size: var(--base-text-size-lg);
--text-title-size-large: var(--base-text-size-xl);
--text-title-weight-large: var(--base-text-weight-semibold);
--text-body-shorthand-large: 400 1rem / 1.5 sansSerif;
--text-body-shorthand-medium: 400 0.875rem / 1.5 sansSerif;
--text-body-shorthand-small: 400 0.75rem / 1.625 sansSerif;
--text-caption-shorthand: 400 0.75rem / 1.25 sansSerif;
--text-codeBlock-shorthand: 400 0.8125rem / 1.5 monospace;
--text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
--text-display-shorthand: 500 2.5rem / 1.375 sansSerif;
--text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerif);
--text-title-shorthand-large: 600 2rem / 1.5 sansSerif;
--text-title-shorthand-medium: 600 1.25rem / 1.625 sansSerif;
--text-title-shorthand-small: 600 1rem / 1.5 sansSerif;
--h1-size-mobile: 1.625rem;
--h2-size-mobile: 1.375rem;
--h3-size-mobile: 1.125rem;
--easing-easeInOut: cubic-bezier(.65,0,.35,1);
--base-size-88: 5.5rem;
--brand-control-large-size: 3.75rem;
--base-text-weight-heavy: 900;
--base-text-weight-extrabold: 800;
--base-text-weight-bold: 700;
--base-text-weight-extralight: 200;
--brand-text-style-italic-10: "ital" 10;
--brand-text-style-italic-9: "ital" 9;
--brand-text-style-italic-8: "ital" 8;
--brand-text-style-italic-7: "ital" 7;
--brand-text-style-italic-6: "ital" 6;
--brand-text-style-italic-5: "ital" 5;
--brand-text-style-italic-4: "ital" 4;
--brand-text-style-italic-3: "ital" 3;
--brand-text-style-italic-2: "ital" 2;
--brand-text-style-italic-1: "ital" 1;
--brand-text-lineHeight-1000: 1.08;
--brand-text-lineHeight-900: 1.1;
--brand-text-lineHeight-800: 1.18;
--brand-text-lineHeight-700: 1.2;
--brand-text-subhead-lineHeight-large: 1.3;
--brand-text-lineHeight-500: 1.35;
--brand-text-lineHeight-400: 1.4;
--brand-text-size-900: 3.5rem;
--brand-text-size-600: 2.125rem;
--brand-text-weight-heavy: 550;
--brand-text-weight-extrabold: 543;
--brand-text-weight-bold: 537;
--brand-text-weight-semibold: 525;
--brand-fontStack-monospace: "Mona Sans Mono", monospace;
--brand-fontStack-sansSerifAlt: "Hubot Sans", "Hubot SansHeaderFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--brand-fontStack-sansSerif: "Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--brand-fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--brand-heading-fontFamilyAlt: var(--brand-fontStack-sansSerifAlt);
--brand-body-fontFamily: var(--brand-fontStack-sansSerif);
--brand-animation-transition-default: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
--brand-animation-easing-glide: cubic-bezier(.33, 1, .68, 1);
--brand-animation-easing-default: cubic-bezier(.16, 1, .3, 1);
--brand-control-medium-size: 2.6875rem;
--brand-control-small-size: var(--base-size-32);
--brand-River-visual-shadow: 0px 100px 80px #00000004, 0px 41.7776px 33.4221px #00000006, 0px 22.3363px 17.869px #00000007, 0px 12.5216px 10.0172px #00000009, 0px 6.6501px 5.32008px #0000000b, 0px 2.76726px 2.21381px #00000012;
--brand-Testimonial-quote-fontWeight-large: var(--brand-heading-weight-600);
--brand-Testimonial-quote-fontWeight-default: var(--brand-heading-weight-1000);
--brand-Testimonial-quote-fontSize-large: var(--brand-text-size-500);
--brand-Testimonial-quote-fontSize-default: var(--brand-text-size-400);
--brand-Card-animation-easing: cubic-bezier(.01, .73, .08, .93);
--brand-Timeline-bullet-size: var(--base-size-8);
--brand-EyebrowBanner-subHeading-size: var(--brand-text-size-200);
--sub-nav-mktg-shadow: 0 0 0 1px #35485b24, 0 3px 2px #0000000a, 0 7px 7px #00000008;
--font-size-xs: 12px; /* 9 elements — e.g. span "AI CODE CREATION", span "DEVELOPER WORKFLOWS", span "APPLICATION SECURITY" /* mined from computed styles */ */
--font-size-sm: 14px; /* 18 elements — e.g. h3 "The developer newsle", h3 "Platform", h3 "Ecosystem" /* mined from computed styles */ */
--font-size-md: 16px; /* 202 elements — e.g. p "Write, test, and fix", p "Duolingo boosts deve", p "2025 Gartner® Magic " /* mined from computed styles */ */
--font-size-lg: 18px; /* 4 elements — e.g. p "Tools and trends evo", p "Ship faster with sec", p "Create issues and ma" /* mined from computed styles */ */
--font-size-xl: 22px; /* 17 elements — e.g. h3 "Your AI partner ever", h3 "Automate your path t", h3 "Code instantly from " /* mined from computed styles */ */
--font-size-2xl: 40px; /* 7 elements — e.g. h2 "Accelerate your enti", h2 "Built-in application", h2 "Work together, achie" /* mined from computed styles */ */
--font-size-3xl: 64px; /* 1 element — e.g. h1 "The future of buildi" /* mined from computed styles */ */
--font-weight-medium: 460; /* 5 elements — e.g. h2 "Accelerate your enti", h2 "Built-in application", h2 "Work together, achie" /* mined from computed styles */ */
--font-weight-semibold: 480; /* 13 elements — e.g. h3 "Automate your path t", h3 "Code instantly from ", h3 "Keep momentum on the" /* mined from computed styles */ */
--line-height-tight: 21px; /* 17 elements — e.g. h3 "The developer newsle", h3 "Platform", h3 "Ecosystem" /* mined from computed styles */ */
--line-height-normal: 24px; /* 202 elements — e.g. p "Write, test, and fix", p "Duolingo boosts deve", p "2025 Gartner® Magic " /* mined from computed styles */ */
--line-height-loose: 30.8px; /* 17 elements — e.g. h3 "Your AI partner ever", h3 "Automate your path t", h3 "Code instantly from " /* mined from computed styles */ */
--brand-text-size-400: 1.375rem;
--brand-text-size-500: 1.75rem;
--brand-text-size-700: 2.5rem;
--brand-text-size-800: 3rem;
--brand-text-size-1000: 4rem;
--base-text-weight-normal: 400;
--base-text-weight-medium: 500;
--brand-text-size-100: 0.875rem;
--brand-text-size-200: 1rem;
--brand-text-size-300: 1.125rem;
--brand-text-size-350: 1.25rem;
--base-text-size-md: 1rem;
--base-text-size-lg: 1.25rem;
/* Spacing (141) */
--borderWidth-thick: .125rem;
--borderWidth-thicker: .25rem;
--borderWidth-thin: .0625rem;
--focus-outline-offset: -.125rem;
--borderWidth-default: var(--borderWidth-thin);
--brand-breakpoint-large: 63.25rem;
--brand-breakpoint-medium: 48rem;
--brand-breakpoint-small: 34rem;
--brand-Section-container-maxWidth: 80rem;
--brand-breakpoint-xsmall: 20rem;
--brand-breakpoint-xxlarge: 87.5rem;
--brand-Statistic-spacing-condensed: 1rem;
--control-large-gap: .5rem;
--brand-VideoPlayer-closedCaption-text-padding: .625rem;
--brand-VideoPlayer-range-height: .375rem;
--brand-EyebrowBanner-spacing-inner-block: .875rem;
--overlay-height-large: 27rem;
--overlay-height-small: 16rem;
--overlay-height-xlarge: 37.5rem;
--overlay-width-large: 40rem;
--overlay-width-medium: 30rem;
--overlay-width-xlarge: 60rem;
--overlay-width-xsmall: 12rem;
--overlay-paddingBlock-normal: .75rem;
--control-minTarget-coarse: 2.75rem;
--brand-animation-variant-scaleInUp-distance: 1.5rem;
--Layout-pane-width: 220px;
--Layout-content-width: 100%;
--brand-Grid-spacing-margin: var(--base-size-16);
--Layout-outer-spacing-x: 0px;
--actionListContent-paddingBlock: var(--control-medium-paddingBlock);
--brand-text-letterSpacing-1000: -.035em;
--brand-text-letterSpacing-900: 0;
--brand-text-letterSpacing-350: .18px;
--brand-text-subhead-letterSpacing-medium: .24px;
--brand-text-letterSpacing-100: .21px;
--brand-text-subhead-letterSpacing-large: .1px;
--brand-heading-letterSpacing-1000: -.014rem;
--brand-borderWidth-thicker: max(4px, .25rem);
--brand-borderWidth-thick: max(2px, .125rem);
--brand-borderWidth-thin: max(1px, .0625rem);
--brand-borderInset-thicker: inset 0 0 0 var(--brand-borderWidth-thicker);
--brand-borderInset-thick: inset 0 0 0 var(--brand-borderWidth-thick);
--brand-borderInset-thin: inset 0 0 0 var(--brand-borderWidth-thin);
--brand-Section-padding-condensed: var(--base-size-48);
--brand-animation-variant-scaleInLeft-distance: 1.25rem;
--brand-animation-variant-scaleInRight-distance: -1.25rem;
--brand-animation-variant-scaleInDown-distance: -3.125rem;
--brand-animation-variant-slideInRight-distance: -.9375rem;
--brand-animation-variant-slideInLeft-distance: .9375rem;
--brand-control-medium-gap: var(--base-size-12);
--brand-control-small-gap: var(--base-size-8);
--brand-stack-gap-normal: var(--base-size-24);
--brand-Bento-gap-large: var(--base-size-32);
--brand-Bento-gap-small: var(--base-size-20);
--brand-control-medium-paddingInline-spacious: var(--base-size-28);
--brand-control-medium-paddingBlock-condensed: var(--base-size-6);
--brand-Hero-regular-padding: var(--base-size-128) 0;
--brand-Hero-narrow-padding: var(--base-size-96) 0;
--brand-RiverAccordion-variant-gridline-spacing-contentGap: var(--base-size-64);
--brand-LogoSuite-logobar-columnGap-default: var(--base-size-80);
--brand-FAQ-maxWidth-list: 51rem;
--brand-Section-padding-normal: var(--base-size-96);
--brand-Testimonial-quote-letterSpacing-large: var(--brand-text-letterSpacing-900);
--brand-Testimonial-quote-letterSpacing-default: var(--brand-text-letterSpacing-400);
--brand-Card-maxWidth: 26.25rem;
--brand-Prose-lineLength: 68ch;
--brand-VideoPlayer-tooltip-padding-inline: .3125rem;
--brand-VideoPlayer-range-minWidth: 4.6875rem;
--brand-VideoPlayer-closedCaption-margin: 0 auto 15px auto;
--brand-LogoSuite-logobar-rowGap: var(--base-size-40);
--brand-Timeline-lineLength: 44ch;
--brand-Bento-content-padding-spacious: 3.5rem;
--brand-SubNav-width-subMenu: 18.75rem;
--brand-IDE-height: 50rem;
--brand-Section-padding-spacious: var(--base-size-128);
--brand-Statistic-spacing-spacious: 2rem;
--brand-Tabs-container-padding: var(--base-size-4);
--space-xs: 4px; /* 36 elements — e.g. div .CtaFormControl-container, div .CtaFormControl-container, div .CtaFormControl-container /* mined from computed styles */ */
--space-sm: 12px; /* 33 elements — e.g. section .Newsletter-module__newsletter__WQAO6, section .Newsletter-module__newsletter__WQAO6, section .Newsletter-module__newsletter__WQAO6 /* mined from computed styles */ */
--space-md: 16px; /* 30 elements — e.g. header .HeaderMktg, header .HeaderMktg, nav .LinkColumn-module__column__vXgUS /* mined from computed styles */ */
--space-lg: 32px; /* 28 elements — e.g. nav .LinkColumn-module__column__vXgUS, nav .LinkColumn-module__column__vXgUS, nav .LinkColumn-module__column__vXgUS /* mined from computed styles */ */
--space-xl: 44px; /* 9 elements — e.g. div .lp-CustomerStories-container, div .lp-CustomerStories-container, div .lp-CustomerStories-container /* mined from computed styles */ */
--space-2xl: 48px; /* 39 elements — e.g. div .lp-CustomerStories-container, div .lp-CustomerStories-container, div .lp-CustomerStories-container /* mined from computed styles */ */
--space-3xl: 96px; /* 10 elements — e.g. section .Primer_Brand__Section-module__Section___, section .Primer_Brand__Section-module__Section___, div .Primer_Brand__Grid-module__Grid__column_ /* mined from computed styles */ */
--github-space-xs: 4px;
--github-space-sm: 12px;
--github-space-md: 16px;
--github-space-lg: 32px;
--github-space-xl: 44px;
--github-space-2xl: 48px;
--github-space-3xl: 96px;
--base-size-2: 0.125rem;
--base-size-4: 0.25rem;
--base-size-6: 0.375rem;
--base-size-8: 0.5rem;
--base-size-12: 0.75rem;
--base-size-16: 1rem;
--base-size-20: 1.25rem;
--base-size-24: 1.5rem;
--base-size-28: 1.75rem;
--base-size-32: 2rem;
--base-size-36: 2.25rem;
--base-size-40: 2.5rem;
--base-size-44: 2.75rem;
--base-size-48: 3rem;
--base-size-60: 3.75rem;
--base-size-64: 4rem;
--base-size-80: 5rem;
--base-size-88: 5.5rem;
--base-size-96: 6rem;
--base-size-112: 7rem;
--base-size-128: 8rem;
--brand-stack-gap-condensed: var(--base-size-16);
--brand-stack-gap-spacious: var(--base-size-48);
--brand-stack-padding-condensed: var(--base-size-16);
--brand-stack-padding-normal: var(--base-size-24);
--brand-stack-padding-spacious: var(--base-size-48);
--brand-Grid-spacing-column-gap: var(--base-size-48);
--brand-Grid-spacing-row: var(--base-size-48);
--control-xsmall-size: 1.5rem;
--control-small-size: 1.75rem;
--control-medium-size: 2rem;
--control-large-size: 2.5rem;
--control-xlarge-size: 3rem;
--brand-control-medium-size: 2.6875rem;
--brand-control-large-size: 3.75rem;
--brand-control-large-paddingInline-normal: var(--base-size-20);
--brand-control-large-paddingInline-spacious: var(--base-size-32);
--brand-control-medium-paddingInline-normal: var(--base-size-16);
--Layout-column-gap: var(--base-size-16);
--Layout-row-gap: var(--base-size-16);
--focus-outline-width: 0.125rem;
--h00-size: 3rem;
--h0-size: 2.5rem;
--h1-size: 2rem;
--h2-size: 1.5rem;
--h3-size: 1.25rem;
--h4-size: 1rem;
--h5-size: 0.875rem;
--h6-size: 0.75rem;
/* Radius (23) */
--brand-borderRadius-full: 624.938rem;
--borderRadius-large: 0.75rem;
--borderRadius-medium: 0.375rem;
--brand-VideoPlayer-range-borderRadius: .1875rem;
--borderRadius-default: var(--borderRadius-medium);
--brand-borderRadius-xlarge: var(--base-size-24);
--brand-borderRadius-large: var(--base-size-16);
--brand-borderRadius-medium: var(--base-size-8);
--brand-borderRadius-small: var(--base-size-4);
--brand-Bento-item-borderRadius-large: var(--brand-borderRadius-xlarge);
--brand-Bento-item-borderRadius-small: var(--brand-borderRadius-large);
--brand-EyebrowBanner-borderRadius: 6.25rem;
--radius-sm: 3px; /* 2 elements — e.g. button .Button, button .Button /* mined from computed styles */ */
--radius-md: 6px; /* 27 elements — e.g. button .js-details-target, button .header-search-button "Search or jump to...", button .close-button /* mined from computed styles */ */
--radius-lg: 8px; /* 2 elements — e.g. input .Primer_Brand__TextInput-module__TextInput___EtKj3, input .Primer_Brand__TextInput-module__TextInput___EtKj3 /* mined from computed styles */ */
--radius-full: 60px; /* 4 elements — e.g. button .Toggle-button "Code", button .Toggle-button "Code", button .Toggle-button "Plan" /* mined from computed styles */ */
--github-radius-sm: 3px;
--github-radius-md: 6px;
--github-radius-lg: 8px;
--github-radius-full: 60px;
--borderRadius-small: 0.1875rem;
--borderRadius-full: 624.938rem;
--brand-Bento-item-borderRadius-medium: var(--brand-borderRadius-xlarge);
/* Effects (55) */
--base-duration-0: 0s;
--base-duration-100: .1s;
--base-duration-1000: 1s;
--brand-animation-duration-faster: .2s;
--brand-animation-duration-fast: .3s;
--brand-Card-animation-duration: .4s;
--base-duration-50: 50ms;
--base-duration-500: .5s;
--brand-animation-duration-default: .6s;
--brand-animation-duration-extended: .7s;
--base-duration-800: .8s;
--base-duration-900: .9s;
--brand-animation-variant-scaleInDown-start: 0;
--zIndex-sticky: 100;
--zIndex-dropdown: 200;
--zIndex-overlay: 300;
--zIndex-modal: 400;
--zIndex-popover: 500;
--zIndex-skipLink: 600;
--boxShadow-thick: inset 0 0 0 0.125rem;
--boxShadow-thicker: inset 0 0 0 0.25rem;
--boxShadow-thin: inset 0 0 0 0.0625rem;
--outline-focus-offset: var(--focus-outline-offset);
--outline-focus-width: var(--focus-outline-width);
--zIndex-behind: -1;
--Layout-template-columns: 1fr var(--Layout-pane-width);
--Layout-template-areas: "content pane";
--brand-control-animation-duration: 80ms;
--brand-animation-variant-scaleIn-end: 1;
--brand-heading-lineHeight-800: 1.2;
--brand-heading-lineHeight-500: 1.3;
--brand-heading-weight-1000: 425;
--brand-heading-weight-900: 440;
--brand-heading-weight-700: 460;
--brand-heading-weight-500: 480;
--brand-animation-variant-scaleInLeft-start: .9;
--brand-animation-variant-scaleInTop-distance: ;
--brand-animation-variant-scaleIn-start: .96;
--brand-control-animation-easing: var(--brand-animation-easing-glide);
--brand-control-large-lineBoxHeight: var(--base-size-20);
--brand-control-minTarget-fine: var(--base-size-16);
--brand-control-small-lineBoxHeight: var(--base-size-12);
--brand-control-minTarget-coarse: var(--base-size-44);
--brand-InlineLink-transition-timing: var(--brand-animation-duration-fast);
--brand-VideoPlayer-transition: all var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
--brand-VideoPlayer-playButton-width: var(--base-size-96);
--brand-LogoSuite-logobar-marquee-slow: 60s;
--brand-LogoSuite-logobar-marquee-default: 30s;
--brand-Timeline-lineHeight: var(--brand-text-lineHeight-200);
--brand-FrostedGlassVFX-blurIntensity-high: var(--base-size-80);
--brand-FrostedGlassVFX-blurIntensity-medium: var(--base-size-48);
--shadow-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; /* 5 elements — e.g. div .NavDropdown-module__dropdown__xm1jd, div .NavDropdown-module__dropdown__xm1jd, div .NavDropdown-module__dropdown__xm1jd /* mined from computed styles */ */
--github-shadow-sm: rgba(209,217,224,.25) 0 0 0 1px, rgba(37,41,46,.04) 0 6px 12px -3px, rgba(37,41,46,.12) 0 6px 18px 0;
--brand-River-visual-shadow: Multi-layer natural shadow (see Section 7);
--sub-nav-mktg-shadow: 0 0 0 1px #35485b24, 0 3px 2px #0a, 0 7px 7px #08;
/* Motion (63) */
----motion-AppFrame-a11yLink-focus: @keyframes AppFrame-a11yLink-focus {
0% { color: var(--fgColor-accent,var(--c… <0.3KB elided>; /* @keyframes AppFrame-a11yLink-focus */
----motion-tooltip-appear: @keyframes tooltip-appear {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes tooltip-appear */
----motion-fade-in: @keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in */
----motion-fade-out: @keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fade-out */
----motion-fade-up: @keyframes fade-up {
0% { opacity: 0.8; transform: translateY(100%); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes fade-up */
----motion-fade-down: @keyframes fade-down {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0.5; transform: translateY(100%); }
}; /* @keyframes fade-down */
----motion-grow-x: @keyframes grow-x {
100% { width: 100%; }
}; /* @keyframes grow-x */
----motion-shrink-x: @keyframes shrink-x {
100% { width: 0%; }
}; /* @keyframes shrink-x */
----motion-scale-in: @keyframes scale-in {
0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes scale-in */
----motion-pulse: @keyframes pulse {
0% { opacity: 0.3; }
10% { opacity: 1; }
100% { opacity: 0.3; }
}; /* @keyframes pulse */
----motion-pulse-in: @keyframes pulse-in {
0% { transform: scale(1); }
50% { transform: scale3d(1.1, 1.1, 1.1); }
100% { transform: scale(1); }
}; /* @keyframes pulse-in */
----motion-rotate-keyframes: @keyframes rotate-keyframes {
100% { transform: rotate(360deg); }
}; /* @keyframes rotate-keyframes */
----motion-AnimatedEllipsis-keyframes: @keyframes AnimatedEllipsis-keyframes {
0% { transform: translate(-100%); }
}; /* @keyframes AnimatedEllipsis-keyframes */
----motion-SelectMenu-modal-animation: @keyframes SelectMenu-modal-animation {
0% { opacity: 0; transform: scale(0.9); }
}; /* @keyframes SelectMenu-modal-animation */
----motion-SelectMenu-modal-animation--sm: @keyframes SelectMenu-modal-animation--sm {
0% { opacity: 0; transform: translateY(calc(var(--base-size-16) * -1)); }
}; /* @keyframes SelectMenu-modal-animation--sm */
----motion-Toast--animateIn: @keyframes Toast--animateIn {
0% { opacity: 0; transform: translateY(100%); }
}; /* @keyframes Toast--animateIn */
----motion-Toast--animateOut: @keyframes Toast--animateOut {
100% { pointer-events: none; opacity: 0; transform: translateY(100%); }
}; /* @keyframes Toast--animateOut */
----motion-Toast--spinner: @keyframes Toast--spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}; /* @keyframes Toast--spinner */
----motion-Overlay--motion-scaleFade: @keyframes Overlay--motion-scaleFade {
0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes Overlay--motion-scaleFade */
----motion-Overlay--motion-slideDown: @keyframes Overlay--motion-slideDown {
0% { transform: translateY(-100%); }
}; /* @keyframes Overlay--motion-slideDown */
----motion-Overlay--motion-slideUp: @keyframes Overlay--motion-slideUp {
0% { transform: translateY(100%); }
}; /* @keyframes Overlay--motion-slideUp */
----motion-Overlay--motion-slideInRight: @keyframes Overlay--motion-slideInRight {
0% { transform: translate(-100%); }
}; /* @keyframes Overlay--motion-slideInRight */
----motion-Overlay--motion-slideInLeft: @keyframes Overlay--motion-slideInLeft {
0% { transform: translate(100%); }
}; /* @keyframes Overlay--motion-slideInLeft */
----motion-checkmarkIn: @keyframes checkmarkIn {
0% { clip-path: inset(16px 0px 0px); }
100% { clip-path: inset(0px); }
}; /* @keyframes checkmarkIn */
----motion-checkmarkOut: @keyframes checkmarkOut {
0% { clip-path: inset(0px); }
100% { clip-path: inset(16px 0px 0px); }
}; /* @keyframes checkmarkOut */
----motion-shimmer: @keyframes shimmer {
0% { mask-position: 200% center; }
100% { mask-position: 0px center; }
}; /* @keyframes shimmer */
----motion-blink: @keyframes blink {
50% { background-color: rgba(0, 0, 0, 0); }
}; /* @keyframes blink */
----motion-skeleton-loading: @keyframes skeleton-loading {
0% { transform: translate(-33%); }
100% { transform: translate(33%); }
}; /* @keyframes skeleton-loading */
----motion-hx-fade-out: @keyframes hx-fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes hx-fade-out */
----motion-development-menu-component-dialog-animation--sm: @keyframes development-menu-component-dialog-animation--sm {
0% { opacity: 0; transform: translateX(var(--base-size-16)); }
}; /* @keyframes development-menu-component-dialog-animation--sm */
----motion-show-pane: @keyframes show-pane {
0% { transform: translate(390px); }
100% { transform: translate(0px); }
}; /* @keyframes show-pane */
----motion-sponsors-progress-animation: @keyframes sponsors-progress-animation {
0% { background-position: 100% center; }
100% { background-position: 0% center; }
}; /* @keyframes sponsors-progress-animation */
----motion-circle-progress: @keyframes circle-progress {
0% { stroke-dasharray: 0, 100; }
}; /* @keyframes circle-progress */
----motion-Primer_Brand__FormControl-module__FormControlValidationFadeIn___hRw_R: @keyframes Primer_Brand__FormControl-module__FormControlValidationFadeIn___hRw_R {
0% { opacity: 0; transform: translateY(-100%); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes Primer_Brand__FormControl-module__FormControlValidationFadeIn___hRw_R */
----motion-Primer_Brand__SubdomainNavBar-module__fade-in-down___kwg9g: @keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down___kwg9g {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down___kwg9g */
----motion-Primer_Brand__SubdomainNavBar-module__fade-out___fhdxi: @keyframes Primer_Brand__SubdomainNavBar-module__fade-out___fhdxi {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes Primer_Brand__SubdomainNavBar-module__fade-out___fhdxi */
----motion-Primer_Brand__SubdomainNavBar-module__enlarge-shadow___pfcD5: @keyframes Primer_Brand__SubdomainNavBar-module__enlarge-shadow___pfcD5 {
0%… <0.2KB elided>; /* @keyframes Primer_Brand__SubdomainNavBar-module__enlarge-shadow___pfcD5 */
----motion-Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___zQfEQ: @keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___zQfEQ {
0% { opacity: 0; transform: scale(0.6) translateY(-8px); }
100% { opacity: 1; }
}; /* @keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___zQfEQ */
----motion-Primer_Brand__ControlGroup-module__ControlGroupValidationFadeIn___xgh8U: @keyframes Primer_Brand__ControlGroup-module__ControlGroupValidationFadeIn___xgh8U {
0% { opacity: 0; transform: translateY(-100%); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes Primer_Brand__ControlGroup-module__ControlGroupValidationFadeIn___xgh8U */
----motion-Primer_Brand__AnchorNav-module__fade-in___KfA_2: @keyframes Primer_Brand__AnchorNav-module__fade-in___KfA_2 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes Primer_Brand__AnchorNav-module__fade-in___KfA_2 */
----motion-Primer_Brand__ActionMenu-module__overlay-appear-outside-bottom___P9_uK: @keyframes Primer_Brand__ActionMenu-module__overlay-appear-outside-bottom___P9_uK {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes Primer_Brand__ActionMenu-module__overlay-appear-outside-bottom___P9_uK */
----motion-Primer_Brand__ActionMenu-module__overlay-appear-outside-top___hI7o9: @keyframes Primer_Brand__ActionMenu-module__overlay-appear-outside-top___hI7o9 {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes Primer_Brand__ActionMenu-module__overlay-appear-outside-top___hI7o9 */
----motion-Primer_Brand__TextRevealAnimation-module__wipe___Mztl1: @keyframes Primer_Brand__TextRevealAnimation-module__wipe___Mztl1 {
0% { transform: scaleX(1); }
100% { transform: scaleX(0); }
}; /* @keyframes Primer_Brand__TextRevealAnimation-module__wipe___Mztl1 */
----motion-Primer_Brand__LogoSuite-module__LogobarScrollX___K2Z30: @keyframes Primer_Brand__LogoSuite-module__LogobarScrollX___K2Z30 {
0% { transform: translate(0px); }
100% { transform: translateX(calc(-100% - var(--marquee-gap))); }
}; /* @keyframes Primer_Brand__LogoSuite-module__LogobarScrollX___K2Z30 */
----motion-Primer_Brand__Tooltip-module__tooltip-appear___OeSNz: @keyframes Primer_Brand__Tooltip-module__tooltip-appear___OeSNz {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes Primer_Brand__Tooltip-module__tooltip-appear___OeSNz */
----motion-Primer_Brand__SubNav-module__fade-in___t8Rrr: @keyframes Primer_Brand__SubNav-module__fade-in___t8Rrr {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes Primer_Brand__SubNav-module__fade-in___t8Rrr */
----motion-Primer_Brand__SubNav-module__fade-in-down___LOqE1: @keyframes Primer_Brand__SubNav-module__fade-in-down___LOqE1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes Primer_Brand__SubNav-module__fade-in-down___LOqE1 */
----motion-float-translate: @keyframes float-translate {
50% { transform: translateY(-7px); }
}; /* @keyframes float-translate */
----motion-float: @keyframes float {
0% { transform: rotate(10deg) translateY(0px); }
50% { transform: rotate(5deg) translateY(-10px); }
100% { transform: rotate(10deg) translateY(0px); }
}; /* @keyframes float */
----motion-BlinkingCursor: @keyframes BlinkingCursor {
0%, 45% { opacity: 1; }
55%, 100% { opacity: 0; }
}; /* @keyframes BlinkingCursor */
----motion-global-banner--universe_26-visual-anim: @keyframes global-banner--universe_26-visual-anim {
0% { opacity: 0; transform: translate(20px); }
}; /* @keyframes global-banner--universe_26-visual-anim */
----motion-mascotsGlowPulse: @keyframes mascotsGlowPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}; /* @keyframes mascotsGlowPulse */
----motion-mascotsFloat: @keyframes mascotsFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}; /* @keyframes mascotsFloat */
----motion-lp-Intro-anim: @keyframes lp-Intro-anim {
0% { opacity: 1; }
}; /* @keyframes lp-Intro-anim */
----motion-lp-Footnotes-item-anim: @keyframes lp-Footnotes-item-anim {
33% { outline-color: var(--brand-color-focus); }
}; /* @keyframes lp-Footnotes-item-anim */
----motion-Gallery-module__showFigureAnimation__nxdGB: @keyframes Gallery-module__showFigureAnimation__nxdGB {
0% { opacity: 0; transform: translateX(var(--offset)); }
100% { opacity: 1; transform: translate(0px); }
}; /* @keyframes Gallery-module__showFigureAnimation__nxdGB */
----motion-YouTubePlayer-module__PosterImage-anim__M0ZP9: @keyframes YouTubePlayer-module__PosterImage-anim__M0ZP9 {
0% { opacity: 0; transform: scale(1.5); }
}; /* @keyframes YouTubePlayer-module__PosterImage-anim__M0ZP9 */
----motion-Hero-module__fadeIn__M5m10: @keyframes Hero-module__fadeIn__M5m10 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes Hero-module__fadeIn__M5m10 */
----motion-Hero-module__fadeBorderIn__TFfwD: @keyframes Hero-module__fadeBorderIn__TFfwD {
0% { --borderOpacity: 0; }
100% { --borderOpacity: 1; }
}; /* @keyframes Hero-module__fadeBorderIn__TFfwD */
--duration-fast: 0.08s; /* 10 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-base: 0.2s; /* 3 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-slow: 0.5s; /* 4 elements — e.g. button, a, a /* mined from computed styles */ */
--ease-default: ease; /* 172 elements — e.g. button, button, button /* mined from computed styles */ */
```
## Appendix B: Token Source Metadata
```yaml
tokenSource: extracted-css-vars
extractionTarget: github.com
confidence: high
totalCSSVarsFound: 568
varsDocumented: ~400 (168 omitted for context budget — full set in tokens.css)
extractionMethod:
- CSS custom properties parsed from computed stylesheets
- Computed styles captured for 22 key element selectors
- Border-radius census from actual page elements
- Button colour confirmed from DOM inspection ("Sign up for GitHub")
- SVG fill colours captured for brand mark illustration
- Font declarations extracted from @font-face rules
- Motion tokens extracted from @keyframes rules
curatedTokenCount: 42
curatedNamingConvention: "--github-*" prefix for curated semantic aliases
originalNamesPreserved: true
note: "All original CSS variable names (--brand-*, --base-*, --borderRadius-*, etc.)
are preserved exactly as extracted. The --github-* prefix is used ONLY for
the 42 curated semantic shortcuts added by this layout.md synthesis."
fontStrategy:
primary: "Mona Sans VF" (variable font, weight 200–900, width + opsz axes)
fallbackChain: "-apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial"
mono: "Mona Sans Mono" (brand), "ui-monospace, SFMono-Regular" (product)
display: "Hubot Sans" (detected in font declarations, usage context TBD)
note: "--fontStack-sansSerifDisplay referenced in typography shorthand tokens
but not fully extracted. [TBD - extract manually]"
designSystemLayers:
product: "Primer (github.com/primer/css) — base-*, text-*, control-*, borderRadius-*"
brand: "Primer Brand (github.com marketing pages) — brand-*, brand-text-*, brand-control-*"
note: "Both systems co-exist. Product tokens use standard weight values (400/500/600/700).
Brand tokens use Mona Sans VF variable font axis values (400/500/525/537/543/550)."
libraries:
detected: [tailwind, bootstrap]
note: "Tailwind and Bootstrap detected on the page. Token-based CSS custom properties
take precedence over utility classes in this documentation."
reconstructionNote: >
Token source is extracted-css-vars (not reconstructed). All tokens use original
variable names. No colour reconstruction was performed — all values are directly
from the extracted CSS. The --github-* curated tokens are synthesis aliases added
by this layout.md for developer convenience, not original site variables.
```More from the gallery
Browse all kits →You may also like
atlassian.com
MITEnterprise design system for Atlassian's marketing site, featuring bold brand colours, custom typography, and structured spacing tokens built for large-scale SaaS platforms
Layout06
boldsaaslanding-pagelight
Customer.io
MITDark SaaS design system with mint-green accents and clean typography, built for product dashboards and developer-focused platforms
Layout011
darksaasdeveloper-tooldashboard
Asana
MITEnterprise work-management design system with sharp modernist aesthetic, dark-mode focus and purposeful colour accents for product teams
Layout02
darksaasdashboarddeveloper-tool