Steam DESIGN.md

Digital gaming distribution platform with dark, immersive aesthetic. Navy blue gradients (#1b2838), Steam cyan accent (#66c0f4), and commerce-focused UI patterns for the world's largest PC gaming storefront.

1. Visual Theme & Atmosphere

Overall Aesthetic

Steam embraces a dark, industrial gaming design philosophy. The interface feels like a sophisticated PC gaming command center—sleek, functional, and content-forward. Every element prioritizes showcasing games while maintaining efficient navigation through a massive library and storefront.

Mood & Feeling

• Immersive & Cinematic: Dark backgrounds let game artwork take center stage
• Functional Density: Information-rich layouts that reward exploration
• Commerce-Driven: Clear pricing, discounts, and purchase CTAs throughout
• Community-Connected: Reviews, friends activity, and social features integrated seamlessly
• Collection-Oriented: Library organization tools for managing hundreds of games

Design Density

High density with strategic whitespace. Store pages pack significant information (screenshots, reviews, system requirements, pricing) while maintaining scannability. The library interface maximizes game visibility with compact grid/list views.

Visual Character

• Deep navy-to-black gradients as primary surfaces
• Cyan/blue accents for interactive elements
• Green purchase buttons as primary conversion CTA
• Subtle transparency and blur effects
• Game capsule artwork as visual anchors
• Tab-based navigation for content organization
• Horizontal scrolling carousels for content discovery

2. Color Palette & Roles

Primary Dark Theme

Accent Colors

Text Colors

Status & Semantic Colors

Sale & Promotional Colors

3. Typography Rules

Font Stack

css/* Primary app font */
--font-primary: "Motiva Sans", Arial, Helvetica, sans-serif;

/* Fallback system fonts */
--font-fallback: Arial, Helvetica, sans-serif;

/* Marketing/Display */
--font-display: "Motiva Sans Bold", Arial Black, sans-serif;

/* Monospace (system requirements, codes) */
--font-mono: Consolas, Monaco, "Courier New", monospace;

Type Scale

Font Weights

Marketing Typography

4. Component Stylings

Buttons

Primary Purchase Button (Green)

css.button-purchase {
  background: linear-gradient(to bottom, #6fa720 5%, #588a1b 95%);
  border-radius: 2px;
  border: none;
  color: #d2e885;
  font-size: 15px;
  padding: 0 15px;
  height: 30px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.button-purchase:hover {
  background: linear-gradient(to bottom, #8ed629 5%, #6aa621 95%);
  color: #ffffff;
}

Secondary Button (Blue/Gray)

css.button-secondary {
  background: linear-gradient(to bottom, #4c6b8a 5%, #3d5c7a 95%);
  border-radius: 2px;
  color: #c7d5e0;
  font-size: 13px;
  padding: 0 15px;
  height: 30px;
}

.button-secondary:hover {
  background: linear-gradient(to bottom, #5c7b9a 5%, #4d6c8a 95%);
  color: #ffffff;
}

Wishlist Button

css.button-wishlist {
  background: rgba(103, 193, 245, 0.2);
  border: 1px solid #67c1f5;
  border-radius: 2px;
  color: #67c1f5;
  padding: 8px 16px;
}

.button-wishlist:hover {
  background: rgba(103, 193, 245, 0.4);
  color: #ffffff;
}

Text Link Button

css.button-link {
  background: transparent;
  color: #67c1f5;
  padding: 0;
  border: none;
}

.button-link:hover {
  color: #ffffff;
}

Inputs

Search Input

css.search-input {
  background: #316282;
  border: 1px solid #214559;
  border-radius: 3px;
  color: #c7d5e0;
  font-size: 13px;
  padding: 8px 12px;
  width: 100%;
}

.search-input:focus {
  border-color: #67c1f5;
  outline: none;
  background: #3d7a9e;
}

.search-input::placeholder {
  color: #6b8999;
}

Text Input

css.input-text {
  background: #32465a;
  border: 1px solid #233c4d;
  border-radius: 3px;
  color: #c7d5e0;
  font-size: 13px;
  padding: 10px 12px;
}

.input-text:focus {
  border-color: #67c1f5;
  background: #3d5166;
}

Select Dropdown

css.select {
  background: linear-gradient(to bottom, #3d5b72 5%, #2c4459 95%);
  border: 1px solid #233c4d;
  border-radius: 3px;
  color: #c7d5e0;
  font-size: 13px;
  padding: 6px 10px;
}

Cards

Game Capsule Card (Store)

css.game-capsule {
  background: #1e3a4c;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  transition: transform 150ms ease;
}

.game-capsule:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(102, 192, 244, 0.3);
}

.game-capsule-image {
  width: 100%;
  aspect-ratio: 460/215; /* Standard capsule ratio */
}

.game-capsule-info {
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.4);
}

.game-capsule-title {
  color: #c7d5e0;
  font-size: 14px;
  margin-bottom: 4px;
}

Library Game Card

css.library-card {
  background: #1b2838;
  display: flex;
  align-items: center;
  padding: 0;
  margin-bottom: 1px;
  cursor: pointer;
}

.library-card:hover {
  background: #2a475e;
}

.library-card.selected {
  background: #3d6c8e;
}

.library-card-icon {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.library-card-name {
  color: #c7d5e0;
  font-size: 13px;
}

Featured Game Banner

css.featured-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
}

.featured-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-banner-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 30px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

Price Tags

Standard Price

css.price-tag {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-final {
  color: #acdbf5;
  font-size: 13px;
}

Discounted Price

css.price-discounted {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.discount-badge {
  background: #4c6b22;
  color: #a4d007;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 8px;
}

.price-container {
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.price-original {
  color: #738895;
  font-size: 11px;
  text-decoration: line-through;
}

.price-new {
  color: #a4d007;
  font-size: 13px;
}

Review System

Review Summary Badge

css.review-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.review-summary.positive {
  color: #66c0f4;
}

.review-summary.mixed {
  color: #b9a074;
}

.review-summary.negative {
  color: #a34c25;
}

.review-icon {
  width: 16px;
  height: 16px;
}

.review-text {
  font-size: 12px;
}

Thumbs Up/Down

css.review-thumb {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 2px;
  cursor: pointer;
}

.review-thumb.up {
  color: #66c0f4;
}

.review-thumb.down {
  color: #a34c25;
}

.review-thumb:hover {
  background: rgba(255, 255, 255, 0.1);
}

Review Card

css.review-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0;
  padding: 10px;
  border-left: 2px solid #66c0f4; /* or #a34c25 for negative */
}

.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.review-author-avatar {
  width: 32px;
  height: 32px;
}

.review-content {
  color: #c7d5e0;
  font-size: 13px;
  line-height: 18px;
}

Navigation

Main Navigation Bar

css.nav-main {
  background: #171a21;
  height: 104px;
  display: flex;
  flex-direction: column;
}

.nav-top {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 11px;
  color: #b8b6b4;
}

.nav-bottom {
  background: linear-gradient(to right, #1a5076 5%, #1b2838 95%);
  padding: 0 16px;
}

Tab Navigation

css.nav-tabs {
  display: flex;
  gap: 0;
  height: 36px;
}

.nav-tab {
  padding: 0 17px;
  color: #b8b6b4;
  font-size: 13px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.nav-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.nav-tab.active {
  color: #ffffff;
  background: linear-gradient(to bottom, #3c7794 5%, #2d5d77 95%);
}

Library Sidebar

css.library-sidebar {
  width: 260px;
  background: #1b2838;
  border-right: 1px solid #0e1a26;
}

.library-section-header {
  padding: 8px 16px;
  color: #8f98a0;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

Friend Activity Sidebar

css.friends-sidebar {
  width: 240px;
  background: #1b2838;
  border-left: 1px solid #0e1a26;
}

.friend-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 10px;
}

.friend-row:hover {
  background: #2a475e;
}

.friend-avatar {
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: 2px solid #636363; /* changes based on status */
}

.friend-avatar.online {
  border-color: #57cbde;
}

.friend-avatar.in-game {
  border-color: #90ba3c;
}

.friend-info {
  flex: 1;
}

.friend-name {
  color: #c7d5e0;
  font-size: 13px;
}

.friend-status {
  color: #8f98a0;
  font-size: 11px;
}

.friend-status.in-game {
  color: #90ba3c;
}

Achievement Badges

css.achievement-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.achievement-icon {
  width: 64px;
  height: 64px;
  border-radius: 0;
}

.achievement-icon.locked {
  opacity: 0.4;
  filter: grayscale(100%);
}

.achievement-name {
  color: #c7d5e0;
  font-size: 13px;
  font-weight: bold;
}

.achievement-description {
  color: #8f98a0;
  font-size: 12px;
}

.achievement-rarity {
  color: #66c0f4;
  font-size: 11px;
}

Modals

css.modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}

.modal {
  background: #1b2838;
  border: 1px solid #2a475e;
  border-radius: 3px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  max-width: 600px;
}

.modal-header {
  background: linear-gradient(to bottom, #2a475e 5%, #1b2838 95%);
  padding: 12px 16px;
  border-bottom: 1px solid #0e1a26;
}

.modal-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

.modal-body {
  padding: 16px;
  color: #c7d5e0;
}

.modal-footer {
  padding: 12px 16px;
  border-top: 1px solid #0e1a26;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

Tooltips

css.tooltip {
  background: #1b2838;
  border: 1px solid #2a475e;
  border-radius: 3px;
  padding: 8px 12px;
  color: #c7d5e0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  max-width: 300px;
}

Shopping Cart

css.cart-button {
  background: linear-gradient(to bottom, #5c7e10 5%, #4a6409 95%);
  padding: 10px 20px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-icon {
  width: 16px;
  height: 16px;
}

.cart-count {
  background: #d4e157;
  color: #1b2838;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
}

5. Layout Principles

Spacing Scale

Core Layout Structure

┌─────────────────────────────────────────────────────────────┐
│  Global Navigation (Account, Community, Profile)    30px   │
├─────────────────────────────────────────────────────────────┤
│  Main Navigation (Store, Library, Community, Profile) 74px │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────┬────────────────────────────────┬─────────────┐ │
│ │ Sidebar │        Main Content            │   Friends   │ │
│ │         │                                │   Activity  │ │
│ │  220px  │         Flexible               │    240px    │ │
│ │         │    (940px - 1400px)            │  (toggle)   │ │
│ │ (Store  │                                │             │ │
│ │  only)  │                                │             │ │
│ └─────────┴────────────────────────────────┴─────────────┘ │
└─────────────────────────────────────────────────────────────┘

Store Page Layout

┌─────────────────────────────────────────────────────────────┐
│  Featured Carousel (616px × 353px capsules)                 │
├─────────────────────────────────────────────────────────────┤
│  Special Offers Row (horizontal scroll)                     │
├─────────────────────────────────────────────────────────────┤
│  Categories | New & Trending | Top Sellers | Discounts      │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐│
│  │  Game Capsule   │ │  Game Capsule   │ │  Game Capsule   ││
│  │   231×87px      │ │   231×87px      │ │   231×87px      ││
│  └─────────────────┘ └─────────────────┘ └─────────────────┘│
└─────────────────────────────────────────────────────────────┘

Library Layout

┌─────────────────────────────────────────────────────────────┐
│ ┌────────────┬──────────────────────────────────────────┐  │
│ │   Game     │           Game Detail View               │  │
│ │   List     │  ┌────────────────────────────────────┐  │  │
│ │            │  │       Hero Background Image        │  │  │
│ │  260px     │  └────────────────────────────────────┘  │  │
│ │            │  │ Play Button │ Playtime │ Achievements│  │  │
│ │ - Search   │  │                                     │  │  │
│ │ - Filter   │  │ News │ Guides │ Workshop │ DLC      │  │  │
│ │ - Games    │  │                                     │  │  │
│ └────────────┴──────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

Content Widths

Capsule Image Sizes

Whitespace Philosophy

• Information-dense but organized: Clear visual groupings
• Generous margins around carousels: Let content breathe
• Compact list views: Maximize visible games
• Hover reveals: Additional info appears on interaction

6. Depth & Elevation

Shadow System

Surface Hierarchy

┌─────────────────────────────────────────────────────────────┐
│ Modal/Dialog                        #171d25 + border       │
├─────────────────────────────────────────────────────────────┤
│ Dropdown/Popover                    #2a475e                │
├─────────────────────────────────────────────────────────────┤
│ Card/Elevated                       #2a475e or #1e3a4c     │
├─────────────────────────────────────────────────────────────┤
│ Primary Content                     #1b2838                │
├─────────────────────────────────────────────────────────────┤
│ Navigation/Deepest                  #171a21                │
└─────────────────────────────────────────────────────────────┘

Z-Index Scale

Gradient Treatments

css/* Navigation gradient */
.nav-gradient {
  background: linear-gradient(to right, #1a5076 5%, #1b2838 95%);
}

/* Button gradients */
.button-gradient {
  background: linear-gradient(to bottom, #6fa720 5%, #588a1b 95%);
}

/* Feature fade */
.feature-fade {
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

/* Card hover glow */
.card-glow:hover {
  box-shadow: 0 0 15px rgba(102, 192, 244, 0.3);
}

7. Do's and Don'ts

Do's

Don'ts

Content Guidelines

8. Responsive Behavior

Breakpoints

Desktop Scaling

Big Picture Mode (TV/Controller)

Mobile/Steam Deck Adaptations

Touch Targets

Image Handling

9. Agent Prompt Guide

Quick Reference

yamlPrimary Background: #1b2838
Navigation Background: #171a21
Card/Elevated: #2a475e
Input Background: #32465a

Accent Primary (Cyan): #66c0f4
Accent Hover: #67c1f5
Purchase Green: #5c7e10
Wishlist Blue: #4c6b8a

Text Primary: #c7d5e0
Text Secondary: #8f98a0
Text Muted: #6b7785
Text Bright: #ffffff
Text Link: #66c0f4
Price Text: #acdbf5

Discount Green: #a4d007
Review Positive: #66c0f4
Review Negative: #a34c25
Review Mixed: #b9a074

Status Online: #57cbde
Status In-Game: #90ba3c
Status Offline: #636363

Border Radius: 2-3px (minimal)
Border Color: #0e1a26

Font Primary: "Motiva Sans", Arial, sans-serif
Font Size Body: 13px
Font Size Title: 14-26px

Example Prompts

Game Store Card

Create a Steam game card using Steam's design system:
- Card background: #1e3a4c with no border-radius
- Game capsule image: 460×215 aspect ratio
- Title: 14px normal #c7d5e0
- Price tag container with #4c6b22 discount badge
- Discount: bold 14px #a4d007
- Original price: 11px #738895 strikethrough
- Final price: 13px #a4d007
- Review summary: 12px with thumbs icon
- Hover: scale(1.02) with cyan glow

Purchase Button

Design a Steam Add to Cart button:
- Background: gradient from #6fa720 to #588a1b
- Border-radius: 2px
- Text: 15px #d2e885 with subtle text-shadow
- Padding: 0 15px, height 30px
- Hover: gradient lightens to #8ed629, text becomes white
- Include shopping cart icon on left

Review Summary

Create a review indicator for Steam:
- Display thumbs up icon (16px)
- Text: "Very Positive" in #66c0f4
- Subtext: "(12,345 reviews)" in #8f98a0, 11px
- For negative: use #a34c25, thumbs down
- For mixed: use #b9a074

Friend Activity Row

Design a friends sidebar row:
- Container: 240px wide, 48px tall
- Avatar: 32px with status border (2px #90ba3c for in-game)
- Name: 13px #c7d5e0
- Status: 11px #90ba3c showing game name
- Hover: background #2a475e

Price Discount Tag

Create a discounted price display:
- Wrapper: flex row, dark background
- Discount badge: #4c6b22 background, bold #a4d007 text
- Show "-75%" in the badge
- Price stack: column aligned right
- Original: 11px #738895 with line-through
- Final: 13px #a4d007

CSS Variables Template

css:root {
  /* Backgrounds */
  --bg-darkest: #171a21;
  --bg-primary: #1b2838;
  --bg-secondary: #2a475e;
  --bg-tertiary: #1e3a4c;
  --bg-input: #32465a;
  
  /* Accent */
  --accent-primary: #66c0f4;
  --accent-hover: #67c1f5;
  --purchase-green: #5c7e10;
  --wishlist-blue: #4c6b8a;
  
  /* Text */
  --text-primary: #c7d5e0;
  --text-secondary: #8f98a0;
  --text-muted: #6b7785;
  --text-bright: #ffffff;
  --text-link: #66c0f4;
  --text-price: #acdbf5;
  
  /* Status */
  --status-online: #57cbde;
  --status-in-game: #90ba3c;
  --status-offline: #636363;
  
  /* Reviews */
  --review-positive: #66c0f4;
  --review-negative: #a34c25;
  --review-mixed: #b9a074;
  --discount-green: #a4d007;
  
  /* Typography */
  --font-primary: "Motiva Sans", Arial, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 26px;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  
  /* Borders */
  --border-radius: 2px;
  --border-color: #0e1a26;
}

Summary

Steam's design system creates an immersive, commerce-focused digital gaming storefront through:

1. Deep navy palette (#1b2838 → #171a21) that lets game artwork shine
2. Signature cyan accent (#66c0f4) for interactive elements and trust signals
3. Green purchase CTAs (#5c7e10) that drive clear conversion actions
4. Minimal border-radius (2-3px) maintaining industrial, PC-gaming aesthetic
5. Information-dense layouts that reward exploration of massive catalog
6. Social integration via friend activity, reviews, and community features
7. Clear pricing with prominent discounts supporting Steam's sale culture

When implementing Steam-style interfaces, prioritize:

• Dark, immersive backgrounds that showcase game artwork
• Clear price/discount visibility for commerce focus
• Thumbs up/down review sentiment at a glance
• Dense but organized information hierarchy
• Cyan accents for interactive elements, green for purchases
• Friend activity and social proof integration
• Responsive design that scales from desktop to Big Picture mode