---
version: alpha
name: Steam
description: A dark blue-black gradient cavern where Motiva Sans keeps the chrome quiet, the classic luminous Steam blue carries every link and live region, and a dense grid of game capsules turns the whole storefront into a glowing shelf — PC-gaming retail built for browsing thousands of titles in the dark.

colors:
  # Surface / canvas — the signature dark navy gradient
  background: "#1b2838"        # the dominant store canvas — mid-navy body color
  background-top: "#171a21"    # near-black navy at the top of the page gradient (header zone)
  background-deep: "#16202d"   # deep navy panel / content-well floor
  surface: "#2a475e"           # raised panel / capsule hover well — the lighter steel-blue
  surface-raised: "#384959"    # secondary panel, sub-header chrome
  surface-tint: "#32475e"      # translucent capsule fill — was rgba(20,31,44,0.8)/(163,186,211,.2) over navy — flattened to opaque

  # Ink / text
  ink: "#ffffff"               # primary text and headings on the dark canvas
  ink-secondary: "#c6d4df"     # the pale blue-gray body text — the workhorse reading color
  ink-muted: "#8b929a"         # captions, meta, dimmed labels
  ink-faint: "#5e6d7c"         # deepest dimmed text, disabled chrome

  # Brand accent — the classic Steam blue family
  primary: "#1a9fff"           # the luminous Steam blue — links, active tabs, focus, live highlights
  primary-bright: "#66c0f4"    # the lighter sky-blue link/hover tint (well-known Steam brand value)
  primary-deep: "#2f89bc"      # active home-tab fill, pressed blue
  primary-darker: "#2881a7"    # deep blue panel headers / hover wells

  # Action green — the "Install Steam" / buy CTA gradient and discount badges
  cta: "#5c7e10"              # install-button gradient start — olive green
  cta-bright: "#a1bf07"       # install-button gradient end — bright lime-green
  cta-text: "#d2e885"        # pale-green label text on the green CTA
  discount: "#4c6b22"        # the discount/price-block green well
  discount-text: "#beee11"   # the bright green "-50%" savings number

  # Borders
  border: "#000000"           # the hard 1px black hairline that separates capsules and panels
  border-soft: "#3d4450"      # subtle steel divider on raised panels
  border-faint: "#384959"     # faint inner divider — was rgba(255,255,255,0.14) over navy — flattened

  # Shadow tint
  shadow-soft: "#000000"      # the pure-black glow used in 0 0 5px drop/inset shadows

typography:
  # Steam uses Motiva Sans throughout (Valve's bespoke face), Arial as the web fallback.
  display:
    fontFamily: "Motiva Sans, Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  heading-section:
    fontFamily: "Motiva Sans, Arial, Helvetica, sans-serif"
    fontSize: 21px
    fontWeight: 300
    lineHeight: 1.71
    letterSpacing: 1.47px
    textTransform: uppercase
  heading-sub:
    fontFamily: "Motiva Sans, Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-large:
    fontFamily: "Motiva Sans, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Motiva Sans, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-small:
    fontFamily: "Motiva Sans, Arial, Helvetica, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  nav-link:
    fontFamily: "Motiva Sans, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.42px
    textTransform: uppercase
  menu-tab:
    fontFamily: "Motiva Sans, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.19
    letterSpacing: 1.1px
    textTransform: uppercase
  link:
    fontFamily: "Motiva Sans, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.48px
    textTransform: uppercase
  button-ui:
    fontFamily: "Motiva Sans, Arial, Helvetica, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Motiva Sans, Arial, Helvetica, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  # 5px-derived scale — Steam's densest internal pad is 5px, scaling to 36px section gaps.
  xs: 3px
  sm: 5px
  md: 10px
  lg: 12px
  xl: 20px
  2xl: 36px
  3xl: 45px

rounded:
  # Steam is almost-square — tiny 2-3px softening, never a true pill.
  none: 0px
  xs: 2px
  sm: 3px
  md: 4px
  lg: 10px

components:
  # Install Steam / buy CTA — the green gradient button (flattened gradient → solid bright end)
  button-cta:
    backgroundColor: "{colors.cta-bright}"
    textColor: "{colors.border}"        # was {colors.cta-text} (#d2e885 on #a1bf07 = 1.57:1); border = #000000 (pure black) on lime #a1bf07 = 9.97:1 ✓
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 5px 12px
  button-cta-hover:
    backgroundColor: "{colors.cta}"
    textColor: "{colors.ink}"

  # Standard blue action button (the translucent steel button, e.g. "Add to Cart" chrome)
  button-primary:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 5px 12px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"

  # Neutral / "Advanced Search" steel button — translucent light fill on navy
  button-neutral:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-small}"
    rounded: "{rounded.xs}"
    padding: 6px 10px
  button-neutral-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Game capsule card — the core grid unit
  card:
    backgroundColor: "{colors.background-deep}"
    textColor: "{colors.ink-secondary}"
    rounded: "{rounded.sm}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Featured / large promo panel
  panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    rounded: "{rounded.sm}"
    padding: 12px

  # Search input — the rounded-left dark field in the header
  input:
    backgroundColor: "{colors.background-deep}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.xs}"
    padding: 0px 10px
  input-focus:
    backgroundColor: "{colors.background-deep}"
    textColor: "{colors.ink}"

  # Top navigation bar (the near-black header)
  nav-bar:
    backgroundColor: "{colors.background-top}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.menu-tab}"
    padding: 12px 20px

  # Sub-menu tab (STORE / COMMUNITY / ABOUT) — active state goes blue
  tab:
    backgroundColor: "{colors.background-top}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.menu-tab}"
    rounded: "{rounded.none}"
    padding: 10px 12px
  tab-active:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.ink}"

  # Inline link
  link:
    textColor: "{colors.primary-bright}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px

  # Discount / savings badge — the bright-green "-50%" chip
  badge:
    backgroundColor: "{colors.discount}"
    textColor: "{colors.discount-text}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 3px 5px
---

# Steam Design System

## Overview

Steam lives in the dark. The storefront pours itself across a deep blue-black gradient that fades from a near-black navy at the top (`{colors.background-top}`) through the body mid-navy (`{colors.background}`) and pools into deep wells (`{colors.background-deep}`) where the content sits. This isn't fashionable "dark mode" — it's the original PC-gaming darkroom, a canvas designed so that thousands of brightly-art-directed game capsules can glow against it like lit storefronts on a night street. The whole layout is a dense grid: rows of game capsules, discount shelves, carousels, and tag lists packed tight, each capsule its own piece of key art separated by a hard one-pixel black hairline (`{colors.border}`). The page is a catalog first and a marketing site second, and every spacing decision reflects that — Steam wants more games on screen, not more whitespace.

The single most recognizable color is the luminous Steam blue (`{colors.primary}`), the cool electric tone that carries links, active tabs, live highlights, and focus. It pairs with a softer sky-blue (`{colors.primary-bright}`) for link hover and a pale blue-gray (`{colors.ink-secondary}`) that does the heavy lifting for body text — Steam almost never sets long copy in pure white; the slightly-desaturated `{colors.ink-secondary}` is gentler against the navy for reading. Pure white (`{colors.ink}`) is reserved for headings, hovered items, and things that need to pop. Type is Motiva Sans top to bottom — Valve's bespoke humanist sans — with Arial as the web fallback. Section headings render in a thin weight (300), uppercase, with wide letter-spacing (`{typography.heading-section}`), giving the chrome a quiet, slightly austere voice that stays out of the games' way.

The two loud accents are both commercial. The green family does money: the "Install Steam" and buy buttons are a green gradient from olive (`{colors.cta}`) to bright lime (`{colors.cta-bright}`), and discounts shout in a saturated green block (`{colors.discount}`) with an almost-fluorescent green savings number (`{colors.discount-text}`) — Steam's instantly-readable "this is on sale" signal. Shapes are nearly square: 2-3px corner softening (`{rounded.xs}`, `{rounded.sm}`) is the norm, never a true pill. Depth comes not from soft Material shadows but from black glows — a `0 0 5px` pure-black halo (`{colors.shadow-soft}`) and inset darkening that make capsules feel recessed into the navy. It's a system engineered to make game art look vivid and prices impossible to miss, while the interface itself recedes into the dark.

**Key Characteristics:**
- Dark blue-black gradient canvas (`{colors.background-top}` → `{colors.background}` → `{colors.background-deep}`) — the original gaming darkroom
- Dense, grid-first layout: rows of game capsules packed tight, separated by hard 1px black hairlines (`{colors.border}`)
- The classic luminous Steam blue (`{colors.primary}`) for links, active tabs, focus, and live regions; sky-blue (`{colors.primary-bright}`) for link hover
- Body copy in pale blue-gray (`{colors.ink-secondary}`), not pure white — easier reading against navy; white (`{colors.ink}`) reserved for headings and hover
- Motiva Sans throughout (`{typography.body}`) — Valve's bespoke sans, Arial fallback
- Thin (300), uppercase, wide-tracked section headings (`{typography.heading-section}`) — quiet, austere chrome
- Green CTA gradient (`{colors.cta}` → `{colors.cta-bright}`) for "Install Steam" / buy, with pale-green label (`{colors.cta-text}`)
- Bright fluorescent-green discount system (`{colors.discount}` block, `{colors.discount-text}` number) — the unmistakable on-sale signal
- Near-square geometry: 2-3px corner softening (`{rounded.xs}`, `{rounded.sm}`), never a pill
- Black-glow depth (`0 0 5px` halos + insets, `{colors.shadow-soft}`) — capsules recessed into the navy, not lifted by Material shadows

## Colors

### Surface & Canvas
- **Top Navy** (`{colors.background-top}`): The near-black navy at the top of the page gradient — the header and store-bar zone.
- **Body Navy** (`{colors.background}`): The dominant mid-navy store canvas behind everything.
- **Deep Well** (`{colors.background-deep}`): The darkest navy — content wells, capsule floors, input fields.
- **Steel Panel** (`{colors.surface}`): The lighter steel-blue raised panel and capsule-hover well.
- **Raised Panel** (`{colors.surface-raised}`): Secondary panels and sub-header chrome.
- **Capsule Tint** (`{colors.surface-tint}`): Translucent capsule/button fill — a flattened translucent steel over navy.

### Ink / Text
- **White** (`{colors.ink}`): Headings, hovered items, things that need to pop.
- **Pale Blue-Gray** (`{colors.ink-secondary}`): The workhorse body-reading color — gentler than white on navy.
- **Muted Gray** (`{colors.ink-muted}`): Captions, meta, dimmed labels.
- **Faint Gray** (`{colors.ink-faint}`): Deepest dimmed text and disabled chrome.

### Brand Accent — Steam Blue
- **Steam Blue** (`{colors.primary}`): The luminous signature blue — links, active tabs, focus, live highlights.
- **Sky Blue** (`{colors.primary-bright}`): The lighter link / hover tint.
- **Deep Blue** (`{colors.primary-deep}`): Active home-tab fill and pressed-blue states.
- **Header Blue** (`{colors.primary-darker}`): Deep blue panel headers and hover wells.

### Action Green (Commerce)
- **CTA Olive → Lime** (`{colors.cta}`, `{colors.cta-bright}`): The "Install Steam" / buy-button green gradient.
- **CTA Label** (`{colors.cta-text}`): The pale-green text on the green button.
- **Discount Block** (`{colors.discount}`): The saturated-green savings well.
- **Savings Number** (`{colors.discount-text}`): The fluorescent-green "-50%" figure — the on-sale flag.

### Borders & Shadow
- **Black Hairline** (`{colors.border}`): The hard 1px black line separating capsules and panels.
- **Steel Divider** (`{colors.border-soft}`, `{colors.border-faint}`): Subtle dividers on raised panels (the faint one flattened from a translucent white).
- **Black Glow** (`{colors.shadow-soft}`): The pure-black tint used by all glow/inset shadows.

## Typography

### Font Family
- **Primary**: `Motiva Sans` — Valve's bespoke humanist sans, used for display, body, and UI alike. Fallbacks: `Arial, Helvetica, sans-serif`.
- **No monospace**: Steam has no dedicated mono face in the storefront chrome.
- **Voice**: a single family, with hierarchy built from weight (300 → 400 → 700), case (uppercase chrome), and wide letter-spacing on headings and tabs.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display` | 24px / 400 — large featured / promo headings |
| `heading-section` | 21px / 300 / uppercase / +1.47px — the thin, wide-tracked section titles ("DISCOVERY QUEUE") |
| `heading-sub` | 20px / 400 — sub-section headings |
| `body-large` | 16px / 400 — lead copy, larger descriptions |
| `body` | 14px / 400 — standard body and capsule copy |
| `body-small` | 13px / 400 — dense supporting copy, neutral buttons |
| `nav-link` | 14px / 400 / uppercase — top utility nav links |
| `menu-tab` | 16px / 700 / uppercase / +1.1px — the main STORE / COMMUNITY tabs |
| `link` | 16px / 500 / uppercase — emphasized uppercase links |
| `button-ui` | 15px / 400 — button labels |
| `caption` | 11px / 400 — fine print, tags, timestamps |

### Principles
- **One face, weight + case for hierarchy**: Motiva Sans everywhere; thin-300 headings, bold-700 tabs, regular-400 body.
- **Uppercase chrome**: navigation, tabs, and section titles go uppercase with wide tracking — a quiet, system-catalog voice.
- **Read in blue-gray, not white**: long copy sits in `{colors.ink-secondary}` for comfort against the dark navy; white is for emphasis.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Steam is dense — its most common internal pad is a tight 5px (`{spacing.sm}`), scaling through 10-12px (`{spacing.md}`, `{spacing.lg}`) for component gutters up to 36px (`{spacing.2xl}`) section gaps. Whitespace is a luxury Steam mostly declines; the goal is maximum games-per-screen.

### Grid & Container
- Centered content column roughly 940-1000px wide, sitting in the navy gradient
- A persistent near-black top bar (account/utility nav) above the main STORE/COMMUNITY tab bar
- The body is a stack of horizontal capsule rows, carousels, and multi-column discount shelves
- Capsules align to a tight grid with 1px black hairline separation; hover reveals the steel-blue well

### Whitespace Philosophy
- **Density over breathing room**: pack capsules tight — the catalog feel is the point
- **Hairlines, not gaps**: a 1px black line (`{colors.border}`) separates items more often than empty space
- **Sections breathe a little**: 36px (`{spacing.2xl}`) gaps mark major row groups

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; flat navy fill on a hairline grid | Most capsules at rest, content wells |
| Glow (Level 1) | `0 0 5px {colors.shadow-soft}` black halo | Hovered capsules, active controls |
| Float (Level 2) | `2px 2px 10px rgba(0,0,0,0.6)` → opaque `{colors.shadow-soft}` | Floating panels, dropdowns, tooltips |
| Spread (Level 3) | `0 0 10px 5px {colors.shadow-soft}` | Modal scrims, large overlay glows |
| Focus Ring | `outline: 1px {colors.primary}` blue glow | Keyboard / active focus on inputs and controls |

**Shadow Philosophy**: Steam doesn't lift things with soft Material drop shadows — it sinks them with black. The signature is a `0 0 5px` pure-black glow (`{colors.shadow-soft}`) that surrounds and recesses elements into the navy, plus inset darkening on wells. On a dark canvas, "depth" means darker, not a floating offset shadow. The hard 1px black hairline does as much depth work as any blur. The one offset drop (`2px 2px 10px`) appears on true floating overlays like dropdowns.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Tabs, the page grid, full-bleed banners |
| `xs` | 2px | Buttons, inputs, badges — the default near-square softening |
| `sm` | 3px | Capsule cards, panels |
| `md` | 4px | The occasional slightly-rounder control |
| `lg` | 10px | Pill-ish utility links and rounded tags |

The system is overwhelmingly square — a 2-3px corner softening is as round as most of Steam gets. There is no true pill; even the roundest element (`{rounded.lg}`) is a modest 10px. The near-square geometry reinforces the tight, technical catalog feel.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-cta`** — The green commerce button ("Install Steam", buy). Bright-lime fill (`{colors.cta-bright}`), pale-green label (`{colors.cta-text}`), near-square. Authored as the bright end of the green gradient; hover deepens toward olive (`{colors.cta}`).
- **`button-primary`** — The blue action button: deep Steam blue (`{colors.primary-deep}`) fill, white text. Hover brightens to luminous Steam blue (`{colors.primary}`).
- **`button-neutral`** — The translucent steel utility button ("Advanced Search"): capsule-tint fill (`{colors.surface-tint}`), blue-gray text. Hover lightens to the steel panel (`{colors.surface}`).

### Cards
- **`card`** — The game capsule: deep-well navy floor (`{colors.background-deep}`), 3px corners, no inner padding (key art fills it). **`card-hover`** lights to the steel-blue well (`{colors.surface}`) with a black glow.
- **`panel`** — Featured / promo panels in steel-blue (`{colors.surface}`).

### Inputs
- **`input`** — The dark search field: deep-well navy (`{colors.background-deep}`), white text, near-square left corners. **`input-focus`** holds the dark fill and gains the blue focus glow.

### Navigation
- **`nav-bar`** — The near-black top bar (`{colors.background-top}`), uppercase blue-gray utility links.
- **`tab`** / **`tab-active`** — The STORE / COMMUNITY / ABOUT tabs: blue-gray at rest, the active tab filling deep Steam blue (`{colors.primary-deep}`) with white text.

### Accent & Markers
- **`link`** / **`link-hover`** — Sky-blue links (`{colors.primary-bright}`) that brighten to white on hover.
- **`badge`** — The discount chip: saturated-green block (`{colors.discount}`) with the fluorescent-green savings number (`{colors.discount-text}`).

## Do's and Don'ts

### Do
- Build on the dark navy gradient (`{colors.background-top}` → `{colors.background}` → `{colors.background-deep}`) — the dark canvas is the whole identity
- Pack capsules into a tight grid separated by 1px black hairlines (`{colors.border}`), not generous whitespace
- Use the luminous Steam blue (`{colors.primary}`) for links, active tabs, focus, and live highlights
- Set long body copy in pale blue-gray (`{colors.ink-secondary}`), reserving pure white (`{colors.ink}`) for headings and hover
- Use the green gradient (`{colors.cta}` → `{colors.cta-bright}`) only for commerce CTAs — "Install Steam", buy, add to cart
- Signal discounts with the green block (`{colors.discount}`) and fluorescent-green number (`{colors.discount-text}`) — Steam's universal on-sale flag
- Set everything in Motiva Sans (`{typography.body}`); make headings thin (300), uppercase, wide-tracked (`{typography.heading-section}`)
- Keep corners near-square (`{rounded.xs}`, `{rounded.sm}`) and use black glows (`0 0 5px`, `{colors.shadow-soft}`) for depth, not soft drop shadows

### Don't
- Don't lighten the canvas to white — Steam is a darkroom; game art glows against navy, not against paper
- Don't set body copy in pure white — the slightly-muted blue-gray (`{colors.ink-secondary}`) is the comfortable reading color here
- Don't use the green family for anything but commerce — green means "buy" or "on sale", never decoration
- Don't round generously — there is no pill; stay at 2-3px (`{rounded.xs}`, `{rounded.sm}`)
- Don't lift elements with soft Material drop shadows — use black glows and insets to recess them into the navy
- Don't space capsules apart with big gaps — density and 1px hairlines are the catalog signature
- Don't make the active tab anything but deep Steam blue (`{colors.primary-deep}`) — that blue-fill is how Steam shows "you are here"
- Don't introduce a second display typeface — Motiva Sans with varied weight and case carries everything

---

## Responsive Behavior

### Breakpoints
*(Dembrandt surfaced no explicit breakpoints; the table maps to the store's observed responsive behavior.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <600px | Single-column capsule stack; top nav collapses to a menu; search becomes full-width; tabs scroll horizontally |
| Tablet | 600–910px | Two-up capsule grid; carousels show fewer slides; sidebar tag lists drop below content |
| Desktop | 910–1399px | Full centered ~940px layout; multi-column discount shelves; persistent top bar + tab bar |
| Large | ≥1400px | Content column stays centered and capped; the navy gradient fills the wider viewport margins |

### Touch Targets
- Buttons and tabs run with `5px 12px`–`10px 12px` padding; the dense grid relies on capsule art being the tap target
- Carousel arrows and dropdown toggles are sized for cursor first, tap second

### Collapsing Strategy
- **Navigation**: the utility top bar and main tabs collapse to a hamburger; tabs become a horizontal scroller
- **Grid**: multi-column capsule rows reflow from 4-up toward 2-up then 1-up
- **Carousels**: featured carousels reduce visible slides and shrink arrows
- **Type**: section headings hold their thin uppercase treatment but reduce size

### Image Behavior
- Game capsule art is the layout — fixed box-art aspect ratios fill each card; on small screens capsules go full-width
- Featured hero banners crop to a focal point rather than letterboxing

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Body Navy (`{colors.background}`), gradient top Top Navy (`{colors.background-top}`)
- Text: White headings (`{colors.ink}`), blue-gray body (`{colors.ink-secondary}`)
- Brand accent: Steam Blue (`{colors.primary}`), link Sky Blue (`{colors.primary-bright}`)
- Commerce: green CTA (`{colors.cta-bright}`), discount green (`{colors.discount}` / `{colors.discount-text}`)
- Border: black hairline (`{colors.border}`)
- Corners: near-square (`{rounded.xs}` / `{rounded.sm}`)

### Example Component Prompts

- "Create a Steam storefront canvas: a vertical gradient from Top Navy (`{colors.background-top}`) into Body Navy (`{colors.background}`), a near-black top bar with uppercase blue-gray (`{colors.ink-secondary}`) utility links, and a STORE/COMMUNITY tab bar where the active tab fills deep Steam blue (`{colors.primary-deep}`) in white Motiva Sans (`{typography.menu-tab}`)"
- "Build a game capsule card: deep-well navy (`{colors.background-deep}`) floor, 3px corners (`{rounded.sm}`), full-bleed key art, a 1px black hairline (`{colors.border}`) separating it from neighbors; on hover light the well to steel-blue (`{colors.surface}`) with a `0 0 5px` black glow (`{colors.shadow-soft}`)"
- "Make the Install Steam button: bright-lime green (`{colors.cta-bright}`) fill, pale-green label (`{colors.cta-text}`) in Motiva Sans (`{typography.button-ui}`), 2px corners (`{rounded.xs}`), 5px 12px padding; hover deepens toward olive (`{colors.cta}`)"
- "Render a discount badge: saturated-green block (`{colors.discount}`) with a fluorescent-green '-50%' number (`{colors.discount-text}`) in `{typography.button-ui}`, near-square corners (`{rounded.xs}`)"
- "Create a section header: thin-weight (300) uppercase Motiva Sans with wide letter-spacing (`{typography.heading-section}`) in pale blue-gray (`{colors.ink-secondary}`), e.g. 'DISCOVERY QUEUE', over the navy canvas"
- "Build the dark search input: deep-well navy (`{colors.background-deep}`) fill, white text, 2px corners (`{rounded.xs}`); on focus add a 1px Steam-blue (`{colors.primary}`) glow ring"

### Iteration Guide

1. Start with the navy gradient canvas (`{colors.background-top}` → `{colors.background}`). If your background is light, you've lost Steam — it's a darkroom.
2. Pack content into a dense capsule grid with 1px black hairlines (`{colors.border}`), not airy whitespace.
3. Use the luminous Steam blue (`{colors.primary}`) for links/active/focus, sky-blue (`{colors.primary-bright}`) for hover. Reserve green for commerce only.
4. Set body in blue-gray (`{colors.ink-secondary}`), headings/hover in white (`{colors.ink}`). Headings: thin 300, uppercase, wide-tracked.
5. Keep corners near-square (`{rounded.xs}` / `{rounded.sm}`) — no pills.
6. Build depth with black glows and insets (`0 0 5px`, `{colors.shadow-soft}`), not soft offset drop shadows.
7. The active tab is always a deep-Steam-blue fill (`{colors.primary-deep}`) — that's how Steam shows the current section. Discounts are always the green block + fluorescent number.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Steam. Brand names and trademarks belong to their respective owners.