{
  "$description": "Brand: Xbox — dark mode",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette xbox@1.0.0",
      "xbox-green": {
        "$value": "#107C10",
        "$type": "color",
        "$description": "The iconic Xbox Green — --brandColorPrimary, --green, --success, --primary, and --xboxProgressA. The single most identifiable element of the Xbox brand.\n"
      },
      "xbox-green-hover": {
        "$value": "#007738",
        "$type": "color",
        "$description": "Pressed / hover variant — --brandColorPrimaryHover, --colorBrandBackgroundHover, --colorNeutralBackground1Hover.\n"
      },
      "xbox-green-alt": {
        "$value": "#044E2A",
        "$type": "color",
        "$description": "Darker brand variant — --brandColorPrimaryAlt. Used for borders and quiet panel accents in the brand-green family.\n"
      },
      "xbox-progress-b": {
        "$value": "#65C914",
        "$type": "color",
        "$description": "Bright achievement / progress green — --xboxProgressB. Mid-stop of the progress-bar gradient.\n"
      },
      "xbox-progress-c": {
        "$value": "#44B01C",
        "$type": "color",
        "$description": "Mid achievement / progress green — --xboxProgressC.\n"
      },
      "gradient-start": {
        "$value": "#0A4F0A",
        "$type": "color",
        "$description": "Hero gradient start — --entryGradientStart. Deepest stop of the documented Xbox-green hero gradient.\n"
      },
      "gradient-mid": {
        "$value": "#107C10",
        "$type": "color",
        "$description": "Hero gradient mid — --entryGradientMid (same value as brand primary).\n"
      },
      "gradient-end": {
        "$value": "#054B16",
        "$type": "color",
        "$description": "Hero gradient end — --entryGradientEnd.\n"
      },
      "lime-stripe": {
        "$value": "#9BF00B",
        "$type": "color",
        "$description": "Bright lime accent — observed on the Xbox Game Pass promotional CTAs and the \"AVAILABLE WITH GAME PASS\" affordances. Inverts to a #054B16 (gradient-end) text fill on the live stripe.\n"
      },
      "ink-hero": {
        "$value": "#171717",
        "$type": "color",
        "$description": "Primary dark hero background — --pd-hero-bg. Used for the product-detail-page hero modules.\n"
      },
      "ink-header": {
        "$value": "#201F24",
        "$type": "color",
        "$description": "Header chrome dark — observed as the navigation bar computed backgroundColor (rgb(32, 31, 36)).\n"
      },
      "ink-card": {
        "$value": "#333333",
        "$type": "color",
        "$description": "Elevated dark card surface — observed on product card backgrounds inside hero modules.\n"
      },
      "graphite-text": {
        "$value": "#242424",
        "$type": "color",
        "$description": "Primary body text — --text-color (#242424). Used on the light marketing surfaces.\n"
      },
      "graphite-dark": {
        "$value": "#2F2F2F",
        "$type": "color",
        "$description": "Deep neutral — --gray-dark.\n"
      },
      "graphite": {
        "$value": "#505050",
        "$type": "color",
        "$description": "Mid neutral — --gray.\n"
      },
      "paper": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Primary light canvas — --white.\n"
      },
      "paper-surface": {
        "$value": "#F5F5F5",
        "$type": "color",
        "$description": "Light elevated surface — --background-color and --color- neutral-background3.\n"
      },
      "paper-divider": {
        "$value": "#D2D2D2",
        "$type": "color",
        "$description": "Quiet divider — --info (#D2D2D2). Used for borders and divider lines on light chrome.\n"
      },
      "status-warning": {
        "$value": "#FFB900",
        "$type": "color",
        "$description": "Warning amber — --warning, --yellow.\n"
      },
      "status-danger": {
        "$value": "#DC3545",
        "$type": "color",
        "$description": "Danger red — --danger, --red.\n"
      },
      "status-info-blue": {
        "$value": "#0067B8",
        "$type": "color",
        "$description": "Microsoft information blue — --blue. Inherited from the Microsoft UHF layer; appears in inline links inside the Xbox chrome.\n"
      },
      "status-teal": {
        "$value": "#008575",
        "$type": "color",
        "$description": "Microsoft teal — --teal. UHF status accent.\n"
      },
      "gamepass-pink": {
        "$value": "#FF0088",
        "$type": "color",
        "$description": "Game Pass promotional CTA fill — observed on the live \"JOIN GAME PASS\" button. Not a brand primary; reserved for promotional subscription affordances.\n"
      },
      "hero-alert": {
        "$value": "#FFD800",
        "$type": "color",
        "$description": "Hero-banner alert background — --pd-hero-alert-bg. Reserved for time-sensitive launch banners.\n"
      }
    },
    "roles": {
      "$description": "Semantic color roles (dark mode) mapped to palette swatches",
      "background": {
        "$value": "{color.swatches.ink-hero}",
        "$type": "color",
        "$description": "background role → Ink Hero"
      },
      "surface": {
        "$value": "{color.swatches.ink-header}",
        "$type": "color",
        "$description": "surface role → Ink Header"
      },
      "surface-elevated": {
        "$value": "{color.swatches.ink-card}",
        "$type": "color",
        "$description": "surface-elevated role → Ink Card"
      },
      "text-primary": {
        "$value": "{color.swatches.paper}",
        "$type": "color",
        "$description": "text-primary role → Paper"
      },
      "text-secondary": {
        "$value": "{color.swatches.paper-divider}",
        "$type": "color",
        "$description": "text-secondary role → Paper Divider"
      },
      "text-tertiary": {
        "$value": "{color.swatches.graphite}",
        "$type": "color",
        "$description": "text-tertiary role → Graphite"
      },
      "primary": {
        "$value": "{color.swatches.xbox-green}",
        "$type": "color",
        "$description": "primary role → Xbox Green"
      },
      "primary-hover": {
        "$value": "{color.swatches.lime-stripe}",
        "$type": "color",
        "$description": "primary-hover role → Lime Stripe"
      },
      "accent": {
        "$value": "{color.swatches.lime-stripe}",
        "$type": "color",
        "$description": "accent role → Lime Stripe"
      },
      "accent-hover": {
        "$value": "{color.swatches.xbox-progress-b}",
        "$type": "color",
        "$description": "accent-hover role → Xbox Progress B"
      },
      "warning": {
        "$value": "{color.swatches.status-warning}",
        "$type": "color",
        "$description": "warning role → Status Warning"
      },
      "warning-hover": {
        "$value": "{color.swatches.hero-alert}",
        "$type": "color",
        "$description": "warning-hover role → Hero Alert"
      },
      "error": {
        "$value": "{color.swatches.status-danger}",
        "$type": "color",
        "$description": "error role → Status Danger"
      },
      "success": {
        "$value": "{color.swatches.xbox-progress-b}",
        "$type": "color",
        "$description": "success role → Xbox Progress B"
      },
      "border": {
        "$value": "{color.swatches.graphite-dark}",
        "$type": "color",
        "$description": "border role → Graphite Dark"
      },
      "brand-overrides": {
        "$description": "Brand-level role overrides (take precedence over palette role mappings)",
        "identity": {
          "$value": "{color.swatches.ink-hero}",
          "$type": "color",
          "$description": "Brand role identity → Ink Hero"
        },
        "on-identity": {
          "$value": "{color.swatches.xbox-green}",
          "$type": "color",
          "$description": "Brand role on-identity → Xbox Green"
        },
        "primary": {
          "$value": "{color.swatches.xbox-green}",
          "$type": "color",
          "$description": "Brand role primary → Xbox Green"
        },
        "primary-hover": {
          "$value": "{color.swatches.xbox-green-hover}",
          "$type": "color",
          "$description": "Brand role primary-hover → Xbox Green Hover"
        },
        "accent": {
          "$value": "{color.swatches.lime-stripe}",
          "$type": "color",
          "$description": "Brand role accent → Lime Stripe"
        },
        "accent-hover": {
          "$value": "{color.swatches.xbox-progress-b}",
          "$type": "color",
          "$description": "Brand role accent-hover → Xbox Progress B"
        },
        "mark": {
          "$value": "{color.swatches.xbox-green}",
          "$type": "color",
          "$description": "Brand role mark → Xbox Green"
        },
        "success": {
          "$value": "{color.swatches.xbox-green}",
          "$type": "color",
          "$description": "Brand role success → Xbox Green"
        },
        "warning": {
          "$value": "{color.swatches.status-warning}",
          "$type": "color",
          "$description": "Brand role warning → Status Warning"
        },
        "error": {
          "$value": "{color.swatches.status-danger}",
          "$type": "color",
          "$description": "Brand role error → Status Danger"
        },
        "text-primary-light": {
          "$value": "{color.swatches.graphite-text}",
          "$type": "color",
          "$description": "Brand role text-primary-light → Graphite Text"
        },
        "text-primary-dark": {
          "$value": "{color.swatches.paper}",
          "$type": "color",
          "$description": "Brand role text-primary-dark → Paper"
        },
        "background-light": {
          "$value": "{color.swatches.paper}",
          "$type": "color",
          "$description": "Brand role background-light → Paper"
        },
        "background-dark": {
          "$value": "{color.swatches.ink-hero}",
          "$type": "color",
          "$description": "Brand role background-dark → Ink Hero"
        },
        "surface-light": {
          "$value": "{color.swatches.paper-surface}",
          "$type": "color",
          "$description": "Brand role surface-light → Paper Surface"
        },
        "surface-dark": {
          "$value": "{color.swatches.ink-header}",
          "$type": "color",
          "$description": "Brand role surface-dark → Ink Header"
        },
        "text-secondary-light": {
          "$value": "{color.swatches.graphite-dark}",
          "$type": "color",
          "$description": "Brand role text-secondary-light → Graphite Dark"
        },
        "text-tertiary-light": {
          "$value": "{color.swatches.graphite}",
          "$type": "color",
          "$description": "Brand role text-tertiary-light → Graphite"
        },
        "border-light": {
          "$value": "{color.swatches.paper-divider}",
          "$type": "color",
          "$description": "Brand role border-light → Paper Divider"
        }
      }
    }
  },
  "font": {
    "$description": "Typography roles mapped to font atoms",
    "heading": {
      "family": {
        "$value": [
          "Segoe UI",
          "system-ui",
          "Inter",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "heading role → Segoe UI (segoe-ui@1.0.0)"
      },
      "weight": {
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "body": {
      "family": {
        "$value": [
          "Segoe UI",
          "system-ui",
          "Inter",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "body role → Segoe UI (segoe-ui@1.0.0)"
      },
      "weight": {
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "mono": {
      "family": {
        "$value": [
          "JetBrainsMono Nerd Font",
          "JetBrains Mono",
          "Fira Code",
          "Menlo",
          "Monaco",
          "Consolas",
          "Liberation Mono",
          "monospace"
        ],
        "$type": "fontFamily",
        "$description": "mono role → JetBrainsMono Nerd Font (jetbrainsmono-nerdfont@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    }
  }
}