What is Steam's primary brand color?

Steam runs a two-voltage system rather than a single primary. The install voltage is a lime gradient from "#a4d007" at the top stop to "#5c7e10" at the bottom, framed in a "#beee11" highlight border — reserved for "Install Steam", "Play", and other commit actions. The secondary voltage is a cyan gradient running "#06bfff" through "#2881a7" (the workhorse fill at 60 occurrences in border and gradient roles) and out to "#2d73ff", used for every navigation pill, "Add to Cart", "Visit Store", and faceted-browse action. The page canvas itself is "#1b2838" — a deep navy that lets both gradient voltages pop without competition.

What typography does Steam use, and what should I substitute?

Steam runs a dual-font split. Motiva Sans (proprietary Valve face, also seen as the in-client UI font) covers display, chrome, and emphasized labels at weights 200, 300, 400, 500, and 700, with display sizes at 26px, 24px, 21px, and 16px. Arial, Helvetica, sans-serif covers the long tail of body, link, and form-control copy at 11px, 12px, 13px, and 15px — 101 captured spans use 11px Arial weight 400 alone. If Motiva is unavailable, Inter at the matching weights is the closest substitute for the chrome layer, and Arial stays as-is for body. Preserve the 1.104px letter-spacing on the 16px Motiva headline tier — that tracking is the system's signature.

What does Steam's shape vocabulary look like?

Steam's radius scale lives at 2px, 3px, 4px, and 10px, with 2px the dominant value at 63 of 131 captured radii. Game tiles, buttons, search bars, dropdowns, and inline avatars all sit at 2px — close enough to a square corner that the chrome reads as angular and dense rather than soft. The 10px radius is reserved for the few rounded-top frame containers like the "Browse Categories" tabs, and 4px appears on a handful of mid-weight modal cards. There is no full-pill geometry anywhere — every CTA is a horizontal rectangle with a 2px corner, which is part of why the gradient fills carry so much of the chrome personality.

Is Steam light mode or dark mode?

Steam is dark-only by design. The four-step navy ladder — "#1b2838" canvas, "#141f2c" rail, "#283645" tile, "#384959" inset — is the entire surface system, with no light-mode equivalent shipped on the web store. Body text falls in cool slate tones ("#c6d4df" subtitle at 325 occurrences, "#8b929a" note at 86, "#738895" muted at 108) rather than warm grey, which keeps the page tonally unified with the navy canvas. White "#ffffff" is reserved for hover-state headers and high-emphasis labels — using it for body copy breaks the immersion.

Can I use this DESIGN.md to build a Steam-style React storefront?

Yes — the file is structured for AI ingestion. Feed it to Claude, Cursor, or Copilot and the agent will reproduce the dual-gradient grammar, 2px-corner geometry, and dark-navy elevation ladder rather than defaulting to a soft white-canvas marketplace shell. You can also reference tokens directly: every hex, font stack, radius value, and gradient stop is a quoted value ready to paste into Tailwind config, CSS variables, or a component library. The 22 component recipes cover the install pill, cyan secondary pill, game tile, search bar, dropdown, sale price tag, queue paddle, and dark form control.

What's missing from this DESIGN.md spec?

Several surfaces fall outside the captured pages. The Steam client (desktop application) chrome differs from the web store in subtle ways — sidebar layout, library grid, friends panel — and is not covered. The community hub, workshop pages, profile customization layer, and individual game-page custom themes (which can override the base palette with publisher art) are out of scope. Mobile and Steam Deck browser views render the same page with breakpoint reflow but were not captured directly. Sale event overlays (Summer Sale, Winter Sale) introduce temporary banner art and per-event gradient overrides that this document does not describe.

Steam Design System

Steam's design system as a DESIGN.md file.

About Steam DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source store.steampowered.com

Gaming & Entertainment
E-commerce & Retail

Steam's storefront reads like a dense PC-enthusiast bulletin board cross-bred with a 2025-era e-commerce surface. The page sits on a four-step dark navy ladder — "#1b2838" for the canvas, "#141f2c" for the global header rail, "#283645" for the game-tile background, "#384959" for the inset hairline that separates carousels. The brand voltage is unmistakable: the lime-to-olive "Install Steam" gradient running "#a4d007" at the top stop down to "#5c7e10" at the bottom, framed in a "#beee11" highlight, reserved for the install pill and "Play" CTAs. Every other action — Add to Cart, Visit Store, Browse Categories — runs a parallel cyan gradient from "#06bfff" through "#2881a7" to "#2d73ff". The result is a two-voltage grammar where the page tells you, by hue alone, what's a commit-action versus a navigation-action.

This file packages the full storefront chrome as a DESIGN.md document on the Google Labs spec. Inside: 22 color tokens covering the navy canvas ladder, the dual gradient stops, slate body text, and structural hairlines; 11 typography styles split across Motiva Sans for chrome and Arial for body, ranging from 11px footer copy through a 26px featured-strip headline; 5 radius tokens with the dominant 2px corner; 9 spacing tokens stepping from 3px through 24px and a 96px section rhythm; and 22 component recipes covering the install pill, cyan secondary pill, dark tile, game-card grid item, gradient header, slate text input, faceted browse pill, sale price tag, and the queue carousel paddle.

Feed this file to Claude, Cursor, or Copilot and the agent produces React surfaces that match Steam's actual chrome — sharp 2px tiles on a navy ladder, dual-gradient pills that distinguish install from add-to-cart, Motiva Sans display headers over Arial body, slate "#c6d4df" subtitle text rather than warm grey. Or reference the tokens directly when building a PC-gaming storefront, a niche-marketplace catalogue, or any product surface where information density matters more than whitespace. The system is worth studying because it inverts the prevailing marketplace convention — instead of a white canvas with one accent and 16px rounded cards, Steam runs a dark forum-density grid with two competing gradient voltages and 2px corners, and it has worked for two decades.

What makes it distinct

Dual gradient grammarlime "#a4d007" to "#5c7e10" for install actions, cyan "#06bfff" through "#2881a7" to "#2d73ff" for every other CTA
Four-step navy canvas ladder"#1b2838" page, "#141f2c" rail, "#283645" tile, "#384959" inset hairline, layered as elevation cues
2px corner radius dominates63 of 131 captured radii sit at 2px, giving the chrome a sharp 2003-enthusiast-forum geometry rather than the 12-16px rounding most marketplaces ship today
Dual-font splitMotiva Sans 200-700 for display and chrome, Arial 11-15px for the long tail of body and link copy
Cool slate body text"#c6d4df" subtitle and "#8b929a" note carry 90% of running copy; pure white is reserved for headers and hover states

Live at store.steampowered.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

store.steampowered.com

Explore Steam

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Steam design system FAQ

Common questions about Steam's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Steam Store — official site

Valve's digital PC games storefront and Steam client download landing page.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Steam in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→