---
version: alpha
name: Rockstar Games
description: A pure-black entertainment stage where full-bleed game art devours the canvas, Helvetica Now's condensed bold weight stamps every title with cinematic authority, and a single Rockstar Gold accent — the brand's signature amber — fires the only warm light in an otherwise monochromatic dark system.

colors:
  # Surface / canvas
  background: "#000000"          # the dominant pure-black stage canvas
  surface: "#1a1a1a"             # slightly lifted dark surface for card backgrounds
  surface-raised: "#282828"      # elevated panels, nav chrome — CSS var --border-color level
  surface-overlay: "#111111"     # deep scrim behind hero gradients

  # Ink / text
  ink: "#ffffff"                 # dominant white — all headings and nav on black
  ink-muted: "#cecece"           # secondary text, muted navigation labels — was rgb(206,206,206)
  ink-subtle: "#989898"          # tertiary text, metadata, captions — was rgb(152,152,152)
  on-background: "#ffffff"       # white on the pure black canvas

  # Brand accent — Rockstar Gold
  primary: "#fcaf17"             # Rockstar Gold — CSS var --foundry-alias-color-brand-rockstar-gold; only warm accent
  on-primary: "#000000"          # black label on gold button
  primary-hover: "#e89e14"       # deepened gold on CTA hover
  primary-container: "#3c2800"   # dark amber container for gold-tinted UI — was CSS var yellow-static-1300

  # Game-specific brand accents (contextual, not primary UI chrome)
  accent-rdr: "#cc0000"          # Red Dead Redemption red — CSS var --foundry-alias-color-brand-rdr-red
  accent-bully-blue: "#003366"   # Bully blue — CSS var --foundry-alias-color-brand-bully-blue

  # Borders
  border: "#282828"              # dark panel borders — CSS var --border-color
  border-subtle: "#3f3f3f"       # disabled-state border — CSS var --foundry-alias-color-border-disabled
  border-ghost: "#ffffff"        # semi-transparent white outline for ghost buttons — was rgba(255,255,255,0.5); Google format requires hex

  # Semantic
  error: "#e72424"               # CSS var --foundry-alias-color-border-danger
  success: "#23ad5a"             # CSS var --foundry-alias-color-icon-success
  info: "#4c78b2"                # CSS var --foundry-alias-color-border-information

  # Shadow tint
  shadow-soft: "#000000"         # was rgba(0,0,0,0.2) over black stage — Google format requires hex

  # State / interaction
  focus-ring: "#fcaf17"          # gold focus ring — reuses primary accent for keyboard navigation
  text-hover: "#3860be"          # link hover shift — extracted from dembrandt link delta

typography:
  display-hero:
    fontFamily: "Helvetica Now Display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.45px
    fontFeature: "\"salt\", \"ss01\""
  display:
    fontFamily: "Helvetica Now Display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.375px
    fontFeature: "\"salt\", \"ss01\""
  heading-section:
    fontFamily: "Helvetica Now Display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.12px
    fontFeature: "\"salt\", \"ss01\""
  heading-sub:
    fontFamily: "Helvetica Now Display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.075px
    fontFeature: "\"salt\", \"ss01\""
  body-large:
    fontFamily: "Helvetica Now Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.55px
    fontFeature: "\"salt\", \"ss01\""
  body:
    fontFamily: "Helvetica Now Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.3px
    fontFeature: "\"salt\", \"ss01\""
  nav-link:
    fontFamily: "Helvetica Now Text, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0.3px
  button-ui:
    fontFamily: "Helvetica Now Text, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.35px
  label-uppercase:
    fontFamily: "Helvetica Now Text, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0.3px
  caption:
    fontFamily: "Helvetica Now Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 10px
  md: 20px
  lg: 30px
  xl: 40px
  2xl: 60px
  3xl: 80px
  4xl: 160px

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 30px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
    padding: 10px 30px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 18px
    border: "1px solid {colors.border-ghost}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    padding: 10px 18px
  button-launcher:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 8px 18px
    border: "1px solid {colors.border-ghost}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.surface-raised}"
    rounded: "{rounded.none}"
    padding: 0px
  nav-item:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 12px
  nav-item-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 8px 12px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 15px
    border: "1px solid {colors.border-subtle}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 15px
    border: "1px solid {colors.info}"
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
---

# Rockstar Games Design System

## Overview

Rockstar Games treats its website as a continuation of the game worlds it sells: a deep-black void where the lights belong to the art. The entire canvas is anchored in `{colors.background}`, an unbroken pure black that functions less like a webpage backdrop and more like the space between stars in a GTA night sky. Into this darkness, cinematic key art bleeds edge-to-edge with no margin apology. The design has no interest in brand polish for its own sake; the games *are* the brand, and the system exists to get out of their way.

Typography is handled exclusively through Helvetica Now — the Display cut for large-scale headlines, the Text cut for body and UI — a contemporary recut of Helvetica that removes the compromises of digital-era Neue without abandoning the grit. Tracked tight (–0.45px at 60px) and rendered at weight 700 throughout, every heading lands with the blunt authority of a film title card. The `{colors.primary}` Rockstar Gold (`#fcaf17`) is the only warm color in the system: it appears on the primary CTA button and as the brand wordmark accent, a single amber ember in an otherwise cold monochrome environment. All other accent colors — the `{colors.accent-rdr}` deep red for Red Dead, a Bully blue — are franchise-specific and applied contextually, never globally.

Pill-shaped buttons are the system's single concession to friendliness. Every interactive element on the main canvas is either sharp (0 radius) or fully rounded (`{rounded.pill}`), with nothing in between. Navigation disappears into the black header, white sans-serif labels in uppercase tracking — the links themselves barely visible against the canvas until hovered. The overall experience rewards familiarity: new visitors get blockbuster game art and a gold button; returning players get Newswire, Downloads, the launcher — a site that behaves like a well-worn lobby for franchises they already love.

**Key Characteristics:**
- `{colors.background}` pure black canvas — not near-black, not charcoal, true `#000000` — treats every frame as cinema, not a web page
- `{colors.primary}` Rockstar Gold (#fcaf17) is the singular warm accent; all interactive hierarchy flows through this amber signal
- Full-bleed game art as the primary content unit — the system curates art, not typography, as the hero visual
- Helvetica Now Display at weight 700 for all headings, with `salt` and `ss01` OpenType features engaged for refined glyph alternates
- Pill-radius (`{rounded.pill}`) primary buttons against zero-radius card surfaces — a binary radius vocabulary, nothing in between
- Uppercase tracking on navigation labels (`{typography.nav-link}`) reads like film credits, authoritative and terse
- Navigation hover shifts are whisper-subtle — `rgba(255,255,255,0.027)` over black — barely-there glints rather than hard state changes
- Gradient scrim overlays (black-to-transparent) allow game art to bleed behind text without sacrificing legibility
- Per-franchise accent system: `{colors.accent-rdr}` red for Red Dead, `{colors.accent-bully-blue}` for Bully, isolated from global UI chrome
- Motion is restrained — ease-in-out at 250–300ms dominates; no decorative animation competes with the art
- Dense typography scale but with generous vertical spacing (base unit 5px, anchor 30px for section rhythm)
- `{colors.ink-muted}` (#cecece) and `{colors.ink-subtle}` (#989898) create a three-step ink hierarchy against the black canvas without ever introducing a non-neutral mid-tone

## Colors

### Primary

- **Void Black** (`{colors.background}`): The total canvas and dominant surface. Not a dark mode gray, not a near-black — absolute zero. Establishes the cinematic void that makes game art luminous.
- **Stage Lift** (`{colors.surface}`): Slightly raised dark surface at `#1a1a1a`. Used for card backgrounds and secondary chrome that needs to read as distinct from the pure canvas without breaking the dark register.
- **Panel Raised** (`{colors.surface-raised}`): `#282828` — matches the CSS `--border-color` custom property. Navigation panels, expanded menus, and subtle depth markers.
- **White Ink** (`{colors.ink}`): Pure white `#ffffff` on black. All primary text, headings, and navigation labels.

### Brand Accent

- **Rockstar Gold** (`{colors.primary}`): `#fcaf17` — the CSS variable `--foundry-alias-color-brand-rockstar-gold`. Applied exclusively to the primary CTA button and the Rockstar "R*" wordmark context. The only warm hue in the entire UI system.
- **Primary Hover** (`{colors.primary-hover}`): Deepened amber on CTA interaction, maintaining warmth while signaling active state.
- **Gold Container** (`{colors.primary-container}`): Deep amber `#3c2800` for tinted backgrounds behind gold UI elements — badge contexts, alert containers.

### Text States

- **Muted Ink** (`{colors.ink-muted}`): `#cecece` — secondary body text, sub-labels, and metadata. Steps down from full white without pulling toward gray.
- **Subtle Ink** (`{colors.ink-subtle}`): `#989898` — tertiary text, captions, and disabled-state labels. The third rung of a clean three-step ink ladder.
- **Link Hover** (`{colors.text-hover}`): `#3860be` — an unexpected cobalt blue that appears on link hover; sourced from the `Foundry` design system's interactive state layer rather than the primary gold.

### Semantic / System

- **Error** (`{colors.error}`): `#e72424` — danger borders and destructive action signals.
- **Success** (`{colors.success}`): `#23ad5a` — positive confirmation states.
- **Info** (`{colors.info}`): `#4c78b2` — input focus borders and informational chrome (a notable contrast to the otherwise warm/neutral palette).

### Borders

- **Dark Border** (`{colors.border}`): `#282828` — hairline separators in panel chrome. Near-invisible on black, readable on the lifted surfaces.
- **Ghost Border** (`{colors.border-ghost}`): `#ffffff` (semi-transparent white in practice — was `rgba(255,255,255,0.5)`) — outline-style ghost buttons overlaid on game art.

## Typography

### Font Family

- **Primary Display**: `Helvetica Now Display` — a self-hosted contemporary recut of Helvetica, used for all headings. Fallback chain: `Helvetica Neue, Helvetica, Arial, sans-serif`.
- **Primary Text**: `Helvetica Now Text` — the text-optimized sibling of Helvetica Now, used for body copy, UI labels, and navigation. Fallback: `Arial, sans-serif`.
- **OpenType Features**: `"salt", "ss01"` — stylistic alternates and a custom stylistic set engaged on all Helvetica Now instances. `salt` enables contextual alternates (e.g., single-story 'a' variants); `ss01` adjusts specific character shapes for improved on-screen rendering.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Page-level section titles, hero headline overlays on game art |
| `display` | Secondary content headlines, feature module titles |
| `heading-section` | Section headings, feature card titles |
| `heading-sub` | Sub-section headers, sidebar headings |
| `body-large` | Lead paragraph copy, feature descriptions |
| `body` | Standard body text, news item summaries |
| `nav-link` | Top navigation labels — uppercase, tight-tracked |
| `button-ui` | Button labels — uppercase-compatible, bold |
| `label-uppercase` | Category tags, metadata labels set in caps |
| `caption` | Image captions, legal, footer microtext |

### Principles

- All display headings use `{typography.display-hero}` at weight 700 — no lighter weights for any title context; the system uses ink muting (`{colors.ink-muted}`) for hierarchy, not weight reduction
- Negative tracking at display sizes (–0.45px at 60px) tightens the headline optically; body copy also runs slightly negative to compensate for Helvetica Now's generous default spacing
- Uppercase labels in navigation (`{typography.nav-link}`) are the system's only typographic decoration — elsewhere, case is natural
- `font-feature-settings: "salt", "ss01"` must be declared on every Helvetica Now instance; these features are load-bearing for the brand's refined glyph rendering

## Layout

### Spacing System

The complete spacing scale is in the `spacing:` token block above. Base unit: 5px, with the rhythmic anchor at `{spacing.lg}` (30px) for section-level vertical cadence.

Rockstar uses generous vertical breathing — 80px and 160px gaps between major content modules push sections apart so each game property feels self-contained. Within modules, 5px micro-units handle internal padding and badge spacing with surgical precision.

### Grid & Container

- Max content width: ~1440px (inferred from full-bleed art at standard HD resolutions)
- 12-column fluid grid inside a centered content container
- Game art tiles are asymmetric — hero item spans 8 columns, secondary items span 4, collapsing to single-column stacks below 768px
- Navigation is fixed-position, `{colors.background}` backdrop, full-width

### Whitespace Philosophy

- Section spacing is cinematic rather than editorial: large vertical gaps (80–160px) isolate each game world as its own visual territory
- Within-card spacing is tight by contrast — art fills the card, text overlays float on a gradient scrim
- The system avoids mid-range padding; gaps are either micro (5–10px) for tight UI chrome or macro (60–160px) for section rhythm

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Bare canvas — all game art tiles at rest |
| Subtle (Level 1) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Media cards, thumbnails on hover |
| Card (Level 2) | `rgb(153,153,153) 0px 2px 10px -3px` | Form elements, modals on light subsurfaces |
| Elevated (Level 3) | `rgb(199,197,199) 0px 0px 12px 2px` | Cookie preference UI, popover chrome |
| Scrim | `linear-gradient(rgba(0,0,0,0) 0%, rgb(0,0,0) 100%)` | Game art gradient overlay — text legibility layer |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard focus on buttons, links, and inputs |

**Shadow Philosophy**: Rockstar's depth system is almost entirely gradient-based rather than box-shadow-based. The dominant "elevation" tool is the black scrim gradient applied over game art — a cinematic wipe from transparent to `{colors.background}` that allows title text and CTAs to float readable against the art without hard-edged containers. Traditional box shadows appear only in system UI contexts (cookie banner, preference modals) that sit outside the primary game-marketing experience. The stage is always flat; only the proscenium furniture uses shadow.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses a binary vocabulary:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Game art tiles, cards, nav panels — all content surfaces are sharp |
| `sm` | 2px | Buttons in some legacy/admin UI contexts, checkbox corners |
| `md` | 8px | Input fields, dropdown comboboxes, image thumbnails in lists |
| `pill` | 9999px | All primary and ghost buttons on the main site — the dominant interactive shape |

The radius philosophy is deliberately polarized: content is rectilinear (game art must feel like a frame, not a rounded badge), while interactive affordances are fully rounded (buttons read as controls, not content). Nothing lives in the middle radius range. This binary communicates the brand's discipline — there are no softened compromises on the canvas, only deliberate softness on the CTA.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — `{colors.primary}` Rockstar Gold fill, `{colors.on-primary}` black text, `{rounded.pill}` pill shape, 30px horizontal padding. The singular warm CTA on an otherwise cold-canvas page. Used for "Learn More," "Watch Trailer," and "Get Launcher" contexts.
- **`button-ghost`** — Transparent fill, white text, `{rounded.pill}` shape, with a `{colors.border-ghost}` white hairline border. Used for secondary actions overlaid on game art, where a filled button would obscure the art.
- **`button-launcher`** — The nav-bar "Get Launcher" button: transparent with a subtle white border, smaller padding, `{typography.nav-link}` label. Sits in the fixed navigation without competing with hero CTAs.

### Cards

Game tiles are zero-radius (`{rounded.none}`) rectangular containers with no explicit background — the game art itself *is* the card. Text overlays float on a gradient scrim (`linear-gradient(rgba(0,0,0,0), #000)`). There is no card chrome, border, or shadow at rest; a faint shadow (`{components.card-hover}`) lifts on hover.

### Inputs

Input fields use `{rounded.md}` (8px) with a `{colors.border-subtle}` outline. On focus, the border shifts to `{colors.info}` blue and a secondary fill change signals active state — the one place the info-blue enters the primary brand experience. See `{components.input-focus}` for full focus spec.

### Badges / Tags

Game-franchise labels and category tags use `{rounded.sm}` (2px) — barely rounded, almost sharp. `{colors.primary-container}` dark amber background with `{colors.primary}` gold text for Rockstar-brand contexts; neutral dark-surface variants for category labels.

### Navigation

Fixed-position black header, full-width. `{typography.nav-link}` (15px, 700, uppercase, 0.3px tracking) for all top-nav labels. Hover shifts are intentionally subtle — `rgba(255,255,255,0.027)` background wash, barely visible against the canvas. The nav is designed to disappear when you're looking at the art, and reappear when you need it.

## Do's and Don'ts

### Do

- Use `{colors.background}` pure black as the universal canvas — never introduce off-black or charcoal as a "softer" alternative
- Reserve `{colors.primary}` Rockstar Gold exclusively for primary CTAs and the brand R* mark; it derives power from scarcity
- Apply `font-feature-settings: "salt", "ss01"` to every Helvetica Now Display or Text instance
- Use `{rounded.pill}` for all interactive buttons and `{rounded.none}` for all content surfaces — the binary radius rule is load-bearing
- Layer gradient scrims (`{colors.shadow-soft}` → transparent) over game art before placing text or buttons, never use a hard-edged text box
- Use `{typography.label-uppercase}` for category metadata and `{typography.nav-link}` for navigation — these token pairs signal "system UI" vs "content" through tracking alone
- Reference `{colors.accent-rdr}` and `{colors.accent-bully-blue}` only in franchise-specific contexts; never apply them to global UI chrome
- Allow generous section spacing (`{spacing.3xl}` to `{spacing.4xl}`) between game properties so each franchise reads as its own world

### Don't

- Don't introduce color fills on game art cards — the art is the card; a tinted overlay competes with the franchise visual language
- Don't use mid-range border-radius (4–16px) on buttons — the system is binary (`{rounded.none}` or `{rounded.pill}`)
- Don't add additional accent colors beyond `{colors.primary}` to the main marketing UI; franchise-specific accents are contextual exceptions, not palette expansions
- Don't reduce heading weight below 700 for `{typography.display-hero}` or `{typography.display}` — use `{colors.ink-muted}` for secondary headline hierarchy instead
- Don't use the cobalt link-hover color (`{colors.text-hover}`) as a decorative accent; it is a functional state signal only
- Don't place text directly on game art without a gradient scrim; the art has too much luminance variance to guarantee contrast at any fixed text color
- Don't apply rounded corners to image thumbnails or game tiles — rectilinear crops are a signature of the cinematic vocabulary
- Don't use any spacing value outside the defined `spacing:` scale for section-level layout; the macro rhythm (30px, 80px, 160px) is intentional

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single-column layout, navigation collapses to hamburger, hero art fills viewport width |
| Mobile | 425–600px | Single-column, full-bleed art tiles, button stacks vertically |
| Mobile Wide | 600–768px | Two-column game tile grid begins, nav still collapsed |
| Tablet | 768–896px | Navigation expands, hero layout shifts to constrained content width |
| Desktop | >896px | Full multi-column grid, fixed nav at full width, 8+4 hero/secondary tile split |

### Touch Targets

All pill buttons maintain a minimum 44px height for touch target compliance. Navigation items have 8px vertical padding on mobile, expanding tap areas. The launcher button in the nav bar uses a 40px minimum height.

### Collapsing Strategy

- Navigation collapses to a hamburger icon at ≤768px, revealing a full-screen overlay menu in `{colors.background}` black with white nav links
- Hero game art shifts from a horizontal panorama to a stacked vertical sequence on mobile — full-width art tiles with text below the fold line
- Section spacing scales down from `{spacing.4xl}` to `{spacing.2xl}` at mobile widths; the macro breathing room compresses but does not collapse entirely
- Secondary game tiles shift from a 4-column grid to a 2-column grid at tablet, then single column at mobile

### Image Behavior

- Game art is `object-fit: cover` in fixed-ratio containers, ensuring cinematic proportions at all breakpoints
- Gradient scrims reposition at mobile to ensure text legibility in the bottom third of the art frame
- The GTA VI hero logo renders at 240×177px on desktop, scaling proportionally to fill mobile-width containers

---

## Agent Prompt Guide

### Quick Color Reference

- Background: `{colors.background}` — `#000000`
- Text: `{colors.ink}` — `#ffffff`
- Brand accent: `{colors.primary}` — `#fcaf17`
- Secondary text: `{colors.ink-muted}` — `#cecece`
- Border: `{colors.border}` — `#282828`
- CTA: `{colors.primary}` — Rockstar Gold on black

### Example Component Prompts

- "Build a Rockstar Games hero section: `{colors.background}` full-bleed game art with a `linear-gradient(rgba(0,0,0,0), {colors.background})` scrim over the bottom 40%. Float a `{typography.display-hero}` white headline at bottom-left, followed by a `{components.button-primary}` gold pill button and a `{components.button-ghost}` white-outline ghost button. Both buttons use `{typography.button-ui}` at 17px bold uppercase."
- "Create a game tile card: zero border-radius (`{rounded.none}`) container, `aspect-ratio: 16/9`, `object-fit: cover` game art fill. On hover, apply `box-shadow: rgba(0,0,0,0.2) 0 0 18px 0` and shift background to `{colors.surface-raised}`. Overlay a `{typography.label-uppercase}` badge using `{components.badge}` at top-left."
- "Build a Rockstar navigation bar: `{colors.background}` fixed header, full-width. Left: the R* logomark at 40×40px in white. Center: nav links using `{typography.nav-link}` (Helvetica Now Text, 15px, 700, uppercase, 0.3px tracking) in `{colors.ink}`. Right: a `{components.button-launcher}` 'Get Launcher' ghost pill button. Hover shifts use `rgba(255,255,255,0.027)` background wash with `transition: background-color 0.3s ease-in-out`."
- "Design a news card for Newswire: `{colors.surface}` background (`#1a1a1a`), `{rounded.none}` sharp corners. Game-art thumbnail top (16:9), `{typography.heading-sub}` article title in `{colors.ink}`, `{typography.body}` summary in `{colors.ink-muted}`, `{typography.caption}` date in `{colors.ink-subtle}`. Bottom: a `{components.button-ghost}` 'Read More' pill button."
- "Build a franchise category badge: `{components.badge}` — `{colors.primary-container}` dark amber background, `{colors.primary}` gold label text, `{typography.label-uppercase}` (15px, 700, uppercase, 0.3px tracking), `{rounded.sm}` 2px radius, 4px 8px padding. Pair with a `{typography.heading-section}` section title in `{colors.ink}` to introduce a new franchise module."

### Iteration Guide

1. Start with `{colors.background}` pure black — every surface derives from this or lifts by no more than `{colors.surface-raised}` (`#282828`); any lighter surface breaks the cinematic register
2. The only warm accent is `{colors.primary}` Rockstar Gold — use it for exactly one CTA per viewport; its impact comes from being the single warm signal in a cold system
3. Apply `{typography.display-hero}` at weight 700 with negative tracking; if hierarchy needs softening, reach for `{colors.ink-muted}` or `{colors.ink-subtle}` rather than reducing weight
4. Elevation is gradient-based, not box-shadow-based — use `linear-gradient(rgba(0,0,0,0), {colors.background})` as the primary depth layer over art; reserve box shadows for system UI chrome only
5. Radius is binary: `{rounded.pill}` for all interactive elements, `{rounded.none}` for all content surfaces; anything in between is an anti-pattern
6. Spacing anchors at `{spacing.lg}` (30px) within modules and `{spacing.3xl}` (80px) between sections; `{spacing.4xl}` (160px) for major franchise dividers
7. Engage `font-feature-settings: "salt", "ss01"` on every Helvetica Now instance — these are load-bearing for the brand's letterform quality

---

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