{
  "$description": "Brand: Steam (steam@1.0.0)",
  "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"
      }
    }
  },
  "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"
      }
    }
  },
  "$extensions": {
    "com.brand-atoms.rules": [
      {
        "type": "colorChoice",
        "target": "roles.colors.primary",
        "severity": "error",
        "rationale": "The Steam \"Install / Buy / Play\" CTA family is built on --gpColor-Green (#5BA32B) with the --gpColor-GreenHi (#59BF40) and lime --color-green-9 (#A4D007) gradient stops on top. Substituting blue, red, orange, or yellow for the primary action conflicts with a decade of muscle memory on the Steam Store — those colors signal \"secondary link,\" \"destructive,\" \"promotional sticker,\" and \"featured tag\" respectively, not the brand's primary action.\n",
        "allowed": [
          "steam-green",
          "steam-green-hi",
          "steam-green-lime"
        ],
        "forbidden": [
          "chalky-blue",
          "steam-blue",
          "steam-blue-hi",
          "steam-red",
          "steam-orange",
          "steam-yellow"
        ]
      },
      {
        "type": "colorChoice",
        "target": "roles.colors.accent",
        "severity": "error",
        "rationale": "Chalky Blue (#66C0F4) is Steam's most recognizable identifying hue — it carries headlines, hero type, and brand-badge surfaces. The interactive blues (#1A9FFF / #00BBFF) carry inline links and focus rings. Reusing the green CTA or red destructive hues as the accent eliminates the structural color separation between \"informational accent\" and \"primary action\" that the storefront depends on.\n",
        "allowed": [
          "chalky-blue",
          "steam-blue",
          "steam-blue-hi",
          "light-blue"
        ],
        "forbidden": [
          "steam-green",
          "steam-red",
          "steam-orange"
        ]
      },
      {
        "type": "contrastRatio",
        "target": "text-primary",
        "severity": "error",
        "rationale": "Storefront Lightest (#CCD8E3) on Storefront Darker (#1B2838) measures ~10:1 — clears WCAG AA comfortably and sits inside the AAA band for body text. Steam's dense product chrome (long descriptions, system-requirement tables, review snippets) earns a higher contrast floor than the AA minimum.\n",
        "against": "background",
        "minRatio": 4.5,
        "standard": "WCAG-AA"
      },
      {
        "type": "forbiddenTreatment",
        "target": "logo",
        "severity": "error",
        "rationale": "Per Valve's published partner branding requirements, the Steam logo must be used from approved Valve artwork only and \"must stand alone\" — it may not be combined with other logos, words, graphics, photos, slogans, numbers, design features, or symbols. Recoloring, stretching, rotating, or drop-shadowing the mark violates the explicit Valve partner guidelines.\n",
        "treatments": [
          "stretched",
          "rotated",
          "recolored",
          "drop-shadow",
          "gradient-fill",
          "on-busy-photo",
          "outlined"
        ]
      },
      {
        "type": "enumMembership",
        "target": "typography.heading.fontWeight",
        "severity": "warning",
        "rationale": "Steam's storefront declares Motiva Sans at Regular (400), Medium (500), and Bold (700) — captured as --font-weight- regular, --font-weight-medium, and --font-weight-heavy on the live stylesheet. The lighter and heavier cuts (300, 600, 800, 900) are not licensed in the storefront's variable-font set.\n",
        "allowed": [
          "400",
          "500",
          "700"
        ]
      },
      {
        "type": "contextRestriction",
        "target": "roles.colors.accent",
        "severity": "error",
        "rationale": "Chalky Blue carries identification and informational surfaces; it must not stand in for the green primary CTA or the red destructive action. The storefront's three-color action grammar (green = go, red = destroy, blue = inform) collapses if the accent migrates onto the primary CTA.\n",
        "allowedContexts": [
          "hero-headline",
          "brand-badge",
          "inline-link",
          "focus-ring"
        ],
        "forbiddenContexts": [
          "error-state",
          "destructive-action",
          "primary-cta"
        ]
      },
      {
        "type": "compositionConstraint",
        "target": "roles.colors.primary",
        "severity": "recommendation",
        "rationale": "Steam Green reads cleanest against the storefront-darker navy or the lightest pale-slate. Pairing it adjacent to the warm warning / error / promotional family (yellow, orange, red) introduces a chromatic conflict that fights for attention — the store deliberately uses these warm hues as discount-sticker overlays on top of cards, not adjacent to the green CTA.\n",
        "pairsWith": [
          "storefront-darker",
          "storefront-dark",
          "storefront-darkest",
          "storefront-lightest"
        ],
        "doesNotPairWith": [
          "steam-red",
          "steam-orange",
          "steam-yellow"
        ]
      },
      {
        "type": "accessibilityRequirement",
        "target": "*",
        "severity": "error",
        "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Steam's dense storefront chrome (multi-paragraph game descriptions, system-requirement tables, review excerpts) must meet the AA body-text floor across the dark-mode surfaces; the Storefront Lightest on Storefront Darker pairing clears it comfortably.\n",
        "standard": "WCAG-AA",
        "criterion": "1.4.3"
      },
      {
        "type": "fontPairing",
        "target": "typography.display",
        "severity": "recommendation",
        "rationale": "Steam's storefront uses Motiva Sans for both display and body, distinguished by weight and size rather than two distinct families. Maintain at least a 1.4× ratio between display (gpText-HeadingLarge / Medium / Small) and prose (gpText-BodyLarge / Medium / Small) to preserve hierarchy when one family carries both roles.\n",
        "requires": "prose",
        "minSizeRatio": 1.4
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.provenance": {
      "source": "https://store.steampowered.com/",
      "license": "Proprietary — All Rights Reserved",
      "attribution": "Valve Corporation — visual identity captured from the deployed stylesheet on store.steampowered.com (--gpColor-*, --gpStore-*, --gpText-*, --font-family CSS custom-property families). Steam, the Steam logo, Valve, and associated marks are trademarks of Valve Corporation in the U.S. and/or other countries.\n",
      "importedDate": "2026-05-19",
      "notes": "Derived from live site CSS at https://store.steampowered.com/ on 2026-05-19; Valve's public Steam Brand Guide (partner.steamgames.com/doc/marketing/branding) governs logo usage and legal attribution but does not publish hex color specifications. The Steam display typeface is Motiva Sans (declared on the store via --font-family and --gpText-* token families), proprietary and not publicly distributed; this atom references Inter@1 as the open-source rendering substitute. assets: [] per the encyclopedia's trademark- redistribution policy.\n"
    },
    "com.brand-atoms.references": {
      "palette": "steam@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "jetbrainsmono-nerdfont@1.0.0"
      }
    }
  }
}