# Rockstar Games — Design Language

## 1. Visual Theme & Atmosphere
Rockstar Games' website is a cinematic dark spectacle. The near-black deep navy base (`rgb(17, 17, 23)`) — not quite black, but darker than midnight — establishes an immersive canvas across which proprietary Art Deco typefaces parade in cream, pastel pink, pale blue, and yellow. This site understands it represents some of the most visually ambitious entertainment products ever made, and it responds by being one of the most design-intentional game studio sites in the industry. Every typographic choice is a brand statement.

## 2. Color Palette & Roles
- **Background** — `rgb(17, 17, 23)` (deep near-black navy): immersive dark canvas
- **Primary text** — `rgb(255, 255, 255)` (white): navigation and body
- **Cream/champagne** — `rgb(255, 249, 203)`: h2 headings, feature highlights — warm and prestigious
- **Pastel pink** — `rgb(255, 176, 196)`: h3 accent — soft contrast against dark
- **Pale cyan** — `rgb(145, 223, 236)`: game-specific product accent
- **Pale yellow** — `rgb(255, 255, 126)`: another product-themed accent
- **Game section fills** — `rgb(54, 54, 78)`, `rgb(40, 55, 92)`, `rgb(50, 57, 83)`: game card backgrounds tinted toward each title's palette

The colour system is a curated pastel-on-dark palette — sophisticated and cinematic, never garish.

## 3. Typography Rules
- **ArtDecoCondensedBold** (weight 700): hero headings — dramatic, tall, condensed
- **ArtDecoBold**: subheadings and section titles
- **ArtDecoMedium**: body and supporting text
- Display scale: 84–102px — full cinematic scale for hero moments
- Supporting scale: 14–33px — controlled information architecture
- Uppercase with tight negative letter-spacing (`−1.28px`, `−0.9984px`)
- The proprietary Art Deco series conveys the brand's entertainment pedigree

## 4. Component Stylings
- Varied radii: 2px (near-square), 17px (card rounding), 50px (pill buttons), 1000px/9999px (full pill)
- Navigation transparent over hero; likely a dark sticky header on scroll
- Game title cards with unique coloured fill backgrounds
- No shadows — depth from colour and typography

## 5. Layout Principles
- Full-viewport hero sections with maximum typographic scale
- Horizontal scrolling game carousels or grid sections
- Section backgrounds shift between base navy and game-specific tinted panels
- Generous vertical rhythm for premium feel

## 6. Depth & Elevation
- No shadows — depth through strong background colour contrast
- Animation system: `cubic-bezier(0.645, 0.045, 0.355, 1)` at 0.5s — easeInOutCubic for premium motion
- Layered section backgrounds create depth through colour saturation difference

## 7. Do's and Don'ts
**Do:** Use the Art Deco condensed typeface at maximum scale for hero moments.
**Do:** Apply cream (`rgb(255,249,203)`) for primary headings on the dark canvas.
**Do:** Assign each game title its own tinted section background derived from its visual identity.
**Don't:** Use the pastel accent colours for body text — they're for headings only.
**Don't:** Introduce bright/saturated colours — pastels on dark is the system.
**Don't:** Use generic system fonts — the Art Deco family is non-negotiable.

## 8. Responsive Behavior
- 84–102px hero type scales to ~40–56px on mobile
- Horizontal carousels convert to swipeable carousels on touch
- Navigation condenses to a branded hamburger menu
- Game section cards may stack or reduce to one per row

## 9. Agent Prompt Guide
> Design like Rockstar Games: deep near-black navy background (`rgb(17,17,23)`), Art Deco condensed bold headlines (84–102px, uppercase, tight letter-spacing). Cream (`rgb(255,249,203)`) for headings, pastel pink/cyan/yellow for game-specific accents. Tinted section backgrounds for each product. No shadows. Premium motion with easeInOutCubic 0.5s transitions. Cinematic, prestige entertainment aesthetic.

*Generated by Sparkbites — extracted from live CSS analysis*