---
version: alpha
name: Blizzard
description: A deep-navy cosmos where cinematic game art carries the emotion and Blizzard Blue ignites every interactive surface — Poppins headlines over Archivo body text, full-pill CTAs with a glowing blue gradient, and an overwhelmingly dark canvas built for epic storytelling.

colors:
  # Surface / canvas
  background: "#080c14"           # near-black midnight canvas — the cosmic ground
  surface: "#0d1522"              # dark navy card / panel surface
  surface-mid: "#111827"          # slightly lighter panel for layering
  surface-light: "#1a2540"        # elevated containers, tab panels
  surface-overlay: "#333b4b"      # UI overlays, product-tab buttons

  # Ink / text
  ink: "#ffffff"                  # primary text on dark canvas
  ink-secondary: "#d0e9ff"        # secondary text — Blizzard ice blue tint
  ink-muted: "#91a3b7"            # tertiary / supporting copy — glacier tone
  on-primary: "#ffffff"           # text on CTA buttons

  # Brand accent — Blizzard Blue scale
  primary: "#38a8ff"              # the dominant Blizzard Blue (count: 268) — links, CTAs
  primary-deep: "#107fe5"         # deeper blue — hover/active states on primary
  primary-bright: "#059ef6"       # bright sky blue — blizzard-400 highlight moments
  primary-glow: "#1888ef"         # gradient start stop on pill CTA
  primary-glow-end: "#009fe9"     # gradient end stop on pill CTA
  primary-navy: "#04244b"         # deep Blizzard navy — dark section backgrounds
  primary-navy-dark: "#082444"    # darkest navy — navy-300 anchor

  # Semantic
  success: "#32ae88"              # green tint for success states
  error: "#dd0000"                # alert red

  # Borders & edges
  border: "#0e86ca"               # active tab/button border (extracted from blz-button)
  border-subtle: "#d1d1d1"        # light divider (flattened from rgba)

  # Shadow tints (flattened from rgba approximations)
  shadow-dark: "#060a10"          # was rgba(0,0,0,0.8) — deep panel shadow /* estimated */
  shadow-soft: "#1c2233"          # was rgba(50,50,93,0.1) — feather shadow /* estimated */

typography:
  display-hero:
    fontFamily: "Poppins, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  display:
    fontFamily: "Poppins, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.11
    letterSpacing: 0px
  heading-section:
    fontFamily: "Poppins, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Archivo, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 21.92px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "Archivo, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Archivo, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  nav-link:
    fontFamily: "Archivo, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.06
    letterSpacing: 0.5px
  caption:
    fontFamily: "Archivo, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.13px
  label-upper:
    fontFamily: "Poppins, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 0.93
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 120px

rounded:
  none: 0px
  sm: 4px
  md: 12px
  lg: 20px
  pill: 100px

components:
  # Primary gradient pill CTA
  button-primary:
    backgroundColor: "{colors.primary-glow}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"

  # Secondary ghost pill
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.primary}"

  # Outline ghost variant
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-ghost-hover:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink}"

  # Game / product tile card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 16px
  card-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"

  # Feature / hero card
  card-feature:
    backgroundColor: "{colors.primary-navy}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px

  # Tab / filter control
  tab:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  tab-active:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.primary}"

  # Text input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Badge / tag
  badge:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 8px

  # Nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 12px 24px

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

# Blizzard Design System

## Overview

Blizzard's site is a portal into an entertainment cosmos — dark, atmospheric, and deliberately cinematic. The dominant canvas is a near-black midnight blue (`{colors.background}`), a shade deeper than pure black that gives the page warmth without losing drama. Against this ground, full-bleed game art from World of Warcraft, Diablo, Overwatch, and Hearthstone burns like illustrations lit from within. The chrome itself retreats to almost nothing so the worlds can breathe; the Blizzard Blue (`{colors.primary}`) is reserved to ignite links, tabs, and interactive surfaces the moment user attention is needed.

The most distinctive surface-level move is the pill CTA gradient: a capsule shape softly glowing from `{colors.primary-glow}` to `{colors.primary-glow-end}`, a subtle horizon of electric blue that feels like something pulled from a mana bar in-game. This is not a flat button — it has luminance, like a rune lighting up. The Poppins display type at weight 600 is bold but narrow enough to feel premium rather than bludgeoning; Archivo variable carries the body at a comfortable 400 weight, forming a legible workhorse to Poppins' stage presence. Together they keep the UI feeling modern and controlled even when the background imagery is maximally epic.

The radius language is binary at the extremes: 100px pill for every interactive control (buttons, tabs, badges, filter chips), and tight 4px for tiles and game cards. There is no gradual ramp in between for most UI elements — it is either the "organic capsule" (navigation, actions) or the "sharp thumbnail" (content browsing). This opposition is legible and intentional: pills signal interaction, sharp rectangles signal content.

**Key Characteristics:**
- Near-black midnight canvas (`{colors.background}`) as the base — a cosmic arena for game art, not a pure tech-black
- Blizzard Blue (`{colors.primary}`) — link, tab, and focus color everywhere; a high-count 268-use anchor
- Full-pill gradient CTA: `{colors.primary-glow}` → `{colors.primary-glow-end}` horizontal blue gradient, `{rounded.pill}` always
- Ice-blue secondary text (`{colors.ink-secondary}`) for supporting copy — a tinted echo of the brand accent
- Poppins 600 for all display and heading type; Archivo variable for body and utility UI
- Uppercase Poppins labels at weight 600 for category kickers and section tags (`{typography.label-upper}`)
- 4px radius (`{rounded.sm}`) for game tiles and product cards — sharp thumbnails, not rounded cards
- 100px pill (`{rounded.pill}`) for every button, tab, badge, and filter chip — the capsule is the brand shape for controls
- Deep Blizzard Navy (`{colors.primary-navy}`) for section backgrounds and feature card surfaces
- 200ms ease-out motion throughout — quick, responsive, minimal dramatics

## Colors

### Surface & Canvas
- **Midnight Canvas** (`{colors.background}`): The dominant ground — near-black with a blue-navy undertone that gives the page warmth while enabling cinematic game art.
- **Dark Navy Panel** (`{colors.surface}`): Card and panel surfaces, slightly lifted from the canvas.
- **Mid-Layer Navy** (`{colors.surface-mid}`): An intermediate panel for subtle depth stacking.
- **Elevated Container** (`{colors.surface-light}`): The lighter panel tier — tab panels, filter bars, selected states.
- **UI Overlay** (`{colors.surface-overlay}`): Muted dark slate for product-tab buttons, overlays.

### Ink / Text
- **Primary White** (`{colors.ink}`): Headings, body, and UI copy on the dark canvas.
- **Ice Blue** (`{colors.ink-secondary}`): Secondary text — a subtle Blizzard-tinted blue-white that echoes the brand without competing with it.
- **Glacier Muted** (`{colors.ink-muted}`): Tertiary copy, metadata, disabled states.

### Brand Accent
- **Blizzard Blue** (`{colors.primary}`): The signature interactive color — links, tab-active indicators, focus states, and the CTA button base. The most-counted color in the site at 268 extracted uses.
- **Deep Blue** (`{colors.primary-deep}`): Hover and active variant of the primary — deepens on interaction.
- **Bright Sky** (`{colors.primary-bright}`): Blizzard-400; used for highlight moments and accent glints.
- **CTA Gradient Start** (`{colors.primary-glow}`): The warm-electric start of the pill-button gradient.
- **CTA Gradient End** (`{colors.primary-glow-end}`): The cooler end of the gradient — producing a subtle horizontal luminance.
- **Blizzard Navy** (`{colors.primary-navy}`): Deep brand blue for feature card backgrounds and hero section fills.
- **Deepest Navy** (`{colors.primary-navy-dark}`): The darkest brand blue anchor — footer chrome and structural accents.

### Semantic & Borders
- **Border Blue** (`{colors.border}`): Active tab indicator and button ring — a mid-tone Blizzard blue.
- **Success** (`{colors.success}`): Positive feedback states.
- **Error** (`{colors.error}`): Alert and error states.

## Typography

### Font Family
- **Display / Headings**: `Poppins` (self-hosted, SemiBold 600) — a geometric sans with tight metrics and confident weight. Used for all hero headlines, section headings, button labels, and uppercase kickers.
- **Body / UI**: `Archivo` (self-hosted variable font, `wdth,wght` axes) — a neutral, legible workhorse at weight 400 for body, 600-700 for sub-headings and dense UI.
- Both fonts are self-hosted; no Google Fonts or Adobe Fonts calls.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 48px / Poppins 600 — masthead headlines, campaign titles |
| `display` | 36px / Poppins 600 / uppercase — game section headings |
| `heading-section` | 20px / Poppins 600 — module titles, content section heads |
| `heading-sub` | 21.92px / Archivo 600 — card headings, feature sub-titles |
| `body-large` | 20px / Archivo 400 — lead body copy, game description text |
| `body` | 16px / Archivo 400 — standard body, nav labels |
| `body-small` | 14px / Archivo 400 — dense metadata, caption copy |
| `nav-link` | 14px / Archivo 600 — navigation items |
| `button-ui` | 16px / Poppins 600 / 0.5px tracking — CTA and button labels |
| `caption` | 13px / Archivo 400 / 0.13px tracking — fine print, footer labels |
| `label-upper` | 14px / Poppins 600 / uppercase / 1px tracking — category kickers, tag labels |

### Principles
- **Two-typeface discipline**: Poppins for brand moments and interaction; Archivo for content and reading.
- **Uppercase Poppins kickers**: Category labels, game-genre tags, and section overlines use `{typography.label-upper}` — uppercase with wide tracking is the "catalog mode" signal.
- **Weight pairs, not families**: Hierarchy is built by Poppins 600 vs. Archivo 400 contrast, not by introducing additional families.
- **Cool letter-spacing**: Display headlines are tracked tight (-0.5px) to feel monumental; button labels open up (+0.5px) for legibility on small caps.

## Layout

### Spacing System
The full scale is in the `spacing:` token block above. The base unit is 8px, with the dominant measured spacers being 24px (75 count), 5px (65 count for micro padding), and 10px (43 count). The 120px value anchors full section vertical margins. Component internals are tight (5-10px) while section breathing room is generous (40-120px).

### Grid & Container
- Max content width: ~1600px at the largest breakpoint; full 2600px breakpoints captured in CSS.
- Game tile grids: responsive multi-column card shelves, typically 3-5 columns desktop, 1-2 mobile.
- Hero sections are full-bleed edge-to-edge; game imagery fills the viewport width.
- Navigation is sticky, collapsing from expanded game-category links to a condensed bar on scroll.

### Whitespace Philosophy
- **Art fills the canvas**: Game heroes and key-art tiles run full-bleed or edge-to-edge container; the dark canvas makes game art look expensive.
- **Tight internals, generous section gaps**: Component padding is compact (5-10px); vertical spacing between page sections expands to 40-120px.
- **Navy breathing rooms**: Feature sections use deep navy (`{colors.primary-navy}`) backgrounds as distinct color zones — whitespace is replaced by hue shifts.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; dark surface differentiates layers | Game tiles on the main canvas |
| Raised (Level 1) | `0 2px 4px {colors.shadow-dark}` | Subtle lift on hover cards |
| Card (Level 2) | `0 7px 14px {colors.shadow-soft}` | Feature panels floating on dark sections |
| Focus Ring | `0 0 0 2px {colors.primary}` inset | Button/input focus state |
| Glow | Gradient from `{colors.primary-glow}` on pill buttons | The CTA "lit" effect — luminance not shadow |

**Shadow Philosophy**: Blizzard barely uses classical shadows. The dark canvas means elevation is communicated by surface color steps — `{colors.surface}` vs. `{colors.surface-light}` vs. `{colors.surface-overlay}` creates a layered depth without needing shadow stacks. The one signature "elevation" effect is the glowing gradient pill button: it does not cast a shadow but radiates its own light. When shadows do appear (on card hover, on feature panels), they use a cool, desaturated dark tint rather than warm blacks.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed hero sections, edge-to-edge banner fills |
| `sm` | 4px | Game tiles, product cards, badges, tab panels |
| `md` | 12px | Banner notifications, larger content containers |
| `lg` | 20px | Some filter buttons, secondary action chips |
| `pill` | 100px | Every CTA button, primary tabs, filter chips — the brand capsule |

The system is intentionally binary in character: content browsing surfaces use the tight 4px (making game art look like catalog tiles), while every interactive control uses the full pill. The contrast is so consistent that the pill shape alone signals "you can click this." Mid-radius shapes (12-20px) appear in secondary UI and notification surfaces.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly.

### Button Variants
- **`button-primary`** — The signature Blizzard CTA: glowing horizontal gradient from `{colors.primary-glow}` to `{colors.primary-glow-end}`, Poppins 600, full pill. Hover deepens to `{colors.primary-deep}`. This is the "light up" button — a mana-bar glow effect made tangible.
- **`button-secondary`** — Dark surface pill with Blizzard Blue text. Used for secondary actions on dark panels.
- **`button-ghost`** — Near-invisible pill: near-black fill, white text, used for low-emphasis utility actions.

### Cards
- **`card`** — Sharp 4px-radius dark panel for game tiles. Dark navy fill (`{colors.surface}`), tight padding.
- **`card-feature`** — A deeper navy feature zone (`{colors.primary-navy}`) for product spotlights and editorial callouts.

### Tabs & Filters
- **`tab`** / **`tab-active`** — 4px-radius pills for game-category filter tabs. Active state shifts text to Blizzard Blue (`{colors.primary}`), underline-indicated by the border color.

### Inputs
- **`input`** — Dark surface, white text, 4px radius. **`input-focus`** brings a 2px Blizzard Blue ring.

### Navigation
- **`nav-bar`** — Near-black sticky header, white Archivo nav links, Blizzard Blue on hover and active state.

### Links & Badges
- **`link`** — Blizzard Blue (`{colors.primary}`), darkens to `{colors.primary-deep}` on hover. No underline at rest.
- **`badge`** — Dark navy pill with Blizzard Blue text, 4px radius — used for "New", "Free Trial", platform labels.

## Do's and Don'ts

### Do
- Use the near-black midnight canvas (`{colors.background}`) as the dominant base — the blue-black undertone is intentional, not pure `#000000`
- Set every CTA button as a full-pill gradient (`{rounded.pill}`, `{colors.primary-glow}` → `{colors.primary-glow-end}`) — the glowing capsule is the Blizzard brand shape for actions
- Use Blizzard Blue (`{colors.primary}`) exclusively for links, tabs, focus states, and interactive indicators — it is the interaction color
- Set display headlines in Poppins 600 (`{typography.display-hero}`, `{typography.display}`); let Archivo carry all body reading copy
- Use uppercase Poppins kickers (`{typography.label-upper}`) for genre labels, category tags, and section overlines
- Keep game tile cards at 4px radius (`{rounded.sm}`) — they are catalog tiles, not rounded soft cards
- Use deep Blizzard Navy (`{colors.primary-navy}`) as a distinct section-background color zone in lieu of extra whitespace
- Apply 200ms ease-out to all transitions — quick and responsive, never sluggish

### Don't
- Don't use a flat blue fill for the primary CTA — the gradient glow is the brand signal; flat blue reads as inactive
- Don't round game-art tiles beyond 4px — the sharp thumbnail communicates "catalog item", not "app card"
- Don't introduce warm or saturated colors in the chrome — the design's non-interactive palette is strictly cool dark blues and whites
- Don't use Poppins for body reading copy — Archivo's variable axis is the right tool for density and reading comfort
- Don't add mid-tone grays to the surface stack — the system uses cool dark-blue surfaces, not neutral grays
- Don't let secondary text use pure white — use the ice-blue tint (`{colors.ink-secondary}`) to maintain the cool chromatic atmosphere
- Don't use pill radius on game media tiles or hero containers — full-bleed and sharp edge are the content language
- Don't skip the brand gradient on primary buttons — a solid `{colors.primary}` button looks like a secondary or disabled state

---

## Responsive Behavior

*(Preserved from the original corpus's 9-section format — Google's parser keeps unknown sections.)*

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single column; full-width hero art; nav to hamburger; CTA full-width pill |
| Mobile | 426–767px | Single-column tile grid; stacked game sections |
| Tablet | 768–1023px | 2-column game grid; condensed nav with product tabs |
| Desktop | 1024–1399px | 3-4 column game grid; full sticky nav |
| Large Desktop | 1400–1599px | 5-column grid; expanded hero sections |
| Ultra-Wide | ≥1600px | Max-width container; margins absorb extra; heroes stay full-bleed |

### Touch Targets
- Pill buttons are 44-52px tall with generous horizontal padding — thumb-friendly at any display density.
- Tab filter chips on the product rail are 36-40px tall; scroll horizontally on mobile rather than stacking.
- Game tile click targets match the full card area, not just the text below the art.

### Collapsing Strategy
- **Navigation**: full game-category nav → condensed Blizzard logo + hamburger; product tabs collapse to a scroll-carousel.
- **Hero**: full-bleed game art scales to viewport width; copy overlays shift below art on mobile rather than overlapping.
- **Grid**: 5-col → 4-col → 3-col → 2-col → 1-col; tile aspect ratios preserved.
- **Type**: `display-hero` scales from 48px toward ~28-32px on mobile; Poppins weight stays 600 throughout.

### Image Behavior
- All game art is full-bleed or full-card; hero images use CSS `object-fit: cover` to preserve focal points across breakpoints.
- Tiles maintain consistent aspect ratios (typically 16:9 or 3:4 for portrait game art) at all widths.

---

## Agent Prompt Guide

*(Preserved from the original corpus's 9-section format — the copy-paste payload section.)*

### Quick Color Reference
- Background: Near-black midnight blue (`{colors.background}`)
- Text: White (`{colors.ink}`) / Ice Blue secondary (`{colors.ink-secondary}`)
- Brand / interactive: Blizzard Blue (`{colors.primary}`)
- CTA gradient: `{colors.primary-glow}` → `{colors.primary-glow-end}` (horizontal)
- Feature section bg: Blizzard Navy (`{colors.primary-navy}`)
- Border: Blizzard mid-blue (`{colors.border}`)

### Example Component Prompts

- "Create a hero section on `{colors.background}` midnight canvas with full-bleed 16:9 game art, a 48px Poppins 600 headline in `{colors.ink}`, a 14px Poppins 600 uppercase kicker in `{colors.ink-secondary}` with 1px letter-spacing, and a pill CTA button using a horizontal gradient from `{colors.primary-glow}` to `{colors.primary-glow-end}`, 100px border-radius, Poppins 600 white label."
- "Build a game tile card: `{colors.surface}` dark navy background, 4px border-radius, 16px padding, a game-art thumbnail at the top (full-width, no radius), a 21.92px Archivo 600 title, a 14px Archivo 400 description in `{colors.ink-secondary}`, and a small pill badge in `{colors.surface-light}` with Blizzard Blue (`{colors.primary}`) text."
- "Design a product tab filter strip: full-pill 100px chips (`{rounded.pill}`) on a `{colors.surface-light}` background, inactive text `{colors.ink-secondary}`, active text `{colors.primary}` with a 1px `{colors.border}` bottom indicator. Scroll-carousel on mobile."
- "Create a navigation bar on `{colors.background}`: sticky, Blizzard logo left, horizontal game-category links in `{typography.nav-link}` center, account / cart icons right. All text `{colors.ink}` at rest, shifts to `{colors.primary}` on hover."
- "Build a feature section card: `{colors.primary-navy}` background, 24px padding, 12px border-radius, a 36px Poppins 600 uppercase headline in `{colors.ink}`, a 20px Archivo 400 paragraph in `{colors.ink-secondary}`, and a primary pill CTA (`{colors.primary-glow}` gradient, `{rounded.pill}`)."

### Iteration Guide

1. Start on `{colors.background}` midnight canvas — the cool near-black with a navy undertone. Pure black (`#000000`) loses the atmospheric warmth.
2. The CTA must be the gradient pill: `{colors.primary-glow}` → `{colors.primary-glow-end}`, `{rounded.pill}`. A flat blue button reads as inactive in this system.
3. Every interactive control (button, tab, badge, chip) uses `{rounded.pill}`. Every content tile (game card, media thumbnail) uses `{rounded.sm}` (4px). Never mix them.
4. Set headlines in Poppins 600; set reading copy in Archivo 400. Add uppercase kickers via `{typography.label-upper}` for category overlines.
5. Reserve Blizzard Blue (`{colors.primary}`) for links, tab-active states, and focus indicators only. Non-interactive chrome stays white on dark.
6. Build depth by stacking surface tokens (`{colors.surface}` → `{colors.surface-light}` → `{colors.surface-overlay}`), not with shadows.
7. Section-background shifts to `{colors.primary-navy}` for feature zones — a deep brand blue that reads as a distinct environment, not just a dark box.

---

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