---
version: alpha
name: Riot Games
description: A near-black cinematic arena where full-bleed game key art commands the canvas, a custom-weight Riot Sans pairs with tight Inter for editorial punch, and a single volcanic red-crimson accent fires every interactive moment on deep charcoal chrome.

colors:
  # Surface / canvas
  background: "#141212"          # near-black hero canvas — darkroom depth for key art
  surface: "#2b2a29"             # dark charcoal UI panels, header chrome, card backgrounds
  surface-muted: "#252423"       # footer band, deepest chrome tier
  surface-warm: "#1a1918"        # subtle warm-tinted mid-surface layer
  surface-light: "#f9f9f9"       # white content bands on jobs/about sections

  # Ink / text
  ink: "#e7e6e3"                 # primary body text on near-black canvas — was #141212 (same as background → 1:1 body-contrast); near-white matches ink-strong used for all on-canvas text
  ink-strong: "#e7e6e3"          # near-white — headings on dark canvas
  ink-secondary: "#656462"       # subdued body copy, supporting labels
  on-dark: "#f9f9f9"             # primary text on near-black / charcoal surfaces

  # Brand accent — volcanic crimson
  primary: "#d1363a"             # the Riot red — buttons, active nav, badges, key links
  primary-hover: "#fb4146"       # brightened crimson on interaction — more saturated, hotter
  primary-glow: "#a32629"        # deep crimson tint — rgba(163,38,41,0.2) flattened for overlays /* was rgba(163, 38, 41, 0.2) — flattened */

  # Utility
  neutral-mid: "#808080"         # placeholder text, disabled states, icon muted
  border: "#3a3837"              # subtle panel edge on dark surfaces
  border-light: "#dcdcdc"        # control edges on light bands — hover/focus indicator
  shadow-soft: "#0a0a0a"         # shadow base — was rgba(10,10,10,0.15) flattened /* was rgba(10, 10, 10, 0.15) — flattened */

typography:
  display-hero:
    fontFamily: "Riot Sans Latin, Inter, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.48px
  display:
    fontFamily: "Riot Sans Latin, Inter, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: -1.44px
  heading-section:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 31px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.93px
  heading-sub:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: -0.54px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.6px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.48px
  body-semibold:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.6px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.6px
  label-caps:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.04px
  nav-link:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.48px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.96px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 100px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 22px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-dark}"

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 12px
  button-ghost-hover:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.on-dark}"

  button-utility:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.surface-muted}"  # was {colors.ink}; ink changed to near-white — use near-black surface-muted (#252423) on light surface
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  button-utility-hover:
    backgroundColor: "{colors.border-light}"
    textColor: "{colors.surface-muted}"  # was {colors.ink}; same reason as above

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.md}"
    padding: 24px
  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.surface-muted}"  # was {colors.ink}; ink changed to near-white — use dark surface-muted on light cards
    rounded: "{rounded.md}"
    padding: 24px

  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 0px
  badge-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-strong}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: 10px 30px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: 0px
  link-hover:
    textColor: "{colors.neutral-mid}"
    typography: "{typography.nav-link}"
    padding: 0px

  link-on-dark:
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    padding: 0px
  link-on-dark-hover:
    textColor: "{colors.neutral-mid}"
    typography: "{typography.body}"
    padding: 0px
---

# Riot Games Design System

## Overview

The Riot Games site is a darkroom. The dominant ground is near-black (`{colors.background}`), and Riot fills it with full-bleed cinematic key art — League of Legends champions mid-action, Arcane characters frozen in light. The chrome all but disappears into the dark canvas so the game imagery can breathe at full saturation. Against this almost theatrical darkness, a single color does all the expressive work: the volcanic crimson (`{colors.primary}`) that activates every button, nav indicator, and interactive badge. Nothing else competes. The system is essentially a two-color experience: near-black and Riot red, with near-white type (`{colors.ink-strong}`) as the text layer above the dark arena.

The typographic strategy is a deliberate pairing. Riot Sans Latin — a custom proprietary face — leads at display sizes, giving headlines a slightly condensed, purpose-built weight that separates the brand from generic web sans-serifs. Inter takes over for body copy, navigation, and UI labels, bringing tightness and legibility at small sizes. Both faces are set heavy: 700 is the standard weight for any text that carries information. The `{typography.display}` setting includes a dramatic negative letter-spacing of -1.44px at 48px, compressing the characters into dense typographic blocks that feel less like a marketing headline and more like a game UI overlay. Uppercase caps labels (`{typography.label-caps}`) with wide positive tracking create a secondary rhythm layer for categorization and section markers.

The geometry is largely soft-pill versus flat — the primary CTA (`{components.button-primary}`) is a fully rounded pill with generous vertical padding, designed to feel pressable. Cards and panels sit at a modest 8px (`{rounded.md}`) that keeps the surface warm without going fully pill-shaped. Shadow usage is minimal: a single soft `0 4px 4px` drop at 15% opacity provides card lift, and dark scrims over key art maintain text legibility over busy imagery. There are no gradients on UI chrome — the only gradient is the `linear-gradient(#141212 40px, transparent 100%)` scrim that bleeds the canvas color into hero photo transitions. This restraint keeps the system feeling editorial and cinematic rather than glossy or gamey.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) as the dominant ground — game key art fills the frame at full saturation
- Volcanic Riot crimson (`{colors.primary}`) is the single interactive accent — buttons, active nav states, brand badges, all fire the same red
- Brightened crimson on hover (`{colors.primary-hover}`) is the hotter, more saturated state — same hue family, noticeably elevated energy
- Custom Riot Sans Latin at display sizes (`{typography.display}`) + Inter for UI and body — proprietary face leads, utility face supports
- Heavy weights (700 throughout) and significant negative tracking (`-1.44px` at 48px) give headlines a game-UI density
- Pill-shaped primary CTA (`{rounded.pill}`) with tall vertical padding — feels pressable, not banner-ad flat
- Uppercase tracking labels (`{typography.label-caps}`) at +1.04px for category and section markers
- Charcoal panel surface (`{colors.surface}`) for header chrome, cards, and modals — one step lighter than the near-black arena
- Single soft shadow `0 4px 4px` for card lift; gradient scrim `{colors.background}` → transparent for hero bleeds
- Near-white body text (`{colors.on-dark}`) on dark; warm gray (`{colors.ink-secondary}`) for subdued supporting copy

## Colors

### Surface & Canvas
- **Near-Black** (`{colors.background}`): The cinematic arena — game art and hero panels paint directly on this ground.
- **Charcoal** (`{colors.surface}`): Header bar, cards, modal chrome — the secondary dark tier, one step lighter.
- **Deep Muted** (`{colors.surface-muted}`): Footer band and the deepest chrome layer.
- **Warm Dark** (`{colors.surface-warm}`): Hover fills and tinted mid-surface states.
- **White Band** (`{colors.surface-light}`): Career pages, legal sections, and content-dense areas that need legibility on white.

### Ink / Text
- **Near-Black Ink** (`{colors.ink}`): Body text on white bands — crisp, high contrast.
- **Near-White** (`{colors.ink-strong}`): Headings and primary copy on the dark arena.
- **Warm Gray** (`{colors.ink-secondary}`): Supporting copy, footer links, secondary labels.
- **On-Dark White** (`{colors.on-dark}`): All text directly over charcoal or near-black surfaces.

### Brand Accent
- **Riot Crimson** (`{colors.primary}`): The single interactive accent — CTAs, active nav indicators, brand badges, key links.
- **Hot Crimson** (`{colors.primary-hover}`): Brightened, more saturated hover state. Noticeably elevated vs. the resting red.
- **Deep Crimson Tint** (`{colors.primary-glow}`): The 20% alpha tint of the brand red flattened for overlay use — gradient backgrounds behind hero copy.

### Utility & Borders
- **Neutral Mid** (`{colors.neutral-mid}`): Hover state for body links, disabled/placeholder text.
- **Dark Border** (`{colors.border}`): Subtle panel edges on charcoal surfaces.
- **Light Border** (`{colors.border-light}`): Control edges and focus indicators on white content bands.
- **Shadow Base** (`{colors.shadow-soft}`): The near-black tint used for the single card-elevation drop shadow.

## Typography

### Font Family
- **Display**: `Riot Sans Latin` — a custom proprietary condensed sans, served as self-hosted WOFF2. No Google Fonts equivalent; Inter is the fallback.
- **UI + Body**: `Inter` — the precision Swiss-style variable sans. Used for navigation, body copy, UI labels, captions, and button text.
- **Fallback stack**: `Arial, sans-serif` — kept narrow for the web font load case.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 56px / 700 / -0.48px — the full-page hero marquee headline |
| `display` | 48px / 700 / -1.44px — large section titles; Riot Sans condensed blocks |
| `heading-section` | 31px / 700 / -0.93px — feature and section headings |
| `heading-sub` | 18px / 700 / -0.54px — card titles, sub-section labels |
| `body-large` | 20px / 400 / -0.6px — lead paragraphs and supporting intros |
| `body` | 16px / 400 / -0.48px — standard body copy |
| `body-semibold` | 20px / 600 / -0.6px — emphasized inline copy |
| `button-ui` | 20px / 700 / -0.6px — all CTA and button labels |
| `label-caps` | 13px / 600 / +1.04px / uppercase — category tags and section markers |
| `nav-link` | 16px / 400 / -0.48px — navigation and footer links |
| `caption` | 12px / 600 / +0.96px / uppercase — metadata, legal text, fine print |

### Principles
- **Proprietary display, utility body**: Riot Sans leads at display; Inter owns UI and body — the pairing is deliberate hierarchy through voice, not just scale.
- **Dense and heavy**: 700 is the default weight; 400 appears only in body copy and subdued links.
- **Negative tracking at scale**: `-1.44px` at 48px and `-0.93px` at 31px compress headlines into game-UI density.
- **Positive tracking for caps**: `+1.04px` on `label-caps` and `+0.96px` on `caption` — uppercase labels breathe while body condenses.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. The base unit is 8px. The dominant rhythm is 10px / 16px / 30px for component internals, rising to 32px–100px for section breathing room. Full-bleed hero sections run edge-to-edge; content bands use centered containers with 30px lateral gutters.

### Grid & Container
- Full-bleed heroes run edge-to-edge; game art is the layout
- Content sections use a centered max-width container (~1280px) with 30px gutters
- Game cards and news tiles use a multi-column grid that reflows from 4-up to 2-up to 1-up
- Navigation is a top-fixed bar with the Riot logomark left and search + CTA right

### Whitespace Philosophy
- **Art fills the frame**: heroes are full-bleed and let game key art command the viewport
- **Tight component chrome**: UI panels use modest 8px corners and controlled internal padding, keeping chrome subservient to content
- **Section breathing**: large `4xl` (100px) gaps between major sections let cinematic panels feel distinct rather than stacked

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; dark surface color creates separation | Navigation bar, badges, most CTAs |
| Subtle (Level 1) | `0 4px 4px rgba(10,10,10,0.15)` | Cards, elevated panels |
| Hero Scrim | `linear-gradient(#141212 40px, transparent 100%)` | Hero key-art bleeds into the chrome — canvas color fades into the image |
| Overlay (Level 2) | `0 4px 16px rgba(0,0,0,0.2)` | Modals and dialogs |

**Shadow Philosophy**: Riot Games barely uses shadow. The system relies on surface-color contrast between the near-black arena and the charcoal panel layer to create hierarchy — the charcoal `{colors.surface}` reads as "raised" against `{colors.background}` without needing a drop shadow. The single `0 4px 4px` drop at 15% is reserved for cards needing physical lift. The distinctive hero gradient scrim is not a shadow at all — it is the canvas color bleeding upward into the image edge, creating a seamless color-fade transition that feels cinematic rather than photo-with-shadow-box.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Inputs, some utility buttons, flat UI chrome |
| `sm` | 4px | Small utility buttons, tag elements |
| `md` | 8px | Cards, image tiles, most panel containers |
| `pill` | 9999px | Primary CTA buttons, cookie preference chips |

The system uses two dominant radius tiers: 8px for panels and containers, and fully rounded pills for the primary action CTA. This creates a deliberate contrast — the content chrome stays architecturally modest while the action button feels soft and pressable. Inputs sit at no radius, maintaining a no-frills utilitarian quality.

## Components

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

### Buttons
- **`button-primary`** — Riot crimson (`{colors.primary}`) fill, near-white text, pill-shaped (`{rounded.pill}`), tall vertical padding (22px). The flagship CTA: "Explore Careers", "Play Now". Hover brightens to hot crimson (`{colors.primary-hover}`).
- **`button-ghost`** — Charcoal (`{colors.surface}`) fill, near-white text, 8px radius. Secondary action on dark surfaces. Hover darkens to warm dark.
- **`button-utility`** — Near-white fill (`{colors.surface-light}`), dark text, 4px radius. Utility actions on light content bands — "Accept", "Manage Preferences".

### Cards
- **`card`** — Charcoal fill (`{colors.surface}`), 8px radius. Sits on the near-black arena; game titles, news, and team listings.
- **`card-light`** — Near-white fill on bright-band sections; same radius. Used on jobs and press pages.

### Badges
- **`badge`** — Near-black fill, crimson text (`{colors.primary}`), pill shape. The game-category dot badge — a circular Riot-crimson icon on dark.

### Inputs
- **`input`** — Charcoal fill, no radius. The search field is minimal — transparent/flat with a focus state that activates the charcoal fill. No decorative border at rest.

### Navigation
- **`nav-bar`** — Near-black fixed bar (`{colors.background}`), near-white nav links, Riot crimson for the active/hover state on the logomark and interactive elements. Transitions to charcoal on scroll.

### Links
- **`link`** — Crimson (`{colors.primary}`) for brand links; dims to neutral mid (`{colors.neutral-mid}`) on hover.
- **`link-on-dark`** — Near-white for general body links on dark; dims to neutral mid on hover.

## Do's and Don'ts

### Do
- Use the near-black canvas (`{colors.background}`) for all hero and game-feature sections — the dark arena is what makes game art look cinematic
- Reserve Riot crimson (`{colors.primary}`) for primary CTAs, active nav states, and brand-identity badges — it is the sole interactive signal
- Use pill-shaped buttons (`{rounded.pill}`) for primary CTAs and square (`{rounded.none}`) or 4px (`{rounded.sm}`) for utility controls
- Set display headlines in Riot Sans (`{typography.display}`) with heavy negative tracking; drop to Inter (`{typography.body}`) for all body and UI copy
- Bleed the canvas color into hero photo transitions via gradient scrim — never add a hard box-shadow edge around key art
- Use uppercase caps labels (`{typography.label-caps}`) with positive tracking for category and section markers
- Keep shadows minimal: a single `0 4px 4px` drop at low opacity for card lift; rely on surface contrast for hierarchy

### Don't
- Don't introduce a second accent color — the system is deliberately monochromatic-accent (dark + one red)
- Don't use crimson (`{colors.primary}`) for decorative elements or backgrounds; it is strictly interactive chrome
- Don't round cards or panels beyond 8px (`{rounded.md}`) — the system is not bubbly; the pill shape is reserved for CTAs only
- Don't put text at normal 400 weight over the dark arena for headings — heavy 700 is required for legibility on the cinematic canvas
- Don't lighten the hero canvas to white — the dark arena and key art relationship is the brand identity
- Don't add gradients to UI chrome; the only gradient is the hero scrim blending the canvas into imagery
- Don't use Riot Sans for body copy — it is a display face; Inter carries all reading-size text

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <420px | Single column; hero art crops to portrait; nav collapses to hamburger; CTA goes full-width |
| Mobile | 420–768px | Single column; hero copy overlays art stacked below; game cards 1-up |
| Tablet | 768–1024px | Two-up card grid; hero scales to landscape crop; nav remains visible |
| Desktop | 1024–1440px | Full layout — edge-to-edge heroes, 3–4-column game card grid |
| Large | ≥1440px | Max-width container (~1280px) for content bands; heroes remain full-bleed |

### Touch Targets
- The pill CTA (`{components.button-primary}`) uses 22px vertical padding, comfortably exceeding the 44px minimum touch height
- Game card tiles are large full-bleed thumbnails — no small tap targets
- The search field and nav icons use 30px hit areas

### Collapsing Strategy
- **Navigation**: top bar collapses to a hamburger at mobile; game links stack in a vertical drawer
- **Hero**: full-bleed art reframes for portrait crop; copy overlays shift from overlay to below-image stacking
- **Cards**: 4-column grid steps down to 2-up at tablet, 1-up at mobile
- **Typography**: `display-hero` scales down from 56px toward 32px on small screens; weights stay heavy

### Image Behavior
- Game key art is always full-bleed — heroes span the full viewport width and are art-directed per title
- The canvas-color gradient scrim ensures visual continuity regardless of image crop
- Thumbnails in card grids maintain consistent 16:9 aspect ratios

---

## Agent Prompt Guide

### Quick Color Reference
- Background (arena): Near-Black (`{colors.background}`)
- Surface (panels): Charcoal (`{colors.surface}`)
- Text on dark: Near-White (`{colors.on-dark}`)
- Brand accent / CTA: Riot Crimson (`{colors.primary}`)
- CTA hover: Hot Crimson (`{colors.primary-hover}`)
- Supporting text: Warm Gray (`{colors.ink-secondary}`)
- Radius: Pill for CTAs (`{rounded.pill}`), 8px for cards (`{rounded.md}`)

### Example Component Prompts

- "Create a full-bleed hero on the near-black canvas (`{colors.background}`) with game key art edge-to-edge, a gradient scrim (`{colors.background}` → transparent, 40px) blending the canvas into the image bottom edge, a 56px bold Riot Sans headline in near-white (`{colors.on-dark}`), and a pill-shaped Riot-crimson CTA (`{components.button-primary}`) aligned bottom-left"
- "Build the Riot Games primary CTA: Riot crimson (`{colors.primary}`) fill, near-white text (`{colors.on-dark}`) in Inter weight 700 at 20px, fully pill-shaped (`{rounded.pill}`), 22px 16px padding; hover brightens fill to hot crimson (`{colors.primary-hover}`)"
- "Create a dark game card: charcoal fill (`{colors.surface}`), 8px radius, 24px padding, near-white heading (`{colors.ink-strong}`) in Inter 700 at 18px, warm-gray subtitle (`{colors.ink-secondary}`), and a Riot-crimson category badge (`{components.badge}`) — pill-shaped circular dot, dark fill, crimson text"
- "Build the fixed top navigation bar: near-black fill (`{colors.background}`), Riot logomark and hamburger left, search icon and crimson pill CTA right, nav links in Inter 400 at 16px near-white (`{colors.on-dark}`); active/hover link color shifts to Riot crimson (`{colors.primary}`)"
- "Render a section heading with an uppercase caps label above it: 13px Inter 600 with +1.04px letter-spacing (`{typography.label-caps}`) in warm gray (`{colors.ink-secondary}`) uppercase, followed by a 48px Riot Sans 700 display headline (`{typography.display}`) in near-white (`{colors.ink-strong}`) with -1.44px tracking"

### Iteration Guide

1. Establish the near-black arena (`{colors.background}`) as the hero canvas — fill it edge-to-edge with game key art. If your hero is white, you have lost the cinematic identity.
2. Apply the gradient scrim: `linear-gradient({colors.background} 40px, transparent 100%)` from the bottom edge — this is the distinctive Riot visual transition, not a box shadow.
3. The primary CTA must be Riot crimson (`{colors.primary}`) in a pill shape (`{rounded.pill}`) at 20px / 700 — "Explore Careers", "Play Now". On hover it brightens to `{colors.primary-hover}`.
4. Raise UI panels one step to charcoal (`{colors.surface}`). Cards, modals, and the nav bar sit on this layer. Never use the background color for interactive panels.
5. Use Riot Sans (`{typography.display}`) for display headlines with tight negative tracking. Drop immediately to Inter (`{typography.body}`) for anything below 24px.
6. Keep crimson (`{colors.primary}`) strictly interactive — no decorative fills, no section backgrounds. It reads as "press this" and must only appear where that meaning is correct.
7. Limit the radius vocabulary to two values: `{rounded.md}` (8px) for containers, `{rounded.pill}` for CTAs. Do not introduce intermediate values.

---

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