Steam
Steam's brand palette as captured from the live store stylesheet on store.steampowered.com. Steam is dark-first by construction: a deep navy "Storefront" canvas with a chalky-blue accent and a signature green CTA family carried over from the early Valve software-store identity. The CSS exposes the live design-system tokens (--gpColor-Green, --gpColor-Blue, --gpColor-ChalkyBlue, --gpColor-LightBlue, --gpStoreDarkerGrey, etc.) which this atom mirrors using the project's swatch-id convention. Steam reads as engineering-utility and gaming-storefront rather than marketing-glossy: the chalky-blue page chrome carries product imagery while the green CTAs (install, buy, play) carry the dominant brand action.
22 swatches 15 light roles 15 dark roles
Swatches
storefront-darkest
#000F18
Deepest near-black storefront ground; --gpStoreDarkestGrey. Used for footers, modal scrims, and the deepest layered panels.
storefront-darker
#1B2838
Primary page canvas — --gpStoreDarkerGrey. The Steam Store's dominant background tone; appears in the gradient end-stop of the store-background gradient.
storefront-dark
#2A475E
Slate-blue surface — --gpStoreDarkGrey. Start of the store- background gradient and base of card backgrounds.
storefront-mid
#4E697D
Mid-tone slate — --gpStoreGrey. Used for borders and secondary chrome between dark panels.
storefront-light
#7C8EA3
Light slate — --gpStoreLightGrey. Quiet text on the dark canvas, divider tones.
storefront-lighter
#A7BACC
Pale slate — --gpStoreLighterGrey. Tertiary text and quiet icon fills against the dark canvas.
storefront-lightest
#CCD8E3
Near-white pale slate — --gpStoreLightestGrey. Primary body text color on the dark canvas.
chrome-darkest
#0E141B
Application chrome darkest — --gpSystemDarkestGrey. Header bar background and elevated overlay panels.
chrome-darker
#23262E
Application chrome darker — --gpSystemDarkerGrey. Library chrome and elevated card backgrounds.
chrome-dark
#3D4450
Application chrome dark — --gpSystemDarkGrey. Hover surfaces and quiet borders inside the chrome.
steam-blue
#1A9FFF
Primary interactive blue — --gpColor-Blue. The Steam Store's inline-link and primary-action accent on the dark canvas.
steam-blue-hi
#00BBFF
High-emphasis blue — --gpColor-BlueHi. Highlighted state for the Steam Blue interactive family.
chalky-blue
#66C0F4
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.
light-blue
#B3DFFF
Pale brand blue — --gpColor-LightBlue. Tertiary blue accent and quiet info surfaces.
dusty-blue
#417A9B
Muted slate-blue — --gpColor-DustyBlue. Secondary surface accent and quiet button fills.
steam-green
#5BA32B
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).
steam-green-hi
#59BF40
High-emphasis green — --gpColor-GreenHi. Top-stop of the green-CTA gradient.
steam-green-lime
#A4D007
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.
steam-orange
#E35E1C
Promotional orange — --gpColor-Orange. Sale stickers and discount badges.
steam-orange-red
#EE563B
High-emphasis warm — --gpColor-RedHi. Hot-deal / time- limited badges.
steam-red
#D94126
Error / removal red — --gpColor-Red. Destructive-action affordance.
steam-yellow
#FFC82C
Yellow warning / featured tag — --gpColor-Yellow.
Mode role mappings
Light mode (15 roles)
accent
→ steam-blue accent-hover
→ steam-blue-hi background
→ storefront-lightest border
→ storefront-light error
→ steam-red primary
→ steam-green primary-hover
→ steam-green-hi success
→ steam-green surface
→ storefront-lighter surface-elevated
→ storefront-lightest text-primary
→ storefront-darker text-secondary
→ storefront-dark text-tertiary
→ storefront-mid warning
→ steam-yellow warning-hover
→ steam-orange Dark mode (15 roles)
accent
→ chalky-blue accent-hover
→ steam-blue-hi background
→ storefront-darker border
→ chrome-dark error
→ steam-red primary
→ steam-green primary-hover
→ steam-green-hi success
→ steam-green surface
→ storefront-dark surface-elevated
→ chrome-darker text-primary
→ storefront-lightest text-secondary
→ storefront-lighter text-tertiary
→ storefront-light warning
→ steam-yellow warning-hover
→ steam-orange Provenance
- Source
- https://store.steampowered.com/
- License
Proprietary — All Rights Reserved- Attribution
- Valve Corporation — palette values captured from the deployed stylesheet on store.steampowered.com (--gpColor-*, --gpStore-*, --color-*, --color-accent-* 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.
- Imported
-
2026-05-19 - Notes
- Derived from live site CSS at https://store.steampowered.com/ on 2026-05-19; Valve's public Steam Brand Guide does not publish hex color specifications (it governs logo usage and legal attribution only). The Steam display typeface is Motiva Sans (proprietary, declared via @font-face but not publicly distributed) — this palette is paired with Inter@1 as the open-source rendering substitute in the corresponding brand atom. Swatch IDs mirror Steam's own --gpColor-* and --gpStore*Grey token names where possible.