---
version: alpha
name: Ubisoft
description: A near-black gaming arena where cinematic game art dominates full-bleed hero panels, Ubisoft Sans drives the type from bold display to tightly tracked UI labels, and a single electric blue CTA punches through the dark — game-marketing confidence without the neon overkill.

colors:
  # Surface / canvas
  background: "#000000"          # the dominant near-black arena canvas
  surface: "#111111"             # dark card and UI surface tint
  surface-light: "#ffffff"       # the white content bands between dark heroes
  surface-muted: "#f2f2f2"       # light resting surface, secondary card backgrounds

  # Ink / text
  ink: "#ffffff"                 # primary body text on the near-black arena canvas
  ink-on-dark: "#ffffff"         # all text on the near-black canvas (alias)
  ink-on-light: "#000000"        # headings on white content bands
  ink-secondary: "#b5b5b5"       # supporting / metadata copy

  # Brand accent — Ubisoft Blue
  primary: "#006ef5"             # the signature electric blue — primary CTA, links
  primary-hover: "#0084ff"       # brighter blue hover/focus state
  on-primary: "#ffffff"          # text on the blue CTA

  # Navigation link hover
  nav-hover: "#3860be"           # dark-blue hover for nav links (extracted from link states)

  # Semantic — alert / status
  error: "#dc3318"               # the red badge / alert / "Orange" label class

  # Borders
  border: "#2a2a2a"              # dark surface borders
  border-light: "#e0e0e0"        # borders on white content bands

  # Shadow tint
  shadow-soft: "#000000"         # hero scrim / card shadow base — used via opacity

typography:
  display-hero:
    fontFamily: "Ubisoft Sans, Roboto, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0px
  display:
    fontFamily: "Ubisoft Sans, Roboto, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.02px
  heading:
    fontFamily: "Ubisoft Sans, Roboto, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Ubisoft Sans, Roboto, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  heading-small:
    fontFamily: "Ubisoft Sans, Roboto, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body-large:
    fontFamily: "Ubisoft Sans, Roboto, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Ubisoft Sans, Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Ubisoft Sans, Roboto, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 1.61px
  nav-link:
    fontFamily: "Ubisoft Sans, Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  badge:
    fontFamily: "Ubisoft Sans, Roboto, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.51
    letterSpacing: 0px
  caption:
    fontFamily: "Ubisoft Sans, Roboto, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  pill: 10000px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  button-secondary-hover:
    backgroundColor: "#cecece"  # surface-muted darkened on hover
    textColor: "{colors.ink-on-light}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-on-dark}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-on-dark}"
    rounded: "{rounded.md}"
    padding: 16px
  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    rounded: "{rounded.md}"
    padding: 16px

  badge:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.badge}"
    rounded: "{rounded.sm}"
    padding: 0px 8px
  badge-hover:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"

  input:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 10px 16px
  input-focus:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.nav-link}"
    padding: 12px 24px
  nav-bar-link:
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.nav-link}"
    padding: 0px
  nav-bar-link-hover:
    textColor: "{colors.nav-hover}"
    typography: "{typography.nav-link}"
    padding: 0px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary-hover}"
    typography: "{typography.body}"
    padding: 0px
---

# Ubisoft Design System

## Overview

The Ubisoft site runs on cinematic authority. The dominant canvas is near-black (`{colors.background}`) — a deliberate arena that strips away distraction so that full-bleed game art can speak at full volume. Assassin's Creed, Star Wars Outlaws, Rainbow Six Siege: each occupies a hero panel edge-to-edge, lit with the same drama as a theatrical key-art poster. The chrome barely registers. Navigation is low-profile and spare; text sits in clean white or `{colors.ink-on-dark}` against the dark ground. The page's structural logic mirrors the publishing industry the brand respects — cinematic hero, then a white content band (`{colors.surface-light}`) of cards for browsing, then another hero, repeat. Hype on black, catalog on white.

Into that dark arena, a single color does all the action work: the electric blue `{colors.primary}`. It appears on the primary CTA ("Pre-order now", "Play now") as a pill-shaped button — a deliberate departure from the sharp-cornered norms of many gaming sites, and a marker of Ubisoft's design maturity. The pill radius (`{rounded.pill}`) softens the purchase impulse without diluting the urgency; the 700-weight uppercase tracking on the button label (`{typography.button-ui}`) provides that urgency. A red badge (`{colors.error}`) punctuates deal callouts in the game shelf. Everything else is Ubisoft Sans — the brand's proprietary typeface, a geometric humanist sans with confident vertical proportions — falling back to Roboto where the custom font is unavailable.

Ubisoft Sans is the quiet glue of the whole system. At display sizes (700 weight, 48px, tightly set) it reads as gaming-bold but not aggressive; at body sizes (400 weight, 16px) it reads as a clean editorial face. The tracked uppercase variant (`{typography.button-ui}`, 1.61px letter-spacing) makes UI labels feel like they belong in a product UI, not a press release. There is no second typeface. Weight, size, and tracking do the entire hierarchy. Shadows are minimal — a soft scrim helps hero copy read over busy photography, and the lightest drop shadow lifts card art — but the system relies on contrast and full-bleed layout to communicate depth.

**Key Characteristics:**
- Near-black arena canvas (`{colors.background}`) as the dominant ground, surrendering the frame to cinematic game key art
- Alternating dark-hero / white-shelf rhythm: full-bleed `{colors.background}` hero panels separated by clean `{colors.surface-light}` card shelves
- Single electric blue CTA (`{colors.primary}`) on pill-shaped buttons — the clearest action signal in the entire palette
- Pill radius (`{rounded.pill}`) on all interactive controls — soft geometry against the hard-edged game art
- Ubisoft Sans throughout (`{typography.body}`) — the proprietary geometric-humanist face, Roboto fallback
- Heavy display weight (700) for all headings; tracked uppercase (`{typography.button-ui}`) for UI labels
- Red badge (`{colors.error}`) as the sole semantic accent — deal flags, availability callouts
- Minimal border-radius alternatives: only `{rounded.none}` (image containers), `{rounded.sm}` (badges), `{rounded.md}` (cards), and `{rounded.pill}` (buttons/inputs)
- Shadows used sparingly — hero copy legibility scrim plus a light card drop; color and contrast carry hierarchy
- 16 breakpoints extracted, with main content pivoting around 768px and 1440px

## Colors

### Surface & Canvas
- **Near-Black** (`{colors.background}`): The dominant arena canvas — cinematic hero panels and the global page ground.
- **Dark Surface** (`{colors.surface}`): Card chrome and UI panel tint on the dark ground.
- **White Band** (`{colors.surface-light}`): The clean browsing shelves between dark hero sections.
- **Light Muted** (`{colors.surface-muted}`): Secondary card backgrounds and resting fill for light-mode controls.

### Ink / Text
- **Black** (`{colors.ink}`): Headings and copy on white content bands.
- **White** (`{colors.ink-on-dark}`): All text on the near-black arena canvas.
- **Gray** (`{colors.ink-secondary}`): Metadata, supporting copy, labels below primary hierarchy.

### Brand Accent
- **Electric Blue** (`{colors.primary}`): The Ubisoft brand color — every primary CTA, interactive link, and focus indicator. Used exclusively for action; never decorative.
- **Bright Blue** (`{colors.primary-hover}`): The hover/focus intensification of the primary blue — readable, consistent, and never confused with the resting state.
- **On-Primary White** (`{colors.on-primary}`): Button label text on the blue fill.

### Navigation & State
- **Nav Hover Blue** (`{colors.nav-hover}`): The darker blue that nav and link text shifts to on hover — keeping interaction consistent without going back to the surface.

### Semantic
- **Alert Red** (`{colors.error}`): The filled badge color for deal callouts and "now available" labels. Never used for text or borders — fills only.

### Borders & Shadow
- **Dark Border** (`{colors.border}`): Subtle dividers on the black canvas.
- **Light Border** (`{colors.border-light}`): Card and shelf dividers on white content bands.
- **Shadow Base** (`{colors.shadow-soft}`): The black tint used for hero scrims and card-lift shadows at reduced opacity.

## Typography

### Font Family
- **Primary**: `Ubisoft Sans` — the brand's proprietary geometric humanist sans-serif. Clean, vertical, confident at display sizes and readable at small body sizes. Falls back to `Roboto, Arial, sans-serif`.
- **No secondary typeface**: Ubisoft Sans covers the entire hierarchy from hero display to captions. Hierarchy is established by size, weight, and letter-spacing alone.
- **OpenType behaviour**: The bold variant ships as both `Ubisoft Sans Bold` (separate file) and `Ubisoft Sans` at `font-weight: 700`. UI labels use tracked uppercase at `1.61px` letter-spacing for the label register.

### Hierarchy

The complete type scale is in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 48px / 700 — cinematic hero headlines over game art |
| `display` | 32px / 700 — section-level headlines, game names |
| `heading` | 28px / 700 — feature and article headings |
| `heading-sub` | 24px / 700 — sub-section and category headings |
| `heading-small` | 22px / 700 — compact card headings |
| `body-large` | 18px / 400 — lead paragraphs and hero descriptors |
| `body` | 16px / 400 — standard body copy, shelf descriptions |
| `button-ui` | 14px / 700 / 1.61px tracked — all CTA and button labels |
| `nav-link` | 16px / 700 — navigation links |
| `badge` | 14px / 700 — alert and deal badge labels |
| `caption` | 12px / 400 — metadata, fine print |

### Principles
- **One face, two weights**: Ubisoft Sans at 400 (body) and 700 (everything else). Weight is the primary hierarchy signal.
- **Tracked uppercase for UI**: The 1.61px letter-spacing on `{typography.button-ui}` registers as professional product UI rather than consumer hype.
- **Display is bold, not decorative**: 700 weight at large sizes reads as confident game-industry authority, not screaming aggression.
- **No type pairing needed**: the breadth of Ubisoft Sans from condensed-feeling display to clean body copy removes the need for a contrasting face.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The system scales from a 4px micro-grid through 16px standard component internals to 48–96px section separators. The page breathes wide between hero sections; card shelves tighten inward with consistent 16–24px gutters.

### Grid & Container
- Full-bleed hero panels: edge-to-edge game art with copy and CTA overlaid lower-left; no max-width constraint
- Game shelf / card grid: centered container (~1440px max) with 4–6 columns on desktop, collapsing downward
- Navigation: sticky near-black bar at the top; left logo lockup, center game/help/store links, right auth + search

### Whitespace Philosophy
- **Art owns the frame**: heroes are architecture, not decoration — the layout cedes full width and significant height to the key art
- **Shelves breathe evenly**: white content bands use a consistent 16px card gap so the game catalog reads as a tidy grid
- **Dark for drama, white for discovery**: the alternating rhythm is the structural DNA of every page

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; full-bleed color fills | Hero panels, nav bar, badge fills |
| Card (Level 1) | `0 2px 8px rgba(0,0,0,0.3)` soft drop | Game art cards, shelf thumbnails |
| Hero Scrim | Gradient `rgba(0,0,0,0)` → `rgba(0,0,0,0.6)` | Copy legibility over busy game photography |
| Dialog (Level 3+) | Stronger drop + scrim overlay | Modals, cart drawer, account flyout |

**Shadow Philosophy**: Ubisoft's elevation strategy is minimal and purposeful. Card thumbnails get a barely-there `0 2px 8px` lift to separate them from the black canvas; the hero scrim is the signature depth move — a bottom-rising gradient that ensures white headline copy (`{colors.ink-on-dark}`) reads cleanly over complex game imagery without obscuring the art. Dialogs and drawers use a dark overlay to anchor to the content beneath. There are no decorative shadows; every shadow instance solves a legibility or spatial problem.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Image containers, hero frames — art is always unclipped square |
| `sm` | 4px | Alert badges, the small filled label class |
| `md` | 8px | Game art cards, shelf thumbnails |
| `pill` | 10000px | All buttons, all inputs, pill tags — the primary interactive geometry |

The system has a clear binary geometry: images and frames are square (`{rounded.none}`), interactive controls are pill-shaped (`{rounded.pill}`). This contrast is intentional and gives the UI a distinct personality against the boxy norms of gaming sites. Cards use a modest `{rounded.md}` to soften the shelf, but the game art inside the card remains square.

## Components

The complete component spec is in the `components:` token block.

### Button Variants

- **`button-primary`** — Electric blue (`{colors.primary}`) fill, white text, pill shape (`{rounded.pill}`), tracked uppercase label. The singular action driver: "Pre-order now", "Play now". Hover brightens to `{colors.primary-hover}`.
- **`button-secondary`** — Light muted fill (`{colors.surface-muted}`) on the dark canvas, black text — neutral utility action (filter, sort, secondary navigation). Pill-shaped to stay consistent with primary.
- **`button-ghost`** — Transparent fill, white text — ghost action on the dark ground; hover shows a subtle dark surface tint.

### Cards
- **`card`** — Dark surface (`{colors.surface}`), slightly rounded (`{rounded.md}`), game art as the dominant visual. White text on dark fill.
- **`card-light`** — White (`{colors.surface-light}`) fill for cards on white content bands. Black text.

### Inputs
- **`input`** — Light muted fill, pill shape (`{rounded.pill}`) — the search field uses the same pill geometry as the CTA buttons for a unified interactive language. Focus state brightens to pure white.

### Badges
- **`badge`** — Red fill (`{colors.error}`), white text, small radius (`{rounded.sm}`) — reserved for deal labels, "Elite Edition" flags, promotional callouts. Never used for status or navigation.

### Navigation
- **`nav-bar`** — Sticky near-black header, white nav-link text, no visible border. Links shift to a darker blue (`{colors.nav-hover}`) on hover.

### Links
- **`link`** / **`link-hover`** — Blue text (`{colors.primary}`) brightening to `{colors.primary-hover}` on hover. Consistent with the button palette; links and CTAs share the same blue vocabulary.

## Do's and Don'ts

### Do
- Use the near-black canvas (`{colors.background}`) as the default page ground and let full-bleed game art fill hero panels edge-to-edge
- Reserve electric blue (`{colors.primary}`) exclusively for interactive elements — CTAs, primary buttons, links, and focus indicators
- Apply pill radius (`{rounded.pill}`) to every button and input — it's the system's primary interactive shape language
- Keep game art and hero image containers square (`{rounded.none}`) — the pill geometry is for controls, not content frames
- Set all CTA labels in tracked uppercase (`{typography.button-ui}`, 1.61px letter-spacing) — it's the voice of the interactive register
- Use the red badge (`{colors.error}`) only for deal callouts and promotional labels in filled form
- Alternate dark hero panels with white shelf sections (`{colors.surface-light}`) — the rhythm is the page structure
- Keep shadows purposeful: scrim for hero copy legibility, 2px soft drop for card lift — no decorative stacking

### Don't
- Don't introduce a second typeface — Ubisoft Sans carries the full scale from hero to caption
- Don't use blue (`{colors.primary}`) for decorative color blocks or background fills — it signals action and must stay that way
- Don't apply pill radius (`{rounded.pill}`) to image cards or hero frames — they must stay square to honor the art
- Don't add mid-range corner radii (16–32px) — the system only uses `{rounded.sm}`, `{rounded.md}`, and `{rounded.pill}`; in-between values break the system
- Don't multiply accent colors — the system runs on one blue; adding teal or purple for variety dilutes the action signal
- Don't crowd the hero with multiple CTAs — one primary blue pill button, one secondary (optional). Game pages keep the buy path clean
- Don't make body copy smaller than 16px (`{typography.body}`) on dark backgrounds — legibility against dark surfaces requires full-size text
- Don't put color gradients on button fills — the solid blue CTA is the brand's identity; gradients read as a different product

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single column; hero art reframes portrait; nav collapses to hamburger; CTA goes full-width pill |
| Mobile | 400–767px | Single-column shelf; card grid 1–2 up; hero copy stacks below art |
| Tablet | 768–1023px | 2–3 column card grid; hero copy overlays art; side-by-side shelf tiles |
| Desktop | 1024–1439px | Full 4–5 column shelf; full nav; hero full-bleed |
| Large Desktop | ≥1440px | Max content container centered; heroes stay full-bleed edge-to-edge |

### Touch Targets
- Pill buttons are generously sized at min 40px height — thumb-friendly on mobile
- Game card thumbnails are tall aspect-ratio tiles that accommodate thumb taps comfortably
- Nav hamburger and search icons meet 44×44px minimum

### Collapsing Strategy
- **Navigation**: the top nav collapses into a hamburger menu on mobile; "Ubisoft Connect" download and auth links move into the drawer
- **Hero**: full-bleed art crops to portrait focal point on narrow viewports; headline and CTA drop below the art rather than overlaying it at small sizes
- **Game shelf**: multi-column grid collapses from 5 to 2 to 1 column; card art maintains aspect ratio throughout
- **Type**: hero display drops from 48px to roughly 28–32px on mobile; button labels stay at 14px

### Image Behavior
- Game key art is always the primary visual — heroes go edge-to-edge and are art-directed per title
- Card thumbnails maintain consistent tall (portrait) box-art aspect ratios within the white shelves
- On mobile, hero images reframe to portrait-oriented crops with the character or focal element centered

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-Black (`{colors.background}`) — the arena canvas
- Text on dark: White (`{colors.ink-on-dark}`)
- Text on light: Black (`{colors.ink}`)
- Brand / CTA: Electric Blue (`{colors.primary}`) — exclusive to interactive elements
- CTA hover: Bright Blue (`{colors.primary-hover}`)
- Deal badge: Alert Red (`{colors.error}`)
- Shape — controls: Pill (`{rounded.pill}`)
- Shape — content: Square (`{rounded.none}`) or Card (`{rounded.md}`)

### Example Component Prompts

- "Build a full-bleed Ubisoft hero section on near-black (`{colors.background}`). Game key art fills the frame edge-to-edge. A bottom-rising gradient scrim (`rgba(0,0,0,0)` → `rgba(0,0,0,0.6)`) ensures copy reads. Overlay lower-left: a small uppercase eyebrow, a 48px bold (`{typography.display-hero}`) white headline, a body-large descriptor (`{typography.body-large}`), and a pill-shaped electric-blue CTA (`{colors.primary}`, `{rounded.pill}`, 8px 16px padding, tracked uppercase label at 1.61px). No decorative border-radius on the art container."
- "Create a Ubisoft primary CTA button: electric blue fill (`{colors.primary}`), white text (`{colors.on-primary}`), Ubisoft Sans 14px bold with 1.61px letter-spacing (`{typography.button-ui}`), full pill radius (`{rounded.pill}`), padding 8px 16px. On hover, fill shifts to `{colors.primary-hover}`. Label: 'Pre-order now' in uppercase."
- "Design a game card for the Ubisoft shelf: 8px rounded container (`{rounded.md}`), game box-art thumbnail filling the top (square-cornered within the card), `{colors.surface}` lower panel with white title text (`{colors.ink-on-dark}`) in Ubisoft Sans 16px bold, a small red badge (`{colors.error}`, `{rounded.sm}`) for 'Elite Edition' if applicable. Card lift: `box-shadow: 0 2px 8px rgba(0,0,0,0.3)`."
- "Build the Ubisoft sticky navigation: near-black bar (`{colors.background}`), Ubisoft logo left. Center links in Ubisoft Sans 16px bold (`{typography.nav-link}`) white, shifting to `{colors.nav-hover}` on hover. Right: 'Download Ubisoft Connect' ghost-pill button and search icon in white. No border-bottom visible against the dark canvas."
- "Render a deal badge: `{colors.error}` fill, white text in Ubisoft Sans 14px bold (`{typography.badge}`), 4px radius (`{rounded.sm}`), 0px 8px padding, inline with the game title. Use for 'Up to 85% off', 'Elite Edition' — never for navigation or headings."
- "Build a white game shelf section (`{colors.surface-light}`): centered max-width container, 4-column grid, 16px gaps. Each tile is a `card-light` component (`{rounded.md}`, `{colors.surface-light}`, `{colors.ink}` text). Section heading in Ubisoft Sans 28px bold (`{typography.heading}`) black, 48px top margin."

### Iteration Guide

1. Start on near-black (`{colors.background}`). If your canvas is white, you've lost the cinematic arena — the dark ground is non-negotiable for hero sections.
2. Full-bleed game art is the layout, not the background. Let it run edge-to-edge without clipping. Add a scrim gradient only where copy needs to read.
3. Every interactive element takes a pill shape (`{rounded.pill}`). If a button is square, it's wrong. Content frames (cards, images) use square or `{rounded.md}` — never pill.
4. Use electric blue (`{colors.primary}`) once per section for the primary CTA. If you have two blue buttons side by side, one should be secondary (light muted fill).
5. Ubisoft Sans bold 700 is the display voice — use it from 48px down to heading-small 22px. At 16px and below, switch to weight 400 for body comfort.
6. White shelves (`{colors.surface-light}`) follow every major dark hero section. The alternating rhythm tells users: "that was hype, this is catalog."
7. The red badge (`{colors.error}`) is a price/availability flag only. If you're using it for navigation or labels, change it to a blue or gray neutral.

---

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