{
  "id": "steam",
  "version": "1.0.0",
  "name": "Steam",
  "description": "Steam is Valve Corporation's PC games storefront, library client, and social platform — the dominant distribution channel for desktop games and the platform behind Steam Workshop, Steam Community, and Steamworks for developers. The brand voice is utility-engineering: dense product chrome, dark navy storefront, green CTA buttons that mean \"Install / Buy / Play,\" and a chalky light-blue accent that has been Steam's identifying tone since the early-2010s storefront redesigns. Visually, Steam is dark- first by construction — the deep \"Storefront Darker\" (#1B2838) canvas with a \"Storefront Dark\" (#2A475E) gradient start carries the entire product surface, with the chalky-blue (#66C0F4) and green-CTA (#5BA32B → #A4D007) families as the dominant accents. Typography is the proprietary Motiva Sans family.\n",
  "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"
  },
  "tags": [
    "steam",
    "valve",
    "gaming",
    "store",
    "pc-games",
    "dark-first",
    "blue-green"
  ],
  "palette": {
    "ref": "steam@1.0.0",
    "swatches": [
      {
        "id": "storefront-darkest",
        "name": "Storefront Darkest",
        "value": "#000F18",
        "description": "Deepest near-black storefront ground; --gpStoreDarkestGrey. Used for footers, modal scrims, and the deepest layered panels.\n",
        "aliases": []
      },
      {
        "id": "storefront-darker",
        "name": "Storefront Darker",
        "value": "#1B2838",
        "description": "Primary page canvas — --gpStoreDarkerGrey. The Steam Store's dominant background tone; appears in the gradient end-stop of the store-background gradient.\n",
        "aliases": []
      },
      {
        "id": "storefront-dark",
        "name": "Storefront Dark",
        "value": "#2A475E",
        "description": "Slate-blue surface — --gpStoreDarkGrey. Start of the store- background gradient and base of card backgrounds.\n",
        "aliases": []
      },
      {
        "id": "storefront-mid",
        "name": "Storefront Mid",
        "value": "#4E697D",
        "description": "Mid-tone slate — --gpStoreGrey. Used for borders and secondary chrome between dark panels.\n",
        "aliases": []
      },
      {
        "id": "storefront-light",
        "name": "Storefront Light",
        "value": "#7C8EA3",
        "description": "Light slate — --gpStoreLightGrey. Quiet text on the dark canvas, divider tones.\n",
        "aliases": []
      },
      {
        "id": "storefront-lighter",
        "name": "Storefront Lighter",
        "value": "#A7BACC",
        "description": "Pale slate — --gpStoreLighterGrey. Tertiary text and quiet icon fills against the dark canvas.\n",
        "aliases": []
      },
      {
        "id": "storefront-lightest",
        "name": "Storefront Lightest",
        "value": "#CCD8E3",
        "description": "Near-white pale slate — --gpStoreLightestGrey. Primary body text color on the dark canvas.\n",
        "aliases": []
      },
      {
        "id": "chrome-darkest",
        "name": "Chrome Darkest",
        "value": "#0E141B",
        "description": "Application chrome darkest — --gpSystemDarkestGrey. Header bar background and elevated overlay panels.\n",
        "aliases": []
      },
      {
        "id": "chrome-darker",
        "name": "Chrome Darker",
        "value": "#23262E",
        "description": "Application chrome darker — --gpSystemDarkerGrey. Library chrome and elevated card backgrounds.\n",
        "aliases": []
      },
      {
        "id": "chrome-dark",
        "name": "Chrome Dark",
        "value": "#3D4450",
        "description": "Application chrome dark — --gpSystemDarkGrey. Hover surfaces and quiet borders inside the chrome.\n",
        "aliases": []
      },
      {
        "id": "steam-blue",
        "name": "Steam Blue",
        "value": "#1A9FFF",
        "description": "Primary interactive blue — --gpColor-Blue. The Steam Store's inline-link and primary-action accent on the dark canvas.\n",
        "aliases": []
      },
      {
        "id": "steam-blue-hi",
        "name": "Steam Blue Hi",
        "value": "#00BBFF",
        "description": "High-emphasis blue — --gpColor-BlueHi. Highlighted state for the Steam Blue interactive family.\n",
        "aliases": []
      },
      {
        "id": "chalky-blue",
        "name": "Chalky Blue",
        "value": "#66C0F4",
        "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",
        "aliases": []
      },
      {
        "id": "light-blue",
        "name": "Light Blue",
        "value": "#B3DFFF",
        "description": "Pale brand blue — --gpColor-LightBlue. Tertiary blue accent and quiet info surfaces.\n",
        "aliases": []
      },
      {
        "id": "dusty-blue",
        "name": "Dusty Blue",
        "value": "#417A9B",
        "description": "Muted slate-blue — --gpColor-DustyBlue. Secondary surface accent and quiet button fills.\n",
        "aliases": []
      },
      {
        "id": "steam-green",
        "name": "Steam Green",
        "value": "#5BA32B",
        "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",
        "aliases": []
      },
      {
        "id": "steam-green-hi",
        "name": "Steam Green Hi",
        "value": "#59BF40",
        "description": "High-emphasis green — --gpColor-GreenHi. Top-stop of the green-CTA gradient.\n",
        "aliases": []
      },
      {
        "id": "steam-green-lime",
        "name": "Steam Green Lime",
        "value": "#A4D007",
        "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",
        "aliases": []
      },
      {
        "id": "steam-orange",
        "name": "Steam Orange",
        "value": "#E35E1C",
        "description": "Promotional orange — --gpColor-Orange. Sale stickers and discount badges.\n",
        "aliases": []
      },
      {
        "id": "steam-orange-red",
        "name": "Steam Orange Red",
        "value": "#EE563B",
        "description": "High-emphasis warm — --gpColor-RedHi. Hot-deal / time- limited badges.\n",
        "aliases": []
      },
      {
        "id": "steam-red",
        "name": "Steam Red",
        "value": "#D94126",
        "description": "Error / removal red — --gpColor-Red. Destructive-action affordance.\n",
        "aliases": []
      },
      {
        "id": "steam-yellow",
        "name": "Steam Yellow",
        "value": "#FFC82C",
        "description": "Yellow warning / featured tag — --gpColor-Yellow.\n",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "storefront-lightest",
          "surface": "storefront-lighter",
          "surface-elevated": "storefront-lightest",
          "text-primary": "storefront-darker",
          "text-secondary": "storefront-dark",
          "text-tertiary": "storefront-mid",
          "primary": "steam-green",
          "primary-hover": "steam-green-hi",
          "accent": "steam-blue",
          "accent-hover": "steam-blue-hi",
          "warning": "steam-yellow",
          "warning-hover": "steam-orange",
          "error": "steam-red",
          "success": "steam-green",
          "border": "storefront-light"
        }
      },
      "dark": {
        "roles": {
          "background": "storefront-darker",
          "surface": "storefront-dark",
          "surface-elevated": "chrome-darker",
          "text-primary": "storefront-lightest",
          "text-secondary": "storefront-lighter",
          "text-tertiary": "storefront-light",
          "primary": "steam-green",
          "primary-hover": "steam-green-hi",
          "accent": "chalky-blue",
          "accent-hover": "steam-blue-hi",
          "warning": "steam-yellow",
          "warning-hover": "steam-orange",
          "error": "steam-red",
          "success": "steam-green",
          "border": "chrome-dark"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "body",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "jetbrainsmono-nerdfont@1.0.0",
      "family": "JetBrainsMono Nerd Font",
      "classification": "monospace",
      "source": {
        "kind": "external",
        "family": "JetBrainsMono Nerd Font",
        "notes": "Nerd-Font-patched build of JetBrains Mono. Not available via Google Fonts. Download woff2/ttf files from the Nerd Fonts GitHub release and self-host, or install system-wide for terminal/IDE use.\n"
      },
      "fallbackStack": [
        "JetBrains Mono",
        "Fira Code",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "storefront-darker",
      "on-identity": "chalky-blue",
      "primary": "steam-green",
      "primary-hover": "steam-green-hi",
      "accent": "chalky-blue",
      "accent-hover": "steam-blue-hi",
      "mark": "chalky-blue",
      "success": "steam-green",
      "warning": "steam-yellow",
      "error": "steam-red",
      "text-primary-light": "storefront-darker",
      "text-primary-dark": "storefront-lightest",
      "background-light": "storefront-lightest",
      "background-dark": "storefront-darker",
      "surface-light": "storefront-lighter",
      "surface-dark": "storefront-dark",
      "text-secondary-light": "storefront-dark",
      "text-tertiary-light": "storefront-mid",
      "border-light": "storefront-light"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "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
    }
  ]
}