W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Steam
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.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/steam/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/steam/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Steam
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Steam
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Steam
A clear hierarchy in Steam's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ chalky-blue #66C0F4 accent-hover
→ steam-blue-hi #00BBFF background-dark
→ storefront-darker #1B2838 background-light
→ storefront-lightest #CCD8E3 border-light
→ storefront-light #7C8EA3 error
→ steam-red #D94126 identity
→ storefront-darker #1B2838 mark
→ chalky-blue #66C0F4 on-identity
→ chalky-blue #66C0F4 primary
→ steam-green #5BA32B primary-hover
→ steam-green-hi #59BF40 success
→ steam-green #5BA32B surface-dark
→ storefront-dark #2A475E surface-light
→ storefront-lighter #A7BACC text-primary-dark
→ storefront-lightest #CCD8E3 text-primary-light
→ storefront-darker #1B2838 text-secondary-light
→ storefront-dark #2A475E text-tertiary-light
→ storefront-mid #4E697D warning
→ steam-yellow #FFC82C Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from steam)
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 Rules (9 typed constraints)
error · 6 rules
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 rule
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 rules
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.