---
version: alpha
name: Valve
description: A stark dark industrial canvas where self-hosted Apercu — in its widest weight extremes — grounds a minimal three-color palette of near-black, white, and a single red-orange accent that acts as the entire brand heartbeat.

colors:
  # Surface / canvas
  background: "#0f0f0f"           # near-black body canvas — the dominant industrial ground /* estimated from dark site */
  surface: "#1a1a1a"              # raised section / card well — slightly lifted dark panel /* estimated */
  surface-light: "#ffffff"        # white content band (projects, careers sections)

  # Ink / text
  ink: "#ffffff"                  # primary text on dark canvas — the workhorse reading color
  ink-secondary: "#b0b0b0"        # supporting copy on dark backgrounds /* estimated */
  ink-dark: "#000000"             # text on white content bands
  ink-dark-secondary: "#585758"   # muted body copy on white — the measured near-neutral gray extracted from site

  # Brand accent — the signature orange-red
  primary: "#f74843"              # Valve red-orange — CTAs, links, the single accent across the entire site
  primary-hover: "#fb9d9b"        # lightened link hover state — extracted from site interaction delta
  primary-dark: "#d23d39"         # pressed / deepened variant — extracted hover-darkening

  # State / interaction
  link-default: "#f74843"         # links at rest = primary
  link-hover: "#ffffff"           # links flip to white on hover — extracted from dembrandt delta

  # Border
  border: "#f74843"               # the bottom-border input underline — accent rule separating field from field /* from extraction */
  border-subtle: "#2a2a2a"        # faint divider between dark sections /* estimated */

  # Shadow tint
  shadow-soft: "#000000"          # pure-black base for any drop shadows

typography:
  # Valve uses the self-hosted Apercu grotesk across the entire site — in extreme weight contrast.
  # Black (900) for every headline; ultralight (200) for body and navigation.
  # Closest Google Font: Barlow (condensed grotesque with similar weight range) or Raleway.
  # Web fallback: -apple-system, system-ui, sans-serif (from extracted source).
  display-hero:
    fontFamily: "apercu, Barlow, -apple-system, system-ui, sans-serif"
    fontSize: 70px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0px
  display:
    fontFamily: "apercu, Barlow, -apple-system, system-ui, sans-serif"
    fontSize: 38px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0px
  heading-section:
    fontFamily: "apercu, Barlow, -apple-system, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "apercu, Barlow, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "apercu, Barlow, -apple-system, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 200
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "apercu, Barlow, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 200
    lineHeight: 1.6
    letterSpacing: 0px
  nav-link:
    fontFamily: "apercu, Barlow, -apple-system, system-ui, sans-serif"
    fontSize: 19px
    fontWeight: 200
    lineHeight: 1.6
    letterSpacing: 0px
  button-ui:
    fontFamily: "apercu, Barlow, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0px
  caption:
    fontFamily: "apercu, Barlow, -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0px

spacing:
  # Generous scale — Valve's site is expansive and deliberate, not dense.
  xs: 10px
  sm: 20px
  md: 40px
  lg: 50px
  xl: 80px
  2xl: 100px
  3xl: 170px

rounded:
  # Valve is strictly sharp — zero border radius everywhere.
  none: 0px

components:
  # Primary CTA — the red-orange action block
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.ink}"

  # Ghost / outline button — used on lighter sections
  button-ghost:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-ghost-hover:
    backgroundColor: "{colors.ink-dark-secondary}"
    textColor: "{colors.ink}"

  # Section card — project or game listing block
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 50px 50px
  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-dark}"
    rounded: "{rounded.none}"
    padding: 50px 50px

  # Text input — the minimal underline-only field
  input:
    backgroundColor: "{colors.background}"       # was rgba(0,0,0,0) — opaque dark ground equivalent
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"

  # Navigation bar — the near-black header, ultralight weight links
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 50px

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

  # Badge — minimal label, no fill
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
---

# Valve Design System

## Overview

Valve's corporate site is an exercise in industrial restraint. The canvas is near-black (`{colors.background}`), deep and deliberate, and against it the entire design vocabulary reduces to three things: weight, whitespace, and one red-orange signal. There is no gradient, no glass, no multi-hue palette — just black ground, white text, and `{colors.primary}` burning through at every link, every call-to-action, every underlined input border. The darkness isn't atmospheric in the way Steam's navy is; it's structural, almost warehouse-like. It says: we make things, we ship things, we don't dress windows.

The single most arresting design decision is the typography. Valve self-hosts Apercu grotesk and uses it in two extreme weights — 900 Black for every headline, 200 Ultralight for every line of body copy and navigation. There is almost nothing in between. A section heading at `{typography.display-hero}` feels industrial-stencil; the body that follows at `{typography.body}` is nearly whisper-thin. This is not a polished tech-company hierarchy with a modulated 4-step ramp — it is a blunt 900/200 contrast that makes the page feel designed by engineers who knew exactly one rule and applied it with absolute conviction. The weight gap IS the design system.

Shapes are strictly square (`{rounded.none}`) — no softening anywhere. Even the newsletter input is a borderless underline field with no radius, no container, just a thin `{colors.primary}` line beneath the cursor. Spacing is expansive: large 50-100px section padding, generous whitespace between text blocks. This is a slow, confident site that assumes you're there to read about a company, not to scan a catalog. The effect — near-black, sharp, ultralight body against black headlines, one red signal — lands somewhere between a modernist print zine and a factory directory.

**Key Characteristics:**
- Near-black industrial canvas (`{colors.background}`) as the complete visual ground
- Three-color palette: near-black, white, and `{colors.primary}` — the single accent that handles every signal
- Apercu in 900 Black for headings (`{typography.display-hero}`, `{typography.display}`), 200 Ultralight for body (`{typography.body}`) — a binary weight contrast, nothing in between
- Strictly square geometry (`{rounded.none}`) — no border radius anywhere in the system
- Generous spacing (`{spacing.lg}`, `{spacing.xl}`, `{spacing.2xl}`) — the site breathes, it doesn't pack
- Links at `{colors.primary}` that flip to white (`{colors.link-hover}`) on hover — the only color interaction
- Underline-only input fields: transparent container, `{colors.primary}` bottom border, `{spacing.xs}` 10px 0px padding
- White content bands (`{colors.surface-light}`) for careers/about sections — alternating dark/light rhythm
- No shadows, no gradients, no decorative elements — depth comes from color contrast alone
- Linear 0.25s transitions on all interactive elements — mechanical, non-organic timing

## Colors

### Surface & Canvas
- **Near-Black** (`{colors.background}`): The dominant industrial body canvas. Everything lives here.
- **Dark Panel** (`{colors.surface}`): Slightly lifted well for project cards and section blocks.
- **White Band** (`{colors.surface-light}`): Clean white content sections — careers, some editorial areas.

### Ink / Text
- **White** (`{colors.ink}`): Primary reading text and headings on dark backgrounds.
- **Pale Gray** (`{colors.ink-secondary}`): Supporting copy, sub-headings on dark ground.
- **Black** (`{colors.ink-dark}`): Text on white content bands.
- **Warm Near-Neutral** (`{colors.ink-dark-secondary}`): Muted body copy on white — a faint warm gray extracted from the site palette.

### Brand Accent
- **Valve Red-Orange** (`{colors.primary}`): The single accent color for the entire system — links, CTA buttons, input underlines, hover states. Applied nowhere decoratively, only functionally.
- **Lightened Hover** (`{colors.primary-hover}`): The washed-out link hover tint on dark — links lighten rather than darken.
- **Pressed Deep** (`{colors.primary-dark}`): Button pressed / active deepening.

### Interaction States
- **Link at Rest** (`{colors.link-default}`): Same as primary — accent color signals clickability.
- **Link on Hover** (`{colors.link-hover}`): Pure white — the hover flips the link from accent to contrast, rather than a typical shade transition.

### Borders & Shadow
- **Accent Rule** (`{colors.border}`): The `{colors.primary}` bottom-border line under input fields — the only border in the system.
- **Divider** (`{colors.border-subtle}`): Faint near-black section divider between dark panels.
- **Shadow Base** (`{colors.shadow-soft}`): Pure black — used if any shadow is needed, though the flat system rarely does.

## Typography

### Font Family
- **Primary**: `apercu` — Valve's self-hosted grotesque, four weights (regular, medium, bold, black) with a WOFF stack. Closest Google Font substitute: `Barlow` or `Raleway` for the weight-range matching. Fallbacks: `-apple-system, system-ui, sans-serif`.
- **No secondary or monospace face**: Apercu handles every context — display, body, UI, nav. There is no decorative or code type.
- **Voice**: The 900/200 weight binary is the entire hierarchy. The font choice itself is unremarkable; the weight contrast is everything.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 70px / 900 — primary hero headlines ("We make games, Steam, and hardware") |
| `display` | 38px / 900 — section-level headings, product names |
| `heading-section` | 22px / 900 — sub-section titles |
| `heading-sub` | 20px / 900 — card and component headings |
| `body-large` | 22px / 200 — lead paragraphs and longer intro copy |
| `body` | 20px / 200 — standard body text and nav links |
| `nav-link` | 19px / 200 — header navigation (thin, recessive) |
| `button-ui` | 16px / 700 — button labels (the one mid-weight usage) |
| `caption` | 12px / 300 — fine print, timestamps, small labels |

### Principles
- **Binary weight contrast**: 900 Black for everything structural, 200 Ultralight for everything that reads. No 400, no 500.
- **Single family, no exceptions**: Apercu handles display, body, nav, and UI simultaneously.
- **No uppercase, no letter-spacing**: the system is set in sentence or title case with natural tracking — it doesn't reach for the loud all-caps style of gaming peers like Steam or Xbox.
- **Size, not spacing, marks hierarchy**: sections are distinguished by a large jump in font size and a weight flip, not by tracking or casing.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 10px. Valve's site is deliberately unhurried — the most common padding values are 50px (`{spacing.lg}`) and 100px (`{spacing.2xl}`) for section gutters. Internal component padding runs at 10-20px (`{spacing.xs}`, `{spacing.sm}`). The site never densifies; whitespace is structural breathing room, not wasted pixels.

### Grid & Container
- Full-width sections that span the viewport with centered content columns
- Approx 1200-1360px max layout width (per extracted breakpoints)
- Two-column project/product grids at desktop that collapse to single column
- The nav bar is minimal — Valve wordmark at left, a handful of ultralight text links at right

### Whitespace Philosophy
- **Generous over dense**: sections have 50-170px of vertical breathing room — the page is designed to be scrolled, not scanned
- **Whitespace as architecture**: large gaps between sections signal topic changes more than dividers do
- **Nothing decorative**: the only fill colors are dark background, white band, and the occasional accent rule

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; solid color fill | All components, all cards, all buttons |
| Section Lift | Color swap: dark → white band | The only "elevation" is a canvas color change |
| Focus Ring | `-webkit-focus-ring-color auto 5px` (browser default) | Keyboard focus on inputs |

**Shadow Philosophy**: Valve's site has no shadows. Zero. The JSON confirms an empty shadows array. Depth is communicated entirely through color-block contrast — a dark section next to a white section is the system's only elevation language. This is a deliberate consequence of the industrial flatness; the design refuses decorative technique. The one focus state extracted is the browser default ring, confirming that even accessibility styling is minimal-and-native.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every element in the system — buttons, inputs, cards, nav, badges |

The system is purely rectilinear. No softening, no pills, no rounding. The strict square geometry reinforces the industrial, no-nonsense character — this is a site that looks built, not polished.

## Components

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

### Buttons
- **`button-primary`** — Solid `{colors.primary}` red-orange fill, white text, square. The only CTA variant in the system. Hover deepens to `{colors.primary-dark}`. No gradient, no shadow — a flat accented rectangle.
- **`button-ghost`** — White fill for use on light-band sections, black text, square. Used for "explore" or secondary actions in careers/about.

### Cards
- **`card`** — Dark-panel fill (`{colors.surface}`), white text, square, generous padding at 50px. Project / product listing blocks.
- **`card-light`** — White fill (`{colors.surface-light}`) on the alternating light sections. Same square, same padding.

### Inputs
- **`input`** — A near-invisible underline field: near-transparent background, `{colors.primary}` text and bottom-border, no container, 10px 0px padding. The input IS the line. Focus has no extra visual change — the red line persists.

### Navigation
- **`nav-bar`** — Near-black header (`{colors.background}`), white Valve wordmark, ultralight 200-weight nav links in white, generous horizontal padding.

### Links
- **`link`** / **`link-hover`** — Red-orange at rest (`{colors.link-default}`), flip to white on hover (`{colors.link-hover}`) via a 0.25s linear transition. The simplest possible interaction model.

### Badges / Tags
- **`badge`** — Dark panel fill, `{colors.primary}` text, square corners, compact 4px 10px padding. Minimal label used for product tags.

## Do's and Don'ts

### Do
- Use the near-black canvas (`{colors.background}`) as the default ground for all hero and content sections
- Apply `{colors.primary}` only to functional elements: links, CTAs, input underlines, and active states — never as decoration
- Use Apercu at 900 Black for all headings (`{typography.display-hero}`, `{typography.display}`) and at 200 Ultralight for all body copy (`{typography.body}`)
- Keep corners strictly square (`{rounded.none}`) on every element
- Give sections generous vertical whitespace — 50px minimum (`{spacing.lg}`), up to 170px (`{spacing.3xl}`) for major separations
- Use linear 0.25s transitions for all color-shift hover states
- Implement link hover as a flip to white (`{colors.link-hover}`) rather than a shade shift
- Alternate dark (`{colors.background}`) and white (`{colors.surface-light}`) sections for structural rhythm on long pages

### Don't
- Don't add any other accent or brand color — `{colors.primary}` is the entire signal vocabulary; introducing a second accent dissolves the identity
- Don't introduce border radius at any scale — the square geometry is the system's industrial voice
- Don't use weight 400 or 500 for typography — the system lives at the extremes (200 and 900); mid-weights blur the contrast that defines it
- Don't add shadows or gradients — the site is flat; depth is contrast, not elevation
- Don't pack sections tightly — the generous whitespace (`{spacing.xl}`, `{spacing.2xl}`) IS part of the brand personality
- Don't make links a shade of red-orange that isn't `{colors.primary}` — the accent is a precise, consistent signal; warm variants dilute it
- Don't use the browser-default underline on links — Valve's link style is color-only, no underline decoration
- Don't set body copy in a weight above 200 — the ultralight body is the intentional counterweight to the black headlines

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <668px | Single-column layout; nav collapses; hero type scales down; full-width CTAs |
| Mobile | 668–819px | Single column continues; image/text stacks; wider input fields |
| Tablet | 820–1199px | Two-column grids emerge; nav expands; section padding reduces |
| Desktop | 1200–1359px | Full multi-column layout; content column centered; large section spacing restored |
| Large Desktop | ≥1360px | Layout caps at max-width (~1360px); the dark background fills the wider viewport |

### Touch Targets
- Buttons at 10px 20px padding run fine for pointer; on mobile the font-size and line-height make touch targets workable but not generous
- Input fields are minimal-padding (10px 0px) — the underline-only style means the label/text acts as the tap target

### Collapsing Strategy
- **Navigation**: minimal nav (wordmark + text links) collapses to a hamburger or stacked vertical list on small screens
- **Grids**: two-column project grids collapse to single column
- **Type**: display hero drops from 70px toward ~38-40px at mobile while preserving the 900/200 weight contrast
- **Spacing**: generous desktop gutters (50-170px) reduce proportionally; the site stays unhurried even on mobile

### Image Behavior
- Product/hardware imagery is editorial — large, full-bleed photography and renders. On mobile these crop to fill available width rather than letterboxing.
- The site uses minimal UI chrome; imagery carries visual weight by design.

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-Black (`{colors.background}`)
- Text on dark: White (`{colors.ink}`)
- Brand accent / all signals: Valve Red-Orange (`{colors.primary}`)
- Link hover: White (`{colors.link-hover}`)
- Light band text: Black (`{colors.ink-dark}`)
- Corners: Square (`{rounded.none}`)

### Example Component Prompts

- "Create a Valve-style hero section: near-black background (`{colors.background}`), a 70px / 900-weight Apercu headline in white (`{colors.ink}`), followed by a 20px / 200-weight body paragraph in white, then a flat square CTA button in `{colors.primary}` — no gradient, no radius, no shadow"
- "Build a Valve navigation bar: near-black fill (`{colors.background}`), a white Valve wordmark at left, and three ultralight (200) Apercu nav links in white (`{colors.ink}`) at right; each link transitions color to white on a 0.25s linear hover (they start at `{colors.primary}`)"
- "Create a Valve text input: no visible background fill (use `{colors.background}`), Apercu 200-weight text in `{colors.primary}`, a 2px solid bottom border in `{colors.primary}` only (no other borders), 10px 0px padding, square corners (`{rounded.none}`)"
- "Render a project card in the dark style: `{colors.surface}` panel, 50px padding, white 900-weight heading in Apercu (`{typography.heading-section}`), white 200-weight body copy (`{typography.body}`), a red-orange text link (`{colors.primary}`) at the bottom that flips to white on hover"
- "Build a Valve-style alternating-sections page: dark section (`{colors.background}`) with a 38px / 900-weight Apercu heading and 20px / 200-weight body, then a white section (`{colors.surface-light}`) with black heading (`{colors.ink-dark}`) and dark-gray body (`{colors.ink-dark-secondary}`) — each section has 100px vertical padding (`{spacing.2xl}`)"
- "Create a minimal Valve badge: `{colors.surface}` fill, `{colors.primary}` label text in Apercu caption weight (`{typography.caption}`), square corners (`{rounded.none}`), 4px 10px padding"

### Iteration Guide

1. Start on the near-black canvas (`{colors.background}`). If your background is light, you've left the industrial register — darken it before anything else.
2. Set all headings at weight 900, all body copy at weight 200. If you see a 400 or 500 weight anywhere, fix it — the binary contrast is the whole typographic system.
3. `{colors.primary}` is the only accent in the system. Assign it only to interactive or functional elements: links, CTAs, borders on inputs. Remove it from any decorative use.
4. Square every corner (`{rounded.none}`). No radius at any scale.
5. Give sections room to breathe — minimum 50px (`{spacing.lg}`) vertical padding, up to 170px (`{spacing.3xl}`) for major section gaps.
6. Hover states are color-flips on a 0.25s linear curve — links go from `{colors.primary}` to `{colors.link-hover}`. No scaling, no underline, just the color switch.
7. If the page has multiple long sections, alternate dark (`{colors.background}`) and white (`{colors.surface-light}`) bands. This is the only layout rhythm the system uses.

---

## 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 Valve. Brand names and trademarks belong to their respective owners.