# Steam

> `steam@1.0.0`

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.


**Tags:** `steam`, `valve`, `gaming`, `store`, `pc-games`, `dark-first`, `blue-green`

## Atoms

### Palette

**Steam** · `steam@1.0.0` · Proprietary — All Rights Reserved

> 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. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `storefront-darkest` | Storefront Darkest | `#000F18` |
| `storefront-darker` | Storefront Darker | `#1B2838` |
| `storefront-dark` | Storefront Dark | `#2A475E` |
| `storefront-mid` | Storefront Mid | `#4E697D` |
| `storefront-light` | Storefront Light | `#7C8EA3` |
| `storefront-lighter` | Storefront Lighter | `#A7BACC` |
| `storefront-lightest` | Storefront Lightest | `#CCD8E3` |
| `chrome-darkest` | Chrome Darkest | `#0E141B` |
| `chrome-darker` | Chrome Darker | `#23262E` |
| `chrome-dark` | Chrome Dark | `#3D4450` |
| `steam-blue` | Steam Blue | `#1A9FFF` |
| `steam-blue-hi` | Steam Blue Hi | `#00BBFF` |
| `chalky-blue` | Chalky Blue | `#66C0F4` |
| `light-blue` | Light Blue | `#B3DFFF` |
| `dusty-blue` | Dusty Blue | `#417A9B` |
| `steam-green` | Steam Green | `#5BA32B` |
| `steam-green-hi` | Steam Green Hi | `#59BF40` |
| `steam-green-lime` | Steam Green Lime | `#A4D007` |
| `steam-orange` | Steam Orange | `#E35E1C` |
| `steam-orange-red` | Steam Orange Red | `#EE563B` |
| `steam-red` | Steam Red | `#D94126` |
| `steam-yellow` | Steam Yellow | `#FFC82C` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `storefront-lightest` | `#CCD8E3` |
| `surface` | `storefront-lighter` | `#A7BACC` |
| `surface-elevated` | `storefront-lightest` | `#CCD8E3` |
| `text-primary` | `storefront-darker` | `#1B2838` |
| `text-secondary` | `storefront-dark` | `#2A475E` |
| `text-tertiary` | `storefront-mid` | `#4E697D` |
| `primary` | `steam-green` | `#5BA32B` |
| `primary-hover` | `steam-green-hi` | `#59BF40` |
| `accent` | `steam-blue` | `#1A9FFF` |
| `accent-hover` | `steam-blue-hi` | `#00BBFF` |
| `warning` | `steam-yellow` | `#FFC82C` |
| `warning-hover` | `steam-orange` | `#E35E1C` |
| `error` | `steam-red` | `#D94126` |
| `success` | `steam-green` | `#5BA32B` |
| `border` | `storefront-light` | `#7C8EA3` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `storefront-darker` | `#1B2838` |
| `surface` | `storefront-dark` | `#2A475E` |
| `surface-elevated` | `chrome-darker` | `#23262E` |
| `text-primary` | `storefront-lightest` | `#CCD8E3` |
| `text-secondary` | `storefront-lighter` | `#A7BACC` |
| `text-tertiary` | `storefront-light` | `#7C8EA3` |
| `primary` | `steam-green` | `#5BA32B` |
| `primary-hover` | `steam-green-hi` | `#59BF40` |
| `accent` | `chalky-blue` | `#66C0F4` |
| `accent-hover` | `steam-blue-hi` | `#00BBFF` |
| `warning` | `steam-yellow` | `#FFC82C` |
| `warning-hover` | `steam-orange` | `#E35E1C` |
| `error` | `steam-red` | `#D94126` |
| `success` | `steam-green` | `#5BA32B` |
| `border` | `chrome-dark` | `#3D4450` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `storefront-darker` | `#1B2838` |
| `on-identity` | `chalky-blue` | `#66C0F4` |
| `primary` | `steam-green` | `#5BA32B` |
| `primary-hover` | `steam-green-hi` | `#59BF40` |
| `accent` | `chalky-blue` | `#66C0F4` |
| `accent-hover` | `steam-blue-hi` | `#00BBFF` |
| `mark` | `chalky-blue` | `#66C0F4` |
| `success` | `steam-green` | `#5BA32B` |
| `warning` | `steam-yellow` | `#FFC82C` |
| `error` | `steam-red` | `#D94126` |
| `text-primary-light` | `storefront-darker` | `#1B2838` |
| `text-primary-dark` | `storefront-lightest` | `#CCD8E3` |
| `background-light` | `storefront-lightest` | `#CCD8E3` |
| `background-dark` | `storefront-darker` | `#1B2838` |
| `surface-light` | `storefront-lighter` | `#A7BACC` |
| `surface-dark` | `storefront-dark` | `#2A475E` |
| `text-secondary-light` | `storefront-dark` | `#2A475E` |
| `text-tertiary-light` | `storefront-mid` | `#4E697D` |
| `border-light` | `storefront-light` | `#7C8EA3` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `roles.colors.primary`

- **allowed:** steam-green, steam-green-hi, steam-green-lime
- **forbidden:** chalky-blue, steam-blue, steam-blue-hi, steam-red, steam-orange, steam-yellow

> 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. 

#### `colorChoice` → `roles.colors.accent`

- **allowed:** chalky-blue, steam-blue, steam-blue-hi, light-blue
- **forbidden:** steam-green, steam-red, steam-orange

> 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. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> 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. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined

> 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. 

#### `contextRestriction` → `roles.colors.accent`

- **forbiddenContexts:** error-state, destructive-action, primary-cta
- **allowedContexts:** hero-headline, brand-badge, inline-link, focus-ring

> 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. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> 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. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 400, 500, 700

> 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. 

### 💡 recommendation (2)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** storefront-darker, storefront-dark, storefront-darkest, storefront-lightest
- **doesNotPairWith:** steam-red, steam-orange, steam-yellow

> 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. 

#### `fontPairing` → `typography.display`

- **requires:** `prose`
- **minSizeRatio:** `1.4`

> 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. 

## 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. 
- **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 (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. 

---

*Generated by the brand-atoms converter. Source: `steam@1.0.0` from the encyclopedia.*