--- version: alpha name: "Riot Games" website: "https://www.riotgames.com" description: >- A game-studio marketing site that treats saturated crimson red (#d1363a) as the system's single chromatic moment — appearing 464 times across text and borders but almost never as a background fill, functioning instead as an underlining accent against a near-black canvas (#2b2a29). Display headlines run Riot Sans Latin at 48px / weight 700 with tight -1.44px tracking; body and navigation run Inter V Latin at extreme weights (800 for nav labels, 600-700 for sub-heads) with uppercase transforms on every small label. The entire visual identity compresses game-cover photography and esports key-art into a dark editorial grid, borrowing its confidence from the imagery rather than from brand chrome. seo: title: "Riot Games Design System for React — crimson red on near-black, Riot Sans Latin, 15 components" metaDescription: "Riot Games' marketing-site design system as a DESIGN.md file. Crimson red #d1363a as a text and border voltage, Riot Sans Latin at 48px display, Inter V Latin at weight 800 for nav, 15 color tokens, 15 components. For React, Next.js, and AI tools." highlights: - "Red as text and border, not fill — the 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 only — the 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 tier — Inter 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 work — the 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 tint — the page floor (#2b2a29) has a slight warm gray cast rather than pure black, softening the contrast with crimson-red border elements" tags: - "Gaming & Entertainment" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.riotgames.com" title: "Riot Games — official site" description: "Riot Games' public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Riot Games' primary brand color?" answer: "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." - id: "typography" title: "What typefaces does Riot Games use, and what are the best substitutes?" answer: "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." - id: "dark-canvas" title: "Why does Riot Games use a warm near-black instead of pure black?" answer: "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." - id: "game-card-grid" title: "How does the Riot Games game carousel work in the design system?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build a game-studio marketing site?" answer: "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." mockups: - "marketing-hero" - "media-grid" colors: primary: "#d1363a" canvas: "#2b2a29" surface-1: "#141212" surface-2: "#1f1f1f" ink: "#ffffff" ink-muted: "#656462" ink-subdued: "#808080" hairline: "#e7e6e3" hairline-dark: "#adacaa" near-black: "#000000" near-black-soft: "#0a0a0a" typography: display-xl: fontFamily: "\"Riot Sans Latin\", Arial, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 72px letterSpacing: "-1.44px" display-md: fontFamily: "\"Riot Sans Latin\", Arial, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 48px letterSpacing: "-1.44px" heading-lg: fontFamily: "\"Inter V Latin\", Arial, sans-serif" fontSize: 56px fontWeight: 700 lineHeight: 67px letterSpacing: "-0.48px" heading-md: fontFamily: "\"Inter V Latin\", Arial, sans-serif" fontSize: 31px fontWeight: 700 lineHeight: 37px letterSpacing: "-0.93px" heading-sm: fontFamily: "\"Inter V Latin\", Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 29px letterSpacing: "-0.48px" body-lg: fontFamily: "\"Inter V Latin\", Arial, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 30px letterSpacing: "-0.6px" body-md: fontFamily: "\"Inter V Latin\", Arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 25px letterSpacing: "-0.54px" label-md: fontFamily: "Inter, Arial, sans-serif" fontSize: 13px fontWeight: 600 lineHeight: 16px letterSpacing: "1.04px" label-sm: fontFamily: "Inter, Arial, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 15px letterSpacing: "0.96px" nav-link: fontFamily: "\"Inter V Latin\", Arial, sans-serif" fontSize: 11px fontWeight: 800 lineHeight: 17px letterSpacing: "-0.33px" caption: fontFamily: "\"Inter V Latin\", Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 17px letterSpacing: "-0.48px" button-md: fontFamily: "Inter, Arial, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 15px letterSpacing: "0.96px" rounded: none: "0px" sm: "4px" md: "8px" lg: "24px" pill: "32px" full: "50%" spacing: xs: "4px" sm: "8px" md: "10px" base: "16px" lg: "24px" xl: "30px" 2xl: "32px" 3xl: "60px" 4xl: "80px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.lg}" padding: "7.5px 16px" height: "34px" button-primary-hover: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.lg}" padding: "7.5px 16px" height: "34px" borderColor: "{colors.primary}" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "8px 12px" height: "34px" borderColor: "{colors.hairline}" button-cta: backgroundColor: "{colors.primary}" textColor: "{colors.near-black}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "10px 30px" height: "40px" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "0px 8px" height: "48px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "10px" nav-link-active: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.nav-link}" padding: "10px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-lg}" padding: "0px" game-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.md}" padding: "0px" news-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "16px 8px" overline-label: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.label-sm}" padding: "0px" section-divider: backgroundColor: "transparent" borderColor: "{colors.primary}" footer: backgroundColor: "{colors.near-black}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" padding: "30px 80px" --- ## Overview Riot Games' marketing surface is a disciplined dark editorial frame, not a game-marketing spectacle. **Red as discipline, not decoration.** The crimson voltage (#d1363a) appears 464 times on the page — but almost entirely as text color and border color, not background fill. Where Activision or EA flood hero panels with franchise color and 3D renders, Riot holds a near-black canvas and routes every chromatic impulse through photography of the games themselves. The brand color marks active states and hairline dividers; the games do the rest. Typography reinforces the discipline. Riot Sans Latin appears at a single scale — 48px / weight 700 / -1.44px tracking — for section display headings only. Inter V Latin carries everything else, at extreme weights: weight 800 for nav labels (uppercase, negative tracking), weight 700 for card headings, weight 600 for body copy. The result is a system where the heaviest typographic moment in navigation (11px / 800) is smaller than the lightest typographic moment in body copy (20px / 600). Size and weight move in opposition, which is unusual in editorial systems. **Key Characteristics:** - Near-black canvas (#2b2a29) with a warm brownish cast — not pure black, matching the warm tones in VALORANT and League key-art photography. - Crimson (#d1363a) as text-and-border-only voltage — 231 text uses, 231 border uses, 2 background uses in the full captured page. - Two-font hierarchy: Riot Sans Latin for display h2 only; Inter V Latin at weights 400–800 for every other tier. - Uppercase-with-tracking at every interactive label tier (nav: 11px / 800 / uppercase; CTAs: 12px / 600 / uppercase with 0.96px tracking). - Photography-forward card grid where game covers (2XKO, League, VALORANT, TFT) supply all chromatic variety; no game-specific color bleeds into the card chrome. - 8px as the dominant corner radius — cards, buttons, and secondary surfaces all share the same soft-but-not-pill rounding. - "We're hiring" stats section pairs large counting numbers (190 disciplines / 24 offices) with the same uppercase Inter label treatment, extending the editorial register to the corporate identity surface. ## Colors ### Brand - **Crimson Primary** (`{colors.primary}` — #d1363a): frequency 464. Used as text (231), border (231), background (2). The system's single chromatic voltage — marks active nav links, section dividers, the Sign In CTA background, and occasionally text overlines. Almost never appears as a background fill; the near-black canvas is the floor. ### Surface - **Canvas** (`{colors.canvas}` — #2b2a29): frequency 42 as background or border. The dominant page floor — a warm near-black with a brownish cast that matches the warm tones in game key-art. The themeColor declared in page meta is the closely related #252423, confirming the warm-tint intent. - **Surface-1** (`{colors.surface-1}` — #141212): frequency 12. Used for card surfaces, cookie-consent panel overlays, and the deepest dark regions behind photography. - **Surface-2** (`{colors.surface-2}` — #1f1f1f): frequency 1 as background. Reserved for secondary hover states. - **Near-black** (`{colors.near-black}` — #000000): frequency 50 as text and border (osano dialog system). Pure black appears primarily in the cookie-consent dialog overlay and footer. ### Text - **Ink** (`{colors.ink}` — #ffffff): frequency 221 — dominant text and border color. Pure white on near-black, the contrast is high. - **Ink Muted** (`{colors.ink-muted}` — #656462): frequency 16 as text. Used for body copy and secondary meta text — a warm medium gray that echoes the canvas's warm cast. - **Ink Subdued** (`{colors.ink-subdued}` — #808080): frequency 31 as background. Used in muted backgrounds, placeholder zones. ### Hairlines - **Hairline** (`{colors.hairline}` — #e7e6e3): frequency 52. The light border tone for dividers and toggle-adjacent UI surfaces — a warm near-white, not pure white. - **Hairline Dark** (`{colors.hairline-dark}` — #adacaa): frequency 2. Appears on mid-tone separator elements. ## Typography ### Font Families **Riot Sans Latin** is a proprietary custom sans used exclusively at display scale (48px section h2s). The fallback is `Arial, sans-serif`. **Inter V Latin** is a variable-font variant of Inter that runs every other tier from nav labels to body copy. At the caption and small-label tiers, the standard Inter stack (`Inter, Arial, sans-serif`) is used without the variable suffix. There is no serif, monospace, or display-contrast second family. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 48px | 700 | 72px | Section h2 ("What's happening?"), 1.5 leading | | `{typography.display-md}` | 48px | 700 | 48px | Section h2 alternate, tight 1.0 leading | | `{typography.heading-lg}` | 56px | 700 | 67px | Hero span counter (190 / 24) | | `{typography.heading-md}` | 31px | 700 | 37px | Sub-section h3 | | `{typography.heading-sm}` | 24px | 700 | 29px | Card link headlines | | `{typography.body-lg}` | 20px | 600 | 30px | Body paragraph / hero sub-copy | | `{typography.body-md}` | 18px | 700 | 25px | Card body / h3 sub-label | | `{typography.label-md}` | 13px | 600 | 16px | Section overline — uppercase, 1.04px tracking | | `{typography.label-sm}` | 12px | 600 | 15px | CTA button label — uppercase, 0.96px tracking | | `{typography.nav-link}` | 11px | 800 | 17px | Top nav labels — uppercase | | `{typography.caption}` | 11px | 400 | 17px | Small meta text | | `{typography.button-md}` | 12px | 600 | 15px | Primary button label — uppercase | ### Principles Riot's weight scale is inverted relative to size: nav links (the smallest text) are at the heaviest weight (800), while body copy (the largest regular text) is at weight 600. Every text element at 14px or smaller carries uppercase transform and positive letter-spacing. The only typography that stays lowercase is body paragraph text. For font substitutes: Riot Sans Latin → Barlow Condensed or Bebas Neue at display scale; Inter V Latin → Inter at identical weights. ## Layout ### Spacing System - **Base unit:** 8px with a secondary 10px module (visible in card and nav padding). - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 10px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 30px · `{spacing.2xl}` 32px · `{spacing.3xl}` 60px · `{spacing.4xl}` 80px. - **Section vertical padding:** ~60px between major editorial sections. - **Footer horizontal padding:** 80px — the widest margin on the page. ### Grid & Container - **Max content width:** ~1280px — constrained editorial band on desktop. - **Hero:** full-bleed photograph, 1440px wide, key-art video or still carrying franchise identity. - **Games carousel:** horizontal scrollable row of game-cover cards, each approximately 200px wide × 280px tall at desktop, 8px rounding. - **News grid:** 3-column asymmetric layout (one large feature card + smaller secondary cards). - **Esports section:** 4-franchise horizontal strip, each card carrying a full-bleed franchise logo on dark background. ### Rhythm The page alternates between **full-bleed photography** and **constrained dark editorial** sections. All editorial bands rest on the same `{colors.canvas}` floor with no background color variation — depth comes from photography contrast, not background-color shifts. Section dividers are crimson (`{colors.primary}`) hairlines above section labels. ## Elevation The system has **no shadow tier**. The dark canvas floor is too dark for traditional drop shadows. Hierarchy comes from photography (maximum visual weight) versus editorial text (minimum visual weight). The elevated surface (`{colors.surface-1}`) appears on card backgrounds and cookie-consent dialogs — it sits 3–4 lightness points above the canvas, enough contrast to read as a lifted panel without any shadow drawn. - **Flat:** 99% of surfaces — nav, editorial sections, footer, game-category strips. - **Tonal lift:** `{colors.surface-1}` (#141212) cards and panels. - **Photography as elevation:** full-bleed images carry the maximum visual mass on the page. ## Shapes The radius scale is **minimal and consistent**, centered on 8px: - `{rounded.none}` 0px — form inputs and nav hairlines. - `{rounded.sm}` 4px — small chip elements and tight secondary surfaces. - `{rounded.md}` 8px — the dominant rounding for game cards, news cards, the Sign In CTA button, and most interactive surfaces. - `{rounded.lg}` 24px — larger promotional cards and pill-adjacent surfaces. - `{rounded.pill}` 32px — the "Explore Games" CTA pill and selected-state nav indicators. - `{rounded.full}` 50% — avatar thumbnails in news cards. There is no 16px or 20px intermediate tier — the scale jumps from 8px directly to 24px, which gives card surfaces a specific editorial crispness at the 8px tier. ## Components **`button-primary`** — The Sign In CTA. Crimson `{colors.primary}` fill, white text, `{rounded.lg}` 24px rounding, 7.5x16 padding, 34px height. Inter at 12px / weight 600 / uppercase / 0.96px tracking. The only button on the page that uses the brand-voltage fill. **`button-cta`** — The "Explore Games" pill CTA. Crimson fill, near-black text, `{rounded.pill}` 32px rounding, 10×30 padding. Heavier horizontal padding than the nav Sign In, marking it as a primary section CTA. **`button-secondary`** — Outlined button with transparent fill, white text, 1px `{colors.hairline}` border. **`top-nav`** — Near-black `{colors.canvas}` surface, white text in `{typography.nav-link}` (11px / weight 800 / uppercase), 48px height. Houses the Riot Games logo at left, links (Games, Esports, Universe, Jobs, More), and the red Sign In pill at right. **`nav-link`** — Transparent, white text, 10px all-side padding. Uppercase. **`nav-link-active`** — Same as nav-link but text color flips to `{colors.primary}` crimson — the only hover/active signal in the nav. **`hero-heading`** — White text in `{typography.display-xl}` (48px / 700), rendered on a full-bleed photography background. **`game-card`** — Full-bleed game key-art as the card surface, `{colors.surface-1}` fallback, `{rounded.md}` 8px rounding, 0 internal padding. Game logo overlaid at bottom-left in white. **`news-card`** — Dark `{colors.canvas}` fill, white headline text, muted-gray body text, `{rounded.md}` 8px rounding, 16×8 padding. **`body-paragraph`** — Transparent background, `{colors.ink-muted}` (#656462) text at `{typography.body-lg}` (20px / 600). **`overline-label`** — Transparent background, `{colors.primary}` crimson text at `{typography.label-sm}` (12px / 600 / uppercase). Appears above section titles as category markers. **`section-divider`** — A 1px horizontal rule in `{colors.primary}` crimson, placed above section labels. **`footer`** — Pure black `{colors.near-black}` fill, muted-gray text, 30×80 padding. Wide horizontal margin echoes a newspaper footer rather than a standard nav-width container. ## Do's and Don'ts **Do** use the crimson voltage exclusively as text and border. The brand color's restraint is what makes the near-black canvas feel editorial rather than aggressive. Filling a hero section with `{colors.primary}` would collapse the distinction between brand chrome and game photography. **Do** uppercase every label and nav text. The uppercase-with-tracking treatment at 11–13px is the system's most consistent typographic move — it distinguishes interactive labels from content text at a glance without any color signal needed. **Do** use `{colors.ink-muted}` (#656462) for body copy on the dark canvas, not `{colors.ink}`. Pure white body text on near-black is too high-contrast for the reading cadence of longer paragraphs. The warm gray reads more comfortably across 3–4 sentence runs. **Do** reserve `{rounded.md}` (8px) as the default for every card and button surface. The system's 8px discipline gives it an editorial crispness that distinguishes it from the rounded-card game-marketing convention. **Don't** introduce game-franchise colors (VALORANT teal, League gold, Arcane purple) into the UI chrome. Those colors belong to game-specific brand assets, not to the marketing system's UI layer. Using them in buttons, labels, or card borders would make the corporate site look like a franchise sub-site. **Don't** use weight 400 or 500 for nav links or interactive labels. The Inter V Latin nav tier runs weight 800 — cutting to 400 would eliminate the high-weight discipline that makes the small-text nav readable and intentional. Even 600 is too light for this context. **Don't** use `{colors.ink}` (#ffffff) as card backgrounds. Card surface is `{colors.surface-1}` (#141212) or full-bleed photography — a white card on the near-black canvas would break the dark-editorial register entirely. **Don't** add corner radii above 8px to cards without cause. The `{rounded.lg}` 24px and `{rounded.pill}` 32px tokens exist for promotional CTAs only — using them on game cards would make the editorial grid feel product-landing-page rather than publisher-marketing. ## Known Gaps - **Hover and focus states:** only the nav-link-active (crimson text) state is documented; no focus ring, disabled, or error state captured from the marketing surface. - **Mobile layout:** the game carousel is horizontal-scroll on mobile, but the breakpoint widths, column collapse behavior, and touch-target sizes are not captured from this desktop extraction. - **Animation and video:** the hero banner is a video loop (cinematic game key-art) that cannot be captured in a static DESIGN.md; easing curves, fade-in timing, and parallax scroll behavior are absent. - **Franchise sub-brand palettes:** each Riot game (VALORANT, League, TFT, Arcane) has its own sub-brand design system with distinct color, typography, and illustration. This file captures only the corporate marketing surface. - **Esports-specific tokens:** the Esports & Entertainment section shows franchise logos (Arcane, VALORANT esports, LoL esports, 2XKO) that carry their own visual identities not represented in the token set. - **Form and input states:** the search field in the site uses system-default input styling with no brand token application captured. - **Dark mode toggle:** no alternate theme captured; the marketing surface is dark-only.