Grand Theft Auto VI

Overview

Grand Theft Auto VI employs a **Cinematic Brutalism** aesthetic—a design language that strips away decorative flourishes to expose raw, high-contrast typography and a deliberately constrained color palette. The brand serves players seeking immersive narrative-driven gameplay in a morally complex criminal underworld; the UI reflects this through austere, unflinching visual hierarchy. The emotional response is one of tension and control: every interface element feels purposeful, never frivolous. The design evokes the grit of 1980s Miami crime cinema, where information is delivered with cold precision.

The voice is terse, authoritative, and cinematic—never explanatory or apologetic. Sentences are short, declarative, and often fragmented. Example: 'Vice City. Jason and Lucia have always known the deck is stacked against them.' The vocabulary favors concrete nouns (names, places, actions) over abstract descriptors. Personality traits: unflinching, street-smart, visually literate, and unapologetically dark.

Colors

The color system is built on a near-black foundation (#111117) with a sophisticated grayscale ladder (surface-dim #0a0a0f through surface-container-highest #2a2a35) that creates depth without relying on color saturation. Primary (#ffffff) serves as the dominant interactive and text color, ensuring legibility against dark backgrounds. Secondary (#ffad36) is a warm, saturated golden-orange used sparingly for critical CTAs (cookie acceptance, play buttons) and status indicators—its warmth contrasts sharply with the cool darkness, creating visual urgency. Tertiary (#6cc04a) is a muted sage-green reserved for success states and secondary interactive elements. The outline palette (outline #6d6d6d, outline-variant #464646) provides subtle separation between surface layers without harsh borders. E

Typography

The type system pairs Art Deco (a custom serif display font used for headlines and labels) with Helvetica Now Text (humanist sans-serif for body copy). This pairing creates visual tension: the geometric, slightly theatrical Art Deco headlines evoke 1980s Miami glamour and crime-film aesthetics, while Helvetica Now's clean, modern letterforms ground the interface in contemporary usability. Display (72px, 700 weight, -0.04em tracking) is reserved for hero titles and game logos; Headline-lg (48px, 600 weight) anchors major sections; Body-md (16px, 400 weight, 24px line-height) is the workhorse for descriptive text and UI labels. All labels use Art Deco at 500 weight with 0.02–0.03em tracking to reinforce hierarchy. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm) whe

Layout

The layout system uses a 12-column grid with a fixed container max-width of 896px, centered on the viewport. This constrained width ensures that cinematic hero imagery (full-bleed background photos) remains the visual anchor while UI chrome stays readable and intimate. Spacing follows a semantic scale: xs (4px) for micro-interactions and icon padding, sm (12px) for component internal spacing, md (24px) for section gutters and card padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The gutter (24px) is applied consistently to left/right margins on mobile and tablet, creating a breathing room that prevents text from touching screen edges. White-space is used aggressively—empty space is not wasted space but a design decision that emphasizes content hie

Elevation & Depth

Depth is conveyed through a restrained shadow system and surface-container layering rather than color shifts. Level 1 (Base): the background surface (#111117) with no shadow, establishing the canvas. Level 2 (Standard Cards/Modals): surface-container (#15151d) with elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)), creating subtle separation from the base. Level 3 (Elevated Modals/Overlays): surface-container-high (#1f1f2a) with elevation.lg (0 8px 24px rgba(0, 0, 0, 0.2)), signaling prominence and focus. The modal overlay uses a semi-transparent black (rgba(0, 0, 0, 0.6)) with a 4px blur backdrop-

Shapes

The shape philosophy is **Architectural Precision**—a blend of sharp, technical corners and minimal rounding that reflects the game's urban, crime-noir setting. Buttons use full rounding (border-radius: 9999px) to signal primary affordance and create a soft, approachable CTA that contrasts with the dark, hard-edged world. Cards and modals use sm (2px) or DEFAULT (4px) rounding, maintaining a slightly technical feel that echoes brutalist design. Input fields use DEFAULT (4px) rounding for consistency with cards. Badges use full rounding (9999px) to distinguish them as secondary, non-critical in

Components

Action Elements Buttons are the primary interaction surface. The primary button (button-primary) uses white text on white background with a 44px height and full rounding (9999px), rendered in Art Deco Medium at 500 weight. On hover (button-primary-hover), the background shifts to primary-container (#e2e2e2) with on-primary-container text (#212121), transitioning over 200ms ease-out. On active (button-primary-active), a subtle inset shadow (0 2px 4px rgba(0, 0, 0, 0.2)) creates a pressed effect. The secondary button (button-secondary) uses a 2px border in secondary color (#ffad36) with transparent background; on hover, the background fills with rgba(255, 173, 54, 0.1) and the text shifts to secondary-fixed (#ffc966). Ghost buttons (button-ghost) are minimal—transparent with a 1px outlin

Do's and Don'ts

**Do**

• Do use white (primary, #ffffff) for all body text and critical UI labels—it ensures maximum contrast against dark surfaces and maintains the cinematic, high-contrast aesthetic.
• Do reserve secondary color (#ffad36) for the single most important CTA per screen (e.g., 'Accept All Cookies', 'Play Trailer')—overuse dilutes urgency and breaks the austere visual hierarchy.
• Do apply md spacing (24px) between major content sections and lg spacing (40px) between hero and body content to create visual rhythm and prevent cognitive overload.
• Do use Art Deco font for all headlines and labels (display, headline-lg, headline-md, label-md, label-sm) to reinforce the 1980s Miami crime-film aesthetic and create visual distinction from body copy.
• Do transition interactive elements over 200–240ms using ease-out or cubic-bezier(0.2, 0, 0.2, 1) to create smooth, cinematic state changes without jarring movement.

**Don't**

• Don't use colors outside the defined palette (primary, secondary, tertiary, error)—the restricted gamut is intentional and maintains visual coherence across the dark interface.
• Don't round corners beyond md (8px) on cards or modals—sharp edges reinforce the brutalist aesthetic; only buttons use full rounding (9999px) to signal affordance.
• Don't apply shadows larger than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.2))—the dark background already provides depth; excessive shadows create visual noise and flatten the hierarchy.
• Don't mix Art Deco and Helvetica Now Text in the same line—use Art Deco exclusively for headlines and labels, Helvetica Now Text for body copy and descriptions.
• Don't use system fonts or generic sans-serif fallbacks—always specify Art Deco and Helvetica Now Text with appropriate fallbacks (-apple-system, sans-serif) to maintain brand voice across platforms.