What is Riot Games' primary brand color?

Riot Games' brand voltage is crimson red (#d1363a), merged from the near-identical pair #d1363a and #d13639. It appears 464 times across the captured page — 231 as text color, 231 as border color, and only 2 as background fill. This is a text-and-border-only accent strategy: the crimson marks active nav links, section-divider hairlines, and the 'Sign In' CTA background, but never floods a hero panel or card background. The restraint is what makes it work against the dark canvas. Multiplying it into background fills would fight the game photography for chromatic attention.

What typefaces does Riot Games use, and what are the best substitutes?

Riot uses two proprietary faces. Riot Sans Latin appears at display scale only — 48px / weight 700 for section h2s like 'What's happening?' with tight -1.44px letter-spacing. Inter V Latin (a variable-font variant of Inter) runs everything else: nav labels at 11px / weight 800 / uppercase, body copy at 20px / weight 600, sub-heads at 18px / weight 700. The closest open-source substitutes are Barlow Condensed or Bebas Neue for Riot Sans Latin at display scale, and Inter (which Riot Sans is derived from) for the Inter V Latin tiers. The uppercase transform and tight tracking at the nav tier are as important as the typeface itself.

Why does Riot Games use a warm near-black instead of pure black?

The canvas color (#2b2a29) is a warm, dark brownish gray rather than pure black — the themeColor declared in the page's meta tags is #252423, confirming this warm-tint intent. Most game-marketing sites use either pure black or a blue-tinted near-black. Riot's warm near-black does two things: it softens the contrast with the crimson-red borders (which would look harsher on pure black) and it echoes the warm tones in the VALORANT and League of Legends key-art photography that fills most of the page. The warm floor makes the game-cover imagery feel embedded rather than dropped on top.

How does the Riot Games game carousel work in the design system?

The Games section uses a horizontally scrollable card row at desktop, showing each franchise (2XKO, Inbound, League of Legends, VALORANT, Teamfight Tactics, Wild Rift) as a full-bleed photograph card with the game logo overlaid in white at the bottom-left. There is no card background color — the entire card surface is the game's key-art photograph. Corner rounding is 8px (the system's dominant radius), and card height is fixed at approximately 280px at desktop. The horizontal scroll pattern lets Riot add franchises without expanding the vertical layout. No game-specific color token bleeds into the card chrome — the franchise identity lives entirely in the photography.

Can I use this DESIGN.md to build a game-studio marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Riot's specific moves: warm near-black canvas (#2b2a29) instead of pure black, crimson as a text-and-border accent that appears at borders and labels but not hero backgrounds, Riot Sans Latin for display headings with Inter V Latin for everything else, uppercase-with-tracking at 11px for nav labels, and photography-forward cards with no background color. The one move worth borrowing only if your product has compelling imagery: the willingness to let photography supply all chromatic decoration. If your imagery is weak or stock, the dark-frame system will feel hollow rather than editorial.

Riot Games Design System

Riot Games' marketing-site design system as a DESIGN.md file.

About Riot Games DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source riotgames.com

Gaming & Entertainment

Riot Games' marketing site is a dark editorial grid where game-cover photography does every chromatic job that a brand accent would typically do — and crimson red does everything else. The hero banner is a full-bleed League of Legends or VALORANT key-art image, dark and cinematic; below it, a horizontal game-carousel shows each franchise (2XKO, Inbound, League of Legends, VALORANT, Teamfight Tactics) as a photograph-forward card. Section headings like "What's happening?" and "Games" appear in Riot Sans Latin at 48px / weight 700. Everything that is not a heading or photography runs Inter V Latin: navigation at 11px / weight 800 / uppercase, body copy at 20px / weight 600, the "Explore Games" CTA at 12px / uppercase with 0.96px letter-spacing. The brand crimson (#d1363a) appears 464 times — almost entirely as text and border color, never as a background fill. Unlike the game-marketing convention of coating every surface in franchise color, Riot uses red as an underlining discipline: active states, selected labels, and the nav hairline, not the hero fill.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 15 color tokens anchored by the near-black canvas (#2b2a29), the brand crimson (#d1363a), white ink (#ffffff), and two text-muted tones (#656462, #808080); 12 typography tokens spanning Riot Sans Latin at two display sizes and Inter V Latin across 10 size-weight-transform combinations; 5 radius tokens centered on 8px; and 15 component definitions covering the crimson-accented nav, the all-uppercase pill CTA, the game-card photography containers, and the editorial section headings.

Feed this file to Claude or Cursor and it will reproduce Riot's specific moves: near-black canvas with warm gray cast instead of pure black, crimson as a text-and-border-only accent rather than a fill, two-font hierarchy where Riot Sans Latin appears only at display scale, and uppercase-with-tracking on every interactive label. The most transferable idea: photography as the only decoration. The UI system offers no gradient backgrounds, no color zones, no illustrated hero — just a disciplined dark frame that pushes every chromatic moment onto the game imagery inside it.

What makes it distinct

Red as text and border, not fillthe brand voltage #d1363a appears 464 times but almost exclusively as text color and border; backgrounds stay near-black or photographic
Riot Sans Latin for display onlythe custom headline face appears at 48px for section h2s; all other text runs Inter V Latin, creating a deliberate two-voice system
Uppercase at every label tierInter V Latin nav links, section overlines, and CTA labels all carry text-transform: uppercase with tracking 0.96–1.04px for a command-line density
Photography does all the chromatic workthe game-cover grid (2XKO, VALORANT, League of Legends, Arcane) supplies every non-brand color on the page; the UI system stays neutral
Near-black canvas with warm tintthe page floor (#2b2a29) has a slight warm gray cast rather than pure black, softening the contrast with crimson-red border elements

Live at riotgames.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

riotgames.com

Explore Riot Games

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Riot Games design system FAQ

Common questions about Riot Games's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Riot Games — official site

Riot Games' public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.