# Design Style Guide: GitHub · Change is constant. GitHub keeps you ahead. · GitHub



> Source: https://github.com

> Extracted: 2026-05-15 22:24

> Viewport: 1280x720 | Full page: 11104px



## Design Philosophy



- **Dark theme** — dark backgrounds dominate the palette

- **4 typefaces** — Mona Sans, Mona Sans VF, Mona Sans Mono

- **Pill-shaped elements** — fully rounded buttons/badges

- **Glassmorphism** — backdrop blur effects for depth

- **Generous whitespace** — large section gaps for breathing room

- **Accent color** — `#8dd6ff` used for interactive elements



---



## CSS Custom Properties



### Color Tokens



| Variable | Value |

|----------|-------|

| `--base-color-scale-black-0` | `#000` |

| `--base-color-scale-blue-0` | `#c2edff` |

| `--base-color-scale-blue-1` | `#a2daff` |

| `--base-color-scale-blue-2` | `#78bafe` |

| `--base-color-scale-blue-3` | `#3094ff` |

| `--base-color-scale-blue-4` | `#0377ff` |

| `--base-color-scale-blue-5` | `#0a50db` |

| `--base-color-scale-blue-6` | `#1530b7` |

| `--base-color-scale-blue-7` | `#082a8f` |

| `--base-color-scale-blue-8` | `#052063` |

| `--base-color-scale-blue-9` | `#000839` |

| `--base-color-scale-coral-0` | `#ffd5c7` |

| `--base-color-scale-coral-1` | `#fdb7a1` |

| `--base-color-scale-coral-2` | `#fa9072` |

| `--base-color-scale-coral-3` | `#f66945` |

| `--base-color-scale-coral-4` | `#ef4319` |

| `--base-color-scale-coral-5` | `#c53211` |

| `--base-color-scale-coral-6` | `#a22710` |

| `--base-color-scale-coral-7` | `#801e0f` |

| `--base-color-scale-coral-8` | `#500a00` |

| `--base-color-scale-coral-9` | `#3c0000` |

| `--base-color-scale-gray-0` | `#d2d9d4` |

| `--base-color-scale-gray-1` | `#c4ccc6` |

| `--base-color-scale-gray-2` | `#a4aea6` |

| `--base-color-scale-gray-3` | `#7c8980` |

| `--base-color-scale-gray-4` | `#58635b` |

| `--base-color-scale-gray-5` | `#353d37` |

| `--base-color-scale-gray-6` | `#262c28` |

| `--base-color-scale-gray-7` | `#191f1b` |

| `--base-color-scale-gray-8` | `#0f1511` |

| `--base-color-scale-gray-9` | `#060907` |

| `--base-color-scale-green-0` | `#cdfcd9` |

| `--base-color-scale-green-1` | `#8cf2a6` |

| `--base-color-scale-green-2` | `#5fed83` |

| `--base-color-scale-green-3` | `#23ea57` |

| `--base-color-scale-green-4` | `#0fbf3e` |

| `--base-color-scale-green-5` | `#08872b` |

| `--base-color-scale-green-6` | `#0d6731` |

| `--base-color-scale-green-7` | `#0e422c` |

| `--base-color-scale-green-8` | `#0d3024` |

| `--base-color-scale-green-9` | `#0a241b` |

| `--base-color-scale-indigo-0` | `#dbe3ff` |

| `--base-color-scale-indigo-1` | `#b3c1fd` |

| `--base-color-scale-indigo-2` | `#8d9ff8` |

| `--base-color-scale-indigo-3` | `#6a7df0` |

| `--base-color-scale-indigo-4` | `#4a5ce5` |

| `--base-color-scale-indigo-5` | `#2d3dd7` |

| `--base-color-scale-indigo-6` | `#232fb3` |

| `--base-color-scale-indigo-7` | `#212183` |

| `--base-color-scale-indigo-8` | `#161962` |

| `--base-color-scale-indigo-9` | `#0d103f` |

| `--base-color-scale-lemon-0` | `#fcf2a5` |

| `--base-color-scale-lemon-1` | `#f9e76a` |

| `--base-color-scale-lemon-2` | `#f4da38` |

| `--base-color-scale-lemon-3` | `#e4c411` |

| `--base-color-scale-lemon-4` | `#c7a60b` |

| `--base-color-scale-lemon-5` | `#a98906` |

| `--base-color-scale-lemon-6` | `#876a04` |

| `--base-color-scale-lemon-7` | `#654d02` |

| `--base-color-scale-lemon-8` | `#423101` |

| `--base-color-scale-lemon-9` | `#241900` |

| `--base-color-scale-lime-0` | `#edffc9` |

| `--base-color-scale-lime-1` | `#dcff96` |

| `--base-color-scale-lime-2` | `#cdf041` |

| `--base-color-scale-lime-3` | `#b1e119` |

| `--base-color-scale-lime-4` | `#88b80f` |

| `--base-color-scale-lime-5` | `#608a10` |

| `--base-color-scale-lime-6` | `#3e5f0f` |

| `--base-color-scale-lime-7` | `#22360b` |

| `--base-color-scale-lime-8` | `#142a08` |

| `--base-color-scale-lime-9` | `#091d05` |

| `--base-color-scale-orange-0` | `#ffe2cc` |

| `--base-color-scale-orange-1` | `#fab580` |

| `--base-color-scale-orange-2` | `#f08a3a` |

| `--base-color-scale-orange-3` | `#ea7110` |

| `--base-color-scale-orange-4` | `#d56101` |

| `--base-color-scale-orange-5` | `#b35101` |

| `--base-color-scale-orange-6` | `#924100` |

| `--base-color-scale-orange-7` | `#703100` |

| `--base-color-scale-orange-8` | `#572400` |

| `--base-color-scale-orange-9` | `#3d1800` |

| `--base-color-scale-pink-0` | `#ffdbf7` |

| `--base-color-scale-pink-1` | `#fcabe7` |

| `--base-color-scale-pink-2` | `#f67ed2` |

| `--base-color-scale-pink-3` | `#ed55ba` |

| `--base-color-scale-pink-4` | `#e22d9f` |

| `--base-color-scale-pink-5` | `#ca2186` |

| `--base-color-scale-pink-6` | `#961c66` |

| `--base-color-scale-pink-7` | `#741550` |

| `--base-color-scale-pink-8` | `#520e39` |

| `--base-color-scale-pink-9` | `#30081f` |

| `--base-color-scale-purple-0` | `#eadbff` |

| `--base-color-scale-purple-1` | `#d3b3fe` |

| `--base-color-scale-purple-2` | `#c08bfc` |

| `--base-color-scale-purple-3` | `#a665f9` |

| `--base-color-scale-purple-4` | `#8b40f5` |

| `--base-color-scale-purple-5` | `#6619e1` |

| `--base-color-scale-purple-6` | `#43179e` |

| `--base-color-scale-purple-7` | `#26115f` |

| `--base-color-scale-purple-8` | `#160048` |

| `--base-color-scale-purple-9` | `#0e022c` |

| `--base-color-scale-red-0` | `#ffd9d6` |

| `--base-color-scale-red-1` | `#feb2ae` |

| `--base-color-scale-red-2` | `#fd8986` |

| `--base-color-scale-red-3` | `#fc5c5d` |

| `--base-color-scale-red-4` | `#fa383d` |

| `--base-color-scale-red-5` | `#d31231` |

| `--base-color-scale-red-6` | `#ae0b29` |

| `--base-color-scale-red-7` | `#860620` |

| `--base-color-scale-red-8` | `#5e0217` |

| `--base-color-scale-red-9` | `#33000d` |

| `--base-color-scale-teal-0` | `#cff7f2` |

| `--base-color-scale-teal-1` | `#99f1e8` |

| `--base-color-scale-teal-2` | `#61eee3` |

| `--base-color-scale-teal-3` | `#26ede2` |

| `--base-color-scale-teal-4` | `#10dcd4` |

| `--base-color-scale-teal-5` | `#0bbab6` |

| `--base-color-scale-teal-6` | `#079695` |

| `--base-color-scale-teal-7` | `#047172` |

| `--base-color-scale-teal-8` | `#024b4d` |

| `--base-color-scale-teal-9` | `#052d2e` |

| `--base-color-scale-transparent` | `#0000` |

| `--base-color-scale-white-0` | `#fff` |

| `--base-color-scale-yellow-0` | `#f8e3a1` |

| `--base-color-scale-yellow-1` | `#f7d162` |

| `--base-color-scale-yellow-2` | `#fabf21` |

| `--base-color-scale-yellow-3` | `#db9d00` |

| `--base-color-scale-yellow-4` | `#be7d00` |

| `--base-color-scale-yellow-5` | `#a06100` |

| `--base-color-scale-yellow-6` | `#834800` |

| `--base-color-scale-yellow-7` | `#653200` |

| `--base-color-scale-yellow-8` | `#471f00` |

| `--base-color-scale-yellow-9` | `#2a1000` |

| `--brand-Accordion-border-color-default` | `#191f1b` |

| `--brand-Accordion-toggle-color-blue` | `#78bafe` |

| `--brand-Accordion-toggle-color-blue-purple-end` | `#c08bfc` |

| `--brand-Accordion-toggle-color-blue-purple-start` | `#78bafe` |

| `--brand-Accordion-toggle-color-coral` | `#fa9072` |

| `--brand-Accordion-toggle-color-default` | `#fff` |

| `--brand-Accordion-toggle-color-end` | `#5fed83` |

| `--brand-Accordion-toggle-color-gray` | `#a4aea6` |

| `--brand-Accordion-toggle-color-green` | `#5fed83` |

| `--brand-Accordion-toggle-color-green-blue-end` | `#78bafe` |

| `--brand-Accordion-toggle-color-green-blue-start` | `#5fed83` |

| `--brand-Accordion-toggle-color-indigo` | `#8d9ff8` |

| `--brand-Accordion-toggle-color-lemon` | `#f4da38` |

| `--brand-Accordion-toggle-color-lime` | `#cdf041` |

| `--brand-Accordion-toggle-color-orange` | `#f08a3a` |

| `--brand-Accordion-toggle-color-pink` | `#f67ed2` |

| `--brand-Accordion-toggle-color-pink-blue-end` | `#78bafe` |

| `--brand-Accordion-toggle-color-pink-blue-start` | `#f67ed2` |

| `--brand-Accordion-toggle-color-purple` | `#c08bfc` |

| `--brand-Accordion-toggle-color-purple-red-end` | `#fd8986` |

| `--brand-Accordion-toggle-color-purple-red-start` | `#c08bfc` |

| `--brand-Accordion-toggle-color-red` | `#fd8986` |

| `--brand-Accordion-toggle-color-red-orange-end` | `#f08a3a` |

| `--brand-Accordion-toggle-color-red-orange-start` | `#fd8986` |

| `--brand-Accordion-toggle-color-start` | `#5fed83` |

| `--brand-Accordion-toggle-color-teal` | `#61eee3` |

| `--brand-Accordion-toggle-color-yellow` | `#fabf21` |

| `--brand-ActionMenu-color-item-hover` | `#262c28` |

| `--brand-ActionMenu-color-scrollbar-thumb-bg` | `#7c8980` |

| `--brand-CTABanner-bgColor` | `#0f1511` |

| `--brand-CTABanner-shadow-color-end` | `#3094ff` |

| `--brand-CTABanner-shadow-color-start` | `#5fed83` |

| `--brand-ComparisonTable-featured-color-end` | `#6a7df0` |

| `--brand-ComparisonTable-featured-color-start` | `#f67ed2` |

| `--brand-Eyebrowbanner-bgColor-rest` | `#0d111799` |

| `--brand-Eyebrowbanner-borderColor-rest` | `#353d37` |

| `--brand-Eyebrowbanner-fgColor-blue` | `#78bafe` |

| `--brand-Eyebrowbanner-fgColor-blue-purple-end` | `#c08bfc` |

| `--brand-Eyebrowbanner-fgColor-blue-purple-start` | `#78bafe` |

| `--brand-Eyebrowbanner-fgColor-coral` | `#fa9072` |

| `--brand-Eyebrowbanner-fgColor-default-end` | `#fc5c5d` |

| `--brand-Eyebrowbanner-fgColor-default-middle` | `#ed55ba` |

| `--brand-Eyebrowbanner-fgColor-default-start` | `#c08bfc` |

| `--brand-Eyebrowbanner-fgColor-gray` | `#a4aea6` |

| `--brand-Eyebrowbanner-fgColor-green` | `#5fed83` |

| `--brand-Eyebrowbanner-fgColor-green-blue-end` | `#78bafe` |

| `--brand-Eyebrowbanner-fgColor-green-blue-start` | `#5fed83` |

| `--brand-Eyebrowbanner-fgColor-indigo` | `#8d9ff8` |

| `--brand-Eyebrowbanner-fgColor-lemon` | `#f4da38` |

| `--brand-Eyebrowbanner-fgColor-lime` | `#cdf041` |

| `--brand-Eyebrowbanner-fgColor-orange` | `#f08a3a` |

| `--brand-Eyebrowbanner-fgColor-pink` | `#f67ed2` |

| `--brand-Eyebrowbanner-fgColor-pink-blue-end` | `#78bafe` |

| `--brand-Eyebrowbanner-fgColor-pink-blue-start` | `#f67ed2` |

| `--brand-Eyebrowbanner-fgColor-purple` | `#c08bfc` |

| `--brand-Eyebrowbanner-fgColor-purple-red-end` | `#fd8986` |

| `--brand-Eyebrowbanner-fgColor-purple-red-start` | `#c08bfc` |

| `--brand-Eyebrowbanner-fgColor-red` | `#fd8986` |

| `--brand-Eyebrowbanner-fgColor-red-orange-end` | `#f08a3a` |

| `--brand-Eyebrowbanner-fgColor-red-orange-start` | `#fd8986` |

| `--brand-Eyebrowbanner-fgColor-teal` | `#61eee3` |

| `--brand-Eyebrowbanner-fgColor-yellow` | `#fabf21` |

| `--brand-Eyebrowbanner-heading-fgColor` | `#fff` |

| `--brand-Eyebrowbanner-subHeading-fgColor` | `#a4aea6` |

| `--brand-FAQ-color-heading` | `#fff` |

| `--brand-FAQ-color-tabLabel-selected` | `#fff` |

| `--brand-FrostedGlassVFX-bgColor` | `#9c9c9c1a` |

| `--brand-Grid-column-bgColor-overlay` | `#fb51544d` |

| `--brand-IDE-autoSuggest-bgColor` | `#0969da` |

| `--brand-IDE-autoSuggest-borderColor` | `#0a50db` |

| `--brand-IDE-autoSuggest-fgColor` | `#fff` |

| `--brand-IDE-autoSuggestLine-bgColor` | `#000839` |

| `--brand-IDE-borderColor` | `#171d22` |

| `--brand-IDE-default-bgColor` | `#131337` |

| `--brand-IDE-default-editor-bgColor` | `#242538` |

| `--brand-IDE-default-editor-tab-bgColor-active` | `#242538` |

| `--brand-IDE-default-editor-tab-bgColor-rest` | `#24253880` |

| `--brand-IDE-default-editor-tab-borderColor` | `#0a50db` |

| `--brand-IDE-default-editor-tabs-bgColor` | `linear-gradient(0deg, #0038ff05 0%, #0038ff05 100%), #17182c` |

| `--brand-IDE-glass-bgColor-rest` | `#000000b3` |

| `--brand-IDE-glass-chat-bgColor` | `#0000000f` |

| `--brand-IDE-glass-editor-bgColor` | `#242538c4` |

| `--brand-IDE-glass-editor-tab-bgColor-active` | `#242538c4` |

| `--brand-IDE-glass-editor-tab-bgColor-rest` | `#24253880` |

| `--brand-IDE-glass-editor-tabs-bgColor` | `transparent` |

| `--brand-IDE-scrollBar-bgColor` | `transparent` |

| `--brand-IDE-scrollBar-fgColor` | `#353d37` |

| `--brand-Icon-color-blue` | `#78bafe` |

| `--brand-Icon-color-coral` | `#fa9072` |

| `--brand-Icon-color-default` | `#5fed83` |

| `--brand-Icon-color-gray` | `#a4aea6` |

| `--brand-Icon-color-green` | `#5fed83` |

| `--brand-Icon-color-indigo` | `#8d9ff8` |

| `--brand-Icon-color-lemon` | `#f4da38` |

| `--brand-Icon-color-lime` | `#cdf041` |

| `--brand-Icon-color-orange` | `#f08a3a` |

| `--brand-Icon-color-pink` | `#f67ed2` |

| `--brand-Icon-color-purple` | `#c08bfc` |

| `--brand-Icon-color-red` | `#fd8986` |

| `--brand-Icon-color-teal` | `#61eee3` |

| `--brand-Icon-color-yellow` | `#fabf21` |

| `--brand-InlineLink-color-pressed` | `#a2daff` |

| `--brand-InlineLink-color-rest` | `#8dd6ff` |

| `--brand-Label-color-blue` | `#78bafe` |

| `--brand-Label-color-blue-purple-end` | `#c08bfc` |

| `--brand-Label-color-blue-purple-start` | `#78bafe` |

| `--brand-Label-color-coral` | `#fa9072` |

| `--brand-Label-color-default` | `#fff` |

| `--brand-Label-color-gray` | `#a4aea6` |

| `--brand-Label-color-green` | `#5fed83` |

| `--brand-Label-color-green-blue-end` | `#78bafe` |

| `--brand-Label-color-green-blue-purple-1` | `#000aff` |

| `--brand-Label-color-green-blue-purple-2` | `#096bde` |

| `--brand-Label-color-green-blue-purple-3` | `#00ff46` |

| `--brand-Label-color-green-blue-purple-4` | `#8250df` |

| `--brand-Label-color-green-blue-start` | `#5fed83` |

| `--brand-Label-color-indigo` | `#8d9ff8` |

| `--brand-Label-color-lemon` | `#f4da38` |

| `--brand-Label-color-lime` | `#cdf041` |

| `--brand-Label-color-orange` | `#f08a3a` |

| `--brand-Label-color-pink` | `#f67ed2` |

| `--brand-Label-color-pink-blue-end` | `#78bafe` |

| `--brand-Label-color-pink-blue-start` | `#f67ed2` |

| `--brand-Label-color-purple` | `#c08bfc` |

| `--brand-Label-color-purple-red-end` | `#fd8986` |

| `--brand-Label-color-purple-red-start` | `#c08bfc` |

| `--brand-Label-color-red` | `#fd8986` |

| `--brand-Label-color-red-orange-end` | `#f08a3a` |

| `--brand-Label-color-red-orange-start` | `#fd8986` |

| `--brand-Label-color-teal` | `#61eee3` |

| `--brand-Label-color-yellow` | `#fabf21` |

| `--brand-Link-color-accent` | `#8dd6ff` |

| `--brand-Link-color-default` | `#fff` |

| `--brand-LogoSuite-color-control-hover` | `#5a5b7c` |

| `--brand-LogoSuite-color-control-rest` | `#090d0a` |

| `--brand-LogoSuite-color-logo-emphasis` | `#fff` |

| `--brand-LogoSuite-color-logo-filter-emphasis` | `brightness(0) saturate(100%) invert(91%) sepia(2%) saturate(2455%) hue-rotate...` |

| `--brand-LogoSuite-color-logo-filter-muted` | `brightness(0) saturate(100%) invert(61%) sepia(8%) saturate(430%) hue-rotate(...` |

| `--brand-LogoSuite-color-logo-muted` | `#a4aea6` |

| `--brand-Pillar-icon-color-blue` | `#78bafe` |

| `--brand-Pillar-icon-color-coral` | `#fa9072` |

| `--brand-Pillar-icon-color-default` | `var(--brand-color-scale-gray-5)` |

| `--brand-Pillar-icon-color-gray` | `#a4aea6` |

| `--brand-Pillar-icon-color-green` | `#5fed83` |

| `--brand-Pillar-icon-color-indigo` | `#8d9ff8` |

| `--brand-Pillar-icon-color-lemon` | `#f4da38` |

| `--brand-Pillar-icon-color-lime` | `#cdf041` |

| `--brand-Pillar-icon-color-orange` | `#f08a3a` |

| `--brand-Pillar-icon-color-pink` | `#f67ed2` |

| `--brand-Pillar-icon-color-purple` | `#c08bfc` |

| `--brand-Pillar-icon-color-red` | `#fd8986` |

| `--brand-Pillar-icon-color-teal` | `#61eee3` |

| `--brand-Pillar-icon-color-yellow` | `#fabf21` |

| `--brand-PricingOptions-actionsMessage-accentColor` | `#1095ff` |

| `--brand-PricingOptions-actionsMessage-bgColor` | `#0c1c26` |

| `--brand-PricingOptions-actionsMessage-borderColor` | `#0e4678` |

| `--brand-PricingOptions-featureList-group-heading-color` | `#fff` |

| `--brand-PricingOptions-item-bgColor-gradient-end` | `#000` |

| `--brand-PricingOptions-item-bgColor-gradient-start` | `#0f1511` |

| `--brand-PricingOptions-item-bgColor-solid` | `#0f1511` |

| `--brand-Prose-code-bgColor` | `#0d103f` |

| `--brand-RiverStoryScroll-content-inactive-bgColor` | `#000` |

| `--brand-RiverStoryScroll-pagination-fgColor` | `#fff` |

| `--brand-SubNav-bgColor` | `#000` |

| `--brand-SubNav-color-link-active` | `#fff` |

| `--brand-SubNav-color-link-bgColor` | `#323834` |

| `--brand-SubNav-color-link-rest` | `#fff` |

| `--brand-Tabs-item-accent-bgColor-rest` | `#08872b` |

| `--brand-Tabs-item-accent-fgColor-rest` | `#fff` |

| `--brand-Tabs-item-default-bgColor-active` | `linear-gradient(180deg, #ffffff1f 0%, #9999991f 100%)` |

| `--brand-Tabs-item-default-borderColor-active` | `#fff` |

| `--brand-Testimonial-quote-color-default` | `#fff` |

| `--brand-Testimonial-quote-color-emphasis` | `#5fed83` |

| `--brand-Testimonial-quoteMarkColor-blue` | `#78bafe` |

| `--brand-Testimonial-quoteMarkColor-blue-purple-end` | `#c08bfc` |

| `--brand-Testimonial-quoteMarkColor-blue-purple-start` | `#78bafe` |

| `--brand-Testimonial-quoteMarkColor-coral` | `#fa9072` |

| `--brand-Testimonial-quoteMarkColor-default` | `#fff` |

| `--brand-Testimonial-quoteMarkColor-gray` | `#a4aea6` |

| `--brand-Testimonial-quoteMarkColor-green` | `#5fed83` |

| `--brand-Testimonial-quoteMarkColor-green-blue-end` | `#78bafe` |

| `--brand-Testimonial-quoteMarkColor-green-blue-start` | `#5fed83` |

| `--brand-Testimonial-quoteMarkColor-indigo` | `#8d9ff8` |

| `--brand-Testimonial-quoteMarkColor-lemon` | `#f4da38` |

| `--brand-Testimonial-quoteMarkColor-lime` | `#cdf041` |

| `--brand-Testimonial-quoteMarkColor-orange` | `#f08a3a` |

| `--brand-Testimonial-quoteMarkColor-pink` | `#f67ed2` |

| `--brand-Testimonial-quoteMarkColor-pink-blue-end` | `#78bafe` |

| `--brand-Testimonial-quoteMarkColor-pink-blue-start` | `#f67ed2` |

| `--brand-Testimonial-quoteMarkColor-purple` | `#c08bfc` |

| `--brand-Testimonial-quoteMarkColor-purple-red-end` | `#fd8986` |

| `--brand-Testimonial-quoteMarkColor-purple-red-start` | `#c08bfc` |

| `--brand-Testimonial-quoteMarkColor-red` | `#fd8986` |

| `--brand-Testimonial-quoteMarkColor-red-orange-end` | `#f08a3a` |

| `--brand-Testimonial-quoteMarkColor-red-orange-start` | `#fd8986` |

| `--brand-Testimonial-quoteMarkColor-teal` | `#61eee3` |

| `--brand-Testimonial-quoteMarkColor-yellow` | `#fabf21` |

| `--brand-Timeline-line-color` | `#58635b` |

| `--brand-Token-bgColor-accent` | `#5fed83` |

| `--brand-Token-bgColor-default` | `#191f1b` |

| `--brand-Token-bgColor-hover-accent` | `#8cf2a6` |

| `--brand-Token-bgColor-hover-default` | `#262c28` |

| `--brand-Token-bgColor-hover-invisible` | `#0f1511` |

| `--brand-Token-bgColor-hover-outline` | `#0f1511` |

| `--brand-Token-bgColor-invisible` | `transparent` |

| `--brand-Token-bgColor-outline` | `transparent` |

| `--brand-Token-fgColor-accent` | `#000` |

| `--brand-Token-fgColor-default` | `#fff` |

| `--brand-Token-fgColor-invisible` | `#fff` |

| `--brand-Token-fgColor-outline` | `#fff` |

| `--brand-Tooltip-color-default` | `#fff` |

| `--brand-VideoPlayer-closedCaption-text-bgColor` | `#000000bf` |

| `--brand-VideoPlayer-closedCaption-text-fgColor` | `#fff` |

| `--brand-breadcrumbs-separator-borderColor` | `#c4ccc6` |

| `--brand-button-accent-bgColor-active` | `#08872b` |

| `--brand-button-accent-bgColor-disabled` | `#58635b` |

| `--brand-button-accent-bgColor-hover` | `#0d6731` |

| `--brand-button-accent-bgColor-rest` | `#08872b` |

| `--brand-button-accent-borderColor-active` | `#0d6731` |

| `--brand-button-accent-fgColor-disabled` | `#a4aea6` |

| `--brand-button-accent-fgColor-rest` | `#fff` |

| `--brand-button-primary-bgColor-active` | `#d2d9d4` |

| `--brand-button-primary-bgColor-disabled` | `#58635b` |

| `--brand-button-primary-bgColor-hover` | `#d2d9d4` |

| `--brand-button-primary-bgColor-rest` | `#fff` |

| `--brand-button-primary-borderColor-active` | `#fff` |

| `--brand-button-primary-borderColor-disabled` | `#58635b` |

| `--brand-button-primary-borderColor-hover` | `#fff` |

| `--brand-button-primary-borderColor-rest` | `#fff` |

| `--brand-button-primary-fgColor-disabled` | `#a4aea6` |

| `--brand-button-primary-fgColor-rest` | `#000` |

| `--brand-button-secondary-bgColor-rest` | `transparent` |

| `--brand-button-secondary-borderColor-active` | `#ffffff52` |

| `--brand-button-secondary-borderColor-hover` | `#ffffff52` |

| `--brand-button-secondary-borderColor-rest` | `#ffffff29` |

| `--brand-button-secondary-fgColor-disabled` | `#58635b` |

| `--brand-button-secondary-fgColor-rest` | `#fff` |

| `--brand-button-subtle-bgColor-active` | `#ffffff12` |

| `--brand-button-subtle-bgColor-hover` | `#ffffff0d` |

| `--brand-button-subtle-bgColor-rest` | `#ffffff12` |

| `--brand-button-subtle-fgColor-disabled` | `#58635b` |

| `--brand-button-subtle-fgColor-rest` | `#fff` |

| `--brand-color-accent-primary` | `#5fed83` |

| `--brand-color-accent-secondary` | `#db9d00` |

| `--brand-color-border-default` | `#353d37` |

| `--brand-color-border-muted` | `#191f1b` |

| `--brand-color-border-subtle` | `#262c28` |

| `--brand-color-canvas-default` | `#000` |

| `--brand-color-canvas-inset` | `#000` |

| `--brand-color-canvas-invert` | `#fff` |

| `--brand-color-canvas-muted` | `#090d0a` |

| `--brand-color-canvas-overlay` | `#262c28` |

| `--brand-color-canvas-subtle` | `#0f1511` |

| `--brand-color-danger-emphasis` | `#d31231` |

| `--brand-color-danger-fg` | `#fa383d` |

| `--brand-color-danger-muted` | `#5e021799` |

| `--brand-color-danger-subtle` | `#fa383dd9` |

| `--brand-color-error-emphasis` | `#d31231` |

| `--brand-color-error-fg` | `#fa383d` |

| `--brand-color-error-muted` | `#5e021799` |

| `--brand-color-error-subtle` | `#fa383dd9` |

| `--brand-color-focus` | `#3094ff` |

| `--brand-color-neutral-emphasis` | `#7c8980` |

| `--brand-color-neutral-emphasisPlus` | `#7c8980` |

| `--brand-color-neutral-muted` | `#7c8980fe` |

| `--brand-color-neutral-subtle` | `#7c8980` |

| `--brand-color-success-emphasis` | `#0d6731` |

| `--brand-color-success-fg` | `#23ea57` |

| `--brand-color-success-muted` | `#0d302499` |

| `--brand-color-success-subtle` | `#0e422cd9` |

| `--brand-color-text-danger` | `#ff8182` |

| `--brand-color-text-default` | `#fff` |

| `--brand-color-text-emphasized` | `#23ea57` |

| `--brand-color-text-error` | `#ff8182` |

| `--brand-color-text-link-pressed` | `#a2daff` |

| `--brand-color-text-link-rest` | `#8dd6ff` |

| `--brand-color-text-muted` | `#a4aea6` |

| `--brand-color-text-onEmphasis` | `#000` |

| `--brand-color-text-subtle` | `#a4aea6` |

| `--brand-control-checkbox-bg-checked` | `#fff` |

| `--brand-control-checkbox-bg-default` | `#191f1b` |

| `--brand-control-checkbox-bg-disabled` | `#58635b` |

| `--brand-control-checkbox-bg-indeterminate` | `#fff` |

| `--brand-control-color-border-default` | `#58635b` |

| `--brand-control-color-border-disabled` | `#353d37` |

| `--brand-control-color-canvas-disabled` | `#0f1511` |

| `--brand-control-color-fg-default` | `#fff` |

| `--brand-control-color-fg-disabled` | `#353d37` |

| `--brand-control-radio-bg-checked` | `#000` |

| `--brand-control-radio-bg-default` | `#000` |

| `--brand-control-radio-bg-disabled` | `#58635b` |

| `--brand-footer-bg-color` | `#060907` |

| `--brand-pagination-borderColor-hover` | `#fff` |

| `--brand-pagination-link-bgColor-active` | `#fff` |

| `--brand-pagination-link-bgColor-rest` | `#fff` |

| `--brand-tiles-bgColor-hover` | `#101411` |

| `--brand-tiles-bgColor-rest` | `#090d0a` |

| `--brand-tiles-highlightColor` | `#5fed83` |

| `--brand-videoPlayer-closedCaption-bgColor-enabled` | `#d2d9d4` |

| `--brand-videoPlayer-closedCaption-borderColor-enabled` | `#d2d9d4` |

| `--brand-videoPlayer-closedCaption-fgColor-disabled` | `#d2d9d4` |

| `--brand-videoPlayer-closedCaption-fgColor-enabled` | `#000` |

| `--brand-videoPlayer-controls-bgColor` | `#000` |

| `--brand-videoPlayer-controls-fgColor` | `#d2d9d4` |

| `--brand-videoPlayer-playButton-bgColor-rest` | `#0a50db` |

| `--brand-videoPlayer-playButton-fgColor-rest` | `#d2d9d4` |

| `--brand-videoPlayer-range-bgColor-default` | `#d2d9d4` |

| `--brand-videoPlayer-range-bgColor-progress` | `#0377ff` |

| `--brand-videoPlayer-title-bgColor` | `linear-gradient(180deg, #000000e6, #00000073 66%, transparent)` |

| `--brand-videoPlayer-title-fgColor` | `#d2d9d4` |

| `--color-bg-discussions-row-emoji-box` | `#57606a` |

| `--color-canvas-default` | `#0d1117` |

| `--color-diff-blob-selected-line-highlight-mix-blend-mode` | `screen` |

| `--color-marketing-icon-primary` | `#79c0ff` |

| `--color-marketing-icon-secondary` | `#1f6feb` |

| `--color-mktg-btn-bg` | `#f6f8fa` |

| `--color-mktg-btn-shadow-focus` | `#ffffff40 0 0 0 4px` |

| `--color-mktg-btn-shadow-hover` | `0 4px 7px #00000026, 0 100px 80px #ffffff05, 0 42px 33px #ffffff06, 0 22px 18...` |

| `--color-mktg-btn-shadow-hover-muted` | `#fff 0 0 0 2px inset` |

| `--color-mktg-btn-shadow-outline` | `#ffffff40 0 0 0 1px inset` |

| `--color-notifications-row-bg` | `#151b23` |

| `--color-notifications-row-read-bg` | `#0d1117` |

| `--color-project-gradient-in` | `#161b22` |

| `--color-project-gradient-out` | `#161b2200` |

| `--color-project-header-bg` | `#0d1117` |

| `--color-project-sidebar-bg` | `#161b22` |

| `--color-text-white` | `#fff` |

| `--color-user-mention-fg` | `#d29922` |

| `--color-workflow-card-bg` | `#151b23` |

| `--color-workflow-card-header-shadow` | `#1b1f230a` |



### Spacing & Size Tokens



| Variable | Value |

|----------|-------|

| `--Layout-column-gap` | `1rem` |

| `--Layout-inner-spacing-max` | `0px` |

| `--Layout-inner-spacing-min` | `0px` |

| `--Layout-outer-spacing-x` | `0px` |

| `--Layout-outer-spacing-y` | `0px` |

| `--Layout-row-gap` | `1rem` |

| `--actionListContent-paddingBlock` | `.375rem` |

| `--base-size-112` | `7rem` |

| `--base-size-12` | `.75rem` |

| `--base-size-128` | `8rem` |

| `--base-size-16` | `1rem` |

| `--base-size-2` | `.125rem` |

| `--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-4` | `.25rem` |

| `--base-size-40` | `2.5rem` |

| `--base-size-44` | `2.75rem` |

| `--base-size-48` | `3rem` |

| `--base-size-6` | `.375rem` |

| `--base-size-64` | `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-size-2xl` | `2.5rem` |

| `--base-text-size-lg` | `1.25rem` |

| `--base-text-size-md` | `1rem` |

| `--base-text-size-sm` | `.875rem` |

| `--base-text-size-xl` | `2rem` |

| `--base-text-size-xs` | `.75rem` |

| `--brand-Bento-content-padding-condensed` | `1rem` |

| `--brand-Bento-content-padding-normal` | `1.5rem` |

| `--brand-Bento-content-padding-spacious` | `3.5rem` |

| `--brand-Bento-gap-large` | `2rem` |

| `--brand-Bento-gap-medium` | `2rem` |

| `--brand-Bento-gap-small` | `1.25rem` |

| `--brand-ComparisonTable-heading-marginBottom` | `6rem` |

| `--brand-EyebrowBanner-spacing-inner-block` | `.875rem` |

| `--brand-EyebrowBanner-spacing-inner-inline` | `1.25rem` |

| `--brand-FAQ-heading-marginBottom` | `6rem` |

| `--brand-Grid-spacing-column-gap` | `3rem` |

| `--brand-Grid-spacing-margin` | `1rem` |

| `--brand-Grid-spacing-row` | `3rem` |

| `--brand-Hero-narrow-padding` | `6rem 0` |

| `--brand-Hero-regular-padding` | `8rem 0` |

| `--brand-LogoSuite-logobar-columnGap-condensed` | `2.5rem` |

| `--brand-LogoSuite-logobar-columnGap-default` | `5rem` |

| `--brand-LogoSuite-logobar-marquee-gap-condensed` | `2.5rem` |

| `--brand-LogoSuite-logobar-marquee-gap-default` | `6rem` |

| `--brand-LogoSuite-logobar-rowGap` | `2.5rem` |

| `--brand-PricingOptions-items-gap` | `1.5rem` |

| `--brand-PricingOptions-items1-container-paddingInline` | `2rem` |

| `--brand-PricingOptions-items2-container-padding-inline` | `3rem` |

| `--brand-PricingOptions-items2-gap` | `6rem` |

| `--brand-PricingOptions-items3-container-padding-inline` | `1.5rem` |

| `--brand-PricingOptions-items3-gap` | `4rem` |

| `--brand-PricingOptions-items4-container-padding-inline` | `1.5rem` |

| `--brand-PricingOptions-items4-gap` | `3rem` |

| `--brand-Prose-blockquote-spacing` | `1.5rem` |

| `--brand-Prose-img-spacing` | `3rem` |

| `--brand-River-heading-margin` | `1rem` |

| `--brand-River-label-margin` | `1rem` |

| `--brand-River-spacing-inner` | `1.5rem` |

| `--brand-River-spacing-innerY` | `2rem` |

| `--brand-River-spacing-outerBlock` | `3rem` |

| `--brand-River-variant-gridline-spacing-outerBlock` | `4rem` |

| `--brand-River-variant-gridline-spacing-outerInline` | `4rem` |

| `--brand-RiverAccordion-variant-gridline-spacing-contentGap` | `4rem` |

| `--brand-RiverAccordion-variant-gridline-spacing-outerBlock` | `4rem` |

| `--brand-RiverAccordion-variant-gridline-spacing-outerInline` | `4rem` |

| `--brand-RiverBreakout-spacing-inner` | `4rem` |

| `--brand-RiverBreakout-variant-gridline-spacing-contentGap` | `1.5rem` |

| `--brand-RiverBreakout-variant-gridline-spacing-outerBlock` | `4rem` |

| `--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd` | `5rem` |

| `--brand-RiverBreakout-variant-gridline-spacing-outerInline` | `4rem` |

| `--brand-Section-padding-condensed` | `3rem` |

| `--brand-Section-padding-normal` | `6rem` |

| `--brand-Section-padding-spacious` | `8rem` |

| `--brand-Statistic-spacing-condensed` | `1rem` |

| `--brand-Statistic-spacing-normal` | `1.5rem` |

| `--brand-Statistic-spacing-spacious` | `2rem` |

| `--brand-Tabs-container-padding` | `.25rem` |

| `--brand-Testimonial-quote-fontSize-default` | `1.375rem` |

| `--brand-Testimonial-quote-fontSize-large` | `1.75rem` |

| `--brand-Testimonial-quote-letterSpacing-default` | `0` |

| `--brand-Testimonial-quote-letterSpacing-large` | `0` |

| `--brand-Timeline-bullet-spacing` | `.125rem` |

| `--brand-Timeline-spacing` | `1rem` |

| `--brand-VideoPlayer-closedCaption-margin` | `0 auto 15px auto` |

| `--brand-VideoPlayer-closedCaption-text-padding` | `.625rem` |

| `--brand-VideoPlayer-tooltip-padding-block` | `.3125rem` |

| `--brand-VideoPlayer-tooltip-padding-inline` | `.3125rem` |

| `--brand-box-spacing-condensed` | `1rem` |

| `--brand-box-spacing-normal` | `1.5rem` |

| `--brand-box-spacing-spacious` | `3rem` |

| `--brand-control-large-gap` | `1rem` |

| `--brand-control-large-paddingBlock-condensed` | `.75rem` |

| `--brand-control-large-paddingBlock-normal` | `1.25rem` |

| `--brand-control-large-paddingInline-condensed` | `1rem` |

| `--brand-control-large-paddingInline-normal` | `1.25rem` |

| `--brand-control-large-paddingInline-spacious` | `2rem` |

| `--brand-control-medium-gap` | `.75rem` |

| `--brand-control-medium-paddingBlock-condensed` | `.375rem` |

| `--brand-control-medium-paddingBlock-normal` | `1rem` |

| `--brand-control-medium-paddingInline-condensed` | `.75rem` |

| `--brand-control-medium-paddingInline-normal` | `1rem` |

| `--brand-control-medium-paddingInline-spacious` | `1.75rem` |

| `--brand-control-small-gap` | `.5rem` |

| `--brand-control-small-paddingBlock` | `.5rem` |

| `--brand-control-small-paddingInline-condensed` | `.5rem` |

| `--brand-control-small-paddingInline-normal` | `.75rem` |

| `--brand-control-small-paddingInline-spacious` | `1.5rem` |

| `--brand-controlStack-large-gap-auto` | `.5rem` |

| `--brand-controlStack-large-gap-condensed` | `.5rem` |

| `--brand-controlStack-large-gap-spacious` | `.75rem` |

| `--brand-controlStack-medium-gap-condensed` | `.5rem` |

| `--brand-controlStack-medium-gap-spacious` | `.75rem` |

| `--brand-controlStack-small-gap-condensed` | `.5rem` |

| `--brand-controlStack-small-gap-spacious` | `1rem` |

| `--brand-heading-letterSpacing-1000` | `-.014rem` |

| `--brand-heading-letterSpacing-400` | `0` |

| `--brand-heading-letterSpacing-500` | `0` |

| `--brand-heading-letterSpacing-600` | `0` |

| `--brand-heading-letterSpacing-700` | `0` |

| `--brand-heading-letterSpacing-800` | `0` |

| `--brand-heading-letterSpacing-900` | `0` |

| `--brand-stack-gap-condensed` | `1rem` |

| `--brand-stack-gap-normal` | `1.5rem` |

| `--brand-stack-gap-spacious` | `3rem` |

| `--brand-stack-padding-condensed` | `1rem` |

| `--brand-stack-padding-normal` | `1.5rem` |

| `--brand-stack-padding-spacious` | `3rem` |

| `--brand-text-letterSpacing-100` | `.21px` |

| `--brand-text-letterSpacing-1000` | `-.035em` |

| `--brand-text-letterSpacing-200` | `.24px` |

| `--brand-text-letterSpacing-300` | `.18px` |

| `--brand-text-letterSpacing-350` | `.18px` |

| `--brand-text-letterSpacing-400` | `0` |

| `--brand-text-letterSpacing-500` | `0` |

| `--brand-text-letterSpacing-600` | `0` |

| `--brand-text-letterSpacing-700` | `0` |

| `--brand-text-letterSpacing-800` | `0` |

| `--brand-text-letterSpacing-900` | `0` |

| `--brand-text-size-100` | `.875rem` |

| `--brand-text-size-1000` | `4rem` |

| `--brand-text-size-200` | `1rem` |

| `--brand-text-size-300` | `1.125rem` |

| `--brand-text-size-350` | `1.25rem` |

| `--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-subhead-letterSpacing-large` | `.1px` |

| `--brand-text-subhead-letterSpacing-medium` | `.24px` |

| `--brand-text-subhead-size-large` | `1.25rem` |

| `--brand-text-subhead-size-medium` | `1rem` |

| `--control-large-gap` | `.5rem` |

| `--control-large-paddingBlock` | `.625rem` |

| `--control-large-paddingInline-condensed` | `.5rem` |

| `--control-large-paddingInline-normal` | `.75rem` |

| `--control-large-paddingInline-spacious` | `1rem` |

| `--control-medium-gap` | `.5rem` |

| `--control-medium-paddingBlock` | `.375rem` |

| `--control-medium-paddingInline-condensed` | `.5rem` |

| `--control-medium-paddingInline-normal` | `.75rem` |

| `--control-medium-paddingInline-spacious` | `1rem` |

| `--control-small-gap` | `.25rem` |

| `--control-small-paddingBlock` | `.25rem` |

| `--control-small-paddingInline-condensed` | `.5rem` |

| `--control-small-paddingInline-normal` | `.75rem` |

| `--control-small-paddingInline-spacious` | `1rem` |

| `--control-xlarge-gap` | `.5rem` |

| `--control-xlarge-paddingBlock` | `.875rem` |

| `--control-xlarge-paddingInline-condensed` | `.5rem` |

| `--control-xlarge-paddingInline-normal` | `.75rem` |

| `--control-xlarge-paddingInline-spacious` | `1rem` |

| `--control-xsmall-gap` | `.25rem` |

| `--control-xsmall-paddingBlock` | `.125rem` |

| `--control-xsmall-paddingInline-condensed` | `.25rem` |

| `--control-xsmall-paddingInline-normal` | `.5rem` |

| `--control-xsmall-paddingInline-spacious` | `.75rem` |

| `--controlStack-large-gap-auto` | `.5rem` |

| `--controlStack-large-gap-condensed` | `.5rem` |

| `--controlStack-large-gap-spacious` | `.75rem` |

| `--controlStack-medium-gap-auto` | `.5rem` |

| `--controlStack-medium-gap-condensed` | `.5rem` |

| `--controlStack-medium-gap-spacious` | `.75rem` |

| `--controlStack-small-gap-auto` | `.5rem` |

| `--controlStack-small-gap-condensed` | `.5rem` |

| `--controlStack-small-gap-spacious` | `1rem` |

| `--font-size-small` | `.75rem` |

| `--h0-size-mobile` | `2rem` |

| `--h00-size-mobile` | `2.5rem` |

| `--h1-size-mobile` | `1.625rem` |

| `--h2-size-mobile` | `1.375rem` |

| `--h3-size-mobile` | `1.125rem` |

| `--overlay-padding-condensed` | `.5rem` |

| `--overlay-padding-normal` | `1rem` |

| `--overlay-paddingBlock-condensed` | `.25rem` |

| `--overlay-paddingBlock-normal` | `.75rem` |

| `--spinner-size-large` | `4rem` |

| `--spinner-size-medium` | `2rem` |

| `--spinner-size-small` | `1rem` |

| `--stack-gap-condensed` | `.5rem` |

| `--stack-gap-normal` | `1rem` |

| `--stack-gap-spacious` | `1.5rem` |

| `--stack-padding-condensed` | `.5rem` |

| `--stack-padding-normal` | `1rem` |

| `--stack-padding-spacious` | `1.5rem` |

| `--tab-size-preference` | `4` |

| `--text-body-size-large` | `1rem` |

| `--text-body-size-medium` | `.875rem` |

| `--text-body-size-small` | `.75rem` |

| `--text-title-size-large` | `2rem` |

| `--text-title-size-medium` | `1.25rem` |

| `--text-title-size-small` | `1rem` |



### Typography Tokens



| Variable | Value |

|----------|-------|

| `--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-weight-bold` | `700` |

| `--base-text-weight-extrabold` | `800` |

| `--base-text-weight-extralight` | `200` |

| `--base-text-weight-heavy` | `900` |

| `--base-text-weight-light` | `300` |

| `--base-text-weight-medium` | `500` |

| `--base-text-weight-normal` | `400` |

| `--base-text-weight-regular` | `400` |

| `--base-text-weight-semibold` | `600` |

| `--body-font-size` | `.875rem` |

| `--brand-Testimonial-quote-fontWeight-default` | `425` |

| `--brand-Testimonial-quote-fontWeight-large` | `460` |

| `--brand-body-fontFamily` | `"Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI...` |

| `--brand-body-fontFamilyAlt` | `"Hubot Sans", "Hubot SansHeaderFallback", -apple-system, BlinkMacSystemFont, ...` |

| `--brand-fontStack-monospace` | `"Mona Sans Mono", monospace` |

| `--brand-fontStack-sansSerif` | `"Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI...` |

| `--brand-fontStack-sansSerifAlt` | `"Hubot Sans", "Hubot SansHeaderFallback", -apple-system, BlinkMacSystemFont, ...` |

| `--brand-fontStack-system` | `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, ...` |

| `--brand-heading-fontFamily` | `"Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI...` |

| `--brand-heading-fontFamilyAlt` | `"Hubot Sans", "Hubot SansHeaderFallback", -apple-system, BlinkMacSystemFont, ...` |

| `--brand-text-lineHeight-100` | `1.5` |

| `--brand-text-lineHeight-1000` | `1.08` |

| `--brand-text-lineHeight-200` | `1.5` |

| `--brand-text-lineHeight-300` | `1.5` |

| `--brand-text-lineHeight-350` | `1.5` |

| `--brand-text-lineHeight-400` | `1.4` |

| `--brand-text-lineHeight-500` | `1.35` |

| `--brand-text-lineHeight-600` | `1.3` |

| `--brand-text-lineHeight-700` | `1.2` |

| `--brand-text-lineHeight-800` | `1.18` |

| `--brand-text-lineHeight-900` | `1.1` |

| `--brand-text-style-italic-1` | `"ital" 1` |

| `--brand-text-style-italic-10` | `"ital" 10` |

| `--brand-text-style-italic-2` | `"ital" 2` |

| `--brand-text-style-italic-3` | `"ital" 3` |

| `--brand-text-style-italic-4` | `"ital" 4` |

| `--brand-text-style-italic-5` | `"ital" 5` |

| `--brand-text-style-italic-6` | `"ital" 6` |

| `--brand-text-style-italic-7` | `"ital" 7` |

| `--brand-text-style-italic-8` | `"ital" 8` |

| `--brand-text-style-italic-9` | `"ital" 9` |

| `--brand-text-subhead-lineHeight-large` | `1.3` |

| `--brand-text-subhead-lineHeight-medium` | `1.3` |

| `--brand-text-subhead-weight-large` | `500` |

| `--brand-text-subhead-weight-medium` | `550` |

| `--brand-text-weight-100` | `400` |

| `--brand-text-weight-1000` | `400` |

| `--brand-text-weight-200` | `400` |

| `--brand-text-weight-300` | `400` |

| `--brand-text-weight-350` | `400` |

| `--brand-text-weight-400` | `400` |

| `--brand-text-weight-500` | `400` |

| `--brand-text-weight-600` | `400` |

| `--brand-text-weight-700` | `400` |

| `--brand-text-weight-800` | `400` |

| `--brand-text-weight-900` | `400` |

| `--brand-text-weight-bold` | `537` |

| `--brand-text-weight-extrabold` | `543` |

| `--brand-text-weight-extralight` | `400` |

| `--brand-text-weight-heavy` | `550` |

| `--brand-text-weight-light` | `400` |

| `--brand-text-weight-medium` | `500` |

| `--brand-text-weight-normal` | `400` |

| `--brand-text-weight-regular` | `400` |

| `--brand-text-weight-semibold` | `525` |

| `--fontStack-monospace` | `ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, mono...` |

| `--fontStack-sansSerif` | `"Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", H...` |

| `--fontStack-sansSerifDisplay` | `"Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", H...` |

| `--fontStack-system` | `"Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", H...` |

| `--text-body-lineHeight-large` | `1.5` |

| `--text-body-lineHeight-medium` | `1.5` |

| `--text-body-lineHeight-small` | `1.625` |

| `--text-body-shorthand-large` | `400 1rem / 1.5 "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI",...` |

| `--text-body-shorthand-medium` | `400 .875rem / 1.5 "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe U...` |

| `--text-body-shorthand-small` | `400 .75rem / 1.625 "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe ...` |

| `--text-body-weight` | `400` |

| `--text-caption-lineHeight` | `1.25` |

| `--text-caption-shorthand` | `400 .75rem / 1.25 "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe U...` |

| `--text-caption-size` | `.75rem` |

| `--text-caption-weight` | `400` |

| `--text-codeBlock-lineHeight` | `1.5` |

| `--text-codeBlock-shorthand` | `400 .8125rem / 1.5 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Li...` |

| `--text-codeBlock-size` | `.8125rem` |

| `--text-codeBlock-weight` | `400` |

| `--text-codeInline-shorthand` | `400 .9285em ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberatio...` |

| `--text-codeInline-size` | `.9285em` |

| `--text-codeInline-weight` | `400` |

| `--text-display-lineHeight` | `1.375` |

| `--text-display-shorthand` | `500 2.5rem / 1.375 "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe ...` |

| `--text-display-size` | `2.5rem` |

| `--text-display-weight` | `500` |

| `--text-subtitle-lineHeight` | `1.625` |

| `--text-subtitle-shorthand` | `400 1.25rem / 1.625 "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe...` |

| `--text-subtitle-size` | `1.25rem` |

| `--text-subtitle-weight` | `400` |

| `--text-title-lineHeight-large` | `1.5` |

| `--text-title-lineHeight-medium` | `1.625` |

| `--text-title-lineHeight-small` | `1.5` |

| `--text-title-shorthand-large` | `600 2rem / 1.5 "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI",...` |

| `--text-title-shorthand-medium` | `600 1.25rem / 1.625 "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe...` |

| `--text-title-shorthand-small` | `600 1rem / 1.5 "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI",...` |

| `--text-title-weight-large` | `600` |

| `--text-title-weight-medium` | `600` |

| `--text-title-weight-small` | `600` |





## Color Palette



### Backgrounds



**Dark / Base**

- `#000000` (used 13x)

- `#0d1117`

- `#08872b`

- `#151a22`

- `#090d0a`

- `#151b23`



**Light / Surface**

- `#ffffff`



**Vibrant / Accent**

- `#1f6feb`



**Semi-transparent**

- `rgba(255, 255, 255, 0.06)`

- `rgba(255, 255, 255, 0.2)`

- `rgba(30, 35, 40, 0.4)`

- `rgba(46, 55, 74, 0.82)`

- `rgba(255, 255, 255, 0.15)`

- `rgba(13, 17, 23, 0.75)`



### Text



**Dark / Base**

- `#1f2328`

- `#000000`



**Light / Surface**

- `#ffffff` (used 596x)

- `#9198a1` (used 105x)

- `#f0f6fc` (used 86x)

- `#a4aea6` (used 50x)

- `#59636e`

- `#7c8980`



**Vibrant / Accent**

- `#8dd6ff` (used 132x)

- `#5fed83`



**Semi-transparent**

- `rgba(255, 255, 255, 0.85)` (used 6x)

- `rgba(255, 255, 255, 0.6)`

- `rgba(35, 41, 47, 0.9)`

- `rgba(255, 255, 255, 0.75)`



### Borders



**Dark / Base**

- `#21262d` (used 26x)

- `#353d37` (used 9x)

- `#484f58`

- `#191f1b`



**Light / Surface**

- `#ffffff` (used 39x)

- `#808080`

- `#818b98`

- `#d1d9e0`



**Vibrant / Accent**

- `#8c93fb`



**Semi-transparent**

- `rgba(255, 255, 255, 0.6)`

- `rgba(255, 255, 255, 0.1)`

- `rgba(72, 80, 88, 0.5)`

- `rgba(255, 255, 255, 0.15)`

- `rgba(255, 255, 255, 0.25)`



**Primary accent**: `#8dd6ff`





## Typography



**Font stack**: Mona Sans, Mona Sans VF, Mona Sans Mono, ui-monospace



| Role | Font | Size | Weight | Line Height | Tracking |

|------|------|------|--------|-------------|----------|

| Display / H1 | Mona Sans | 64px | 425 | 69.12px | -2.24px |

| Display / H1 | Mona Sans | 48px | 800 | 48px | normal |

| Display / H1 | Mona Sans | 48px | 440 | 56.64px | normal |

| Display / H1 | Mona Sans | 40px | 460 | 48px | normal |

| Display / H1 | Mona Sans | 40px | 500 | 52px | normal |

| H2 | Mona Sans VF | 24px | 600 | 36px | normal |

| H2 | Mona Sans | 24px | 600 | 36px | normal |

| Body | Mona Sans | 22px | 400 | 30.8px | 0.24px |

| H2 | Mona Sans | 22px | 600 | 30.8px | normal |

| H3 | Mona Sans | 22px | 480 | 30.8px | normal |

| Body | Mona Sans | 22px | 425 | 26.4px | normal |

| Body | Mona Sans | 18px | 400 | 27px | 0.18px |

| Body | Mona Sans VF | 16px | 400 | 24px | normal |

| Body | Mona Sans | 16px | 400 | 24px | normal |

| Body | Mona Sans | 16px | 500 | 20.8px | 0.24px |

| Body | Mona Sans Mono | 16px | 400 | 24px | 0.24px |

| Body | Mona Sans | 16px | 600 | 24px | 0.24px |

| Body | Mona Sans VF | 16px | 700 | 16px | normal |

| Body Small | Mona Sans VF | 14px | 400 | 21px | normal |

| Body Small | Mona Sans | 14px | 400 | 21px | normal |

| H2 | Mona Sans Mono | 14px | 400 | 21px | 0.21px |

| H3 | Mona Sans VF | 14px | 600 | 21px | normal |

| H3 | ui-monospace | 14px | 400 | 21px | normal |

| Body Small | Mona Sans VF | 14px | 500 | 21px | normal |

| Caption | Mona Sans VF | 12px | 400 | 18px | normal |

| Caption | Mona Sans VF | 12px | 500 | 18px | normal |





## Spacing Scale



`1px` · `2px` · `3px` · `4px` · `6px` · `7px` · `8px` · `12px` · `15px` · `16px` · `17px` · `18px` · `20px` · `24px` · `28px` · `32px` · `40px` · `44px` · `48px` · `64px` · `80px` · `96px` · `102px` · `112px`



*Based on a **4px grid** system.*





## Borders, Radii & Effects



**Border radius**: `50%`, `6px`, `8px`, `12px`, `16px`, `24px`, `48px`, `60px`



**Shadows**:

- `rgba(255, 255, 255, 0) 0px 0px 0px 1px inset`



**Effects**:

- `filter: blur(40px)`

- `filter: blur(60px)`

- `filter: blur(50px)`





## Component Patterns



### Buttons



- **"Platform"** (ghost)

  - `background: transparent` · `color: #ffffff`

  - `font: 16px / 400`

  - `padding: 8px` · `radius: 0px`



- **"Search or jump to..."** (ghost)

  - `background: transparent` · `color: rgba(255, 255, 255, 0.75)`

  - `font: 14px / 400`

  - `padding: 0px 0px 0px 7px` · `radius: 6px`



### Inputs



- **email**: bg `transparent`, radius `8px`, padding `18px 12px 0px 18px`



### Navigation



- **62 links**: GitHub Copilot, GitHub Spark, GitHub Models, MCP Registry, Actions, Codespaces

  - Layout: `block`, gap: `normal`



- **10 links**: Features, Enterprise, Copilot, AI, Security, Pricing

  - Layout: `block`, gap: `normal`



- **8 links**: Developer API, Partners, Education, GitHub CLI, GitHub Desktop, GitHub Mobile

  - Layout: `block`, gap: `normal`





## Layout Patterns



### Grid

- `<div>` — 12 columns, gap `80px 48px`

- `<div>` — 12 columns, gap `0px`



### Flexbox

- `<div>`, row, align: center, (2 children)

- `<ul>`, row, (6 children)

- `<div>`, column, justify: center, align: center, (2 children)

- `<div>`, row, justify: center, align: flex-end, gap: 16px, (2 children)

- `<div>`, column, align: center, (2 children)





## Assets



24 images, 30 SVG icons detected.



- `512px × 622px` (no alt) — `https://github.githubassets.com/assets/particles-170bd1fd231f4669.png`

- `136px × 32px` Duolingo — `https://images.ctfassets.net/8aevphvgewt8/g1XhuDG7foMyNWIEIpGJj/b40...`

- `139px × 32px` Gartner — `https://images.ctfassets.net/8aevphvgewt8/6Qr8Snm4JceoMFRJhapgFa/80...`

- `639px × 558px` (no alt) — `https://images.ctfassets.net/8aevphvgewt8/1Dt1ncaR6ZM4dQvknFzfBI/e5...`

- `671px × 585px` (no alt) — `https://images.ctfassets.net/8aevphvgewt8/1uXZYDy7dMcH9QwxuAU06F/1c...`

- `671px × 585px` (no alt) — `https://images.ctfassets.net/8aevphvgewt8/3xzVZaJhqo3B62R8NeHjX2/e3...`

- `671px × 585px` (no alt) — `https://images.ctfassets.net/8aevphvgewt8/3cgNgdKFqflI27vyDh4Gpa/c4...`

- `512px × 622px` (no alt) — `https://github.githubassets.com/assets/particles-170bd1fd231f4669.png`

- `558px × 375px` Copilot Autofix identifies vulnerable code and provides an explanation, together with a secure code suggestion to remediate the vulnerability. — `https://images.ctfassets.net/8aevphvgewt8/5mzhSO4avmXBwkFsMzgXkW/91...`

- `376px × 331px` A security campaign screen displays the campaign’s progress bar with 97% completed of 701 alerts. A total of 23 alerts are left with 13 in progress, and the campaign started 20 days ago. The status below shows that there are 7 days left in the campaign with a due date of November 15, 2024. — `https://images.ctfassets.net/8aevphvgewt8/6WnLu9nlnemjCltZkd8lCi/b1...`

- `376px × 331px` List of dependencies defined in a requirements .txt file. — `https://images.ctfassets.net/8aevphvgewt8/1o2Eid4RQteCr6iZ7wVauW/3c...`

- `377px × 331px` GitHub push protection confirms and displays an active secret, and blocks the push. — `https://images.ctfassets.net/8aevphvgewt8/3WaMDk5JuZzhaKfpRgibKz/c1...`

- ... and 12 more

