--- version: alpha name: "Valorant" description: "Riot's Valorant marketing site is the rare AAA-game brand site that has accepted typography as the primary instrument: Tungsten Bold (condensed, all-caps) handles every display and pre-headline, Inter (regular weight) carries body copy, and the only chromatic accents on a near-black `#0f1923` canvas are the signature signal-red `#ff4655` and a warm bone-white `#ece8e1` borrowed from agent uniforms. Hard 0–4px corners across every component reject the rounded-edtech instinct; thick strokes, hairline rules, and edge-of-page brand watermarks sit beside dense agent stat blocks. The whole system reads like a magazine for tactical shooters." colors: bg: "#0f1923" bg-deep: "#1a242e" bg-section: "#212d39" surface: "#1a242e" surface-strong: "#212d39" surface-translucent: "rgba(15, 25, 35, 0.85)" brand: "#ff4655" brand-deep: "#d62836" brand-active: "#a81e29" brand-tint: "rgba(255, 70, 85, 0.15)" on-brand: "#ffffff" bone: "#ece8e1" bone-soft: "rgba(236, 232, 225, 0.7)" bone-faint: "rgba(236, 232, 225, 0.4)" text: "#ece8e1" text-strong: "#ffffff" text-muted: "#9aa6b1" text-faint: "#6c7780" text-on-brand: "#ffffff" link: "#ff4655" link-hover: "#ffffff" selected-bg: "rgba(255, 70, 85, 0.20)" border: "rgba(236, 232, 225, 0.15)" border-strong: "rgba(236, 232, 225, 0.30)" border-brand: "#ff4655" success: "#22c55e" warning: "#f5a524" danger: "#ff4655" info: "#9aa6b1" typography: display: fontFamily: "Tungsten-Bold" fontSize: "144px" lineHeight: 1.6 letterSpacing: "0.01em" body: fontFamily: "Inter" fontSize: "15px" lineHeight: 1.6 mono: fontFamily: "JetBrains Mono" rounded: button: "4px" card: "6px" pill: "9999px" spacing: xs: "0px" sm: "4px" md: "12px" lg: "24px" xl: "40px" --- ## Overview ## Overview Valorant's marketing site is the rare AAA-game brand that has accepted typography as the primary instrument. Tungsten Bold — the condensed display sans Hoefler & Co drew for *Esquire* and *Sports Illustrated* — runs every display headline at 96–144px, all-caps, tightly tracked. Inter handles body copy at 15px regular. The canvas is the brand's "blacksite" near-black `#0f1923` (subtle cool tilt, not pure black). The only chromatic accents are the signal-red `#ff4655` (every CTA, every error, every hit-marker indicator) and a warm bone-white `#ece8e1` (body copy, secondary CTAs) borrowed from agent uniforms. What's rejected here is more telling than what's adopted. No rounded corners on interactive elements — buttons, cards, inputs all 0px. No drop shadows with blur — only hairline rules and 1px red rings on hover. No gradients on CTAs. No serif anywhere. No friendly mascot. The brand has decided it's making a tactical shooter, not a console-store loyalty program. CTAs skew at `-6°` because they evoke knife edges. Section labels are 12px Inter all-caps, 0.20em tracking, sitting above 96px Tungsten display. Cards get a red 2px top-stripe rule instead of a shadow. Agent reveal pages are full-bleed video heroes with the agent codename in 144px Tungsten over a 70% black scrim. The whole layout reads like a *Wired* feature about a war you can't quite tell is real. **Key Characteristics:** - Near-black canvas `#0f1923` (cool tilt, never pure black) - Tungsten Bold for ALL display, all-caps, 96–144px hero - Bone-white `#ece8e1` body — never pure white at 100% - Signal-red `#ff4655` is the only chromatic accent - 0px radius on every interactive element - CTAs skew `-6°` (the knife-edge mark) - Cards use red top-stripes, not shadows - 0.16–0.20em tracking on every uppercase label - Hairline rules everywhere; no soft shadows on UI - Dense agent-stat blocks coexist with magazine-scale display type ## Colors ### Primary - **Background** (`#0f1923`): the "blacksite" canvas — near-black with cool tilt, never pure `#000`. - **Text** (`#ece8e1`): body uses Bone, never pure white at 100%. - **Text Strong** (`#ffffff`): display headlines pop to pure white. ### Brand — Signal Red - **Brand** (`#ff4655`): "ELO Red" / signal red — every CTA, hit-marker, error. - **Brand Deep** (`#d62836`): pressed. - **Brand Active** (`#a81e29`): icon strokes on red bg. - **Brand Tint** (`rgba(255, 70, 85, 0.15)`): subtle wash for selected. ### Bone (warm off-white scale) - **Bone** (`#ece8e1`): body, secondary CTAs. - **Bone Soft** (70%): muted body, captions. - **Bone Faint** (40%): tertiary, breadcrumbs. ### Surface - **Surface** (`#1a242e`): cards on dark. - **Surface Strong** (`#212d39`): featured / hover. - **Surface Translucent** (85% bg): video-hero overlay. ### Borders - **Border** (15% bone): hairline. - **Border Strong** (30% bone): emphasis hairline. - **Border Brand** (`#ff4655`): 1–2px red rule under headers + cards. ### Semantic - success `#22c55e`, warning `#f5a524`, danger `#ff4655` (= brand), info cool gray. ## Typography ### Font Family - **Display**: Tungsten Bold (condensed all-caps display sans). Fallback chain Tungsten-Bold → Bebas Neue → Oswald → Impact → sans-serif. - **Body**: Inter regular at 15px line-height 1.6. Falls back to DIN Pro and system stacks. - **Mono**: JetBrains Mono / IBM Plex Mono in stat blocks and code samples. ### Hierarchy | Role | Font | Size | Weight | LH | Tracking | Notes | |------|------|------|--------|-----|----------|-------| | display-hero | Tungsten | 144 | 700 | 0.92 | 0.01em | agent reveal | | display-xl | Tungsten | 96 | 700 | 0.95 | 0.01em | section H | | display-lg | Tungsten | 72 | 700 | 1.0 | 0.01em | feature heading | | h1 | Tungsten | 56 | 700 | 1.05 | 0.005em | sub-section | | h2 | Tungsten | 40 | 700 | 1.1 | 0.005em | card heading | | h3 | Tungsten | 28 | 700 | 1.15 | 0 | sub-card | | h4 | Tungsten | 22 | 700 | 1.25 | 0 | inline emphasis | | eyebrow | Inter | 14 | 700 | 1.2 | 0.18em (UPPER) | section labels | | body-lg | Inter | 18 | 400 | 1.55 | 0 | hero subhead | | body | Inter | 15 | 400 | 1.6 | 0 | body | | body-sm | Inter | 13 | 400 | 1.5 | 0 | secondary | | label | Inter | 12 | 700 | 1.2 | 0.20em (UPPER) | tags, agent badges | | button | Inter | 14 | 700 | 1.0 | 0.16em (UPPER) | CTA | | button-lg | Inter | 16 | 700 | 1.0 | 0.16em (UPPER) | hero CTA | ### Principles - **Tungsten condensed for display, no exceptions.** - **Display copy ALL CAPS** — eyebrow, hero, section H. Mixed case only on body and dek. - **Heavy tracking on uppercase**: 0.16em on buttons, 0.18em on eyebrows, 0.20em on labels. - **Never pure white for body**. Bone `#ece8e1` is warmer; white reserved for max-emphasis display. - **Tight leading on display**: 0.92 hero, 0.95–1.0 elsewhere. - **Body 15px, not 16px** — denser, magazine-like. ## Layout ### Spacing - Base 4px, scale `[0, 4, 8, 12, 16, 20, 24, 32, 40, 56, 72, 96, 128, 160, 200]` - 96px is the workhorse between sections - 200px reserved for hero top-pad ### Grid & Container - Page max width 1440px (wider than typical SaaS) - Hero often full-bleed video, 100vh - Agent reveal: image left 60%, copy right 40% (asymmetric on purpose) - Stat blocks: 4-up dense grid, 32px gap, no internal borders — only external ### Whitespace - Density allowed in stat blocks; generous around hero typography - Section pads 128–200px on marketing; 56–72px on docs ### Section Cadence - Alternating bg `#0f1923` ↔ `#1a242e` ↔ video hero - No light sections at all | Breakpoint | px | Behavior | |-----------|-----|----------| | mobile | 0-479 | hero scales 144→64px; nav collapses to red hamburger | | tablet | 480-767 | 2-col agent grid; stat blocks stack | | desktop | 768-1279 | full marketing grid; 4-up stat blocks | | wide | 1280-1440 | identical, larger hero video | ### Touch Targets 44×44px min on mobile, but skewed buttons get extra horizontal pad to compensate for visual angle. ### Per-component - Nav → red hamburger at <768px, full-screen overlay menu - Agent cards → vertical scroll with snap points on mobile - Stat tables → horizontal-scroll containers with red gradient fade on right edge ### Image Behavior - Hero video: `cover`, 16:9 aspect with hard 100vh cap - Agent portraits: `cover`, top-aligned, 60vh tall ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 | none | default | | 1 | 1px hairline rule | cards, panels | | 2 | 1px red ring outside | hover state | | 3 | 2px solid red top-stripe | featured cards | | 4 | `0 24px 64px rgba(0,0,0,0.80)` | modal / video lightbox | ### Shadow Philosophy The brand rejects soft shadows on UI. Elevation is signaled by **rules and rings**, not blur. Modals get a heavy black shadow because they're cinematic, not interface. ## Shapes | Tier | Value | Use | |------|-------|-----| | None | 0 | **default** for buttons, cards, inputs, panels | | Micro | 1 | hairline-style indicator dots | | Standard | 2 | rare; only on agent stat sub-cells | | Comfortable | 4 | tooltip / toast | | Relaxed | 6 | dropdown menu | | Pill | 9999 | agent role badges only | The brand commits to **0px** on all primary surfaces. 4-6px shows up only on tooltips/dropdowns where rounding aids legibility. ## Components ### Buttons (skewed -6°) **Primary** — signal red: - bg `#ff4655`, text `#ffffff`, font Inter 14px 700 0.16em UPPER - padding 14×32, radius 0, transform `skew(-6deg)`, text counter-skewed `+6°` - Hover: bg `#ffffff`, text `#0f1923` (full inversion) - Press: bg `#d62836` - Disabled: bg 40% red, text 40% white **Ghost** — bordered: - bg transparent, text bone, 1px border at 30% bone - Same skew - Hover: bg bone, text blacksite ### Cards - bg `#1a242e`, 0px radius, padding 32 - 2px solid red `#ff4655` top-stripe — the brand's card signature - No drop shadow; on hover, 1px red ring outside card ### Pills (agent role badges) - bg bg-deep, text bone, 1px border at 15% bone, radius 9999 (only place pills exist) - font label (12px 700 0.20em UPPER) ### Inputs - bg bg-deep, 1px border at 30% bone, 0px radius, padding 12×16 - Focus: border shifts to `#ff4655`, no glow ring - Label sits above input in eyebrow style ### Navigation - 80px sticky header, near-black bg with bottom hairline - Logo left (V mark in white), 5-6 items center bone color 0.18em 14px, "PLAY FREE" red skewed CTA right ### Easing & duration - **Standard ease**: `cubic-bezier(0.65, 0, 0.35, 1)` — sharp tactical curve - **Emphasized ease**: `cubic-bezier(0.85, 0, 0.15, 1)` — weapon-snap - Durations: 100ms (hover), 180ms (focus), 260ms (modal, dropdown), 420ms (cinematic, agent reveal) ### Per-component - **Primary CTA hover**: bg → bone, text → blacksite, full color inversion in 100ms - **Card hover**: 1px red ring grows from 0 to 1px in 180ms - **Agent card reveal (scroll)**: cinematic ease, 420ms, fade + 24px translate - **Video hero**: autoplay loops with first 4s opacity fade-in - **Cursor on interactive**: subtle scale 1.02 ### Reduced Motion Honors `prefers-reduced-motion: reduce`. Skew transforms remain (purely visual brand signal); translate/scale animations replaced with opacity. Video heroes pause and show poster frame. ### Contrast - bone on bg: `#ece8e1` on `#0f1923` = **14.2:1** (AAA at body) - white on bg: `#ffffff` on `#0f1923` = **17.8:1** (AAA) - white on brand: `#ffffff` on `#ff4655` = **4.5:1** (AA at body, AAA at large) ### Focus 2px solid `#ff4655` ring with 1px outset bg gap (looks like a tactical UI selection). ### ARIA & Keyboard - Skewed CTAs maintain accessible name from text content (skew is decorative) - Video heroes have visible play/pause + `prefers-reduced-motion` poster fallback - Agent stat blocks use semantic table markup with `` for screen readers ### Screen Reader - Visually all-caps labels are NOT all-caps in HTML (CSS `text-transform: uppercase`) so screen readers pronounce them as normal words - Decorative red top-stripes have `aria-hidden` - Agent ability tooltips announce via `aria-describedby` ### Tone **Tactical-precise, never effusive.** Copy is short, declarative, military-coded. Verbs over adjectives. Headlines often drop subjects ("DEFY THE LIMITS" not "You can defy the limits"). ### Microcopy patterns - Primary CTA: **"PLAY FREE"** — never "Sign up" or "Get started" - Agent reveal: **"REVEALED: "** — always uppercase, colon-anchored - Lobby: **"AGENT SELECT"**, **"ROUND 1"** — magazine all-caps - Errors: **"CONNECTION TERMINATED"**, **"AGENT UNAVAILABLE"** - Loading: **"INITIALIZING"** — never "Please wait" ### Empty states The brand mostly avoids empty states by replacing them with 0-stat displays (0 wins, 0 deaths, 0 elims). When unavoidable: **"NO MATCHES YET — DEPLOY TO FIND ONE"**. ### CTA verb conventions - **PLAY** (game entry, lobby, queue) - **DEPLOY** (training, range) - **VIEW** (agent, weapon, map detail) - **REVEAL** (cinematic / story) - Avoid: "Learn", "Discover", "Explore" — too soft **Dark-only.** The brand has no light mode. Marketing site, in-game UI, and Riot Account interfaces all use the same `#0f1923` base. If a partner integration requires light mode (e.g. embedded press kit), invert: bg → bone, text → blacksite, brand red unchanged. Skew, hard corners, Tungsten remain. Valorant's brand language emerged in 2020 as Riot positioned the title as the tactical-shooter answer to *Counter-Strike: Global Offensive*. Where CS:GO leaned military-utility, Valorant leaned magazine-editorial. Hoefler & Co's Tungsten — drawn for *Esquire* and *Sports Illustrated* — became the display face. The signal-red `#ff4655` was tuned in-house to read on dark canvas without glow at 5+ meters (the assumed esports stage distance). The site rejects the rounded-edtech instinct of mainstream gaming sites (PlayStation, Xbox web feels comparatively soft). Hard corners, hairline rules, all-caps display, 0.16–0.20em tracking on labels read like a *Wired* feature, not a marketing page. The skewed CTA is Riot's signature interaction trick — also visible on League of Legends (different colors) and Project L. **Named influences:** - **Tungsten by Hoefler & Co** ([typography.com](https://www.typography.com/fonts/tungsten)) - **Counter-Strike (Valve)** — tactical-shooter UI legacy - **Wired (US edition)** — magazine layout instincts - **Tactical military typography** — all-caps + extended tracking on agent code-names - **Riot League of Legends** — in-house Riot brand language ## Do's and Don'ts ### Do - **Use Tungsten Bold for every display.** No Helvetica Compressed substitute. - **Skew CTAs `-6°`** with text counter-skewed `+6°` to read straight. - **Commit to 0px radius** on buttons, cards, inputs. - **Use Bone `#ece8e1` for body**, not pure white. - **Track uppercase aggressively** (0.16em buttons, 0.18em eyebrows, 0.20em labels). - **Cards get a 2px red top-stripe**, not a shadow. - **Use red `#ff4655` exclusively for primary CTA + brand mark.** - **Hero typography goes huge** (96–144px). Don't scale below 64px on hero, even mobile. ### Don't - **Don't round corners.** 0px is the rule; 4-6px on dropdowns is the only exception. - **Don't use rounded sans-serif for display.** Tungsten Bold or nothing. - **Don't add gradients** on CTAs, headers, or cards. - **Don't add drop-shadow blur on UI.** Hairlines and rings only. - **Don't make body 16px.** 15px is the brand's beat. - **Don't substitute red.** `#ff4655` is the brand red — not Tailwind red, not `#dc2626`. - **Don't write friendly microcopy.** "Welcome back!" is off-brand. "DEPLOYED" is on-brand. - **Don't add a light mode** without explicit Riot brand approval. ### Quick Color Reference - bg (blacksite): `#0f1923` - bg-deep (surface): `#1a242e` - text (bone): `#ece8e1` - text-strong (white): `#ffffff` - brand (signal red): `#ff4655` / pressed `#d62836` - border (15% bone): `rgba(236, 232, 225, 0.15)` ### Example Component Prompts > Build a Valorant-style hero: 100vh full-bleed video bg, near-black overlay scrim, 144px Tungsten Bold heading "DEFY THE LIMITS" all-caps tracked 0.01em in pure white, 18px Inter dek in `#ece8e1`. Skewed `-6°` red CTA "PLAY FREE" 14px Inter 700 0.16em UPPER. 200px top pad. > Design an agent reveal card: `#1a242e` surface, 0px radius, 32px pad, 2px red top-stripe `#ff4655`. 96px Tungsten codename ALL-CAPS, 12px label eyebrow "DUELIST" in `#ff4655`. 4-up ability stats below in mono. > Render a stat block: 4 columns, no internal borders, each cell labelled in 12px Inter 700 0.20em UPPER bone-soft, value in 56px Tungsten Bold pure white. 1px hairline divider top + bottom. > Build a tactical button: 0px radius, signal-red bg, white text 14px Inter 700 0.16em uppercase "DEPLOY", padding 14×32, transformed `skew(-6deg)` with text inner-counter `skew(6deg)`. Hover inverts colors fully. > Design a tooltip: 4px radius (only place corners aren't 0), bg-deep, 1px bone-15% border, 13px Inter body, 12×16 padding. No arrow. ### Iteration Guide 1. **Start with Tungsten and 0px corners.** 2. **Skew every primary CTA.** -6° transform is the brand's signature. 3. **Track uppercase 0.16em+.** Eyebrows go 0.18-0.20em. 4. **Use red sparingly.** One CTA per fold, one accent stripe per card. 5. **Bone, not white.** Body in `#ece8e1`; reserve `#ffffff` for max-emphasis display. 6. **Hairlines beat shadows.** 1px rules and 1-2px stripes; avoid `box-shadow: blur > 0` on UI. 7. **Density is OK in stat blocks**, generous around hero. 8. **Reject roundness.** If it feels Discord-friendly, you're off-brand.