{
  "$description": "Brand: Steam — light mode",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette steam@1.0.0",
      "storefront-darkest": {
        "$value": "#000F18",
        "$type": "color",
        "$description": "Deepest near-black storefront ground; --gpStoreDarkestGrey. Used for footers, modal scrims, and the deepest layered panels.\n"
      },
      "storefront-darker": {
        "$value": "#1B2838",
        "$type": "color",
        "$description": "Primary page canvas — --gpStoreDarkerGrey. The Steam Store's dominant background tone; appears in the gradient end-stop of the store-background gradient.\n"
      },
      "storefront-dark": {
        "$value": "#2A475E",
        "$type": "color",
        "$description": "Slate-blue surface — --gpStoreDarkGrey. Start of the store- background gradient and base of card backgrounds.\n"
      },
      "storefront-mid": {
        "$value": "#4E697D",
        "$type": "color",
        "$description": "Mid-tone slate — --gpStoreGrey. Used for borders and secondary chrome between dark panels.\n"
      },
      "storefront-light": {
        "$value": "#7C8EA3",
        "$type": "color",
        "$description": "Light slate — --gpStoreLightGrey. Quiet text on the dark canvas, divider tones.\n"
      },
      "storefront-lighter": {
        "$value": "#A7BACC",
        "$type": "color",
        "$description": "Pale slate — --gpStoreLighterGrey. Tertiary text and quiet icon fills against the dark canvas.\n"
      },
      "storefront-lightest": {
        "$value": "#CCD8E3",
        "$type": "color",
        "$description": "Near-white pale slate — --gpStoreLightestGrey. Primary body text color on the dark canvas.\n"
      },
      "chrome-darkest": {
        "$value": "#0E141B",
        "$type": "color",
        "$description": "Application chrome darkest — --gpSystemDarkestGrey. Header bar background and elevated overlay panels.\n"
      },
      "chrome-darker": {
        "$value": "#23262E",
        "$type": "color",
        "$description": "Application chrome darker — --gpSystemDarkerGrey. Library chrome and elevated card backgrounds.\n"
      },
      "chrome-dark": {
        "$value": "#3D4450",
        "$type": "color",
        "$description": "Application chrome dark — --gpSystemDarkGrey. Hover surfaces and quiet borders inside the chrome.\n"
      },
      "steam-blue": {
        "$value": "#1A9FFF",
        "$type": "color",
        "$description": "Primary interactive blue — --gpColor-Blue. The Steam Store's inline-link and primary-action accent on the dark canvas.\n"
      },
      "steam-blue-hi": {
        "$value": "#00BBFF",
        "$type": "color",
        "$description": "High-emphasis blue — --gpColor-BlueHi. Highlighted state for the Steam Blue interactive family.\n"
      },
      "chalky-blue": {
        "$value": "#66C0F4",
        "$type": "color",
        "$description": "Steam's signature chalky blue — --gpColor-ChalkyBlue. The brand's most identifiable on-screen color; used for headlines, mark surfaces, and store-page accent type.\n"
      },
      "light-blue": {
        "$value": "#B3DFFF",
        "$type": "color",
        "$description": "Pale brand blue — --gpColor-LightBlue. Tertiary blue accent and quiet info surfaces.\n"
      },
      "dusty-blue": {
        "$value": "#417A9B",
        "$type": "color",
        "$description": "Muted slate-blue — --gpColor-DustyBlue. Secondary surface accent and quiet button fills.\n"
      },
      "steam-green": {
        "$value": "#5BA32B",
        "$type": "color",
        "$description": "Steam's signature CTA green — --gpColor-Green. The \"Install / Add to Cart / Play\" button family is built on this hue (with the brighter --gpColor-GreenHi as the gradient-top stop on those buttons).\n"
      },
      "steam-green-hi": {
        "$value": "#59BF40",
        "$type": "color",
        "$description": "High-emphasis green — --gpColor-GreenHi. Top-stop of the green-CTA gradient.\n"
      },
      "steam-green-lime": {
        "$value": "#A4D007",
        "$type": "color",
        "$description": "Lime CTA accent — observed as the top-stop of the legacy green-button gradient (linear-gradient #A4D007 → #536904). Used on the primary download / install affordances.\n"
      },
      "steam-orange": {
        "$value": "#E35E1C",
        "$type": "color",
        "$description": "Promotional orange — --gpColor-Orange. Sale stickers and discount badges.\n"
      },
      "steam-orange-red": {
        "$value": "#EE563B",
        "$type": "color",
        "$description": "High-emphasis warm — --gpColor-RedHi. Hot-deal / time- limited badges.\n"
      },
      "steam-red": {
        "$value": "#D94126",
        "$type": "color",
        "$description": "Error / removal red — --gpColor-Red. Destructive-action affordance.\n"
      },
      "steam-yellow": {
        "$value": "#FFC82C",
        "$type": "color",
        "$description": "Yellow warning / featured tag — --gpColor-Yellow.\n"
      }
    },
    "roles": {
      "$description": "Semantic color roles (light mode) mapped to palette swatches",
      "background": {
        "$value": "{color.swatches.storefront-lightest}",
        "$type": "color",
        "$description": "background role → Storefront Lightest"
      },
      "surface": {
        "$value": "{color.swatches.storefront-lighter}",
        "$type": "color",
        "$description": "surface role → Storefront Lighter"
      },
      "surface-elevated": {
        "$value": "{color.swatches.storefront-lightest}",
        "$type": "color",
        "$description": "surface-elevated role → Storefront Lightest"
      },
      "text-primary": {
        "$value": "{color.swatches.storefront-darker}",
        "$type": "color",
        "$description": "text-primary role → Storefront Darker"
      },
      "text-secondary": {
        "$value": "{color.swatches.storefront-dark}",
        "$type": "color",
        "$description": "text-secondary role → Storefront Dark"
      },
      "text-tertiary": {
        "$value": "{color.swatches.storefront-mid}",
        "$type": "color",
        "$description": "text-tertiary role → Storefront Mid"
      },
      "primary": {
        "$value": "{color.swatches.steam-green}",
        "$type": "color",
        "$description": "primary role → Steam Green"
      },
      "primary-hover": {
        "$value": "{color.swatches.steam-green-hi}",
        "$type": "color",
        "$description": "primary-hover role → Steam Green Hi"
      },
      "accent": {
        "$value": "{color.swatches.steam-blue}",
        "$type": "color",
        "$description": "accent role → Steam Blue"
      },
      "accent-hover": {
        "$value": "{color.swatches.steam-blue-hi}",
        "$type": "color",
        "$description": "accent-hover role → Steam Blue Hi"
      },
      "warning": {
        "$value": "{color.swatches.steam-yellow}",
        "$type": "color",
        "$description": "warning role → Steam Yellow"
      },
      "warning-hover": {
        "$value": "{color.swatches.steam-orange}",
        "$type": "color",
        "$description": "warning-hover role → Steam Orange"
      },
      "error": {
        "$value": "{color.swatches.steam-red}",
        "$type": "color",
        "$description": "error role → Steam Red"
      },
      "success": {
        "$value": "{color.swatches.steam-green}",
        "$type": "color",
        "$description": "success role → Steam Green"
      },
      "border": {
        "$value": "{color.swatches.storefront-light}",
        "$type": "color",
        "$description": "border role → Storefront Light"
      },
      "brand-overrides": {
        "$description": "Brand-level role overrides (take precedence over palette role mappings)",
        "identity": {
          "$value": "{color.swatches.storefront-darker}",
          "$type": "color",
          "$description": "Brand role identity → Storefront Darker"
        },
        "on-identity": {
          "$value": "{color.swatches.chalky-blue}",
          "$type": "color",
          "$description": "Brand role on-identity → Chalky Blue"
        },
        "primary": {
          "$value": "{color.swatches.steam-green}",
          "$type": "color",
          "$description": "Brand role primary → Steam Green"
        },
        "primary-hover": {
          "$value": "{color.swatches.steam-green-hi}",
          "$type": "color",
          "$description": "Brand role primary-hover → Steam Green Hi"
        },
        "accent": {
          "$value": "{color.swatches.chalky-blue}",
          "$type": "color",
          "$description": "Brand role accent → Chalky Blue"
        },
        "accent-hover": {
          "$value": "{color.swatches.steam-blue-hi}",
          "$type": "color",
          "$description": "Brand role accent-hover → Steam Blue Hi"
        },
        "mark": {
          "$value": "{color.swatches.chalky-blue}",
          "$type": "color",
          "$description": "Brand role mark → Chalky Blue"
        },
        "success": {
          "$value": "{color.swatches.steam-green}",
          "$type": "color",
          "$description": "Brand role success → Steam Green"
        },
        "warning": {
          "$value": "{color.swatches.steam-yellow}",
          "$type": "color",
          "$description": "Brand role warning → Steam Yellow"
        },
        "error": {
          "$value": "{color.swatches.steam-red}",
          "$type": "color",
          "$description": "Brand role error → Steam Red"
        },
        "text-primary-light": {
          "$value": "{color.swatches.storefront-darker}",
          "$type": "color",
          "$description": "Brand role text-primary-light → Storefront Darker"
        },
        "text-primary-dark": {
          "$value": "{color.swatches.storefront-lightest}",
          "$type": "color",
          "$description": "Brand role text-primary-dark → Storefront Lightest"
        },
        "background-light": {
          "$value": "{color.swatches.storefront-lightest}",
          "$type": "color",
          "$description": "Brand role background-light → Storefront Lightest"
        },
        "background-dark": {
          "$value": "{color.swatches.storefront-darker}",
          "$type": "color",
          "$description": "Brand role background-dark → Storefront Darker"
        },
        "surface-light": {
          "$value": "{color.swatches.storefront-lighter}",
          "$type": "color",
          "$description": "Brand role surface-light → Storefront Lighter"
        },
        "surface-dark": {
          "$value": "{color.swatches.storefront-dark}",
          "$type": "color",
          "$description": "Brand role surface-dark → Storefront Dark"
        },
        "text-secondary-light": {
          "$value": "{color.swatches.storefront-dark}",
          "$type": "color",
          "$description": "Brand role text-secondary-light → Storefront Dark"
        },
        "text-tertiary-light": {
          "$value": "{color.swatches.storefront-mid}",
          "$type": "color",
          "$description": "Brand role text-tertiary-light → Storefront Mid"
        },
        "border-light": {
          "$value": "{color.swatches.storefront-light}",
          "$type": "color",
          "$description": "Brand role border-light → Storefront Light"
        }
      }
    }
  },
  "font": {
    "$description": "Typography roles mapped to font atoms",
    "heading": {
      "family": {
        "$value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "heading role → Inter (inter@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"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "body": {
      "family": {
        "$value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "body role → Inter (inter@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"
        },
        "900": {
          "$value": 900,
          "$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"
      }
    }
  }
}