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

> Extracted from `https://github.com` on June 12, 2026
> 1926 elements analyzed

This document describes the complete design language of the website. It is structured for AI/LLM consumption — use it to faithfully recreate the visual design in any framework.

## Color Palette

### Primary Colors

| Role | Hex | RGB | HSL | Usage Count |
|------|-----|-----|-----|-------------|
| Primary | `#f0f6fc` | rgb(240, 246, 252) | hsl(210, 67%, 96%) | 650 |
| Secondary | `#08872b` | rgb(8, 135, 43) | hsl(137, 89%, 28%) | 2 |
| Accent | `#1f883d` | rgb(31, 136, 61) | hsl(137, 63%, 33%) | 2 |

### Neutral Colors

| Hex | HSL | Usage Count |
|-----|-----|-------------|
| `#ffffff` | hsl(0, 0%, 100%) | 1752 |
| `#000000` | hsl(0, 0%, 0%) | 360 |
| `#9198a1` | hsl(214, 8%, 60%) | 224 |
| `#58635b` | hsl(136, 6%, 37%) | 140 |
| `#59636e` | hsl(211, 11%, 39%) | 100 |
| `#a4aea6` | hsl(132, 6%, 66%) | 100 |
| `#d1d9e0` | hsl(208, 19%, 85%) | 12 |
| `#7c8980` | hsl(138, 5%, 51%) | 8 |
| `#404651` | hsl(219, 12%, 28%) | 6 |
| `#484f58` | hsl(214, 10%, 31%) | 5 |
| `#e4ebe6` | hsl(137, 15%, 91%) | 3 |
| `#2e374a` | hsl(221, 23%, 24%) | 1 |

### Background Colors

Used on large-area elements: `#0d1117`, `#ffffff`, `#e4ebe6`, `#000000`, `#151a22`, `#151b23`

### Text Colors

Text color palette: `#f0f6fc`, `#1f2328`, `#ffffff`, `#000000`, `#58635b`, `#005dd5`, `#59636e`, `#d1242f`, `#0969da`, `#25292e`

### Gradients

```css
background-image: linear-gradient(rgba(187, 128, 9, 0.15), rgba(187, 128, 9, 0.15));
```

```css
background-image: linear-gradient(rgb(0, 2, 64), rgba(0, 0, 0, 0));
```

```css
background-image: linear-gradient(rgb(0, 2, 64), rgb(0, 0, 0) 117%);
```

```css
background-image: linear-gradient(rgba(255, 255, 255, 0) -8.14%, rgba(255, 255, 255, 0.1) 62.09%);
```

```css
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 300%);
```

```css
background-image: linear-gradient(rgba(39, 50, 231, 0) 57.46%, rgba(95, 237, 131, 0.5) 112.96%);
```

```css
background-image: linear-gradient(rgba(0, 0, 0, 0) 47.42%, rgba(14, 10, 162, 0.5) 104.56%);
```

```css
background-image: radial-gradient(circle at 0px 100%, rgb(230, 183, 254) 10%, rgb(80, 73, 194) 20%, rgba(87, 78, 255, 0) 60%);
```

```css
background-image: radial-gradient(rgb(167, 162, 255) 30%, rgba(147, 80, 255, 0.5));
```

```css
background-image: linear-gradient(rgba(120, 115, 203, 0.2) 60%, rgb(89, 147, 212) 100%);
```

```css
background-image: radial-gradient(circle at 0px 100%, rgb(230, 183, 254) 20%, rgb(80, 73, 194) 40%, rgba(58, 55, 255, 0) 50%);
```

```css
background-image: linear-gradient(rgba(54, 67, 94, 0) 60%, rgb(42, 72, 106) 100%);
```

```css
background-image: linear-gradient(rgba(248, 81, 73, 0.1), rgba(248, 81, 73, 0.1));
```

### Full Color Inventory

| Hex | Contexts | Count |
|-----|----------|-------|
| `#ffffff` | background, text, border | 1752 |
| `#f0f6fc` | text, border, background | 650 |
| `#000000` | text, border, background | 360 |
| `#8dd6ff` | text, border | 262 |
| `#9198a1` | text, border | 224 |
| `#1f2328` | text, border, background | 218 |
| `#58635b` | text, border | 140 |
| `#59636e` | text, border | 100 |
| `#a4aea6` | text, border | 100 |
| `#d1d9e0` | border, background | 12 |
| `#5fed83` | text, border | 12 |
| `#d1242f` | text, border | 10 |
| `#f85149` | border, text | 9 |
| `#0d1117` | background | 8 |
| `#d29922` | text, border | 8 |
| `#7c8980` | text, border | 8 |
| `#4493f8` | text, border | 6 |
| `#404651` | background, border | 6 |
| `#484f58` | border | 5 |
| `#0969da` | text, border | 4 |
| `#e4ebe6` | background | 3 |
| `#1f6feb` | background | 2 |
| `#005dd5` | text, border | 2 |
| `#1f883d` | background | 2 |
| `#08872b` | background | 2 |
| `#0d3024` | background | 2 |
| `#2e374a` | background | 1 |
| `#818b98` | border | 1 |
| `#bb8009` | border | 1 |
| `#8c93fb` | border | 1 |

## Typography

### Font Families

- **Mona Sans** — used for all (1254 elements)
- **Mona Sans VF** — used for all (476 elements)
- **Mona Sans Mono** — used for all (17 elements)

### Type Scale

| Size (px) | Size (rem) | Weight | Line Height | Letter Spacing | Used On |
|-----------|------------|--------|-------------|----------------|---------|
| 64px | 4rem | 425 | 69.12px | -2.24px | h1 |
| 48px | 3rem | 800 | 48px | normal | div, span, h2 |
| 40px | 2.5rem | 460 | 48px | normal | h2, div, p, span |
| 32px | 2rem | 600 | 48px | normal | h1 |
| 24px | 1.5rem | 600 | 36px | normal | h2 |
| 22px | 1.375rem | 400 | 30.8px | 0.24px | p, span, h3 |
| 18px | 1.125rem | 400 | 27px | 0.18px | p, span |
| 16px | 1rem | 400 | normal | normal | html, head, style, meta |
| 14px | 0.875rem | 400 | 21px | normal | body, div, a, span |
| 12px | 0.75rem | 400 | 18px | 0.5px | span, sup, li, h3 |

### Heading Scale

```css
h1 { font-size: 64px; font-weight: 425; line-height: 69.12px; }
h2 { font-size: 48px; font-weight: 800; line-height: 48px; }
h2 { font-size: 40px; font-weight: 460; line-height: 48px; }
h1 { font-size: 32px; font-weight: 600; line-height: 48px; }
h2 { font-size: 24px; font-weight: 600; line-height: 36px; }
h3 { font-size: 22px; font-weight: 400; line-height: 30.8px; }
h1 { font-size: 14px; font-weight: 400; line-height: 21px; }
h3 { font-size: 12px; font-weight: 400; line-height: 18px; }
```

### Body Text

```css
body { font-size: 16px; font-weight: 400; line-height: normal; }
```

### Font Weights in Use

`400` (1557x), `500` (294x), `600` (51x), `460` (10x), `480` (8x), `425` (2x), `800` (2x), `440` (1x), `700` (1x)

## Spacing

**Base unit:** 2px

| Token | Value | Rem |
|-------|-------|-----|
| spacing-1 | 1px | 0.0625rem |
| spacing-40 | 40px | 2.5rem |
| spacing-64 | 64px | 4rem |
| spacing-80 | 80px | 5rem |
| spacing-96 | 96px | 6rem |
| spacing-102 | 102px | 6.375rem |
| spacing-112 | 112px | 7rem |
| spacing-274 | 274px | 17.125rem |
| spacing-308 | 308px | 19.25rem |
| spacing-384 | 384px | 24rem |
| spacing-432 | 432px | 27rem |

## Border Radii

| Label | Value | Count |
|-------|-------|-------|
| sm | 3px | 1 |
| md | 6px | 62 |
| lg | 12px | 13 |
| lg | 16px | 9 |
| xl | 24px | 7 |
| full | 48px | 1 |
| full | 60px | 12 |
| full | 9999px | 1 |

## Box Shadows

**sm** — blur: 0px
```css
box-shadow: rgba(209, 217, 224, 0.25) 0px 0px 0px 1px, rgba(37, 41, 46, 0.04) 0px 6px 12px -3px, rgba(37, 41, 46, 0.12) 0px 6px 18px 0px;
```

**sm** — blur: 0px
```css
box-shadow: rgba(209, 217, 224, 0) 0px 0px 0px 1px, rgba(37, 41, 46, 0.24) 0px 40px 80px 0px;
```

**sm (inset)** — blur: 0px
```css
box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 1px inset;
```

**sm** — blur: 0px
```css
box-shadow: rgb(61, 68, 77) 0px 0px 0px 1px, rgba(1, 4, 9, 0.4) 0px 6px 12px -3px, rgba(1, 4, 9, 0.4) 0px 6px 18px 0px;
```

**xs (inset)** — blur: 0px
```css
box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px inset;
```

**xs (inset)** — blur: 0px
```css
box-shadow: rgb(209, 217, 224) 0px -1px 0px 0px inset;
```

**xs (inset)** — blur: 0px
```css
box-shadow: rgb(209, 217, 224) 0px 1px 0px 0px inset;
```

## CSS Custom Properties

### Colors

```css
--borderWidth-thick: .125rem;
--borderWidth-thicker: .25rem;
--borderWidth-thin: .0625rem;
--borderWidth-default: var(--borderWidth-thin);
--borderRadius-full: 624.938rem;
--borderRadius-large: .75rem;
--borderRadius-medium: .375rem;
--borderRadius-small: .1875rem;
--borderRadius-default: var(--borderRadius-medium);
--overlay-borderRadius: .375rem;
--zIndex-popover: 500;
--brand-borderRadius-full: 624.938rem;
--brand-borderWidth-thicker: max(4px, .25rem);
--brand-borderWidth-thick: max(2px, .125rem);
--brand-borderWidth-thin: max(1px, .0625rem);
--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-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-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-Card-animation-easing: cubic-bezier(.01, .73, .08, .93);
--brand-Card-animation-duration: .4s;
--brand-Card-maxWidth: 26.25rem;
--brand-VideoPlayer-range-borderRadius: .1875rem;
--brand-VideoPlayer-closedCaption-text-bgColor: #000000bf;
--brand-VideoPlayer-closedCaption-text-fgColor: var(--base-color-scale-white-0);
--brand-Bento-item-borderRadius-large: var(--brand-borderRadius-xlarge);
--brand-Bento-item-borderRadius-medium: var(--brand-borderRadius-xlarge);
--brand-Bento-item-borderRadius-small: var(--brand-borderRadius-large);
--brand-EyebrowBanner-borderRadius: var(--base-size-16);
--counter-bgColor-muted: #656c7633;
--diffBlob-hunkNum-bgColor-rest: #0c2d6b;
--label-brown-fgColor-hover: #bfa77d;
--label-teal-fgColor-active: #24d6c4;
--button-primary-iconColor-disabled: #fff6;
--button-outline-fgColor-disabled: #4493f880;
--data-yellow-color-emphasis: #895906;
--display-lime-bgColor-muted: #141f0f;
--bgColor-black: #010409;
--button-default-bgColor-selected: #2a313c;
--label-orange-bgColor-hover: #43200a;
--brand-Label-color-green-blue-start: #5fed83;
--base-color-scale-teal-9: #052d2e;
--buttonKeybindingHint-invisible-borderColor-disabled: #656c761a;
--brand-color-text-muted: #a4aea6;
--label-plum-borderColor: #0000;
--control-danger-fgColor-hover: #ff7b72;
--display-cyan-bgColor-emphasis: #036a8c;
--control-checked-borderColor-active: #3685f3;
--brand-SubNav-color-link-bgColor: #323834;
--button-default-bgColor-rest: #212830;
--button-danger-borderColor-rest: #3d444d;
--display-orange-borderColor-emphasis: #c46212;
--label-olive-fgColor-hover: #b2af24;
--data-coral-color-muted: #351008;
--progressBar-track-borderColor: #0000;
--brand-Tabs-list-borderWidth-active: max(2px, .125rem);
--buttonKeybindingHint-invisible-bgColor-active: #656c7640;
--progressBar-bgColor-neutral: #656c76;
--brand-control-radio-border-disabled: #353d37;
--button-invisible-bgColor-disabled: #0000;
--button-primary-borderColor-hover: #ffffff26;
--base-color-scale-teal-4: #10dcd4;
--brand-Testimonial-quoteMarkColor-pink-blue-end: #78bafe;
--brand-Eyebrowbanner-fgColor-green-blue-end: #78bafe;
--fgColor-success: #3fb950;
--border-severe-muted: .0625rem solid #db6d2866;
--brand-videoPlayer-title-fgColor: #d2d9d4;
--header-borderColor-divider: #656c76;
--label-orange-fgColor-hover: #f1933b;
--brand-videoPlayer-playButton-bgColor-rest: #0a50db;
--brand-Testimonial-quote-color-default: #fff;
--brand-PricingOptions-item-bgColor-solid: #0f1511;
--base-color-scale-yellow-1: #f7d162;
--contribution-halloween-bgColor-2: #c46212;
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
--button-danger-borderColor-active: #ffffff26;
--label-gray-fgColor-hover: #9babbf;
--color-ansi-yellow-bright: #e3b341;
--label-gray-bgColor-rest: #1c1c1c;
--brand-Testimonial-quoteMarkColor-indigo: #8d9ff8;
--bgColor-open-muted: #2ea04326;
--brand-Eyebrowbanner-fgColor-purple: #c08bfc;
--bgColor-white: #fff;
--controlKnob-borderColor-rest: #3d444d;
--brand-CTABanner-shadow-color-start: #5fed83;
--brand-Eyebrowbanner-fgColor-purple-red-end: #fd8986;
--brand-color-text-emphasized: #23ea57;
--label-yellow-borderColor: #0000;
--bgColor-open-emphasis: #238636;
--color-project-gradient-out: #161b2200;
--brand-Accordion-toggle-color-end: #5fed83;
--color-prettylights-syntax-variable: #ffa657;
--bgColor-neutral-emphasis: #656c76;
--base-color-scale-pink-5: #ca2186;
--color-prettylights-syntax-markup-ignored-text: #f0f6fc;
--brand-LogoSuite-color-control-hover: #5a5b7c;
--fgColor-white: #fff;
--label-red-fgColor-active: #f7adab;
--brand-Label-color-yellow: #fabf21;
--base-color-scale-indigo-4: #4a5ce5;
--brand-Label-color-red-orange-end: #f08a3a;
--label-coral-fgColor-rest: #f7794b;
--brand-Label-color-teal: #61eee3;
--display-plum-borderColor-muted: #40125e;
--data-pine-color-emphasis: #18915e;
--label-coral-bgColor-rest: #351008;
--button-outline-bgColor-hover: #262c36;
--brand-button-primary-bgColor-rest: #08872b;
--bgColor-draft-muted: #656c7633;
--buttonKeybindingHint-primary-fgColor-disabled: #fff6;
--color-ansi-red: #ff7b72;
--color-mktg-btn-shadow-focus: #ffffff40 0 0 0 4px;
--base-color-scale-yellow-9: #2a1000;
--label-purple-borderColor: #0000;
--label-orange-bgColor-rest: #311708;
--control-bgColor-selected: #212830;
--base-color-scale-pink-7: #741550;
--display-plum-fgColor: #d07ef7;
--label-lime-fgColor-rest: #7dae37;
--contribution-winter-bgColor-4: #cae8ff;
--brand-Eyebrowbanner-fgColor-default-end: #fc5c5d;
--buttonKeybindingHint-default-fgColor-rest: #9198a1;
--label-pink-bgColor-hover: #451c35;
--base-color-scale-lime-3: #b1e119;
--button-default-borderColor-disabled: #656c761a;
--color-project-gradient-in: #161b22;
--contribution-winter-bgColor-1: #0c2d6b;
--brand-Testimonial-borderMask-subtle: linear-gradient(180deg, #0009, #0000001a);
--base-color-scale-lemon-6: #876a04;
--brand-Eyebrowbanner-fgColor-blue-purple-end: #c08bfc;
--label-pink-fgColor-rest: #e57bb2;
--label-blue-bgColor-rest: #001a47;
--control-transparent-bgColor-disabled: #212830;
--brand-button-secondary-borderColor-hover: #ffffff1f;
--label-lime-bgColor-active: #2c441d;
--diffBlob-expander-iconColor: #9198a1;
--brand-Label-color-orange: #f08a3a;
--brand-CTABanner-color-logo-emphasis: #fff;
--codeMirror-bgColor: #0d1117;
--button-danger-bgColor-active: #da3633;
--controlKnob-borderColor-disabled: #212830;
--label-teal-fgColor-hover: #1fbdb2;
--button-outline-borderColor-active: #3d444d;
--fgColor-onEmphasis: #fff;
--display-cyan-borderColor-muted: #002e3d;
--control-borderColor-selected: #f0f6fc;
--base-color-scale-yellow-3: #db9d00;
--color-ansi-red-bright: #ffa198;
--brand-color-text-onEmphasis: #000;
--brand-control-color-fg-disabled: #353d37;
--brand-Tooltip-color-default: #fff;
--codeMirror-matchingBracket-fgColor: #f0f6fc;
--buttonKeybindingHint-danger-borderColor-rest: #3d444db3;
--bgColor-success-emphasis: #238636;
--button-default-borderColor-rest: #3d444d;
--label-lemon-fgColor-rest: #ba9b12;
--base-color-scale-gray-3: #7c8980;
--display-gray-bgColor-emphasis: #576270;
--brand-Accordion-toggle-color-orange: #f08a3a;
--control-transparent-bgColor-selected: #656c7633;
--brand-IDE-scrollBar-fgColor: #353d37;
--control-checked-bgColor-active: #3685f3;
--display-green-bgColor-emphasis: #2f6f37;
--bgColor-closed-muted: #f851491a;
--data-blue-color-muted: #001a47;
--base-color-scale-gray-2: #a4aea6;
--brand-IDE-scrollBar-bgColor: transparent;
--buttonKeybindingHint-primary-borderColor-disabled: #656c761a;
--border-muted: .0625rem solid #3d444db3;
--brand-Accordion-toggle-color-red: #fd8986;
--base-color-scale-purple-5: #6619e1;
--label-pink-borderColor: #0000;
--bgColor-draft-emphasis: #656c76;
--brand-Testimonial-quoteMarkColor-teal: #61eee3;
--display-auburn-borderColor-muted: #3a2422;
--base-color-scale-orange-3: #ea7110;
--label-olive-borderColor: #0000;
--base-color-scale-yellow-2: #fabf21;
--brand-control-radio-bg-checked: #000;
--base-color-scale-teal-8: #024b4d;
--codeMirror-syntax-fgColor-support: #79c0ff;
--contribution-default-bgColor-2: #196c2e;
--border-done-emphasis: .0625rem solid #8957e5;
--brand-PricingOptions-item-bgColor-gradient-start: #0f1511;
--display-lime-fgColor: #7dae37;
--fgColor-muted: #9198a1;
--brand-LogoSuite-color-control-rest: #090d0a;
--base-color-scale-pink-1: #fcabe7;
--display-teal-borderColor-emphasis: #158a8a;
--brand-control-radio-border-hover: #353d37;
--display-lemon-bgColor-emphasis: #786008;
--diffBlob-additionWord-fgColor: #f0f6fc;
--selection-bgColor: #1f6febb3;
--border-danger-emphasis: .0625rem solid #da3633;
--codeMirror-selection-bgColor: #388bfd66;
--base-color-scale-pink-8: #520e39;
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
--border-success-muted: .0625rem solid #2ea04366;
--label-purple-fgColor-rest: #b687f7;
--control-checked-fgColor-rest: #fff;
--controlTrack-bgColor-disabled: #656c76;
--brand-Token-bgColor-hover-outline: #0f1511;
--display-pink-bgColor-muted: #2d1524;
--label-coral-borderColor: #0000;
--buttonKeybindingHint-danger-borderColor-hover: #0104091a;
--base-color-scale-lemon-2: #f4da38;
--button-default-bgColor-disabled: #212830;
--brand-Label-color-lime: #cdf041;
--base-color-scale-coral-8: #500a00;
--color-workflow-card-bg: #151b23;
--diffBlob-additionNum-fgColor: #f0f6fc;
--button-primary-iconColor-rest: #fff;
--diffBlob-hunkLine-bgColor: #388bfd1a;
--borderColor-closed-emphasis: #da3633;
--button-primary-borderColor-rest: #ffffff26;
--label-lemon-bgColor-rest: #291d00;
--base-color-scale-gray-4: #58635b;
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
--borderColor-accent-muted: #388bfd66;
--display-yellow-fgColor: #d3910d;
--buttonKeybindingHint-invisible-fgColor-disabled: #656c76;
--brand-button-subtle-borderColor-rest: #262c28;
--brand-Eyebrowbanner-fgColor-pink-blue-end: #78bafe;
--button-invisible-iconColor-disabled: #656c76;
--label-olive-bgColor-rest: #171e0b;
--control-fgColor-disabled: #656c76;
--codeMirror-syntax-fgColor-keyword: #ff7b72;
--buttonKeybindingHint-default-fgColor-disabled: #656c76;
--base-color-scale-teal-2: #61eee3;
--controlKnob-bgColor-checked: #fff;
--data-red-color-muted: #3c0614;
--brand-Label-color-purple-red-end: #fd8986;
--brand-Eyebrowbanner-fgColor-default-start: #c08bfc;
--label-orange-borderColor: #0000;
--controlTrack-bgColor-rest: #010409;
--brand-Card-background-default: #0f1511;
--brand-button-primary-borderColor-hover: transparent;
--avatar-bgColor: #ffffff1a;
--data-orange-color-emphasis: #984b10;
--brand-IDE-default-editor-tab-bgColor-active: #242538;
--codeMirror-syntax-fgColor-variable: #ffa657;
--display-orange-fgColor: #ed8326;
--label-cyan-borderColor: #0000;
--brand-button-subtle-fgColor-disabled: #58635b;
--brand-IDE-default-editor-bgColor: #242538;
--fgColor-black: #010409;
--base-color-scale-orange-1: #fab580;
--data-plum-color-emphasis: #b643ef;
--base-color-scale-indigo-2: #8d9ff8;
--label-olive-bgColor-hover: #252d10;
--brand-Eyebrowbanner-fgColor-coral: #fa9072;
--base-color-scale-blue-0: #c2edff;
--color-ansi-white-bright: #fff;
--display-blue-bgColor-muted: #001a47;
--brand-Label-color-purple: #c08bfc;
--display-orange-bgColor-emphasis: #984b10;
--label-plum-bgColor-hover: #40125e;
--codeMirror-cursor-fgColor: #f0f6fc;
--diffBlob-deletionNum-bgColor: #f851494d;
--base-color-scale-green-3: #23ea57;
--base-color-scale-pink-2: #f67ed2;
--base-color-scale-lemon-5: #a98906;
--brand-videoPlayer-playButton-fgColor-rest: #d2d9d4;
--base-color-scale-blue-6: #1530b7;
--button-primary-borderColor-active: #ffffff26;
--label-red-bgColor-hover: #58091a;
--overlay-bgColor: #010409;
--color-diff-blob-selected-line-highlight-mix-blend-mode: screen;
--dashboard-bgColor: #010409;
--label-green-fgColor-active: #75d36f;
--brand-Accordion-toggle-color-lemon: #f4da38;
--brand-button-subtle-fgColor-rest: #fff;
--button-invisible-fgColor-active: #f0f6fc;
--button-danger-iconColor-hover: #fff;
--label-lime-fgColor-hover: #89ba36;
--brand-Testimonial-quoteMarkColor-red-orange-start: #fd8986;
--buttonKeybindingHint-danger-bgColor-active: #01040966;
--brand-color-neutral-emphasis: #7c8980;
--base-color-scale-red-0: #ffd9d6;
--bgColor-attention-emphasis: #9e6a03;
--brand-Label-color-indigo: #8d9ff8;
--button-outline-fgColor-rest: #388bfd;
--control-iconColor-rest: #9198a1;
--border-default: .0625rem solid #3d444d;
--button-primary-shadow-selected: 0 0 0 0 #0000;
--base-color-scale-indigo-1: #b3c1fd;
--label-auburn-bgColor-hover: #3a2422;
--display-pine-borderColor-muted: #0b3224;
--buttonKeybindingHint-default-bgColor-disabled: #2a313c;
--label-purple-fgColor-hover: #c398fb;
--brand-CTABanner-color-logo-muted: #a4aea6;
--brand-Testimonial-quoteMarkColor-yellow: #fabf21;
--display-pine-fgColor: #1bb673;
--fgColor-neutral: #9198a1;
--brand-button-subtle-bgColor-rest: #00000003;
--contribution-default-bgColor-1: #033a16;
--color-mktg-btn-shadow-outline: #ffffff40 0 0 0 1px inset;
--data-gray-color-emphasis: #576270;
--base-color-scale-green-9: #0a241b;
--border-accent-emphasis: .0625rem solid #1f6feb;
--label-teal-borderColor: #0000;
--brand-Label-color-green-blue-purple-4: #8250df;
--brand-CTABanner-shadow-color-end: #3094ff;
--display-olive-bgColor-muted: #171e0b;
--brand-Label-color-purple-red-start: #c08bfc;
--borderColor-sponsors-emphasis: #bf4b8a;
--base-color-scale-purple-7: #26115f;
--brand-Testimonial-quoteMarkColor-pink: #f67ed2;
--display-green-borderColor-muted: #182f1f;
--button-danger-iconColor-rest: #fa5e55;
--border-transparent: .0625rem solid #0000;
--display-gray-borderColor-emphasis: #6e7f96;
--brand-color-border-subtle: #262c28;
--buttonKeybindingHint-default-borderColor-rest: #3d444db3;
--base-color-scale-teal-1: #99f1e8;
--button-inactive-bgColor: #262c36;
--brand-videoPlayer-range-bgColor-progress: #0377ff;
--label-lemon-fgColor-active: #d7bc1d;
--brand-videoPlayer-range-bgColor-default: #d2d9d4;
--base-color-scale-orange-7: #703100;
--buttonCounter-danger-fgColor-disabled: #f8514980;
--button-invisible-fgColor-disabled: #656c76;
--highlight-neutral-bgColor: #d2992266;
--color-ansi-blue: #58a6ff;
--borderColor-sponsors-muted: #db61a266;
--brand-Label-color-blue: #78bafe;
--display-teal-fgColor: #1cb0ab;
--contribution-halloween-bgColor-1: #fac68f;
--display-gray-borderColor-muted: #2a2b2d;
--buttonCounter-danger-bgColor-hover: #fff3;
--label-coral-bgColor-hover: #51180b;
--button-default-bgColor-active: #2a313c;
--button-danger-fgColor-active: #fff;
--display-auburn-borderColor-emphasis: #a86f6b;
--progressBar-track-bgColor: #3d444d;
--brand-color-accent-primary: #5fed83;
--color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
--brand-FrostedGlassVFX-borderMask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0) content-box;
--base-color-scale-coral-3: #f66945;
--brand-FrostedGlassVFX-bgColor: #9c9c9c1a;
--brand-color-border-muted: #191f1b;
--brand-tiles-highlightColor: #5fed83;
--headerSearch-bgColor: #0d1117;
--base-color-scale-teal-3: #26ede2;
--brand-Accordion-toggle-color-red-orange-start: #fd8986;
--label-pink-fgColor-hover: #ec8dbd;
--brand-IDE-autoSuggest-borderColor: #0a50db;
--control-checked-bgColor-rest: #1f6feb;
--brand-Token-bgColor-hover-accent: #8cf2a6;
--base-color-scale-red-7: #860620;
--fgColor-draft: #9198a1;
--counter-bgColor-emphasis: #656c76;
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
--progressBar-bgColor-severe: #bd561d;
--base-color-scale-transparent: #0000;
--controlTrack-borderColor-disabled: #656c76;
--brand-Eyebrowbanner-fgColor-blue: #78bafe;
--color-mktg-btn-shadow-hover-muted: #fff 0 0 0 2px inset;
--brand-videoPlayer-closedCaption-borderColor-enabled: #d2d9d4;
--label-red-bgColor-rest: #3c0614;
--brand-button-primary-borderColor-rest: transparent;
--brand-color-focus: #3094ff;
--brand-IDE-glass-editor-tab-bgColor-rest: #24253880;
--brand-LogoSuite-color-logo-filter-muted: brightness(0) saturate(100%) invert(61%) sepia(8%) saturate(430%) hue-rotate(171deg) brightness(94%) contrast(92%);
--label-lemon-bgColor-active: #4f3c02;
--buttonKeybindingHint-primary-bgColor-disabled: #04260f1a;
--display-purple-bgColor-emphasis: #7730e8;
--borderColor-upsell-muted: #ab7df866;
--codeMirror-gutterMarker-fgColor-muted: #9198a1;
--color-text-white: #fff;
--buttonKeybindingHint-inactive-bgColor: #2a313c;
--border-closed-muted: .0625rem solid #f8514966;
--base-color-scale-blue-9: #000839;
--diffBlob-deletionLine-bgColor: #f851491a;
--brand-Token-fgColor-invisible: #fff;
--border-danger-muted: .0625rem solid #f8514966;
--buttonKeybindingHint-invisible-fgColor-rest: #9198a1;
--label-indigo-fgColor-active: #b7baf6;
--base-color-scale-gray-5: #353d37;
--fgColor-accent: #4493f8;
--base-color-scale-red-9: #33000d;
--data-lime-color-muted: #141f0f;
--control-borderColor-disabled: #656c761a;
--brand-Token-bgColor-invisible: transparent;
--display-indigo-borderColor-muted: #25215f;
--label-green-bgColor-hover: #182f1f;
--data-purple-color-muted: #211047;
--border-open-muted: .0625rem solid #2ea04366;
--reactionButton-selected-fgColor-rest: #4493f8;
--border-attention-emphasis: .0625rem solid #9e6a03;
--base-color-scale-lime-2: #cdf041;
--base-color-scale-green-8: #0d3024;
--base-color-scale-blue-5: #0a50db;
--label-cyan-bgColor-rest: #001f29;
--data-green-color-emphasis: #2f6f37;
--base-color-scale-teal-6: #079695;
--diffBlob-hunkNum-fgColor-rest: #f0f6fc;
--buttonKeybindingHint-danger-bgColor-hover: #01040933;
--brand-control-radio-border-checked: #58635b;
--base-color-scale-yellow-7: #653200;
--label-coral-bgColor-active: #72220d;
--brand-Eyebrowbanner-fgColor-yellow: #fabf21;
--brand-Accordion-toggle-color-yellow: #fabf21;
--brand-color-neutral-emphasisPlus: #7c8980;
--diffBlob-additionLine-bgColor: #2ea04326;
--brand-control-checkbox-border-checked-hover: #0000001f;
--button-invisible-borderColor-disabled: #0000;
--brand-Accordion-toggle-color-lime: #cdf041;
--display-lemon-fgColor: #ba9b12;
--label-plum-fgColor-rest: #d07ef7;
--brand-control-checkbox-bg-default: #191f1b;
--brand-LogoSuite-color-logo-emphasis: #fff;
--brand-PricingOptions-item-bgColor-gradient-end: #000;
--focus-outlineColor: #1f6feb;
--color-prettylights-syntax-markup-list: #f2cc60;
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
--borderColor-emphasis: #656c76;
--data-teal-color-muted: #041f25;
--brand-color-text-subtle: #a4aea6;
--brand-Accordion-toggle-color-green: #5fed83;
--base-color-scale-lime-9: #091d05;
--brand-IDE-default-bgColor: #131337;
--label-indigo-fgColor-hover: #a2a5f1;
--diffBlob-hunkNum-fgColor-hover: #fff;
--buttonKeybindingHint-danger-fgColor-hover: #fff;
--brand-Eyebrowbanner-borderColor-rest: #353d37;
--brand-color-danger-subtle: #fa383dd9;
--button-danger-iconColor-disabled: #f8514980;
--tooltip-bgColor: #3d444d;
--brand-ComparisonTable-featured-color-start: #f67ed2;
--borderColor-done-muted: #ab7df866;
--color-prettylights-syntax-carriage-return-bg: #b62324;
--brand-IDE-autoSuggestLine-bgColor: #000839;
--brand-color-text-link-pressed: #a2daff;
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
--base-color-scale-orange-5: #b35101;
--brand-color-border-default: #353d37;
--base-color-scale-red-8: #5e0217;
--fgColor-default: #f0f6fc;
--button-invisible-iconColor-hover: #9198a1;
--brand-control-radio-bg-hover: #0f1511;
--color-prettylights-syntax-string-regexp: #7ee787;
--display-plum-bgColor-emphasis: #9518d8;
--brand-color-success-muted: #0d302499;
--display-lime-borderColor-muted: #1f3116;
--fgColor-link: #4493f8;
--brand-Token-border-outline: #353d37;
--base-color-scale-purple-4: #8b40f5;
--borderColor-success-muted: #2ea04366;
--base-color-scale-black-0: #000;
--brand-IDE-borderColor: #171d22;
--base-color-scale-pink-0: #ffdbf7;
--buttonKeybindingHint-primary-fgColor-rest: #fff;
--color-notifications-row-bg: #151b23;
--display-yellow-borderColor-emphasis: #aa7109;
--brand-Token-fgColor-accent: #000;
--display-green-bgColor-muted: #122117;
--color-workflow-card-header-shadow: #1b1f230a;
--brand-color-neutral-muted: #7c8980fe;
--button-primary-fgColor-rest: #fff;
--control-fgColor-placeholder: #9198a1;
--brand-control-checkbox-bg-checked-hover: #309a4d;
--display-olive-borderColor-emphasis: #7a8321;
--data-pink-color-muted: #2d1524;
--display-purple-borderColor-emphasis: #975bf1;
--color-ansi-green-bright: #56d364;
--brand-button-subtle-borderColor-active: #ffffff1f;
--codeMirror-activeline-bgColor: #656c7633;
--button-invisible-borderColor-rest: #0000;
--brand-control-color-fg-default: #fff;
--display-pink-fgColor: #e57bb2;
--label-pink-fgColor-active: #f4a9cd;
--base-color-scale-lime-1: #dcff96;
--label-brown-fgColor-rest: #b69a6d;
--control-bgColor-active: #2a313c;
--codeMirror-gutters-bgColor: #0d1117;
--brand-Label-color-blue-purple-end: #c08bfc;
--brand-Testimonial-quoteMarkColor-red: #fd8986;
--header-fgColor-default: #ffffffb3;
--display-brown-borderColor-muted: #342a1d;
--brand-CTABanner-color-heading-emphasis: #23ea57;
--display-orange-borderColor-muted: #43200a;
--border-upsell-muted: .0625rem solid #ab7df866;
--color-prettylights-syntax-markup-bold: #f0f6fc;
--bgColor-severe-emphasis: #bd561d;
--display-pine-bgColor-emphasis: #14714c;
--brand-control-checkbox-bg-indeterminate-hover: #309a4d;
--label-auburn-borderColor: #0000;
--base-color-scale-indigo-9: #0d103f;
--base-color-scale-blue-4: #0377ff;
--brand-control-checkbox-border-checked: #077726;
--selectMenu-bgColor-active: #0c2d6b;
--brand-color-canvas-invert: #fff;
--base-color-scale-yellow-0: #f8e3a1;
--brand-button-primary-fgColor-rest: #fff;
--borderColor-disabled: #656c761a;
--label-brown-fgColor-active: #cdbb98;
--brand-Accordion-toggle-color-green-blue-start: #5fed83;
--brand-color-error-fg: #fa383d;
--label-indigo-bgColor-active: #312c90;
--borderColor-draft-muted: #3d444db3;
--brand-Eyebrowbanner-subHeading-fgColor: #a4aea6;
--data-plum-color-muted: #2a0e3f;
--contribution-default-borderColor-4: #0104090d;
--label-coral-fgColor-active: #fdaa86;
--label-teal-bgColor-hover: #073036;
--button-primary-borderColor-disabled: #105823;
--display-pink-borderColor-muted: #451c35;
--brand-Token-bgColor-default: #191f1b;
--label-red-fgColor-rest: #f27d83;
--buttonKeybindingHint-primary-borderColor-rest: #04260f1a;
--buttonKeybindingHint-danger-fgColor-rest: #9198a1;
--borderColor-attention-muted: #bb800966;
--base-color-scale-orange-9: #3d1800;
--display-lime-borderColor-emphasis: #5f892f;
--brand-Testimonial-quoteMarkColor-gray: #a4aea6;
--skeletonLoader-bgColor: #656c7633;
--display-red-bgColor-muted: #3c0614;
--brand-Accordion-toggle-color-red-orange-end: #f08a3a;
--buttonKeybindingHint-inactive-borderColor: #3d444db3;
--topicTag-borderColor: #0000;
--border-severe-emphasis: .0625rem solid #bd561d;
--codeMirror-syntax-fgColor-storage: #ff7b72;
--button-invisible-bgColor-active: #656c7640;
--brand-InlineLink-color-pressed: #a2daff;
--label-pine-bgColor-rest: #082119;
--border-attention-muted: .0625rem solid #bb800966;
--display-lemon-borderColor-muted: #372901;
--brand-Eyebrowbanner-fgColor-red: #fd8986;
--label-pine-fgColor-rest: #1bb673;
--display-lemon-borderColor-emphasis: #977b0c;
--base-color-scale-coral-5: #c53211;
--buttonKeybindingHint-danger-fgColor-disabled: #656c76;
--display-coral-borderColor-emphasis: #eb3342;
--label-yellow-fgColor-rest: #d3910d;
--color-marketing-icon-primary: #79c0ff;
--display-red-borderColor-emphasis: #eb3342;
--contribution-default-borderColor-3: #0104090d;
--brand-IDE-autoSuggest-fgColor: #fff;
--border-translucent: .0625rem solid #ffffff26;
--data-auburn-color-emphasis: #a86f6b;
--label-indigo-borderColor: #0000;
--data-yellow-color-muted: #2e1a00;
--label-plum-fgColor-hover: #d889fa;
--label-purple-bgColor-active: #481a9e;
--base-color-scale-green-6: #0d6731;
--brand-color-danger-fg: #fa383d;
--brand-Label-color-green-blue-end: #78bafe;
--label-pine-borderColor: #0000;
--label-cyan-bgColor-active: #014156;
--button-danger-fgColor-hover: #fff;
--brand-IDE-default-editor-tab-bgColor-rest: #24253880;
--buttonKeybindingHint-danger-fgColor-active: #fff;
--brand-control-radio-bg-checked-hover: #0f1511;
--bgColor-neutral-muted: #656c7633;
--display-blue-fgColor: #4da0ff;
--bgColor-accent-emphasis: #1f6feb;
--bgColor-done-muted: #ab7df826;
--codeMirror-syntax-fgColor-string: #a5d6ff;
--brand-color-accent-secondary: #db9d00;
--color-prettylights-syntax-invalid-illegal-text: #f85149;
--button-outline-borderColor-hover: #3d444d;
--avatarStack-fade-bgColor-muted: #2a313c;
--label-auburn-fgColor-rest: #bf9592;
--brand-button-subtle-bgColor-hover: #ffffff29;
--brand-SubNav-color-link-rest: #fff;
--contribution-default-bgColor-4: #56d364;
--brand-color-text-default: #fff;
--borderColor-attention-emphasis: #9e6a03;
--brand-ActionMenu-color-item-hover: #262c28;
--base-color-scale-purple-1: #d3b3fe;
--borderColor-muted: #3d444db3;
--base-color-scale-purple-9: #0e022c;
--brand-color-success-fg: #23ea57;
--brand-control-color-focus: #78bafe;
--page-header-bgColor: #0d1117;
--base-color-scale-teal-0: #cff7f2;
--display-brown-borderColor-emphasis: #94774c;
--buttonKeybindingHint-danger-borderColor-active: #0104091a;
--base-color-scale-lime-5: #608a10;
--brand-Label-color-red-orange-start: #fd8986;
--base-color-scale-purple-2: #c08bfc;
--base-color-scale-red-3: #fc5c5d;
--display-coral-fgColor: #f27d83;
--data-blue-color-emphasis: #0576ff;
--base-color-scale-blue-1: #a2daff;
--display-teal-borderColor-muted: #073036;
--display-cyan-fgColor: #07ace4;
--base-color-scale-pink-3: #ed55ba;
--color-prettylights-syntax-markup-deleted-bg: #67060c;
--bgColor-transparent: #0000;
--button-outline-bgColor-active: #0d419d;
--brand-tiles-bgColor-rest: #090d0a;
--base-color-scale-coral-9: #3c0000;
--brand-PricingOptions-borderMask: linear-gradient(180deg, #000, #0006);
--color-prettylights-syntax-markup-inserted-bg: #033a16;
--brand-Testimonial-quoteMarkColor-green-blue-end: #78bafe;
--color-ansi-black: #2f3742;
--base-color-scale-lemon-0: #fcf2a5;
--fgColor-closed: #f85149;
--color-prettylights-syntax-brackethighlighter-angle: #9198a1;
--contribution-default-borderColor-0: #0104090d;
--label-lime-bgColor-rest: #141f0f;
--data-pink-color-emphasis: #d34591;
--brand-CTABanner-bgColor: #0f1511;
--buttonCounter-outline-fgColor-rest: #388bfd;
--control-bgColor-rest: #212830;
--brand-PricingOptions-featureList-group-heading-color: #fff;
--label-orange-fgColor-rest: #ed8326;
--brand-color-canvas-inset: #000;
--button-invisible-fgColor-hover: #f0f6fc;
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
--label-olive-fgColor-rest: #a2a626;
--border-success-emphasis: .0625rem solid #238636;
--brand-color-text-error: #ff8182;
--brand-Label-color-green-blue-purple-2: #096bde;
--contribution-default-bgColor-0: #151b23;
--brand-Accordion-toggle-color-default: #fff;
--border-sponsors-muted: .0625rem solid #db61a266;
--display-brown-bgColor-muted: #241c14;
--buttonCounter-outline-bgColor-rest: #051d4d33;
--controlTrack-borderColor-rest: #3d444d;
--base-color-scale-coral-7: #801e0f;
--brand-Testimonial-quoteMarkColor-green: #5fed83;
--overlay-backdrop-bgColor: #21283066;
--color-prettylights-syntax-storage-modifier-import: #f0f6fc;
--label-purple-bgColor-hover: #31146b;
--brand-color-canvas-overlay: #262c28;
--brand-Eyebrowbanner-fgColor-red-orange-start: #fd8986;
--brand-MediaPlaylist-bgColor: linear-gradient(180deg, #0f1511 0%, #000 100%), #000;
--borderColor-done-emphasis: #8957e5;
--label-teal-bgColor-rest: #041f25;
--base-color-scale-lime-7: #22360b;
--data-green-color-muted: #122117;
--sideNav-bgColor-selected: #212830;
--base-color-scale-pink-9: #30081f;
--treeViewItem-leadingVisual-iconColor-rest: #9198a1;
--control-checked-borderColor-hover: #2a7aef;
--brand-control-radio-border-default: #58635b;
--brand-Eyebrowbanner-fgColor-pink-blue-start: #f67ed2;
--codeMirror-lineNumber-fgColor: #9198a1;
--brand-button-subtle-borderColor-hover: #ffffff1f;
--label-pine-fgColor-active: #1bda81;
--label-gray-bgColor-hover: #2a2b2d;
--bgColor-disabled: #212830;
--base-color-scale-lime-4: #88b80f;
--brand-Label-color-lemon: #f4da38;
--color-prettylights-syntax-constant: #79c0ff;
--base-color-scale-lime-6: #3e5f0f;
--base-color-scale-gray-7: #191f1b;
--bgColor-success-muted: #2ea04326;
--brand-control-radio-border-checked-hover: #58635b;
--diffBlob-additionLine-fgColor: #f0f6fc;
--base-color-scale-red-1: #feb2ae;
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
--label-blue-fgColor-rest: #4da0ff;
--brand-control-checkbox-border-unchecked-disabled: #353d37;
--buttonCounter-danger-bgColor-rest: #49020233;
--base-color-scale-indigo-3: #6a7df0;
--diffBlob-deletionWord-bgColor: #f8514966;
--control-transparent-borderColor-hover: #0000;
--borderColor-default: #3d444d;
--label-purple-fgColor-active: #d2affd;
--base-color-scale-coral-1: #fdb7a1;
--base-color-scale-red-6: #ae0b29;
--bgColor-sponsors-muted: #db61a21a;
--label-plum-bgColor-rest: #2a0e3f;
--base-color-scale-pink-4: #e22d9f;
--control-borderColor-danger: #da3633;
--base-color-scale-green-0: #cdfcd9;
--display-lime-bgColor-emphasis: #496c28;
--brand-SubdomainNavBar-border-nav-pressed: #fff;
--brand-SubNav-bgColor: #000;
--brand-button-secondary-fgColor-rest: #fff;
--data-teal-color-emphasis: #106c70;
--base-color-scale-white-0: #fff;
--brand-Accordion-toggle-color-blue: #78bafe;
--base-color-scale-lime-8: #142a08;
--label-blue-fgColor-hover: #61adff;
--display-brown-bgColor-emphasis: #755e3e;
--menu-bgColor-active: #151b23;
--brand-Testimonial-quoteMarkColor-red-orange-end: #f08a3a;
--brand-FAQ-color-tabLabel-selected: #fff;
--color-prettylights-syntax-string: #a5d6ff;
--bgColor-done-emphasis: #8957e5;
--button-invisible-bgColor-hover: #656c7633;
--label-olive-bgColor-active: #374115;
--color-ansi-cyan-bright: #56d4dd;
--brand-Eyebrowbanner-fgColor-green-blue-start: #5fed83;
--bgColor-muted: #151b23;
--brand-button-secondary-bgColor-rest: #ffffff1f;
--control-bgColor-hover: #262c36;
--bgColor-emphasis: #3d444d;
--brand-Token-bgColor-hover-invisible: #0f1511;
--border-sponsors-emphasis: .0625rem solid #bf4b8a;
--contribution-default-borderColor-2: #0104090d;
--brand-Accordion-toggle-color-start: #5fed83;
--brand-Tabs-item-default-borderColor-active: #fff;
--underlineNav-borderColor-active: #f78166;
--data-lime-color-emphasis: #5f892f;
--border-accent-muted: .0625rem solid #388bfd66;
--brand-Eyebrowbanner-fgColor-pink: #f67ed2;
--brand-color-success-subtle: #0e422cd9;
--label-green-bgColor-rest: #122117;
--color-ansi-cyan: #39c5cf;
--buttonKeybindingHint-danger-bgColor-rest: #2a313c;
--brand-IDE-autoSuggest-bgColor: #0969da;
--color-project-sidebar-bg: #161b22;
--display-red-bgColor-emphasis: #c31328;
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
--brand-control-radio-bg-default: #000;
--data-olive-color-muted: #171e0b;
--color-ansi-blue-bright: #79c0ff;
--brand-Eyebrowbanner-heading-fgColor: #fff;
--contribution-halloween-bgColor-4: #e3d04f;
--buttonKeybindingHint-inactive-fgColor: #9198a1;
--label-brown-bgColor-hover: #342a1d;
--label-blue-fgColor-active: #85c2ff;
--base-color-scale-lemon-3: #e4c411;
--base-color-scale-orange-2: #f08a3a;
--label-gray-borderColor: #0000;
--base-color-scale-gray-6: #262c28;
--base-color-scale-coral-2: #fa9072;
--label-green-bgColor-active: #214529;
--brand-IDE-glass-bgColor-rest: #000000b3;
--brand-Label-color-default: #fff;
--brand-Testimonial-borderMask-default: linear-gradient(180deg, #0009, #0000001a);
--brand-Label-color-pink: #f67ed2;
--brand-Link-color-default: #fff;
--data-lemon-color-muted: #291d00;
--label-yellow-bgColor-rest: #2e1a00;
--brand-LogoSuite-color-logo-filter-emphasis: brightness(0) saturate(100%) invert(91%) sepia(2%) saturate(2455%) hue-rotate(193deg) brightness(107%) contrast(98%);
--brand-button-secondary-borderColor-active: #ffffff1f;
--counter-borderColor: #0000;
--control-borderColor-warning: #9e6a03;
--base-color-scale-lemon-1: #f9e76a;
--brand-Testimonial-quoteMarkColor-green-blue-start: #5fed83;
--fgColor-danger: #f85149;
--brand-Eyebrowbanner-fgColor-gray: #a4aea6;
--controlTrack-bgColor-active: #2f3742;
--brand-IDE-default-editor-tabs-bgColor: linear-gradient(0deg, #0038ff05 0%, #0038ff05 100%), #17182c;
--display-plum-bgColor-muted: #2a0e3f;
--buttonKeybindingHint-primary-bgColor-rest: #04260f33;
--button-invisible-bgColor-rest: #0000;
--control-transparent-borderColor-active: #0000;
--fgColor-severe: #db6d28;
--button-danger-fgColor-disabled: #f8514980;
--button-primary-bgColor-rest: #238636;
--base-color-scale-gray-9: #060907;
--data-brown-color-muted: #241c14;
--brand-CTABanner-color-logo-filter-muted: brightness(0) saturate(100%) invert(61%) sepia(8%) saturate(430%) hue-rotate(171deg) brightness(94%) contrast(92%);
--color-user-mention-fg: #d29922;
--base-color-scale-lemon-8: #423101;
--brand-Accordion-toggle-color-coral: #fa9072;
--brand-control-checkbox-border-hover: #353d37;
--brand-Token-fgColor-default: #fff;
--display-brown-fgColor: #b69a6d;
--display-pine-bgColor-muted: #082119;
--brand-RiverStoryScroll-content-inactive-bgColor: #000;
--label-pine-bgColor-active: #0e4430;
--progressBar-bgColor-danger: #da3633;
--brand-Accordion-toggle-color-pink-blue-end: #78bafe;
--label-pink-bgColor-rest: #2d1524;
--base-color-scale-indigo-6: #232fb3;
--brand-Testimonial-quote-color-emphasis: #23ea57;
--label-auburn-bgColor-active: #543331;
--brand-Accordion-toggle-color-purple-red-end: #fd8986;
--base-color-scale-blue-3: #3094ff;
--display-lemon-bgColor-muted: #291d00;
--brand-Eyebrowbanner-fgColor-lemon: #f4da38;
--buttonCounter-outline-fgColor-disabled: #4493f880;
--underlineNav-iconColor-rest: #9198a1;
--base-color-scale-orange-4: #d56101;
--base-color-scale-lemon-4: #c7a60b;
--label-cyan-fgColor-rest: #07ace4;
--button-primary-bgColor-disabled: #105823;
--buttonKeybindingHint-default-bgColor-rest: #2a313c;
--bgColor-attention-muted: #bb800926;
--display-yellow-borderColor-muted: #3d2401;
--control-borderColor-success: #238636;
--reactionButton-selected-bgColor-rest: #388bfd33;
--diffBlob-deletionLine-fgColor: #f0f6fc;
--brand-Accordion-border-color-default: #191f1b;
--button-danger-bgColor-rest: #212830;
--data-purple-color-emphasis: #975bf1;
--base-color-scale-orange-0: #ffe2cc;
--borderColor-severe-emphasis: #bd561d;
--display-teal-bgColor-muted: #041f25;
--codeMirror-gutterMarker-fgColor-default: #0d1117;
--borderColor-neutral-muted: #3d444db3;
--base-color-scale-green-7: #0e422c;
--fgColor-upsell: #ab7df8;
--brand-Label-color-red: #fd8986;
--brand-control-checkbox-bg-indeterminate: #08872b;
--brand-RiverStoryScroll-pagination-fgColor: #fff;
--brand-control-color-border-disabled: #353d37;
--display-blue-borderColor-muted: #002766;
--base-color-scale-lime-0: #edffc9;
--display-yellow-bgColor-emphasis: #895906;
--brand-button-primary-shadow-active: none;
--brand-color-canvas-muted: #090d0a;
--brand-Label-color-blue-purple-start: #78bafe;
--controlTrack-fgColor-disabled: #fff;
--underlineNav-borderColor-hover: #3d444db3;
--data-brown-color-emphasis: #94774c;
--color-ansi-green: #3fb950;
--brand-Label-color-coral: #fa9072;
--base-color-scale-gray-8: #0f1511;
--fgColor-disabled: #656c76;
--brand-button-primary-fgColor-disabled: #a4aea6;
--label-green-fgColor-rest: #41b445;
--color-prettylights-syntax-invalid-illegal-bg: #f851491a;
--contribution-winter-bgColor-2: #1158c7;
--label-plum-bgColor-active: #5c1688;
--color-prettylights-syntax-entity-tag: #7ee787;
--control-transparent-bgColor-rest: #0000;
--buttonKeybindingHint-invisible-bgColor-rest: #2a313c;
--base-color-scale-yellow-5: #a06100;
--brand-FAQ-color-heading: #fff;
--display-plum-borderColor-emphasis: #b643ef;
--base-color-scale-purple-8: #160048;
--control-checked-bgColor-hover: #2a7aef;
--display-pine-borderColor-emphasis: #18915e;
--label-cyan-fgColor-active: #45cbf7;
--brand-control-checkbox-bg-hover: #0f1511;
--button-default-borderColor-hover: #3d444d;
--brand-Eyebrowbanner-fgColor-default-middle: #ed55ba;
--base-color-scale-purple-6: #43179e;
--label-yellow-bgColor-hover: #3d2401;
--control-bgColor-disabled: #212830;
--base-color-scale-indigo-5: #2d3dd7;
--bgColor-upsell-emphasis: #8957e5;
--brand-Accordion-toggle-color-blue-purple-end: #c08bfc;
--label-green-borderColor: #0000;
--display-green-fgColor: #41b445;
--brand-Eyebrowbanner-fgColor-lime: #cdf041;
--brand-button-primary-bgColor-disabled: #58635b;
--buttonKeybindingHint-invisible-bgColor-hover: #656c7633;
--selectMenu-borderColor: #3d444d;
--controlKnob-borderColor-checked: #1f6feb;
--brand-Eyebrowbanner-fgColor-red-orange-end: #f08a3a;
--button-primary-fgColor-disabled: #fff6;
--bgColor-inset: #010409;
--brand-videoPlayer-title-bgColor: linear-gradient(180deg, #000000e6, #00000073 66%, transparent);
--display-olive-fgColor: #a2a626;
--brand-Testimonial-quoteMarkColor-purple: #c08bfc;
--button-outline-fgColor-active: #fff;
--borderColor-translucent: #ffffff26;
--base-color-scale-lemon-9: #241900;
--brand-control-checkbox-bg-checked-disabled: color-mix(in srgb, #0d6731, #000 35%);
--header-bgColor: #151b23f2;
--display-auburn-bgColor-muted: #271817;
--base-color-scale-purple-0: #eadbff;
--brand-control-checkbox-bg-checked: #08872b;
--bgColor-sponsors-emphasis: #bf4b8a;
--base-color-scale-gray-0: #d2d9d4;
--brand-SubdomainNavBar-border-nav-default: #7c8980;
--color-prettylights-syntax-markup-heading: #1f6feb;
--header-fgColor-logo: #f0f6fc;
--border-done-muted: .0625rem solid #ab7df866;
--display-orange-bgColor-muted: #311708;
--label-gray-bgColor-active: #393d41;
--controlKnob-bgColor-disabled: #212830;
--base-color-scale-green-2: #5fed83;
--progressBar-bgColor-done: #8957e5;
--codeMirror-syntax-fgColor-entity: #d2a8ff;
--display-olive-borderColor-muted: #252d10;
--label-lime-borderColor: #0000;
--diffBlob-deletionWord-fgColor: #f0f6fc;
--brand-videoPlayer-closedCaption-fgColor-enabled: #000;
--base-color-scale-orange-6: #924100;
--borderColor-open-muted: #2ea04366;
--button-invisible-fgColor-rest: #f0f6fc;
--border-neutral-muted: .0625rem solid #3d444db3;
--borderColor-draft-emphasis: #656c76;
--display-purple-fgColor: #b687f7;
--display-blue-borderColor-emphasis: #0576ff;
--label-auburn-fgColor-hover: #c6a19f;
--brand-control-checkbox-border-default: #58635b;
--label-red-bgColor-active: #790c20;
--buttonCounter-danger-bgColor-disabled: #da36330d;
--buttonKeybindingHint-invisible-borderColor-rest: #0000;
--display-coral-borderColor-muted: #58091a;
--progressBar-bgColor-sponsors: #bf4b8a;
--border-draft-muted: .0625rem solid #3d444db3;
--button-default-fgColor-disabled: #656c76;
--bgColor-closed-emphasis: #da3633;
--controlTrack-bgColor-hover: #2a313c;
--display-purple-borderColor-muted: #31146b;
--border-emphasis: .0625rem solid #656c76;
--brand-Label-color-pink-blue-start: #f67ed2;
--brand-Testimonial-quoteMarkColor-blue: #78bafe;
--display-cyan-borderColor-emphasis: #0587b3;
--base-color-scale-red-4: #fa383d;
--label-teal-fgColor-rest: #1cb0ab;
--button-default-borderColor-active: #3d444d;
--brand-button-secondary-borderColor-rest: #ffffff0f;
--base-color-scale-indigo-7: #212183;
--display-pink-borderColor-emphasis: #d34591;
--control-transparent-bgColor-hover: #656c7633;
--brand-control-color-border-default: #58635b;
--brand-color-canvas-subtle: #0f1511;
--label-gray-fgColor-active: #b3c0d1;
--control-danger-fgColor-rest: #f85149;
--label-brown-borderColor: #0000;
--control-borderColor-rest: #3d444d;
--brand-Testimonial-quoteMarkColor-pink-blue-start: #f67ed2;
--avatar-borderColor: #ffffff26;
--brand-Label-color-green: #5fed83;
--brand-InlineLink-color-rest: #8dd6ff;
--border-disabled: .0625rem solid #656c761a;
--brand-Tabs-item-accent-fgColor-rest: #fff;
--data-lemon-color-emphasis: #977b0c;
--label-yellow-fgColor-active: #edb431;
--brand-color-success-emphasis: #0d6731;
--base-color-scale-lemon-7: #654d02;
--label-green-fgColor-hover: #46c144;
--brand-Eyebrowbanner-fgColor-blue-purple-start: #78bafe;
--label-olive-fgColor-active: #cbc025;
--control-borderColor-emphasis: #656c76;
--color-prettylights-syntax-comment: #9198a1;
--button-outline-bgColor-disabled: #212830;
--base-color-scale-green-5: #08872b;
--brand-color-neutral-subtle: #7c8980;
--label-yellow-fgColor-hover: #df9e11;
--reactionButton-selected-fgColor-hover: #79c0ff;
--control-transparent-borderColor-rest: #0000;
--brand-button-primary-bgColor-active: linear-gradient(0deg, #0000003d 0%, #0000003d 100%), #08872b;
--brand-Card-background-overlay: #f2f5f30d;
--button-danger-bgColor-disabled: #212830;
--bgColor-danger-emphasis: #da3633;
--brand-IDE-glass-chat-bgColor: #0000000f;
--brand-CTABanner-color-logo-filter-emphasis: brightness(0) saturate(100%) invert(91%) sepia(2%) saturate(2455%) hue-rotate(193deg) brightness(107%) contrast(98%);
--borderColor-neutral-emphasis: #656c76;
--label-orange-fgColor-active: #f6b06a;
--control-checked-borderColor-rest: #1f6feb;
--brand-Testimonial-quoteMarkColor-lime: #cdf041;
--brand-Timeline-line-color: #58635b;
--color-project-header-bg: #0d1117;
--control-fgColor-rest: #f0f6fc;
--base-color-scale-coral-4: #ef4319;
--color-ansi-gray: #656c76;
--brand-color-error-subtle: #fa383dd9;
--borderOpacity: 1;
--brand-button-secondary-fgColor-disabled: #58635b;
--color-ansi-white: #f0f6fc;
--brand-button-primary-bgColor-hover: color-mix(in srgb, #08872b, #000 16%);
--label-blue-bgColor-hover: #002766;
--brand-button-subtle-bgColor-active: #ffffff3d;
--data-coral-color-emphasis: #e1430e;
--label-purple-bgColor-rest: #211047;
--label-lime-bgColor-hover: #1f3116;
--display-indigo-bgColor-emphasis: #514ed4;
--brand-Eyebrowbanner-fgColor-purple-red-start: #c08bfc;
--brand-color-error-emphasis: #d31231;
--brand-Eyebrowbanner-bgColor-rest: #0d111799;
--base-color-scale-indigo-0: #dbe3ff;
--brand-Testimonial-quoteMarkColor-purple-red-end: #fd8986;
--buttonKeybindingHint-default-borderColor-disabled: #656c761a;
--brand-Token-bgColor-outline: transparent;
--borderColor-danger-muted: #f8514966;
--bgColor-upsell-muted: #ab7df826;
--label-lemon-fgColor-hover: #c4a717;
--borderColor-accent-emphasis: #1f6feb;
--border-draft-emphasis: .0625rem solid #656c76;
--buttonCounter-invisible-bgColor-rest: #656c7633;
--color-ansi-black-bright: #656c76;
--brand-button-primary-borderColor-disabled: transparent;
--brand-Token-bgColor-accent: #5fed83;
--base-color-scale-coral-6: #a22710;
--brand-SubNav-color-link-active: #fff;
--progressBar-bgColor-success: #238636;
--borderColor-closed-muted: #f8514966;
--brand-Testimonial-quoteMarkColor-lemon: #f4da38;
--control-checked-bgColor-disabled: #656c76;
--bgColor-default: #0d1117;
--control-checked-fgColor-disabled: #010409;
--base-color-scale-yellow-4: #be7d00;
--color-ansi-yellow: #d29922;
--label-gray-fgColor-rest: #92a1b5;
--brand-videoPlayer-controls-bgColor: #000;
--brand-button-secondary-bgColor-hover: #ffffff29;
--fgColor-attention: #d29922;
--brand-Accordion-toggle-color-pink-blue-start: #f67ed2;
--brand-tiles-bgColor-hover: #101411;
--label-pine-fgColor-hover: #1ac176;
--buttonCounter-danger-fgColor-rest: #f85149;
--base-color-scale-purple-3: #a665f9;
--label-lemon-borderColor: #0000;
--base-color-scale-yellow-8: #471f00;
--display-indigo-fgColor: #9899ec;
--label-brown-bgColor-rest: #241c14;
--color-ansi-magenta-bright: #d2a8ff;
--display-red-fgColor: #f27d83;
--base-color-scale-coral-0: #ffd5c7;
--brand-breadcrumbs-separator-borderColor: #c4ccc6;
--button-danger-fgColor-rest: #fa5e55;
--color-prettylights-syntax-entity: #d2a8ff;
--brand-color-text-danger: #ff8182;
--brand-Accordion-toggle-color-purple-red-start: #c08bfc;
--color-marketing-icon-secondary: #1f6feb;
--label-lemon-bgColor-hover: #372901;
--progressBar-bgColor-attention: #9e6a03;
--bgColor-inverse: #fff;
--codeMirror-syntax-fgColor-constant: #79c0ff;
--base-color-scale-yellow-6: #834800;
--avatarStack-fade-bgColor-default: #3d444d;
--label-auburn-bgColor-rest: #271817;
--button-star-iconColor: #e3b341;
--label-indigo-bgColor-hover: #25215f;
--brand-videoPlayer-controls-fgColor: #d2d9d4;
--color-prettylights-syntax-markup-italic: #f0f6fc;
--diffBlob-emptyLine-bgColor: #151b23;
--color-notifications-row-read-bg: #0d1117;
--display-purple-bgColor-muted: #211047;
--buttonCounter-default-bgColor-rest: #2f3742;
--color-bg-discussions-row-emoji-box: #57606a;
--label-teal-bgColor-active: #0a464d;
--borderColor-severe-muted: #db6d2866;
--brand-Testimonial-quoteMarkColor-purple-red-start: #c08bfc;
--brand-IDE-glass-editor-tabs-bgColor: transparent;
--display-teal-bgColor-emphasis: #106c70;
--border-open-emphasis: .0625rem solid #238636;
--brand-control-checkbox-border-indeterminate-hover: #0000001f;
--label-cyan-bgColor-hover: #002e3d;
--label-red-borderColor: #0000;
--diffBlob-additionNum-bgColor: #3fb9504d;
--brand-color-canvas-default: #000;
--display-yellow-bgColor-muted: #2e1a00;
--data-auburn-color-muted: #271817;
--brand-SubdomainNavBar-border-button-hover: #fff;
--buttonCounter-outline-fgColor-hover: #58a6ff;
--brand-Accordion-toggle-color-indigo: #8d9ff8;
--brand-Accordion-toggle-color-purple: #c08bfc;
--brand-Link-color-accent: #8dd6ff;
--brand-control-checkbox-border-checked-disabled: color-mix(in srgb, #0d6731, #000 35%);
--button-outline-fgColor-hover: #58a6ff;
--display-gray-fgColor: #92a1b5;
--button-primary-bgColor-active: #2e9a40;
--label-orange-bgColor-active: #632f0d;
--label-indigo-fgColor-rest: #9899ec;
--brand-Testimonial-quoteMarkColor-blue-purple-end: #c08bfc;
--base-color-scale-teal-7: #047172;
--reactionButton-selected-bgColor-hover: #3a8cfd5c;
--buttonKeybindingHint-invisible-bgColor-disabled: #0000;
--brand-control-color-canvas-disabled: #0f1511;
--border-upsell-emphasis: .0625rem solid #8957e5;
--brand-Accordion-toggle-color-pink: #f67ed2;
--brand-IDE-default-editor-tab-borderColor: #0a50db;
--brand-Tabs-item-default-bgColor-active: linear-gradient(180deg, #ffffff1f 0%, #9999991f 100%);
--label-pink-bgColor-active: #65244a;
--diffBlob-emptyNum-bgColor: #151b23;
--brand-Accordion-toggle-color-blue-purple-start: #78bafe;
--brand-IDE-glass-editor-bgColor: #242538c4;
--brand-Eyebrowbanner-fgColor-green: #5fed83;
--base-color-scale-blue-2: #78bafe;
--display-red-borderColor-muted: #58091a;
--display-indigo-bgColor-muted: #1b183f;
--control-danger-bgColor-hover: #f851491a;
--codeMirror-syntax-fgColor-comment: #656c76;
--base-color-scale-gray-1: #c4ccc6;
--brand-PricingOptions-actionsMessage-bgColor: #0c1c26;
--brand-LogoSuite-color-logo-muted: #a4aea6;
--brand-Tabs-item-accent-bgColor-rest: #08872b;
--bgColor-severe-muted: #db6d281a;
--borderColor-transparent: #0000;
--contribution-halloween-bgColor-3: #984b10;
--brand-Accordion-toggle-color-teal: #61eee3;
--headerSearch-borderColor: #2a313c;
--brand-color-text-link-rest: #8dd6ff;
--label-pine-bgColor-hover: #0b3224;
--controlKnob-bgColor-rest: #262c36;
--display-coral-bgColor-emphasis: #c31328;
--base-color-scale-green-1: #8cf2a6;
--data-olive-color-emphasis: #7a8321;
--button-invisible-iconColor-rest: #9198a1;
--brand-PricingOptions-actionsMessage-borderColor: #0e4678;
--button-primary-bgColor-hover: #29903b;
--fgColor-done: #ab7df8;
--color-ansi-magenta: #be8fff;
--controlTrack-fgColor-rest: #9198a1;
--border-neutral-emphasis: .0625rem solid #656c76;
--display-cyan-bgColor-muted: #001f29;
--label-brown-bgColor-active: #483a28;
--diffBlob-hunkNum-bgColor-hover: #1f6feb;
--borderColor-open-emphasis: #238636;
--label-auburn-fgColor-active: #d4b7b5;
--control-checked-borderColor-disabled: #656c76;
--brand-Prose-code-bgColor: #0d103f;
--brand-Eyebrowbanner-fgColor-teal: #61eee3;
--borderColor-danger-emphasis: #da3633;
--codeMirror-fgColor: #f0f6fc;
--diffBlob-deletionNum-fgColor: #f0f6fc;
--base-color-scale-teal-5: #0bbab6;
--brand-videoPlayer-closedCaption-bgColor-enabled: #d2d9d4;
--data-red-color-emphasis: #eb3342;
--data-gray-color-muted: #1c1c1c;
--base-color-scale-red-2: #fd8986;
--buttonKeybindingHint-danger-bgColor-disabled: #2a313c;
--display-pink-bgColor-emphasis: #ac2f74;
--brand-Testimonial-quoteMarkColor-blue-purple-start: #78bafe;
--brand-Token-fgColor-outline: #fff;
--base-color-scale-orange-8: #572400;
--diffBlob-hunkLine-fgColor: #9198a1;
--base-color-scale-pink-6: #961c66;
--tooltip-fgColor: #fff;
--fgColor-onInverse: #010409;
--display-olive-bgColor-emphasis: #5e681d;
--overlay-borderColor: #3d444db3;
--control-transparent-bgColor-active: #656c7640;
--label-blue-bgColor-active: #00378a;
--focus-outline-color: #1f6feb;
--brand-control-radio-bg-disabled: #000;
--brand-Eyebrowbanner-fgColor-indigo: #8d9ff8;
--label-coral-fgColor-hover: #fa8c61;
--button-default-fgColor-rest: #f0f6fc;
--border-closed-emphasis: .0625rem solid #da3633;
--label-cyan-fgColor-hover: #09b7f1;
--brand-Accordion-toggle-color-gray: #a4aea6;
--display-green-borderColor-emphasis: #388f3f;
--bgColor-accent-muted: #388bfd1a;
--base-color-scale-red-5: #d31231;
--display-gray-bgColor-muted: #1c1c1c;
--label-lime-fgColor-active: #9fcc3e;
--buttonCounter-outline-bgColor-disabled: #1f6feb0d;
--brand-button-primary-borderColor-active: #0d6731;
--brand-Grid-column-bgColor-overlay: #fb51544d;
--timelineBadge-bgColor: #212830;
--brand-control-checkbox-border-indeterminate: #077726;
--brand-IDE-glass-editor-tab-bgColor-active: #242538c4;
--brand-color-danger-muted: #5e021799;
--bgColor-danger-muted: #f851491a;
--contribution-winter-bgColor-3: #58a6ff;
--brand-Label-color-green-blue-purple-1: #000aff;
--buttonKeybindingHint-danger-borderColor-disabled: #656c761a;
--base-color-scale-indigo-8: #161962;
--label-yellow-bgColor-active: #5a3702;
--brand-Testimonial-quoteMarkColor-coral: #fa9072;
--card-bgColor: #151b23;
--brand-Label-color-green-blue-purple-3: #00ff46;
--display-coral-bgColor-muted: #3c0614;
--display-auburn-bgColor-emphasis: #87534f;
--color-prettylights-syntax-keyword: #ff7b72;
--brand-Testimonial-quoteMarkColor-default: #fff;
--data-pine-color-muted: #082119;
--buttonCounter-primary-bgColor-rest: #04260f33;
--contribution-default-borderColor-1: #0104090d;
--base-color-scale-green-4: #0fbf3e;
--color-mktg-btn-shadow-hover: 0 4px 7px #00000026, 0 100px 80px #ffffff05, 0 42px 33px #ffffff06, 0 22px 18px #ffffff07, 0 12px 10px #ffffff09, 0 7px 5px #ffffff0a, 0 3px 2px #ffffff12;
--brand-color-danger-emphasis: #d31231;
--brand-Accordion-toggle-color-green-blue-end: #78bafe;
--brand-ComparisonTable-featured-color-end: #6a7df0;
--borderColor-upsell-emphasis: #8957e5;
--button-invisible-borderColor-hover: #0000;
--label-indigo-bgColor-rest: #1b183f;
--button-danger-borderColor-hover: #ffffff26;
--button-inactive-fgColor: #9198a1;
--progressBar-bgColor-accent: #1f6feb;
--display-auburn-fgColor: #bf9592;
--brand-footer-bg-color: #060907;
--brand-Label-color-gray: #a4aea6;
--brand-Token-bgColor-hover-default: #262c28;
--brand-ActionMenu-color-scrollbar-thumb-bg: #7c8980;
--control-danger-bgColor-active: #f8514966;
--label-plum-fgColor-active: #e4a5fd;
--contribution-default-bgColor-3: #2ea043;
--brand-button-secondary-bgColor-active: #ffffff42;
--button-outline-bgColor-rest: #f0f6fc;
--display-indigo-borderColor-emphasis: #7070e1;
--brand-Testimonial-quoteMarkColor-orange: #f08a3a;
--fgColor-open: #3fb950;
--button-default-bgColor-hover: #262c36;
--codeMirror-lines-bgColor: #0d1117;
--brand-videoPlayer-closedCaption-fgColor-disabled: #d2d9d4;
--fgColor-sponsors: #db61a2;
--borderColor-success-emphasis: #238636;
--brand-color-error-muted: #5e021799;
--base-color-scale-blue-8: #052063;
--data-orange-color-muted: #311708;
--brand-PricingOptions-actionsMessage-accentColor: #1095ff;
--buttonCounter-danger-fgColor-hover: #fff;
--button-danger-bgColor-hover: #b62324;
--brand-Label-color-pink-blue-end: #78bafe;
--label-red-fgColor-hover: #f48b8d;
--display-blue-bgColor-emphasis: #005bd1;
--brand-Eyebrowbanner-fgColor-orange: #f08a3a;
--buttonCounter-outline-bgColor-hover: #051d4d33;
--base-color-scale-blue-7: #082a8f;
--diffBlob-additionWord-bgColor: #2ea04366;
--label-blue-borderColor: #0000;
--color-mktg-btn-bg: #f6f8fa;
```

### Spacing

```css
--tab-size-preference: 4;
--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;
--control-large-paddingBlock: .625rem;
--control-medium-paddingBlock: .375rem;
--control-xlarge-paddingBlock: .875rem;
--control-xsmall-paddingBlock: .125rem;
--control-large-gap: .5rem;
--control-large-paddingInline-condensed: .5rem;
--control-large-paddingInline-normal: .75rem;
--control-large-paddingInline-spacious: 1rem;
--control-large-size: 2.5rem;
--control-medium-gap: .5rem;
--control-medium-paddingInline-condensed: .5rem;
--control-medium-paddingInline-normal: .75rem;
--control-medium-paddingInline-spacious: 1rem;
--control-medium-size: 2rem;
--control-small-gap: .25rem;
--control-small-paddingBlock: .25rem;
--control-small-paddingInline-condensed: .5rem;
--control-small-paddingInline-normal: .75rem;
--control-small-paddingInline-spacious: 1rem;
--control-small-size: 1.75rem;
--control-xlarge-gap: .5rem;
--control-xlarge-paddingInline-condensed: .5rem;
--control-xlarge-paddingInline-normal: .75rem;
--control-xlarge-paddingInline-spacious: 1rem;
--control-xlarge-size: 3rem;
--control-xsmall-gap: .25rem;
--control-xsmall-paddingInline-condensed: .25rem;
--control-xsmall-paddingInline-normal: .5rem;
--control-xsmall-paddingInline-spacious: .75rem;
--control-xsmall-size: 1.5rem;
--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;
--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;
--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
--text-codeBlock-size: .8125rem;
--text-codeInline-size: .9285em;
--text-body-size-large: var(--base-text-size-md);
--text-body-size-medium: var(--base-text-size-sm);
--text-body-size-small: var(--base-text-size-xs);
--text-caption-size: var(--base-text-size-xs);
--text-display-size: var(--base-text-size-2xl);
--text-subtitle-size: var(--base-text-size-lg);
--text-title-size-large: var(--base-text-size-xl);
--text-title-size-medium: var(--base-text-size-lg);
--text-title-size-small: var(--base-text-size-md);
--h00-size-mobile: 2.5rem;
--h0-size-mobile: 2rem;
--h1-size-mobile: 1.625rem;
--h2-size-mobile: 1.375rem;
--h3-size-mobile: 1.125rem;
--h00-size: 3rem;
--h0-size: 2.5rem;
--h1-size: 2rem;
--h2-size: 1.5rem;
--h3-size: 1.25rem;
--h4-size: 1rem;
--h5-size: .875rem;
--h6-size: .75rem;
--body-font-size: .875rem;
--font-size-small: .75rem;
--Layout-column-gap: var(--base-size-16);
--Layout-row-gap: var(--base-size-16);
--Layout-outer-spacing-x: 0px;
--Layout-outer-spacing-y: 0px;
--Layout-inner-spacing-min: 0px;
--Layout-inner-spacing-max: 0px;
--actionListContent-paddingBlock: var(--control-medium-paddingBlock);
--brand-text-letterSpacing-1000: 0;
--brand-text-letterSpacing-900: 0;
--brand-text-letterSpacing-800: 0;
--brand-text-letterSpacing-700: 0;
--brand-text-letterSpacing-600: 0;
--brand-text-letterSpacing-500: 0;
--brand-text-letterSpacing-400: 0;
--brand-text-letterSpacing-350: .18px;
--brand-text-letterSpacing-300: .18px;
--brand-text-letterSpacing-200: .24px;
--brand-text-letterSpacing-100: .21px;
--brand-text-size-1000: 2.5rem;
--brand-text-size-900: 2.25rem;
--brand-text-size-800: 2rem;
--brand-text-size-700: 1.75rem;
--brand-text-size-600: 1.5rem;
--brand-text-size-500: 1.375rem;
--brand-text-size-400: 1.25rem;
--brand-text-size-350: 1.125rem;
--brand-text-size-300: 1.125rem;
--brand-text-size-200: 1rem;
--brand-text-size-100: .875rem;
--brand-text-subhead-letterSpacing-large: .1px;
--brand-text-subhead-letterSpacing-medium: .24px;
--brand-text-subhead-size-large: 1.125rem;
--brand-text-subhead-size-medium: 1rem;
--brand-heading-letterSpacing-1000: 0;
--brand-heading-letterSpacing-900: 0;
--brand-heading-letterSpacing-800: 0;
--brand-heading-letterSpacing-700: 0;
--brand-heading-letterSpacing-600: 0;
--brand-heading-letterSpacing-500: 0;
--brand-heading-letterSpacing-400: 0;
--brand-fontStack-monospace: "Mona Sans Mono", monospace;
--brand-Grid-spacing-margin: var(--base-size-16);
--brand-Grid-spacing-column-gap: var(--base-size-16);
--brand-Grid-spacing-row: var(--base-size-16);
--brand-control-large-size: 3.75rem;
--brand-control-medium-size: 2.6875rem;
--brand-controlStack-large-gap-spacious: var(--base-size-12);
--brand-controlStack-large-gap-condensed: var(--base-size-8);
--brand-controlStack-large-gap-auto: var(--base-size-8);
--brand-controlStack-medium-gap-spacious: var(--base-size-12);
--brand-controlStack-medium-gap-condensed: var(--base-size-8);
--brand-controlStack-small-gap-spacious: var(--base-size-16);
--brand-controlStack-small-gap-condensed: var(--base-size-8);
--brand-stack-gap-spacious: var(--base-size-48);
--brand-stack-gap-normal: var(--base-size-24);
--brand-stack-gap-condensed: var(--base-size-16);
--brand-stack-padding-spacious: var(--base-size-48);
--brand-stack-padding-normal: var(--base-size-24);
--brand-stack-padding-condensed: var(--base-size-16);
--brand-box-spacing-spacious: var(--base-size-48);
--brand-box-spacing-normal: var(--base-size-24);
--brand-box-spacing-condensed: var(--base-size-16);
--brand-control-large-gap: var(--base-size-16);
--brand-control-large-paddingInline-spacious: var(--base-size-32);
--brand-control-large-paddingInline-normal: var(--base-size-20);
--brand-control-large-paddingInline-condensed: var(--base-size-16);
--brand-control-large-paddingBlock-normal: var(--base-size-20);
--brand-control-large-paddingBlock-condensed: var(--base-size-12);
--brand-control-medium-gap: var(--base-size-12);
--brand-control-medium-paddingInline-spacious: var(--base-size-28);
--brand-control-medium-paddingInline-normal: var(--base-size-16);
--brand-control-medium-paddingInline-condensed: var(--base-size-12);
--brand-control-medium-paddingBlock-normal: var(--base-size-16);
--brand-control-medium-paddingBlock-condensed: var(--base-size-6);
--brand-control-small-gap: var(--base-size-8);
--brand-control-small-paddingInline-spacious: var(--base-size-24);
--brand-control-small-paddingInline-normal: var(--base-size-12);
--brand-control-small-paddingInline-condensed: var(--base-size-8);
--brand-control-small-paddingBlock: var(--base-size-8);
--brand-control-small-size: var(--base-size-32);
--brand-Hero-regular-padding: var(--base-size-128) 0;
--brand-Hero-narrow-padding: var(--base-size-96) 0;
--brand-RiverBreakout-variant-gridline-spacing-contentGap: var(--base-size-16);
--brand-RiverBreakout-variant-gridline-spacing-outerInline: var(--base-size-20);
--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd: var(--base-size-40);
--brand-RiverBreakout-variant-gridline-spacing-outerBlock: var(--base-size-36);
--brand-RiverBreakout-spacing-inner: var(--base-size-40);
--brand-RiverAccordion-variant-gridline-spacing-contentGap: var(--base-size-32);
--brand-RiverAccordion-variant-gridline-spacing-outerInline: var(--base-size-20);
--brand-RiverAccordion-variant-gridline-spacing-outerBlock: var(--base-size-40);
--brand-River-variant-gridline-spacing-outerInline: var(--base-size-20);
--brand-River-variant-gridline-spacing-outerBlock: var(--base-size-40);
--brand-River-spacing-outerBlock: var(--base-size-36);
--brand-River-spacing-innerY: var(--base-size-24);
--brand-River-spacing-inner: var(--base-size-40);
--brand-River-label-margin: var(--base-size-16);
--brand-River-heading-margin: var(--base-size-16);
--brand-FAQ-heading-marginBottom: var(--base-size-40);
--brand-Testimonial-quote-letterSpacing-large: var(--brand-text-letterSpacing-900);
--brand-Testimonial-quote-letterSpacing-default: var(--brand-text-letterSpacing-400);
--brand-Testimonial-quote-fontSize-large: var(--brand-text-size-500);
--brand-Testimonial-quote-fontSize-default: var(--brand-text-size-400);
--brand-ComparisonTable-heading-marginBottom: var(--base-size-8);
--brand-Prose-blockquote-spacing: var(--base-size-24);
--brand-Prose-img-spacing: var(--base-size-48);
--brand-VideoPlayer-tooltip-padding-inline: .3125rem;
--brand-VideoPlayer-tooltip-padding-block: .3125rem;
--brand-VideoPlayer-closedCaption-text-padding: .625rem;
--brand-VideoPlayer-closedCaption-margin: 0 auto 15px auto;
--brand-LogoSuite-logobar-marquee-gap-condensed: var(--base-size-40);
--brand-LogoSuite-logobar-marquee-gap-default: var(--base-size-96);
--brand-LogoSuite-logobar-rowGap: var(--base-size-40);
--brand-LogoSuite-logobar-columnGap-condensed: var(--base-size-40);
--brand-LogoSuite-logobar-columnGap-default: var(--base-size-80);
--brand-Timeline-bullet-spacing: .125rem;
--brand-Timeline-bullet-size: var(--base-size-8);
--brand-Timeline-spacing: var(--base-size-16);
--brand-Bento-content-padding-spacious: 3.5rem;
--brand-Bento-content-padding-normal: var(--base-size-24);
--brand-Bento-content-padding-condensed: var(--base-size-16);
--brand-Bento-gap-small: var(--base-size-20);
--brand-Bento-gap-medium: var(--base-size-32);
--brand-Bento-gap-large: var(--base-size-32);
--brand-EyebrowBanner-subHeading-size: var(--brand-text-size-100);
--brand-EyebrowBanner-heading-size: var(--brand-text-size-100);
--brand-EyebrowBanner-label-size: var(--brand-text-size-100);
--brand-EyebrowBanner-spacing-inner-inline: var(--base-size-16);
--brand-EyebrowBanner-spacing-inner-block: .875rem;
--brand-PricingOptions-items4-container-padding-inline: var(--base-size-24);
--brand-PricingOptions-items4-gap: var(--base-size-48);
--brand-PricingOptions-items3-container-padding-inline: var(--base-size-24);
--brand-PricingOptions-items3-gap: var(--base-size-64);
--brand-PricingOptions-items2-container-padding-inline: var(--base-size-48);
--brand-PricingOptions-items2-gap: var(--base-size-96);
--brand-PricingOptions-items1-container-paddingInline: var(--base-size-32);
--brand-PricingOptions-items-gap: var(--base-size-24);
--brand-Section-padding-spacious: var(--base-size-64);
--brand-Section-padding-normal: var(--base-size-48);
--brand-Section-padding-condensed: var(--base-size-16);
--brand-Statistic-spacing-spacious: 2rem;
--brand-Statistic-spacing-normal: 1.5rem;
--brand-Statistic-spacing-condensed: 1rem;
--brand-Tabs-container-padding: var(--base-size-4);
```

### Typography

```css
--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-light: 300;
--base-text-weight-medium: 500;
--base-text-weight-normal: 400;
--base-text-weight-semibold: 600;
--fontStack-sansSerif: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--fontStack-sansSerifDisplay: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--fontStack-system: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--text-body-lineHeight-large: var(--base-text-lineHeight-normal);
--text-body-lineHeight-medium: var(--base-text-lineHeight-normal);
--text-body-lineHeight-small: var(--base-text-lineHeight-relaxed);
--text-body-weight: var(--base-text-weight-normal);
--text-caption-lineHeight: var(--base-text-lineHeight-tight);
--text-caption-weight: var(--base-text-weight-normal);
--text-codeBlock-lineHeight: var(--base-text-lineHeight-normal);
--text-codeBlock-weight: var(--base-text-weight-normal);
--text-codeInline-weight: var(--base-text-weight-normal);
--text-display-lineHeight: var(--base-text-lineHeight-snug);
--text-display-weight: var(--base-text-weight-medium);
--text-subtitle-lineHeight: var(--base-text-lineHeight-relaxed);
--text-subtitle-weight: var(--base-text-weight-normal);
--text-title-lineHeight-large: var(--base-text-lineHeight-normal);
--text-title-lineHeight-medium: var(--base-text-lineHeight-relaxed);
--text-title-lineHeight-small: var(--base-text-lineHeight-normal);
--text-title-weight-large: var(--base-text-weight-semibold);
--text-title-weight-medium: var(--base-text-weight-semibold);
--text-title-weight-small: var(--base-text-weight-semibold);
--text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
--text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
--text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
--text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
--text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
--text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
--text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
--text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
--text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
--text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
--text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
--base-text-weight-heavy: 900;
--base-text-weight-extrabold: 800;
--base-text-weight-bold: 700;
--base-text-weight-regular: 400;
--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.149;
--brand-text-lineHeight-900: 1.2;
--brand-text-lineHeight-800: 1.2;
--brand-text-lineHeight-700: 1.2;
--brand-text-lineHeight-600: 1.3;
--brand-text-lineHeight-500: 1.3;
--brand-text-lineHeight-400: 1.4;
--brand-text-lineHeight-350: 1.5;
--brand-text-lineHeight-300: 1.5;
--brand-text-lineHeight-200: 1.5;
--brand-text-lineHeight-100: 1.5;
--brand-text-weight-heavy: 550;
--brand-text-weight-extrabold: 543;
--brand-text-weight-bold: 537;
--brand-text-weight-semibold: 525;
--brand-text-weight-medium: 500;
--brand-text-weight-normal: 400;
--brand-text-weight-regular: 400;
--brand-text-weight-light: 400;
--brand-text-weight-extralight: 400;
--brand-text-weight-1000: var(--base-text-weight-normal);
--brand-text-weight-900: var(--base-text-weight-normal);
--brand-text-weight-800: var(--base-text-weight-normal);
--brand-text-weight-700: var(--base-text-weight-normal);
--brand-text-weight-600: var(--base-text-weight-normal);
--brand-text-weight-500: var(--base-text-weight-normal);
--brand-text-weight-400: var(--base-text-weight-normal);
--brand-text-weight-350: var(--base-text-weight-normal);
--brand-text-weight-300: var(--base-text-weight-normal);
--brand-text-weight-200: var(--base-text-weight-normal);
--brand-text-weight-100: var(--base-text-weight-normal);
--brand-text-subhead-lineHeight-large: 1.3;
--brand-text-subhead-lineHeight-medium: 1.3;
--brand-text-subhead-weight-large: 475;
--brand-text-subhead-weight-medium: 550;
--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-heading-fontFamily: var(--brand-fontStack-sansSerif);
--brand-body-fontFamilyAlt: var(--brand-fontStack-sansSerifAlt);
--brand-body-fontFamily: var(--brand-fontStack-sansSerif);
--brand-Testimonial-quote-fontWeight-large: var(--brand-heading-weight-600);
--brand-Testimonial-quote-fontWeight-default: var(--brand-heading-weight-1000);
```

### Shadows

```css
--boxShadow-thick: inset 0 0 0 var(--borderWidth-thick);
--boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
--boxShadow-thin: inset 0 0 0 var(--borderWidth-thin);
--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;
--sub-nav-mktg-shadow: 0 0 0 1px #35485b24, 0 3px 2px #0000000a, 0 7px 7px #00000008;
--button-danger-shadow-selected: 0 0 0 0 #0000;
--button-outline-shadow-selected: 0 0 0 0 #0000;
--brand-SubNav-shadow: 0px 100px 80px #00000003, 0px 41px 33px #00000005, 0px 22px 17px #00000005, 0px 12px 10px #00000008, 0px 6px 5px #0000000a, 0px 2px 2px #00000012;
--shadow-floating-small: 0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966;
--shadow-inset: inset 0 1px 0 0 #0104093d;
--avatar-shadow: 0 0 0 2px #0d1117;
--brand-FrostedGlassVFX-boxShadow: 0 4px 10px 0 #00000005;
--shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409;
--shadow-floating-medium: 0 0 0 1px #3d444d, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966;
--shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999;
--shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc;
--shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409;
--shadow-resting-xsmall: 0 1px 1px 0 #010409cc;
--button-default-shadow-resting: 0 0 0 0 #0000;
```

### Other

```css
--base-duration-0: 0s;
--base-duration-100: .1s;
--base-duration-1000: 1s;
--base-duration-200: .2s;
--base-duration-300: .3s;
--base-duration-400: .4s;
--base-duration-50: 50ms;
--base-duration-500: .5s;
--base-duration-600: .6s;
--base-duration-700: .7s;
--base-duration-800: .8s;
--base-duration-900: .9s;
--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-zIndex-0: 0;
--base-zIndex-100: 100;
--base-zIndex-200: 200;
--base-zIndex-300: 300;
--base-zIndex-400: 400;
--base-zIndex-500: 500;
--base-zIndex-600: 600;
--focus-outline-offset: -.125rem;
--focus-outline-width: .125rem;
--outline-focus-offset: var(--focus-outline-offset);
--outline-focus-width: var(--focus-outline-width);
--breakpoint-large: 63.25rem;
--breakpoint-medium: 48rem;
--breakpoint-small: 34rem;
--breakpoint-xlarge: 80rem;
--breakpoint-xsmall: 20rem;
--breakpoint-xxlarge: 87.5rem;
--overlay-height-large: 27rem;
--overlay-height-medium: 20rem;
--overlay-height-small: 16rem;
--overlay-height-xlarge: 37.5rem;
--overlay-offset: .25rem;
--overlay-width-large: 40rem;
--overlay-width-medium: 30rem;
--overlay-width-small: 20rem;
--overlay-width-xlarge: 60rem;
--overlay-width-xsmall: 12rem;
--spinner-strokeWidth-default: .125rem;
--control-minTarget-coarse: 2.75rem;
--control-minTarget-fine: 1rem;
--zIndex-behind: -1;
--zIndex-default: 0;
--zIndex-dropdown: 200;
--zIndex-modal: 400;
--zIndex-overlay: 300;
--zIndex-skipLink: 600;
--zIndex-sticky: 100;
--Layout-pane-width: 220px;
--Layout-content-width: 100%;
--Layout-template-columns: 1fr var(--Layout-pane-width);
--Layout-template-areas: "content pane";
--duration-fast: 80ms;
--easing-easeInOut: cubic-bezier(.65,0,.35,1);
--brand-heading-lineHeight-1000: 1.1;
--brand-heading-lineHeight-900: 1.1;
--brand-heading-lineHeight-800: 1.2;
--brand-heading-lineHeight-700: 1.2;
--brand-heading-lineHeight-600: 1.3;
--brand-heading-lineHeight-500: 1.3;
--brand-heading-lineHeight-400: 1.3;
--brand-heading-weight-1000: 440;
--brand-heading-weight-900: 440;
--brand-heading-weight-800: 465;
--brand-heading-weight-700: 460;
--brand-heading-weight-600: 460;
--brand-heading-weight-500: 480;
--brand-heading-weight-400: 480;
--brand-breakpoint-xxlarge: 87.5rem;
--brand-breakpoint-xlarge: 80rem;
--brand-breakpoint-large: 63.25rem;
--brand-breakpoint-medium: 48rem;
--brand-breakpoint-small: 34rem;
--brand-breakpoint-xsmall: 20rem;
--brand-animation-variant-scaleInLeft-end: 1;
--brand-animation-variant-scaleInLeft-start: .9;
--brand-animation-variant-scaleInLeft-distance: 1.25rem;
--brand-animation-variant-scaleInRight-end: 1;
--brand-animation-variant-scaleInRight-start: .9;
--brand-animation-variant-scaleInRight-distance: -1.25rem;
--brand-animation-variant-scaleInTop-distance: ;
--brand-animation-variant-scaleIn-end: 1;
--brand-animation-variant-scaleIn-start: .96;
--brand-animation-variant-scaleInDown-end: 1;
--brand-animation-variant-scaleInDown-start: 0;
--brand-animation-variant-scaleInDown-distance: -3.125rem;
--brand-animation-variant-scaleInUp-end: 1;
--brand-animation-variant-scaleInUp-start: .96;
--brand-animation-variant-scaleInUp-distance: 1.5rem;
--brand-animation-variant-slideInRight-distance: -.9375rem;
--brand-animation-variant-slideInLeft-distance: .9375rem;
--brand-animation-variant-slideInDown-distance: -.9375rem;
--brand-animation-variant-slideInUp-distance: .9375rem;
--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-animation-duration-extended: .7s;
--brand-animation-duration-default: .6s;
--brand-animation-duration-fast: .3s;
--brand-animation-duration-faster: .2s;
--brand-control-animation-easing: var(--brand-animation-easing-glide);
--brand-control-animation-duration: 80ms;
--brand-control-large-lineBoxHeight: var(--base-size-20);
--brand-control-medium-lineBoxHeight: var(--base-size-16);
--brand-control-small-lineBoxHeight: var(--base-size-12);
--brand-control-minTarget-coarse: var(--base-size-44);
--brand-control-minTarget-fine: var(--base-size-16);
--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-InlineLink-transition-timing: var(--brand-animation-duration-fast);
--brand-FAQ-maxWidth-list: 51rem;
--brand-Prose-lineLength: 68ch;
--brand-VideoPlayer-transition: all var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
--brand-VideoPlayer-range-minWidth: 4.6875rem;
--brand-VideoPlayer-range-height: .375rem;
--brand-VideoPlayer-playButton-width: var(--base-size-96);
--brand-VideoPlayer-playButton-height: var(--base-size-96);
--brand-LogoSuite-logobar-marquee-slow: 60s;
--brand-LogoSuite-logobar-marquee-default: 30s;
--brand-Timeline-strokeWidth: .125rem;
--brand-Timeline-lineLength: 44ch;
--brand-Timeline-lineHeight: var(--brand-text-lineHeight-200);
--brand-SubNav-width-subMenu: 18.75rem;
--brand-IDE-height: 50rem;
--brand-Section-container-maxWidth: 80rem;
--brand-FrostedGlassVFX-blurIntensity-high: var(--base-size-80);
--brand-FrostedGlassVFX-blurIntensity-medium: var(--base-size-48);
--brand-FrostedGlassVFX-blurIntensity-low: var(--base-size-12);
--display-pink-scale-5: #d34591;
--brand-control-radio-dot-checked-hover: #309a4d;
--display-teal-scale-0: #041f25;
--brand-Testimonial-quoteMarkBackground-teal: #024b4d;
--display-auburn-scale-1: #3a2422;
--display-blue-scale-7: #61adff;
--brand-control-checkbox-fg-checked-disabled: color-mix(in srgb, #08872b, #000 20%);
--brand-IDE-playPauseControl-rest: #4d4e6a;
--display-yellow-scale-9: #f0ca6a;
--brand-Tabs-item-underline-rest: #fff;
--display-orange-scale-3: #7b3c0e;
--brand-Eyebrowbanner-icon-background-teal: #024b4d;
--display-red-scale-1: #58091a;
--display-auburn-scale-8: #d4b7b5;
--display-red-scale-4: #c31328;
--display-green-scale-8: #75d36f;
--display-purple-scale-2: #481a9e;
--display-olive-scale-2: #374115;
--display-pine-scale-8: #1bda81;
--display-yellow-scale-5: #aa7109;
--brand-Testimonial-quoteMarkBackground-red: #5e0217;
--display-purple-scale-7: #c398fb;
--brand-control-checkbox-fg-checked: #fff;
--display-auburn-scale-6: #bf9592;
--display-pink-scale-1: #451c35;
--brand-Eyebrowbanner-icon-background-pink: #520e39;
--display-lemon-scale-2: #4f3c02;
--display-indigo-scale-4: #514ed4;
--display-purple-scale-9: #e1c7ff;
--brand-FAQGroup-buttonIndicator-active: #5fed83;
--display-pine-scale-7: #1ac176;
--display-yellow-scale-1: #3d2401;
--brand-footer-socialIcon-hoverFilter: brightness(2);
--lightningcss-dark: ;
--display-red-scale-0: #3c0614;
--brand-Testimonial-quoteMarkBackground-blue-purple: #052063;
--display-teal-scale-3: #0c555a;
--display-indigo-scale-3: #3935c0;
--brand-Testimonial-quoteMarkBackground-coral: #500a00;
--display-teal-scale-7: #1fbdb2;
--display-orange-scale-6: #ed8326;
--display-purple-scale-8: #d2affd;
--display-lime-scale-8: #9fcc3e;
--display-cyan-scale-4: #036a8c;
--display-cyan-scale-2: #014156;
--display-indigo-scale-2: #312c90;
--display-pine-scale-2: #0e4430;
--prc-dialog-scrollgutter: 0px;
--brand-IDE-playPauseControl-hover: #5a5b7c;
--display-lemon-scale-9: #e3d04f;
--display-olive-scale-0: #171e0b;
--display-coral-scale-7: #fa8c61;
--display-brown-scale-7: #bfa77d;
--display-auburn-scale-4: #87534f;
--brand-Testimonial-quoteMarkBackground-purple-red: #160048;
--display-plum-scale-5: #b643ef;
--brand-SubdomainNavBar-canvas-overflow-hover: #d2d9d4;
--display-gray-scale-8: #b3c0d1;
--display-coral-scale-5: #e1430e;
--display-green-scale-6: #41b445;
--brand-Eyebrowbanner-icon-background-lime: #142a08;
--display-plum-scale-4: #9518d8;
--display-lemon-scale-3: #614c05;
--display-green-scale-0: #122117;
--display-coral-scale-0: #351008;
--display-coral-scale-4: #b3350f;
--display-teal-scale-9: #5fe3d1;
--display-cyan-scale-3: #02536f;
--display-pink-scale-4: #ac2f74;
--brand-Testimonial-quoteMarkBackground-indigo: #161962;
--display-purple-scale-6: #b687f7;
--display-teal-scale-2: #0a464d;
--brand-Testimonial-quoteMarkBackground-red-orange: #5e0217;
--brand-Eyebrowbanner-icon-background-indigo: #161962;
--display-olive-scale-8: #cbc025;
--display-olive-scale-6: #a2a626;
--display-pink-scale-9: #f9bed9;
--display-cyan-scale-6: #07ace4;
--display-orange-scale-2: #632f0d;
--brand-Eyebrowbanner-icon-background-gray: #262c28;
--display-brown-scale-8: #cdbb98;
--display-gray-scale-9: #c4cfde;
--display-teal-scale-6: #1cb0ab;
--display-brown-scale-1: #342a1d;
--display-orange-scale-7: #f1933b;
--display-yellow-scale-6: #d3910d;
--display-pink-scale-6: #e57bb2;
--display-pine-scale-3: #115a3e;
--display-brown-scale-4: #755e3e;
--brand-Accordion-indicator-hover: #353d37;
--display-indigo-scale-0: #1b183f;
--display-orange-scale-8: #f6b06a;
--display-gray-scale-7: #9babbf;
--display-indigo-scale-9: #c8cbf9;
--brand-Testimonial-quoteMarkBackground-green: #0d3024;
--display-olive-scale-1: #252d10;
--control-minTarget-auto: 1rem;
--display-brown-scale-6: #b69a6d;
--display-blue-scale-0: #001a47;
--display-green-scale-4: #2f6f37;
--dialog-scrollgutter: 0px;
--brand-Testimonial-quoteMarkBackground-yellow: #471f00;
--display-cyan-scale-1: #002e3d;
--display-red-scale-5: #eb3342;
--display-plum-scale-0: #2a0e3f;
--display-auburn-scale-3: #6d4340;
--display-yellow-scale-7: #df9e11;
--display-brown-scale-2: #483a28;
--display-indigo-scale-1: #25215f;
--brand-Accordion-indicator-idle: #191f1b;
--display-green-scale-2: #214529;
--display-plum-scale-6: #d07ef7;
--display-brown-scale-5: #94774c;
--display-purple-scale-3: #5b1cca;
--brand-FAQGroup-buttonIndicator-idle: #191f1b;
--display-red-scale-6: #f27d83;
--display-pink-scale-8: #f4a9cd;
--brand-Eyebrowbanner-icon-background-lemon: #423101;
--display-auburn-scale-7: #c6a19f;
--display-lime-scale-6: #7dae37;
--display-olive-scale-3: #485219;
--brand-control-radio-dot-checked: #08872b;
--brand-Eyebrowbanner-icon-background-orange: #572400;
--display-orange-scale-5: #c46212;
--display-lime-scale-7: #89ba36;
--display-blue-scale-6: #4da0ff;
--brand-Testimonial-quoteMarkBackground-lime: #142a08;
--brand-Eyebrowbanner-icon-background-default: #262c28;
--display-lemon-scale-5: #977b0c;
--display-teal-scale-4: #106c70;
--display-lime-scale-4: #496c28;
--display-coral-scale-1: #51180b;
--display-yellow-scale-3: #6d4403;
--display-pine-scale-1: #0b3224;
--brand-Testimonial-quoteMarkBackground-gray: #262c28;
--display-gray-scale-5: #6e7f96;
--display-coral-scale-2: #72220d;
--display-plum-scale-8: #e4a5fd;
--display-plum-scale-1: #40125e;
--display-indigo-scale-8: #b7baf6;
--display-lime-scale-2: #2c441d;
--brand-FAQGroup-buttonIndicator-hover: #353d37;
--brand-Accordion-indicator-active: #5fed83;
--display-orange-scale-9: #fac68f;
--brand-Testimonial-quoteMarkBackground-orange: #572400;
--display-lime-scale-3: #375421;
--display-plum-scale-2: #5c1688;
--display-cyan-scale-0: #001f29;
--display-lemon-scale-0: #291d00;
--display-plum-scale-3: #7517ab;
--display-coral-scale-6: #f7794b;
--brand-Eyebrowbanner-icon-background-purple: #160048;
--display-green-scale-3: #285830;
--display-cyan-scale-7: #09b7f1;
--display-orange-scale-1: #43200a;
--display-auburn-scale-5: #a86f6b;
--display-lemon-scale-7: #c4a717;
--brand-Eyebrowbanner-icon-background-yellow: #471f00;
--display-pink-scale-7: #ec8dbd;
--display-gray-scale-3: #474e57;
--display-plum-scale-7: #d889fa;
--display-indigo-scale-7: #a2a5f1;
--display-olive-scale-4: #5e681d;
--display-indigo-scale-5: #7070e1;
--display-blue-scale-2: #00378a;
--display-gray-scale-0: #1c1c1c;
--brand-SubdomainNavBar-canvas-search: #000;
--display-coral-scale-9: #ffc0a3;
--brand-control-radio-dot-default: #fff;
--display-red-scale-8: #f7adab;
--display-cyan-scale-8: #45cbf7;
--display-cyan-scale-5: #0587b3;
--brand-Eyebrowbanner-icon-background-blue: #052063;
--display-indigo-scale-6: #9899ec;
--brand-Testimonial-quoteMarkBackground-pink-blue: #520e39;
--display-green-scale-9: #99e090;
--display-lemon-scale-6: #ba9b12;
--display-orange-scale-4: #984b10;
--brand-SubdomainNavBar-canvas-overflow-default: #fff;
--display-pine-scale-4: #14714c;
--display-auburn-scale-9: #dfcac8;
--display-yellow-scale-8: #edb431;
--display-pink-scale-0: #2d1524;
--display-orange-scale-0: #311708;
--brand-Testimonial-quoteMarkBackground-purple: #160048;
--display-yellow-scale-0: #2e1a00;
--display-lime-scale-9: #bcda67;
--display-olive-scale-7: #b2af24;
--display-pine-scale-9: #3eea97;
--lightningcss-light: ;
--display-plum-scale-9: #edbdff;
--display-coral-scale-3: #902a0e;
--display-purple-scale-1: #31146b;
--display-teal-scale-8: #24d6c4;
--brand-Prose-unorderedList-imageUrl: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 aria-hidden=%27true%27 focusable=%27false%27 role=%27img%27 viewBox=%270 -3 16 16%27 width=%2716%27 height=%2716%27 fill=%27white%27 style=%27display: inline-block; vertical-align: text-bottom; overflow: visible;%27%3e%3cpath d=%27M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z%27%3e%3c/path%3e%3c/svg%3e");
--display-brown-scale-0: #241c14;
--brand-Testimonial-quoteMarkBackground-blue: #052063;
--display-green-scale-7: #46c144;
--display-auburn-scale-2: #543331;
--display-yellow-scale-2: #5a3702;
--display-blue-scale-5: #0576ff;
--display-red-scale-2: #790c20;
--display-auburn-scale-0: #271817;
--display-red-scale-7: #f48b8d;
--brand-SubdomainNavBar-fg-overflow-default: #000;
--display-coral-scale-8: #fdaa86;
--display-purple-scale-0: #211047;
--display-blue-scale-9: #a3d3ff;
--display-lime-scale-5: #5f892f;
--display-pink-scale-2: #65244a;
--brand-SubdomainNavBar-canvas-default: #0d111780;
--display-lemon-scale-1: #372901;
--brand-AnchorNav-link-underline-default: #7c8980;
--display-gray-scale-4: #576270;
--display-pine-scale-0: #082119;
--display-lime-scale-0: #141f0f;
--display-pine-scale-6: #1bb673;
--display-red-scale-3: #990f24;
--brand-Eyebrowbanner-icon-background-coral: #500a00;
--display-lime-scale-1: #1f3116;
--display-brown-scale-9: #dbceb3;
--display-brown-scale-3: #5d4a32;
--display-blue-scale-8: #85c2ff;
--display-olive-scale-9: #e2d04b;
--brand-Eyebrowbanner-icon-background-red: #5e0217;
--display-teal-scale-5: #158a8a;
--focus-outline: .125rem solid #1f6feb;
--display-blue-scale-1: #002766;
--display-gray-scale-1: #2a2b2d;
--display-green-scale-1: #182f1f;
--display-yellow-scale-4: #895906;
--display-purple-scale-5: #975bf1;
--display-blue-scale-3: #0046a8;
--brand-Eyebrowbanner-icon-background-green: #0d3024;
--display-olive-scale-5: #7a8321;
--brand-Testimonial-quoteMarkBackground-green-blue: #0d3024;
--display-gray-scale-2: #393d41;
--display-pink-scale-3: #842a5d;
--display-teal-scale-1: #073036;
--brand-Testimonial-quoteMarkBackground-default: #262c28;
--display-lemon-scale-8: #d7bc1d;
--display-pine-scale-5: #18915e;
--display-cyan-scale-9: #80dbf9;
--display-green-scale-5: #388f3f;
--display-lemon-scale-4: #786008;
--display-red-scale-9: #f9c1be;
--brand-AnchorNav-link-underline-pressed: #fff;
--brand-Testimonial-quoteMarkBackground-lemon: #423101;
--display-purple-scale-4: #7730e8;
--brand-Testimonial-quoteMarkBackground-pink: #520e39;
--display-gray-scale-6: #92a1b5;
--display-blue-scale-4: #005bd1;
```

### Dependencies

```css
--borderWidth-default: --borderWidth-thin;
--boxShadow-thick: --borderWidth-thick;
--boxShadow-thicker: --borderWidth-thicker;
--boxShadow-thin: --borderWidth-thin;
--outline-focus-offset: --focus-outline-offset;
--outline-focus-width: --focus-outline-width;
--borderRadius-default: --borderRadius-medium;
--text-body-lineHeight-large: --base-text-lineHeight-normal;
--text-body-lineHeight-medium: --base-text-lineHeight-normal;
--text-body-lineHeight-small: --base-text-lineHeight-relaxed;
--text-body-size-large: --base-text-size-md;
--text-body-size-medium: --base-text-size-sm;
--text-body-size-small: --base-text-size-xs;
--text-body-weight: --base-text-weight-normal;
--text-caption-lineHeight: --base-text-lineHeight-tight;
--text-caption-size: --base-text-size-xs;
--text-caption-weight: --base-text-weight-normal;
--text-codeBlock-lineHeight: --base-text-lineHeight-normal;
--text-codeBlock-weight: --base-text-weight-normal;
--text-codeInline-weight: --base-text-weight-normal;
--text-display-lineHeight: --base-text-lineHeight-snug;
--text-display-size: --base-text-size-2xl;
--text-display-weight: --base-text-weight-medium;
--text-subtitle-lineHeight: --base-text-lineHeight-relaxed;
--text-subtitle-size: --base-text-size-lg;
--text-subtitle-weight: --base-text-weight-normal;
--text-title-lineHeight-large: --base-text-lineHeight-normal;
--text-title-lineHeight-medium: --base-text-lineHeight-relaxed;
--text-title-lineHeight-small: --base-text-lineHeight-normal;
--text-title-size-large: --base-text-size-xl;
--text-title-size-medium: --base-text-size-lg;
--text-title-size-small: --base-text-size-md;
--text-title-weight-large: --base-text-weight-semibold;
--text-title-weight-medium: --base-text-weight-semibold;
--text-title-weight-small: --base-text-weight-semibold;
--text-body-shorthand-large: --text-body-weight,--text-body-size-large,--text-body-lineHeight-large,--fontStack-sansSerif;
--text-body-shorthand-medium: --text-body-weight,--text-body-size-medium,--text-body-lineHeight-medium,--fontStack-sansSerif;
--text-body-shorthand-small: --text-body-weight,--text-body-size-small,--text-body-lineHeight-small,--fontStack-sansSerif;
--text-caption-shorthand: --text-caption-weight,--text-caption-size,--text-caption-lineHeight,--fontStack-sansSerif;
--text-codeBlock-shorthand: --text-codeBlock-weight,--text-codeBlock-size,--text-codeBlock-lineHeight,--fontStack-monospace;
--text-codeInline-shorthand: --text-codeInline-weight,--text-codeInline-size,--fontStack-monospace;
--text-display-shorthand: --text-display-weight,--text-display-size,--text-display-lineHeight,--fontStack-sansSerifDisplay;
--text-subtitle-shorthand: --text-subtitle-weight,--text-subtitle-size,--text-subtitle-lineHeight,--fontStack-sansSerifDisplay;
--text-title-shorthand-large: --text-title-weight-large,--text-title-size-large,--text-title-lineHeight-large,--fontStack-sansSerifDisplay;
--text-title-shorthand-medium: --text-title-weight-medium,--text-title-size-medium,--text-title-lineHeight-medium,--fontStack-sansSerifDisplay;
--text-title-shorthand-small: --text-title-weight-small,--text-title-size-small,--text-title-lineHeight-small,--fontStack-sansSerif;
--Layout-template-columns: --Layout-pane-width;
--Layout-column-gap: --base-size-16;
--Layout-row-gap: --base-size-16;
--actionListContent-paddingBlock: --control-medium-paddingBlock;
--brand-text-weight-1000: --base-text-weight-normal;
--brand-text-weight-900: --base-text-weight-normal;
--brand-text-weight-800: --base-text-weight-normal;
--brand-text-weight-700: --base-text-weight-normal;
--brand-text-weight-600: --base-text-weight-normal;
--brand-text-weight-500: --base-text-weight-normal;
--brand-text-weight-400: --base-text-weight-normal;
--brand-text-weight-350: --base-text-weight-normal;
--brand-text-weight-300: --base-text-weight-normal;
--brand-text-weight-200: --base-text-weight-normal;
--brand-text-weight-100: --base-text-weight-normal;
--brand-heading-fontFamilyAlt: --brand-fontStack-sansSerifAlt;
--brand-heading-fontFamily: --brand-fontStack-sansSerif;
--brand-body-fontFamilyAlt: --brand-fontStack-sansSerifAlt;
--brand-body-fontFamily: --brand-fontStack-sansSerif;
--brand-borderRadius-xlarge: --base-size-24;
--brand-borderRadius-large: --base-size-16;
--brand-borderRadius-medium: --base-size-8;
--brand-borderRadius-small: --base-size-4;
--brand-borderInset-thicker: --brand-borderWidth-thicker;
--brand-borderInset-thick: --brand-borderWidth-thick;
--brand-borderInset-thin: --brand-borderWidth-thin;
--brand-Grid-spacing-margin: --base-size-16;
--brand-Grid-spacing-column-gap: --base-size-16;
--brand-Grid-spacing-row: --base-size-16;
--brand-animation-transition-default: --brand-animation-duration-default,--brand-animation-easing-default,--brand-animation-duration-default,--brand-animation-easing-default;
--brand-control-animation-easing: --brand-animation-easing-glide;
--brand-controlStack-large-gap-spacious: --base-size-12;
--brand-controlStack-large-gap-condensed: --base-size-8;
--brand-controlStack-large-gap-auto: --base-size-8;
--brand-controlStack-medium-gap-spacious: --base-size-12;
--brand-controlStack-medium-gap-condensed: --base-size-8;
--brand-controlStack-small-gap-spacious: --base-size-16;
--brand-controlStack-small-gap-condensed: --base-size-8;
--brand-stack-gap-spacious: --base-size-48;
--brand-stack-gap-normal: --base-size-24;
--brand-stack-gap-condensed: --base-size-16;
--brand-stack-padding-spacious: --base-size-48;
--brand-stack-padding-normal: --base-size-24;
--brand-stack-padding-condensed: --base-size-16;
--brand-box-spacing-spacious: --base-size-48;
--brand-box-spacing-normal: --base-size-24;
--brand-box-spacing-condensed: --base-size-16;
--brand-control-large-gap: --base-size-16;
--brand-control-large-paddingInline-spacious: --base-size-32;
--brand-control-large-paddingInline-normal: --base-size-20;
--brand-control-large-paddingInline-condensed: --base-size-16;
--brand-control-large-paddingBlock-normal: --base-size-20;
--brand-control-large-paddingBlock-condensed: --base-size-12;
--brand-control-large-lineBoxHeight: --base-size-20;
--brand-control-medium-gap: --base-size-12;
--brand-control-medium-paddingInline-spacious: --base-size-28;
--brand-control-medium-paddingInline-normal: --base-size-16;
--brand-control-medium-paddingInline-condensed: --base-size-12;
--brand-control-medium-paddingBlock-normal: --base-size-16;
--brand-control-medium-paddingBlock-condensed: --base-size-6;
--brand-control-medium-lineBoxHeight: --base-size-16;
--brand-control-small-gap: --base-size-8;
--brand-control-small-paddingInline-spacious: --base-size-24;
--brand-control-small-paddingInline-normal: --base-size-12;
--brand-control-small-paddingInline-condensed: --base-size-8;
--brand-control-small-paddingBlock: --base-size-8;
--brand-control-small-lineBoxHeight: --base-size-12;
--brand-control-small-size: --base-size-32;
--brand-control-minTarget-coarse: --base-size-44;
--brand-control-minTarget-fine: --base-size-16;
--brand-Hero-regular-padding: --base-size-128;
--brand-Hero-narrow-padding: --base-size-96;
--brand-RiverBreakout-variant-gridline-spacing-contentGap: --base-size-16;
--brand-RiverBreakout-variant-gridline-spacing-outerInline: --base-size-20;
--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd: --base-size-40;
--brand-RiverBreakout-variant-gridline-spacing-outerBlock: --base-size-36;
--brand-RiverBreakout-spacing-inner: --base-size-40;
--brand-RiverAccordion-variant-gridline-spacing-contentGap: --base-size-32;
--brand-RiverAccordion-variant-gridline-spacing-outerInline: --base-size-20;
--brand-RiverAccordion-variant-gridline-spacing-outerBlock: --base-size-40;
--brand-River-variant-gridline-spacing-outerInline: --base-size-20;
--brand-River-variant-gridline-spacing-outerBlock: --base-size-40;
--brand-River-spacing-outerBlock: --base-size-36;
--brand-River-spacing-innerY: --base-size-24;
--brand-River-spacing-inner: --base-size-40;
--brand-River-label-margin: --base-size-16;
--brand-River-heading-margin: --base-size-16;
--brand-Icon-color-yellow: --base-color-scale-yellow-5;
--brand-Icon-color-teal: --base-color-scale-teal-5;
--brand-Icon-color-red: --base-color-scale-red-5;
--brand-Icon-color-purple: --base-color-scale-purple-5;
--brand-Icon-color-pink: --base-color-scale-pink-5;
--brand-Icon-color-orange: --base-color-scale-orange-5;
--brand-Icon-color-lime: --base-color-scale-lime-5;
--brand-Icon-color-lemon: --base-color-scale-lemon-5;
--brand-Icon-color-indigo: --base-color-scale-indigo-5;
--brand-Icon-color-gray: --base-color-scale-gray-6;
--brand-Icon-color-green: --base-color-scale-green-6;
--brand-Icon-color-coral: --base-color-scale-coral-5;
--brand-Icon-color-blue: --base-color-scale-blue-5;
--brand-Icon-color-default: --brand-Icon-color-green;
--brand-Icon-background-yellow: --base-color-scale-yellow-0;
--brand-Icon-background-teal: --base-color-scale-teal-0;
--brand-Icon-background-red: --base-color-scale-red-0;
--brand-Icon-background-purple: --base-color-scale-purple-0;
--brand-Icon-background-pink: --base-color-scale-pink-0;
--brand-Icon-background-orange: --base-color-scale-orange-0;
--brand-Icon-background-lime: --base-color-scale-lime-0;
--brand-Icon-background-lemon: --base-color-scale-lemon-0;
--brand-Icon-background-indigo: --base-color-scale-indigo-0;
--brand-Icon-background-gray: --base-color-scale-gray-0;
--brand-Icon-background-green: --base-color-scale-green-0;
--brand-Icon-background-coral: --base-color-scale-coral-0;
--brand-Icon-background-blue: --base-color-scale-blue-0;
--brand-Icon-background-default: --brand-Icon-background-green;
--brand-InlineLink-transition-timing: --brand-animation-duration-fast;
--brand-FAQ-heading-marginBottom: --base-size-40;
--brand-Testimonial-quote-letterSpacing-large: --brand-text-letterSpacing-900;
--brand-Testimonial-quote-letterSpacing-default: --brand-text-letterSpacing-400;
--brand-Testimonial-quote-fontWeight-large: --brand-heading-weight-600;
--brand-Testimonial-quote-fontWeight-default: --brand-heading-weight-1000;
--brand-Testimonial-quote-fontSize-large: --brand-text-size-500;
--brand-Testimonial-quote-fontSize-default: --brand-text-size-400;
--brand-ComparisonTable-heading-marginBottom: --base-size-8;
--brand-Prose-blockquote-spacing: --base-size-24;
--brand-Prose-img-spacing: --base-size-48;
--brand-VideoPlayer-transition: --brand-animation-duration-fast,--brand-animation-easing-default;
--brand-VideoPlayer-playButton-width: --base-size-96;
--brand-VideoPlayer-playButton-height: --base-size-96;
--brand-VideoPlayer-closedCaption-text-fgColor: --base-color-scale-white-0;
--brand-LogoSuite-logobar-marquee-gap-condensed: --base-size-40;
--brand-LogoSuite-logobar-marquee-gap-default: --base-size-96;
--brand-LogoSuite-logobar-rowGap: --base-size-40;
--brand-LogoSuite-logobar-columnGap-condensed: --base-size-40;
--brand-LogoSuite-logobar-columnGap-default: --base-size-80;
--brand-Timeline-bullet-size: --base-size-8;
--brand-Timeline-spacing: --base-size-16;
--brand-Timeline-lineHeight: --brand-text-lineHeight-200;
--brand-Bento-content-padding-normal: --base-size-24;
--brand-Bento-content-padding-condensed: --base-size-16;
--brand-Bento-item-borderRadius-large: --brand-borderRadius-xlarge;
--brand-Bento-item-borderRadius-medium: --brand-borderRadius-xlarge;
--brand-Bento-item-borderRadius-small: --brand-borderRadius-large;
--brand-Bento-gap-small: --base-size-20;
--brand-Bento-gap-medium: --base-size-32;
--brand-Bento-gap-large: --base-size-32;
--brand-EyebrowBanner-subHeading-size: --brand-text-size-100;
--brand-EyebrowBanner-heading-size: --brand-text-size-100;
--brand-EyebrowBanner-label-size: --brand-text-size-100;
--brand-EyebrowBanner-spacing-inner-inline: --base-size-16;
--brand-EyebrowBanner-borderRadius: --base-size-16;
--brand-PricingOptions-items4-container-padding-inline: --base-size-24;
--brand-PricingOptions-items4-gap: --base-size-48;
--brand-PricingOptions-items3-container-padding-inline: --base-size-24;
--brand-PricingOptions-items3-gap: --base-size-64;
--brand-PricingOptions-items2-container-padding-inline: --base-size-48;
--brand-PricingOptions-items2-gap: --base-size-96;
--brand-PricingOptions-items1-container-paddingInline: --base-size-32;
--brand-PricingOptions-items-gap: --base-size-24;
--brand-Section-padding-spacious: --base-size-64;
--brand-Section-padding-normal: --base-size-48;
--brand-Section-padding-condensed: --base-size-16;
--brand-FrostedGlassVFX-blurIntensity-high: --base-size-80;
--brand-FrostedGlassVFX-blurIntensity-medium: --base-size-48;
--brand-FrostedGlassVFX-blurIntensity-low: --base-size-12;
--brand-Tabs-container-padding: --base-size-4;
```

### Semantic

```css
success: [object Object];
warning: [object Object];
error: [object Object];
info: [object Object];
```

## Breakpoints

| Name | Value | Type |
|------|-------|------|
| xs | 320px | max-width |
| xs | 340px | max-width |
| xs | 360px | max-width |
| xs | 380px | min-width |
| 400px | 400px | max-width |
| 408px | 408px | max-width |
| sm | 420px | min-width |
| sm | 460px | max-width |
| sm | 470px | max-width |
| sm | 479px | max-width |
| sm | 480px | max-width |
| sm | 542px | min-width |
| sm | 543px | max-width |
| sm | 544px | min-width |
| sm | 599px | max-width |
| sm | 600px | min-width |
| sm | 618px | min-width |
| sm | 640px | min-width |
| md | 767px | max-width |
| md | 768px | max-width |
| md | 800px | min-width |
| md | 803px | max-width |
| md | 804px | min-width |
| 840px | 840px | max-width |
| 850px | 850px | min-width |
| 875px | 875px | max-width |
| 876px | 876px | min-width |
| lg | 980px | max-width |
| lg | 1011px | min-width |
| lg | 1012px | min-width |
| lg | 1024px | min-width |
| lg | 1028px | min-width |
| lg | 1029px | min-width |
| 1150px | 1150px | min-width |
| 1200px | 1200px | min-width |
| xl | 1279px | max-width |
| xl | 1280px | min-width |
| xl | 1281px | min-width |
| xl | 1299px | max-width |
| xl | 1300px | min-width |
| xl | 1320px | max-width |
| 1400px | 1400px | min-width |
| 1464px | 1464px | min-width |
| 2xl | 1600px | min-width |
| 1728px | 1728px | min-width |

## Transitions & Animations

**Easing functions:** `[object Object]`, `[object Object]`, `[object Object]`, `[object Object]`, `[object Object]`, `[object Object]`, `[object Object]`, `[object Object]`, `[object Object]`, `[object Object]`, `[object Object]`

**Durations:** `0.4s`, `0.5s`, `0.08s`, `0.3s`, `0.2s`, `0.033333s`, `0.48s`, `0.6s`, `0.8s`, `0.1s`, `0.075s`, `0.15s`

### Common Transitions

```css
transition: all;
transition: opacity 0.4s linear 0.4s;
transition: width 0.4s;
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
transition: color 0.08s cubic-bezier(0.65, 0, 0.35, 1), fill 0.08s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.08s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1);
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
transition: transform 0.2s ease-in-out;
transition: color 0.08s cubic-bezier(0.33, 1, 0.68, 1), background-color 0.08s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.08s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.08s cubic-bezier(0.33, 1, 0.68, 1);
transition: background 0.033333s linear;
transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1), background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1), border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
```

### Keyframe Animations

**AppFrame-a11yLink-focus**
```css
@keyframes AppFrame-a11yLink-focus {
  0% { color: var(--fgColor-accent,var(--color-accent-emphasis)); transform: scale(0.3, 0.25); }
  50% { color: var(--fgColor-accent,var(--color-accent-emphasis)); transform: scale(1); }
  55% { color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis)); }
  100% { transform: scaleX(1); }
}
```

**tooltip-appear**
```css
@keyframes tooltip-appear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
```

**fade-in**
```css
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
```

**fade-out**
```css
@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
```

**fade-up**
```css
@keyframes fade-up {
  0% { opacity: 0.8; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0px); }
}
```

**fade-down**
```css
@keyframes fade-down {
  0% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 0.5; transform: translateY(100%); }
}
```

**grow-x**
```css
@keyframes grow-x {
  100% { width: 100%; }
}
```

**shrink-x**
```css
@keyframes shrink-x {
  100% { width: 0%; }
}
```

**scale-in**
```css
@keyframes scale-in {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}
```

**pulse**
```css
@keyframes pulse {
  0% { opacity: 0.3; }
  10% { opacity: 1; }
  100% { opacity: 0.3; }
}
```

## Component Patterns

Detected UI component patterns and their most common styles:

### Buttons (53 instances)

```css
.button {
  background-color: rgb(239, 239, 239);
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-weight: 400;
  padding-top: 0px;
  padding-right: 0px;
  border-radius: 0px;
}
```

### Cards (9 instances)

```css
.card {
  background-color: rgb(255, 255, 255);
  border-radius: 6px;
  box-shadow: 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;
  padding-top: 0px;
  padding-right: 0px;
}
```

### Inputs (14 instances)

```css
.input {
  background-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  border-radius: 0px;
  font-size: 14px;
  padding-top: 0px;
  padding-right: 0px;
}
```

### Links (154 instances)

```css
.link {
  color: rgb(0, 0, 0);
  font-size: 16px;
  font-weight: 400;
}
```

### Navigation (287 instances)

```css
.navigatio {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  position: static;
  box-shadow: 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;
}
```

### Footer (21 instances)

```css
.foote {
  background-color: rgb(13, 17, 23);
  color: rgb(240, 246, 252);
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 14px;
}
```

### Modals (28 instances)

```css
.modal {
  background-color: rgb(255, 255, 255);
  border-radius: 0px;
  box-shadow: rgb(209, 217, 224) 0px -1px 0px 0px inset;
  padding-top: 0px;
  padding-right: 0px;
  max-width: 0px;
}
```

### Dropdowns (49 instances)

```css
.dropdown {
  background-color: rgb(255, 255, 255);
  border-radius: 0px;
  box-shadow: 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;
  border-color: rgb(255, 255, 255);
  padding-top: 0px;
}
```

### Badges (15 instances)

```css
.badge {
  background-color: rgb(13, 48, 36);
  color: rgb(141, 214, 255);
  font-size: 16px;
  font-weight: 500;
  padding-top: 0px;
  padding-right: 0px;
  border-radius: 0px;
}
```

### Tabs (8 instances)

```css
.tab {
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-weight: 400;
  padding-top: 8px;
  padding-right: 16px;
  border-radius: 60px;
}
```

### Accordions (56 instances)

```css
.accordion {
  color: rgb(255, 255, 255);
  font-size: 16px;
  padding-top: 0px;
  padding-right: 0px;
  border-color: rgb(255, 255, 255);
}
```

### Tooltips (1 instances)

```css
.tooltip {
  background-color: rgb(61, 68, 77);
  color: rgb(255, 255, 255);
  font-size: 12px;
  border-radius: 6px;
  padding-top: 4px;
  padding-right: 8px;
}
```

### ProgressBars (2 instances)

```css
.progressBar {
  background-color: rgb(31, 111, 235);
  color: rgb(240, 246, 252);
  border-radius: 6px;
  font-size: 14px;
}
```

### Switches (24 instances)

```css
.switche {
  background-color: rgb(0, 0, 0);
  border-radius: 60px;
  border-color: rgb(255, 255, 255);
}
```

## Component Clusters

Reusable component instances grouped by DOM structure and style similarity:

### Button — 8 instances, 2 variants

**Variant 1** (7 instances)

```css
  background: rgba(0, 0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 8px 8px 8px 8px;
  border-radius: 0px;
  border: 0px none rgb(255, 255, 255);
  font-size: 16px;
  font-weight: 400;
```

**Variant 2** (1 instance)

```css
  background: rgb(9, 13, 10);
  color: rgb(255, 255, 255);
  padding: 0px 0px 0px 0px;
  border-radius: 48px;
  border: 1px solid rgb(25, 31, 27);
  font-size: 16px;
  font-weight: 400;
```

### Other — 5 instances, 1 variant

**Variant 1** (5 instances)

```css
  background: rgba(0, 0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 0px 0px 0px 0px;
  border-radius: 0px;
  border: 0px none rgb(255, 255, 255);
  font-size: 16px;
  font-weight: 400;
```

### Button — 1 instance, 1 variant

**Variant 1** (1 instance)

```css
  background: rgba(0, 0, 0, 0);
  color: rgba(255, 255, 255, 0.75);
  padding: 0px 0px 0px 7px;
  border-radius: 6px;
  border: 0px none rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 400;
```

### Button — 2 instances, 1 variant

**Variant 1** (2 instances)

```css
  background: rgba(0, 0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 4px 12px 4px 12px;
  border-radius: 6px;
  border: 0px none rgb(255, 255, 255);
  font-size: 14px;
  font-weight: 400;
```

### Input — 2 instances, 1 variant

**Variant 1** (2 instances)

```css
  background: rgba(0, 0, 0, 0);
  color: rgb(0, 0, 0);
  padding: 18px 12px 0px 18px;
  border-radius: 8px;
  border: 0px none rgb(0, 0, 0);
  font-size: 16px;
  font-weight: 400;
```

### Button — 11 instances, 2 variants

**Variant 1** (2 instances)

```css
  background: rgb(8, 135, 43);
  color: rgb(255, 255, 255);
  padding: 6px 20px 6px 20px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0);
  font-size: 16px;
  font-weight: 400;
```

**Variant 2** (9 instances)

```css
  background: rgba(0, 0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 8px 16px 8px 16px;
  border-radius: 60px;
  border: 1px solid rgba(0, 0, 0, 0);
  font-size: 16px;
  font-weight: 400;
```

### Button — 8 instances, 1 variant

**Variant 1** (8 instances)

```css
  background: rgba(0, 0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 0px 0px 0px 0px;
  border-radius: 0px;
  border: 0px none rgb(255, 255, 255);
  font-size: 16px;
  font-weight: 400;
```

### Button — 3 instances, 1 variant

**Variant 1** (3 instances)

```css
  background: rgba(0, 0, 0, 0);
  color: rgb(141, 214, 255);
  padding: 0px 0px 0px 0px;
  border-radius: 0px;
  border: 0px none rgb(141, 214, 255);
  font-size: 16px;
  font-weight: 400;
```

### Button — 2 instances, 1 variant

**Variant 1** (2 instances)

```css
  background: rgba(0, 0, 0, 0);
  color: rgb(145, 152, 161);
  padding: 0px 0px 0px 0px;
  border-radius: 0px;
  border: 0px none rgb(145, 152, 161);
  font-size: 12px;
  font-weight: 400;
```

## Layout System

**64 grid containers** and **281 flex containers** detected.

### Container Widths

| Max Width | Padding |
|-----------|---------|
| 924px | 0px |
| 1246px | 0px |
| 1280px | 0px |
| 100% | 0px |
| 757.754px | 0px |
| 980px | 0px |

### Grid Column Patterns

| Columns | Usage Count |
|---------|-------------|
| 1-column | 19x |
| 2-column | 16x |
| 12-column | 9x |
| 6-column | 7x |
| 4-column | 6x |
| 3-column | 4x |

### Grid Templates

```css
grid-template-columns: 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px;
grid-template-columns: 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px;
grid-template-columns: 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px 106.656px;
grid-template-columns: 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px;
grid-template-columns: 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px 106.5px;
```

### Flex Patterns

| Direction/Wrap | Count |
|----------------|-------|
| row/nowrap | 183x |
| column/nowrap | 90x |
| row/wrap | 8x |

**Gap values:** `0px 16px`, `12px`, `16px`, `20px`, `24px`, `28px`, `32px`, `40px`, `44px`, `48px`, `4px`, `4px 40px`, `80px 48px`, `8px`, `96px`, `normal 16px`, `normal 4px`

## Accessibility (WCAG 2.1)

**Overall Score: 100%** — 6 passing, 0 failing color pairs

### Passing Color Pairs

| Foreground | Background | Ratio | Level |
|------------|------------|-------|-------|
| `#25292e` | `#f6f8fa` | 13.74:1 | AAA |
| `#ffffff` | `#1f883d` | 4.52:1 | AA |
| `#ffffff` | `#1f6feb` | 4.63:1 | AA |
| `#000000` | `#efefef` | 18.26:1 | AAA |

## Design System Score

**Overall: 82/100 (Grade: B)**

| Category | Score |
|----------|-------|
| Color Discipline | 80/100 |
| Typography Consistency | 65/100 |
| Spacing System | 100/100 |
| Shadow Consistency | 90/100 |
| Border Radius Consistency | 80/100 |
| Accessibility | 100/100 |
| CSS Tokenization | 100/100 |

**Strengths:** Well-defined spacing scale, Clean elevation system, Strong accessibility compliance, Good CSS variable tokenization

**Issues:**
- 9 font weights in use — consider standardizing to 3 (regular, medium, bold)
- 4312 !important rules — prefer specificity over overrides
- 81% of CSS is unused — consider purging
- 32949 duplicate CSS declarations

## Gradients

**13 unique gradients** detected.

| Type | Direction | Stops | Classification |
|------|-----------|-------|----------------|
| linear | — | 2 | brand |
| linear | — | 2 | brand |
| linear | — | 2 | brand |
| linear | — | 2 | brand |
| linear | 90deg | 2 | brand |
| linear | — | 2 | brand |
| linear | — | 2 | brand |
| radial | circle at 0px 100% | 3 | bold |
| radial | — | 2 | brand |
| linear | — | 2 | brand |
| radial | circle at 0px 100% | 3 | bold |
| linear | — | 2 | brand |
| linear | — | 2 | brand |

```css
background: linear-gradient(rgba(187, 128, 9, 0.15), rgba(187, 128, 9, 0.15));
background: linear-gradient(rgb(0, 2, 64), rgba(0, 0, 0, 0));
background: linear-gradient(rgb(0, 2, 64), rgb(0, 0, 0) 117%);
background: linear-gradient(rgba(255, 255, 255, 0) -8.14%, rgba(255, 255, 255, 0.1) 62.09%);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 300%);
```

## Z-Index Map

**14 unique z-index values** across 4 layers.

| Layer | Range | Elements |
|-------|-------|----------|
| modal | 1000,999999 | div, span.p.r.o.g.r.e.s.s.-.p.j.a.x.-.l.o.a.d.e.r. .P.r.o.g.r.e.s.s. .p.o.s.i.t.i.o.n.-.f.i.x.e.d. .w.i.d.t.h.-.f.u.l.l, ghcc-consent.p.o.s.i.t.i.o.n.-.f.i.x.e.d. .b.o.t.t.o.m.-.0. .l.e.f.t.-.0 |
| dropdown | 100,999 | div.H.e.a.d.e.r.M.e.n.u. .j.s.-.h.e.a.d.e.r.-.m.e.n.u. .h.e.i.g.h.t.-.f.i.t. .p.o.s.i.t.i.o.n.-.l.g.-.r.e.l.a.t.i.v.e. .d.-.l.g.-.f.l.e.x. .f.l.e.x.-.c.o.l.u.m.n. .f.l.e.x.-.a.u.t.o. .t.o.p.-.0, div.P.o.p.o.v.e.r. .j.s.-.h.o.v.e.r.c.a.r.d.-.c.o.n.t.e.n.t. .p.o.s.i.t.i.o.n.-.a.b.s.o.l.u.t.e, div.O.v.e.r.l.a.y.-.b.a.c.k.d.r.o.p.-.-.a.n.c.h.o.r |
| sticky | 32,99 | header.H.e.a.d.e.r.M.k.t.g. .h.e.a.d.e.r.-.l.o.g.g.e.d.-.o.u.t. .j.s.-.d.e.t.a.i.l.s.-.c.o.n.t.a.i.n.e.r. .j.s.-.h.e.a.d.e.r. .D.e.t.a.i.l.s. .f.4. .t.m.p.-.p.y.-.3, div.d.a.r.k.-.b.a.c.k.d.r.o.p. .p.o.s.i.t.i.o.n.-.f.i.x.e.d, div.s.e.a.r.c.h.-.s.u.g.g.e.s.t.i.o.n.s. .p.o.s.i.t.i.o.n.-.f.i.x.e.d. .w.i.d.t.h.-.f.u.l.l. .c.o.l.o.r.-.s.h.a.d.o.w.-.l.a.r.g.e. .b.o.r.d.e.r. .c.o.l.o.r.-.f.g.-.d.e.f.a.u.l.t. .c.o.l.o.r.-.b.g.-.d.e.f.a.u.l.t. .o.v.e.r.f.l.o.w.-.h.i.d.d.e.n. .d.-.f.l.e.x. .f.l.e.x.-.c.o.l.u.m.n. .q.u.e.r.y.-.b.u.i.l.d.e.r.-.c.o.n.t.a.i.n.e.r |
| base | -1,3 | div.l.p.-.S.e.c.t.i.o.n.H.e.r.o.-.g.l.o.w, div.l.p.-.S.e.c.t.i.o.n.H.e.r.o.-.b.a.c.k.g.r.o.u.n.d, div.l.p.-.S.e.c.t.i.o.n.H.e.r.o.-.g.l.o.w. .l.p.-.S.e.c.t.i.o.n.H.e.r.o.-.g.l.o.w.-.-.d.e.e.p.e.r.B.l.u.e |

**Issues:**
- [object Object]

## SVG Icons

**44 unique SVG icons** detected. Dominant style: **filled**.

| Size Class | Count |
|------------|-------|
| xs | 1 |
| sm | 13 |
| md | 17 |
| lg | 2 |
| xl | 11 |

**Icon colors:** `rgb(255, 255, 255)`, `currentColor`, `rgb(164, 174, 166)`, `white`, `#0D1117`, `black`, `#24292F`, `rgb(240, 246, 252)`, `rgb(0, 0, 0)`, `rgb(145, 152, 161)`

## Font Files

| Family | Source | Weights | Styles |
|--------|--------|---------|--------|
| Mona Sans | self-hosted | 200 900 | normal |
| Hubot Sans | self-hosted | 200 900 | normal |
| Mona Sans Mono | self-hosted | 200 900 | normal |
| Monaspace Neon | self-hosted | 100 900 | normal |

## Image Style Patterns

| Pattern | Count | Key Styles |
|---------|-------|------------|
| hero | 9 | objectFit: cover, borderRadius: 0px, shape: square |
| thumbnail | 5 | objectFit: cover, borderRadius: 0px, shape: square |
| gallery | 3 | objectFit: fill, borderRadius: 0px, shape: square |
| general | 1 | objectFit: cover, borderRadius: 16px, shape: rounded |

**Aspect ratios:** 1:1 (13x), 3:4 (3x), 3:2 (1x), 16:9 (1x)

## Motion Language

**Feel:** mixed · **Scroll-linked:** yes

### Duration Tokens

| name | value | ms |
|---|---|---|
| `instant` | `75ms` | 75 |
| `xs` | `100ms` | 100 |
| `sm` | `200ms` | 200 |
| `md` | `300ms` | 300 |
| `lg` | `480ms` | 480 |
| `xl` | `800ms` | 800 |
| `xxl` | `33333s` | 33333000 |

### Easing Families

- **linear** (12 uses) — `linear`
- **ease-out** (74 uses) — `cubic-bezier(0.16, 1, 0.3, 1)`, `cubic-bezier(0.33, 1, 0.68, 1)`, `cubic-bezier(0.165, 0.84, 0.44, 1)`
- **custom** (35 uses) — `cubic-bezier(0.65, 0, 0.35, 1)`, `cubic-bezier(0.3, 0, 0.5, 1)`, `cubic-bezier(0.5, 0.16, 0.1, 1)`
- **ease-in-out** (36 uses) — `ease`

### Keyframes In Use

| name | kind | properties | uses |
|---|---|---|---|
| `Overlay--motion-scaleFade` | reveal | opacity, transform | 2 |
| `Primer_Brand__LogoSuite-module__LogobarScrollX___K2Z30` | slide | transform | 2 |

## Component Anatomy

### button — 35 instances

**Slots:** label, icon
**Variants:** link · secondary
**Sizes:** lg · medium

| variant | count | sample label |
|---|---|---|
| default | 30 | Platform |
| link | 4 | Sign in |
| secondary | 1 | English 
Select language |

### other — 5 instances


### input — 2 instances


## Brand Voice

**Tone:** neutral · **Pronoun:** you-only · **Headings:** Sentence case (balanced)

### Top CTA Verbs

- **sign** (4)
- **by** (3)
- **read** (3)
- **code** (2)
- **automate** (2)
- **keep** (2)
- **platform** (1)
- **solutions** (1)

### Button Copy Patterns

- "sign up for github" (2×)
- "platform" (1×)
- "solutions" (1×)
- "resources" (1×)
- "open source" (1×)
- "enterprise" (1×)
- "search or jump to..." (1×)
- "sign in" (1×)
- "sign up" (1×)
- "code" (1×)

### Sample Headings

> Navigation Menu
> Search code, repositories, users, issues, pull requests...
> 
          Explore
        
> 
        Provide feedback
      
> 
        Saved searches
      
> The future of building happens together
> GitHub features
> GITHUB CUSTOMERS
> Accelerate your entire workflow
> Your AI partner everywhere. Copilot is ready to work with you at each step of the software development lifecycle.

## Page Intent

**Type:** `landing` (confidence 0.61)
**Description:** Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

Alternates: blog-post (0.35)

## Section Roles

Reading order (top→bottom): cta → feature-grid → hero → nav → hero → cta → testimonials → nav → content → nav → pricing → nav → testimonials → nav → cta → cta → cta → footer → content → nav → nav → nav → nav → nav → nav

| # | Role | Heading | Confidence |
|---|------|---------|------------|
| 0 | cta | Navigation Menu | 0.75 |
| 1 | nav | — | 0.9 |
| 2 | feature-grid | The future of building happens together | 0.8 |
| 3 | hero | The future of building happens together | 0.85 |
| 4 | hero | The future of building happens together | 0.85 |
| 5 | cta | — | 0.75 |
| 6 | testimonials | Accelerate your entire workflow | 0.4 |
| 7 | nav | Accelerate your entire workflow | 0.4 |
| 8 | content | Built-in application security where found means fixed | 0.3 |
| 9 | nav | Built-in application security where found means fixed | 0.4 |
| 10 | pricing | Work together, achieve more | 0.4 |
| 11 | nav | Work together, achieve more | 0.4 |
| 12 | testimonials | From startups to enterprises, GitHub scales with teams of any size in any indust | 0.4 |
| 13 | nav | From startups to enterprises, GitHub scales with teams of any size in any indust | 0.4 |
| 14 | cta | Millions of developers and businesses call GitHub home | 0.75 |
| 15 | cta | Millions of developers and businesses call GitHub home | 0.75 |
| 16 | cta | — | 0.75 |
| 17 | footer | Site-wide Links | 0.95 |
| 18 | content | Subscribe to our developer newsletter | 0.3 |
| 19 | nav | Platform | 0.9 |

## Material Language

**Label:** `material-you` (confidence 0.45)

| Metric | Value |
|--------|-------|
| Avg saturation | 0.436 |
| Shadow profile | soft |
| Avg shadow blur | 0px |
| Max radius | 9999px |
| backdrop-filter in use | no |
| Gradients | 13 |

## Imagery Style

**Label:** `photography` (confidence 0.361)
**Counts:** total 18, svg 5, icon 7, screenshot-like 0, photo-like 10
**Dominant aspect:** square-ish
**Radius profile on images:** square

## Component Library

**Detected:** `bootstrap` (confidence 0.6)

Evidence:
- bootstrap utility hits: 3

## Quick Start

To recreate this design in a new project:

1. **Install fonts:** Add `Mona Sans` from Google Fonts or your font provider
2. **Import CSS variables:** Copy `variables.css` into your project
3. **Tailwind users:** Use the generated `tailwind.config.js` to extend your theme
4. **Design tokens:** Import `design-tokens.json` for tooling integration