---
version: alpha
name: GitHub
description: "A midnight-navy canvas, one confident green, and Mona Sans doing all the talking."
colors:
  on-surface-variant: "#A4AEA6"
  on-surface: "#FFFFFF"
  surface: "#0D1117"
  outline: "#D1D9E0"
  primary: "#08872B"
  pure-black: "#000000"
  green-black: "#0F1511"
  elevated-panel: "#151A22"
  slate-panel: "#1F2328"
  marketing-button-bg: "#1B1F23"
  bright-green: "#5FED83"
  mint: "#A2FACF"
  sky-link: "#8DD6FF"
  blue-link: "#0969DA"
  marketing-blue: "#218BFF"
  sky-accent: "#64ACFF"
  lilac: "#D8B9FF"
  foreground-default: "#24292F"
  muted-grey: "#59636E"
  light-canvas: "#F6F8FA"
  success-green: "#1A7F37"
  flash-blue: "#DDF4FF"
  flash-yellow: "#FFF8C5"
typography:
  caption:
    fontFamily: system-ui
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0em
  body-small:
    fontFamily: system-ui
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.625
    letterSpacing: 0em
  body:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-large:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  subtitle:
    fontFamily: system-ui
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.625
    letterSpacing: 0em
  heading:
    fontFamily: system-ui
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  title:
    fontFamily: system-ui
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  display:
    fontFamily: system-ui
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.375
    letterSpacing: 0em
  display-xl:
    fontFamily: system-ui
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.375
    letterSpacing: 0em
  hero:
    fontFamily: system-ui
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0em
rounded:
  small: 3px
  default: 6px
  input: 8px
  large: 12px
  feature-cards: 16px
spacing:
  3xs: 4px
  2xs: 8px
  xs: 12px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 48px
  2xl: 64px
  3xl: 96px
  4xl: 128px
---
# GitHub — Style Reference
> A midnight-navy canvas, one confident green, and Mona Sans doing all the talking.

**Theme:** mixed

GitHub's marketing surface is a deep, near-black canvas (`#0D1117`) that the product itself calls "canvas default" — the same token in the app and on the homepage, so the brand never breaks character between "learn about it" and "use it." The entire system leans on restraint: color is spent almost entirely on structure and text, and saved for exactly two loud moments — the action green (`#08872B`) that only ever paints the primary CTA, and the tinted callout boxes (blue, yellow, pink, lilac) borrowed from Primer's flash components. Typography is the real identity: Mona Sans, a variable font run at unusually *light* display weights (425–480 where most brands go bold), giving 64px headlines an airy, engineered calm. The layout is centered and generous — a hero that breathes, then a purple-glowing product screenshot floated below the fold. It reads as infrastructure that happens to be beautiful: quiet chrome, precise borders, one green button.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Default | `#0D1117` | `--color-canvas-default` | The signature dark page background; app and marketing share it. Never a text color. |
| Pure Black | `#000000` | `--color-black` | Deepest surface / input text on light; used sparingly under the canvas. |
| Green-Black | `#0F1511` | `--color-surface-greenblack` | Faint green-shifted dark panel for layered sections. |
| Elevated Panel | `#151A22` | `--color-surface-elevated` | Raised dark surfaces (cards, code-editor chrome). |
| Slate Panel | `#1F2328` | `--color-surface-slate` | Neutral dark panel; doubles as primary text on light. |
| Marketing Button BG | `#1B1F23` | `--color-mktg-btn-bg` | The dark secondary CTA ("Try GitHub Copilot"); paired with a layered lift shadow. |
| Action Green | `#08872B` | `--color-btn-primary-bg` | Primary CTA fill ONLY ("Sign up for GitHub"). Never body, never links. |
| Bright Green | `#5FED83` | `--color-accent-green` | High-energy accent for on-dark highlights, focus, borders. |
| Mint | `#A2FACF` | `--mktg-accent-primary` | Marketing gradient/accent mint on the darkest sections. |
| White | `#FFFFFF` | `--color-fg-white` | Primary text on dark; light-mode surface. |
| Muted Sage | `#A4AEA6` | `--color-fg-muted-dark` | Secondary/supporting text on the dark canvas. |
| Sky Link | `#8DD6FF` | `--color-link-dark` | Inline links & interactive text on dark backgrounds. |
| Blue Link | `#0969DA` | `--color-link-light` | The classic GitHub link blue in light mode. |
| Marketing Blue | `#218BFF` | `--color-marketing-icon-primary` | Marketing icon / illustration primary. |
| Sky Accent | `#64ACFF` | `--mktg-accent-secondary` | Secondary marketing accent, pairs with mint. |
| Lilac | `#D8B9FF` | `--color-accent-lilac` | Syntax/keyword purple in the code panel; the screenshot's glow tone. |
| Foreground Default | `#24292F` | `--color-fg-default` | Primary body text in light mode. |
| Muted Grey | `#59636E` | `--color-fg-muted-light` | Secondary text / captions in light mode. |
| Light Canvas | `#F6F8FA` | `--color-canvas-subtle` | Light-mode subtle surface (rows, wells). |
| Border Muted | `#D1D9E0` | `--color-border-muted` | Hairline borders on light surfaces & outline buttons. |
| Success Green | `#1A7F37` | `--color-success-fg` | Success text/border; the "merged/passed" green. |
| Flash Blue | `#DDF4FF` | `--color-flash-blue` | Info callout tint (light). |
| Flash Yellow | `#FFF8C5` | `--color-flash-yellow` | Warning callout tint (light). |

## Tokens — Typography
### Mona Sans — the whole voice: display + body + UI, run light. `--font-sans` / `--fontStack-sansSerif`
- **Substitute:** -apple-system, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
- **Weights:** variable 200–900; used at 425 (hero display), 460 (section headings), 480 (subheads), 500 (medium), 600 (semibold titles), 800 (heavy light-mode headings), 400 (body)
- **Sizes:** 12 · 13 · 14 · 15 · 16 · 18 · 20 · 22 · 24 · 32 · 40 · 48 · 64px
- **Line height:** 1.25 (tight display) → 1.5 (body) → 1.625 (relaxed subtitle)
- **Letter spacing:** effectively none; the light weights + tight leading carry the display rhythm instead of tracking tricks
- **Role:** GitHub's single sans across marketing and product. The signature move is running the *variable* weight LIGHT at large sizes (64px @ 425) for an engineered, un-shouty headline.

### Hubot Sans — display alternate for campaign moments. `--font-display-alt`
- **Substitute:** Mona Sans, -apple-system, sans-serif
- **Weights:** variable 200–900
- **Role:** GitHub's companion display face (loaded alongside Mona Sans) for expressive marketing headers.

### Monaspace Neon / Mona Sans Mono — code. `--font-mono` / `--fontStack-monospace`
- **Substitute:** ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
- **Weights:** variable 100–900
- **Sizes:** 13px code blocks (`.8125rem`), inline `.9285em`
- **Role:** The editor/Copilot panel and every inline `code` snippet; Monaspace is GitHub's own monospace superfamily.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.25 | none | `--base-text-size-xs` |
| Body Small | 13px | 1.625 | none | `--text-body-size-small` |
| Body | 14px | 1.5 | none | `--body-font-size` |
| Body Large | 16px | 1.5 | none | `--base-text-size-md` |
| Subtitle | 20px | 1.625 | none | `--base-text-size-lg` |
| Heading (h2) | 24px | 1.5 | none | `--h2-size` |
| Title (h1) | 32px | 1.5 | none | `--h1-size` |
| Display (h0) | 40px | 1.375 | none | `--h0-size` |
| Display XL (h00) | 48px | 1.375 | none | `--h00-size` |
| Hero | 64px | 1.25 | none | `--text-hero-size` |

## Tokens — Spacing & Shapes
**Base unit:** 4px (8px rhythm)   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 4px | `--base-size-4` |
| 2xs | 8px | `--base-size-8` |
| xs | 12px | `--base-size-12` |
| sm | 16px | `--base-size-16` |
| md | 24px | `--base-size-24` |
| lg | 32px | `--base-size-32` |
| xl | 48px | `--base-size-48` |
| 2xl | 64px | `--base-size-64` |
| 3xl | 96px | `--base-size-96` |
| 4xl | 128px | `--base-size-128` |

### Border Radius
| Element | Value |
|---------|-------|
| Small (badges, chips) | 3px (`--borderRadius-small`) |
| Default (buttons, cards) | 6px (`--borderRadius-medium`) |
| Input | 8px |
| Large (panels) | 12px (`--borderRadius-large`) |
| Feature cards | 16px / 24px |
| Pill / avatar | full (`--borderRadius-full`, 50%) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Card | `rgba(53,72,91,0.14) 0 0 0 1px, rgba(0,0,0,0.04) 0 3px 2px, rgba(0,0,0,0.02) 0 7px 5px, rgba(0,0,0,0.02) 0 13px 10px, rgba(0,0,0,0.02) 0 22px 17px` | `--shadow-card` |
| Marketing Button Hover | `0 3px 2px #00000012, 0 7px 5px #0000000a, 0 12px 10px #00000008, 0 22px 18px #00000008, 0 42px 33px #00000005, 0 100px 80px #00000005` | `--color-mktg-btn-shadow-hover` |
| Deep Float | `rgba(37,41,46,0.32) 0 56px 112px 0` | `--shadow-float` |

### Layout
- **Page max-width:** ~1280px content, centered; hero text column ~720px
- **Section gap:** 96–128px between marketing sections
- **Card padding:** 16–24px
- **Element gap:** 8–16px (control stacks use 8px)

## Components
### Primary Button
**Role:** The single most important action — "Sign up for GitHub."
Solid `#08872B` fill, `#FFFFFF` text, 6px radius, ~6px 20px padding, 16px/400. It is the only green surface on the page. No gradient, no border.

### Marketing Secondary Button
**Role:** The alternate CTA — "Try GitHub Copilot."
`#1B1F23` dark fill, white text, 6px radius, carried by a deeply layered lift shadow (`--color-mktg-btn-shadow-hover`) rather than a border. Reads as premium, quiet, secondary to the green.

### Outline Button
**Role:** Tertiary / neutral actions.
Transparent fill, 1px `#D1D9E0` border, 6px radius, 4px 12px padding, 14px/400 text. The workhorse control on light surfaces.

### Email Input
**Role:** Inline capture beside the primary CTA.
White (`#FFFFFF`) field, 8px radius, `#000000` text, generous internal padding, no visible border on dark — it floats as a bright well against the navy canvas.

### Header / Nav
**Role:** Global overlay navigation (fixed).
Transparent-over-canvas bar with text links (Platform, Solutions, Resources, Open Source, Enterprise, Pricing) using caret dropdowns, a search field on the right, ghost "Sign in" and outlined "Sign up." White text on the dark hero.

### Search Field
**Role:** "Search or jump to…" command entry.
Subtle dark well with a magnifier icon and a `/` keyboard-shortcut chip, 6px radius, muted border — echoes the in-product command bar.

### Hero Display Heading
**Role:** The page's opening statement.
64px Mona Sans at weight **425** (deliberately light), `#FFFFFF`, line-height ~1.25, centered. The lightness is the brand signature — engineered calm, not marketing shout.

### Section Heading
**Role:** Structural headers below the hero.
40px Mona Sans weight ~460, white on dark or `#1F2328` on light; muted sage (`#A4AEA6`) for de-emphasized supporting headers.

### Link
**Role:** Inline interactive text.
`#8DD6FF` on dark, `#0969DA` in light mode. No underline by default; weight 400–500. Never green — green is reserved for the CTA.

### Code / Editor Panel
**Role:** The floated product screenshot (Copilot chat + editor).
Near-black surface with Monaspace/Mona Sans Mono at 13px, syntax in lilac (`#D8B9FF`) keywords and sky (`#4493F8`) identifiers, line numbers in muted grey, wrapped in a lilac→violet ambient glow.

### Flash / Callout Box
**Role:** Inline status and info banners (Primer flash pattern).
Tinted light fills — blue `#DDF4FF` (info), yellow `#FFF8C5` (warning), pink `#FFEFF7`, lilac `#FBEFFF` — 6px radius, matching colored border. The one place multiple hues appear together.

### Card
**Role:** Content and feature containers.
1px `#D1D9E0` border (light) or elevated dark panel, 6px radius, layered card shadow on light. Text default `#24292F`, captions `#59636E`.

## Do's and Don'ts
### Do
- Spend green (`#08872B`) on exactly one primary CTA per view; keep every other action neutral or outlined.
- Run Mona Sans LIGHT at display sizes (425–480) — resist the urge to bold big headlines.
- Keep the dark canvas at `#0D1117` and let borders (`#21262D`, `#D1D9E0`) and luminance do the structuring.
- Reserve multi-color moments for tinted flash/callout boxes; keep the rest monochrome.
- Use 6px as the default radius everywhere; only inputs (8px) and panels (12px) deviate.

### Don't
- Don't color links green or make green anything but the primary action.
- Don't bold the hero — the calm comes from the light weight.
- Don't drop heavy drop-shadows on dark; depth on dark is luminance and border, not shadow.
- Don't introduce a second accent hue on the marketing canvas — mint/sky/lilac are for illustration and code, not UI chrome.
- Don't tighten letter-spacing to fake polish; GitHub tracks at ~0.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#0D1117` | Base dark page background |
| 0b | Pure Black | `#000000` | Deepest wells / behind media |
| 1 | Green-Black | `#0F1511` | Subtly warmed dark section |
| 2 | Elevated Panel | `#151A22` | Cards, editor chrome |
| 3 | Slate Panel | `#1F2328` | Raised dark surfaces / dark buttons |
| L0 | Light Canvas | `#FFFFFF` | Light-mode base |
| L1 | Subtle | `#F6F8FA` | Light-mode rows/wells |
| L2 | Subtle Alt | `#F2F5F3` | Alternating light band |

## Elevation
On dark, depth is carried by **luminance steps and hairline borders** (`#21262D`, `#353D37`, `#484F58`), not shadow — each surface is a notch lighter than the one behind it. Shadows appear only in two places: the marketing secondary button's deep layered lift, and the floated product screenshot's `rgba(37,41,46,0.32) 0 56px 112px` deep-float that lets the editor panel hover over the canvas. On light surfaces, the multi-layer card shadow (`rgba(53,72,91,0.14)` ring + soft stack) provides gentle separation.

## Imagery
Product-forward and literal: the hero floats a real GitHub Copilot editor screenshot — an IDE with a chat panel ("Hi @monalisa, how can I help you?") and syntax-highlighted TypeScript — lit from behind by a **lilac-to-violet ambient glow** that is the single most decorative gesture on the page. Illustration uses the marketing blue/mint/sky accents (`#218BFF`, `#A2FACF`, `#64ACFF`); the Octocat mark appears as a monochrome white glyph. Photography is minimal — the interface is the imagery.

## Layout
Full-bleed dark canvas with a centered, contained content column (~1280px). The hero is symmetrical: centered display heading, centered supporting sentence, then a centered CTA row (email field + green button + dark secondary button) — all above a large product screenshot that bleeds toward the page edges below the fold. Navigation is a fixed overlay header. Section rhythm is generous (96–128px gaps). The product screenshot's glow anchors the eye and transitions from marketing into "here's the actual thing."

## Typography Signature
GitHub runs one variable family (Mona Sans) in two registers from a single axis. The **display register** deliberately *lowers* weight as size grows — 64px at 425, 40px at ~460 — so the biggest type is the calmest, an engineered restraint that signals confidence rather than urgency. The **UI register** climbs to 600 for titles and 800 for heavy light-mode headings where hierarchy must snap. Line-height tightens toward display (1.25) and opens for body (1.5), and letter-spacing stays at ~0 throughout — the weight axis, not tracking, does the expressive work. The result reads unmistakably as infrastructure: precise, quiet, and never shouting.

## Agent Prompt Guide
## Quick Color Reference
- background: `#0D1117` (dark) / `#FFFFFF` (light)
- text: `#FFFFFF` (dark) / `#24292F` (light) · muted `#A4AEA6` / `#59636E`
- surface: `#151A22` (dark) / `#F6F8FA` (light)
- border: `#21262D` (dark) / `#D1D9E0` (light)
- accent: `#5FED83` bright green · `#8DD6FF` sky link · `#D8B9FF` lilac
- primary action: `#08872B` green (the ONLY CTA color)

## Example Component Prompts
1. **Primary CTA button**: Solid `#08872B` background, `#FFFFFF` text, 6px border-radius, 6px 20px padding, Mona Sans 16px/400, no border, no gradient. This is the only green element on the page.
2. **Hero heading**: Mona Sans, 64px, font-weight 425 (light), color `#FFFFFF`, line-height 1.25, centered, letter-spacing 0. Two lines, generous width ~720px.
3. **Dark marketing secondary button**: `#1B1F23` background, white text, 6px radius, layered hover shadow `0 3px 2px #00000012, 0 7px 5px #0000000a, 0 12px 10px #00000008, 0 22px 18px #00000008`. No border.
4. **Email capture row**: White (`#FFFFFF`) input, 8px radius, `#000000` text, "Enter your email" placeholder, sitting on a `#0D1117` canvas, immediately followed by the green primary button.
5. **Flash callout**: Light tint fill (`#DDF4FF` info / `#FFF8C5` warning / `#FBEFFF` note), 6px radius, matching 1px colored border, `#24292F` text at 14px.

## Similar Brands
- **Vercel** — the same dark-canvas-plus-one-decisive-action discipline and developer-first restraint.
- **Linear** — shared love of precise hairline borders, luminance-based dark elevation, and a single sans doing everything.
- **Stripe** — kindred documentation-grade clarity and a monochrome UI that saves color for exactly one moment.
- **Raycast** — the same command-bar/keyboard-shortcut chrome and near-black surfaces with a green-ish energy accent.
- **Primer (GitHub's own design system)** — literally the source: the flash tints, control sizing, and border tokens all originate here.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Dark */
  --color-canvas-default: #0D1117;
  --color-black: #000000;
  --color-surface-greenblack: #0F1511;
  --color-surface-elevated: #151A22;
  --color-surface-slate: #1F2328;
  --color-mktg-btn-bg: #1B1F23;
  --color-border-dark: #21262D;
  --color-border-dark-2: #353D37;
  --color-border-dark-3: #484F58;
  /* Colors — Action & Accent */
  --color-btn-primary-bg: #08872B;
  --color-btn-primary-border: #0D6731;
  --color-accent-green: #5FED83;
  --mktg-accent-primary: #A2FACF;
  --mktg-accent-secondary: #64ACFF;
  --color-marketing-icon-primary: #218BFF;
  --color-marketing-icon-secondary: #54AEFF;
  --color-accent-lilac: #D8B9FF;
  --color-accent-periwinkle: #8C93FB;
  --color-link-dark: #8DD6FF;
  --color-link-blue: #4493F8;
  /* Colors — Text */
  --color-fg-white: #FFFFFF;
  --color-fg-muted-dark: #A4AEA6;
  --color-fg-muted-dark-2: #7C8980;
  --color-fg-default: #24292F;
  --color-fg-default-2: #1F2328;
  --color-fg-muted-light: #59636E;
  --color-link-light: #0969DA;
  --color-success-fg: #1A7F37;
  /* Colors — Light surfaces & borders */
  --color-canvas-subtle: #F6F8FA;
  --color-canvas-subtle-2: #F2F5F3;
  --color-fg-onemphasis: #F0F6FC;
  --color-border-muted: #D1D9E0;
  --color-border-muted-2: #EAEEF2;
  --color-border-muted-3: #E4EBE6;
  /* Colors — Flash / callout tints */
  --color-flash-blue: #DDF4FF;
  --color-flash-yellow: #FFF8C5;
  --color-flash-pink: #FFEFF7;
  --color-flash-lilac: #FBEFFF;
  /* Typography — Families */
  --font-sans: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-display-alt: "Hubot Sans", "Mona Sans", -apple-system, sans-serif;
  --font-mono: "Monaspace Neon", "Mona Sans Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Typography — Scale */
  --text-hero: 64px;
  --text-h00: 48px;
  --text-h0: 40px;
  --text-h1: 32px;
  --text-h2: 24px;
  --text-subtitle: 20px;
  --text-body-lg: 16px;
  --text-body: 14px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --weight-display: 425;
  --weight-heading: 460;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heavy: 800;
  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  /* Border Radius */
  --radius-small: 3px;
  --radius-default: 6px;
  --radius-input: 8px;
  --radius-large: 12px;
  --radius-feature: 16px;
  --radius-full: 9999px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Dark */
  --color-canvas-default: #0D1117;
  --color-black: #000000;
  --color-surface-greenblack: #0F1511;
  --color-surface-elevated: #151A22;
  --color-surface-slate: #1F2328;
  --color-mktg-btn-bg: #1B1F23;
  --color-border-dark: #21262D;
  --color-border-dark-2: #353D37;
  --color-border-dark-3: #484F58;
  /* Colors — Action & Accent */
  --color-btn-primary-bg: #08872B;
  --color-btn-primary-border: #0D6731;
  --color-accent-green: #5FED83;
  --color-mktg-accent-primary: #A2FACF;
  --color-mktg-accent-secondary: #64ACFF;
  --color-marketing-icon-primary: #218BFF;
  --color-marketing-icon-secondary: #54AEFF;
  --color-accent-lilac: #D8B9FF;
  --color-accent-periwinkle: #8C93FB;
  --color-link-dark: #8DD6FF;
  --color-link-blue: #4493F8;
  /* Colors — Text */
  --color-fg-white: #FFFFFF;
  --color-fg-muted-dark: #A4AEA6;
  --color-fg-muted-dark-2: #7C8980;
  --color-fg-default: #24292F;
  --color-fg-default-2: #1F2328;
  --color-fg-muted-light: #59636E;
  --color-link-light: #0969DA;
  --color-success-fg: #1A7F37;
  /* Colors — Light surfaces & borders */
  --color-canvas-subtle: #F6F8FA;
  --color-canvas-subtle-2: #F2F5F3;
  --color-fg-onemphasis: #F0F6FC;
  --color-border-muted: #D1D9E0;
  --color-border-muted-2: #EAEEF2;
  --color-border-muted-3: #E4EBE6;
  /* Colors — Flash / callout tints */
  --color-flash-blue: #DDF4FF;
  --color-flash-yellow: #FFF8C5;
  --color-flash-pink: #FFEFF7;
  --color-flash-lilac: #FBEFFF;
  /* Typography — Families */
  --font-sans: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-display-alt: "Hubot Sans", "Mona Sans", -apple-system, sans-serif;
  --font-mono: "Monaspace Neon", "Mona Sans Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Typography — Scale */
  --text-hero: 64px;
  --text-h00: 48px;
  --text-h0: 40px;
  --text-h1: 32px;
  --text-h2: 24px;
  --text-subtitle: 20px;
  --text-body-lg: 16px;
  --text-body: 14px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  /* Border Radius */
  --radius-small: 3px;
  --radius-default: 6px;
  --radius-input: 8px;
  --radius-large: 12px;
  --radius-feature: 16px;
  --radius-full: 9999px;
}
```