--- version: alpha name: "Ubisoft" website: "https://www.ubisoft.com" description: >- A French video game publisher whose marketing site runs a near-black dark canvas covered wall-to-wall by full-bleed game artwork, with a saturated cobalt-blue CTA pill ("Pre-order now") as the only brand-colored surface. Ubisoft Sans, the company's proprietary typeface, handles display heds in white against dark imagery; Open Sans handles all secondary labels and body copy. The radius scale is binary — 8px on cards and all UI surfaces, a full pill on CTA buttons — and the product surface is primarily a scrollable media grid of game tiles with pricing, release dates, and platform badges. seo: title: "Ubisoft Design System for React — cobalt blue on near-black, Ubisoft Sans, 14 components" metaDescription: "Ubisoft's game-publisher marketing design system. Cobalt-blue CTA pills on a near-black dark canvas, full-bleed artwork tiles, Ubisoft Sans display, Open Sans body. Tokens for React, Next.js, and AI coding tools." highlights: - "Full-bleed game artwork — the page is organized as a media grid where editorial photography (game key art) fills every card edge-to-edge; the brand chrome frames the art rather than competes with it" - "Single cobalt-blue voltage — the primary brand blue appears 13 times, all as button fills and a single gradient stop; all other chromatic moments come from game key art" - "Binary radius — 8px on cards and UI surfaces everywhere; 10000px (effective pill) on CTA buttons only; no middle tier" - "Ubisoft Sans for display only — the proprietary typeface appears on h2/h3 display sizes at weight 700; Open Sans handles all body, label, and secondary copy" - "Near-black dark canvas with off-white text — charcoal dark surface at near-black with off-white text; the system inverts between dark game sections and light promotional strips" tags: - "Gaming & Entertainment" - "E-commerce & Retail" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Ubisoft's marketing homepage is a game-store front. Above the fold: a full-bleed hero banner for a pre-order (Assassin's Creed Black Flag Resynced at launch), with a large Ubisoft Sans headline in off-white and a cobalt-blue "Pre-order now" pill. Below the fold: section after section of game tiles arranged in a horizontal scroll grid — new releases, upcoming games, free-to-play games, Ubisoft+ subscription picks — each tile a game key-art image with a title, platform badges, and price tag. The cobalt-blue appears only on action buttons. Where Steam leans into a dark-teal brand color across its entire surface, and where the PlayStation Store uses a dark indigo, Ubisoft keeps its brand blue strictly on the call-to-action layer. The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 10 color tokens organized into a brand tier (cobalt blue, alert red), a structural tier of near-black and off-white surfaces, and a hairline tier. Ten typography tokens span two families — Ubisoft Sans (proprietary, display-only, weight 700) and Open Sans (body and labels, weights 400 and 700). The radius scale has three values — 4px on small details, 8px on cards and inputs (the dominant value at 49 occurrences), and a full pill on buttons. Spacing centers on 16px and 8px with generous 64px section breaks. Feed this file to Claude or Cursor and it reproduces Ubisoft's specific moves: full-bleed game artwork in an 8px-radius tile, cobalt-blue pill CTA on a near-black canvas, Ubisoft Sans at 32px for section heds with Open Sans body beneath, and the light/dark section alternation that marks the "Play for free" band. The principle worth borrowing in any media-catalog context: a card that is purely an image with a title and price below it is more expressive than a card with a background surface, a border, and an icon cluster. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.ubisoft.com" title: "Ubisoft — official site" description: "Ubisoft's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Ubisoft's primary brand color?" answer: "Ubisoft's brand voltage is a saturated cobalt blue appearing 13 times in the captured marketing page — 6 as background fills on buttons, 6 as border fills on button outlines, and 1 as a gradient stop in a promotional banner. It never appears as body text or as a section background. This is a CTA-only voltage: the blue means 'buy' or 'pre-order' and nothing else. The spiral Ubisoft logo mark in the top-left navigation renders in white, not blue, keeping the brand mark visually separate from the action color. At 13 occurrences across 843 scanned elements, the cobalt blue is the most constrained CTA voltage in the gaming publisher category compared to EA's multi-surface yellow or Sony's pervasive PlayStation blue." - id: "typography" title: "What typefaces does Ubisoft use and what are the best open-source substitutes?" answer: "Ubisoft runs two families in deliberate division-of-labor. Ubisoft Sans is a proprietary display typeface used exclusively for h2 and h3 section headings at weight 700 — the display hed for 'Pre-order Assassin's Creed Black Flag Resynced' at 32px is the canonical instance. Open Sans handles all secondary roles: body paragraphs, nav labels, category tags, platform badges, and price display. Open Sans spans weights 400 and 700. The best open-source substitute for Ubisoft Sans is Barlow Semi Condensed Bold or Rajdhani Bold — both share the slightly condensed, high-contrast weight-700 character that works well against dark game artwork. Open Sans itself is already open-source and Google Fonts-hosted." - id: "dark-canvas" title: "Why does Ubisoft use a near-black dark canvas instead of pure black?" answer: "Ubisoft's dark canvas sits at a near-black charcoal rather than pure black. This is a common game-publisher choice: pure black behind game key art makes the image borders invisible, which works for full-bleed hero panels but produces a flat, unframed look in the game tile grid. The near-black charcoal gives each tile a perceptible substrate that frames the artwork without visibly interrupting it. The same logic appears in Steam, Epic Games Store, and GOG — all use a slightly-lifted dark surface rather than pure black for the grid sections. The light 'Play for free' section inverts to pure white, creating the page's strongest tonal contrast and marking the free-game section as distinct from the paid catalog." - id: "game-tile-grid" title: "How does Ubisoft's game tile grid work?" answer: "The game tile grid is a horizontally-scrollable rail of cards, each card showing: full-bleed key art image, 8px border radius, game title in Ubisoft Sans or Open Sans weight 700, a platform badge row (PS5, Xbox, PC icons), a price or 'Free' label, and sometimes a pre-order or 'Play' button pill. Cards are uniform in width (approximately 200–250px) and stack in a flex row with 8px gaps. The rail scrolls horizontally on desktop with arrow controls at each end. There are four named rails on the captured page: 'What's hot this week', 'Upcoming Games', 'All the games', and 'Play for free'. Each rail has a section title in Ubisoft Sans 24px above it and uses the same card template." - id: "use-in-project" title: "Can I use this DESIGN.md to build a game catalog or media store UI?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce Ubisoft's specific moves: near-black canvas, full-bleed 8px-radius game tile cards, cobalt-blue pill CTAs, Ubisoft Sans display with Open Sans body, and the horizontal-scroll media grid. You can reference tokens directly — every hex, font name, radius, and spacing value is a quoted scalar pasteable into Tailwind config or CSS variables. The most transferable system pattern is the tile card: a full-bleed image at 8px radius, title below in bold, platform badges in a row, price last. This pattern works for any media catalog — games, films, music albums, streaming content — without modification." mockups: - "marketing-hero" - "media-grid" colors: primary: "#006ef5" primary-light: "#3da2ff" alert-red: "#dc3318" ink: "#f2f2f2" ink-bright: "#ffffff" canvas: "#000000" surface-1: "#242424" surface-light: "#ffffff" hairline: "#b5b5b5" hairline-dark: "#000000" typography: display-lg: fontFamily: "\"Ubisoft Sans\", Roboto, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 38.4px letterSpacing: "0.019px" display-md: fontFamily: "\"Ubisoft Sans\", Roboto, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 28.8px letterSpacing: 0 display-sm: fontFamily: "\"Ubisoft Sans\", Roboto, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 21px letterSpacing: 0 body-md: fontFamily: "\"Open Sans\", \"Open Sans Alt\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: "0.019px" body-bold: fontFamily: "\"Open Sans\", \"Open Sans Alt\", sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "\"Open Sans\", \"Open Sans Alt\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 21px letterSpacing: 0 label-bold: fontFamily: "\"Open Sans\", \"Open Sans Alt\", sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 21px letterSpacing: 0 label-caps: fontFamily: "\"Open Sans\", sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 15.6px letterSpacing: "0.019px" button-md: fontFamily: "\"Open Sans\", \"Open Sans Alt\", sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 21px letterSpacing: 0 rounded: none: "0px" sm: "4px" md: "8px" full: "10000px" spacing: xs: "8px" sm: "12px" md: "16px" lg: "24px" xl: "64px" 2xl: "72px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink-bright}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0px 16px" height: "40px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink-bright}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0px 16px" height: "40px" borderColor: "{colors.ink-bright}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-bold}" rounded: "{rounded.none}" padding: "0px 8px" height: "48px" borderColor: "{colors.hairline-dark}" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-bold}" padding: "8px 12px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "0px 0px 6px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "0px" card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.label-bold}" rounded: "{rounded.md}" padding: "16px 16px 42px" game-tile: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.display-sm}" rounded: "{rounded.md}" padding: "0px" price-badge: backgroundColor: "transparent" textColor: "{colors.ink-bright}" typography: "{typography.body-bold}" rounded: "{rounded.none}" padding: "0px" platform-badge: backgroundColor: "transparent" textColor: "{colors.hairline}" typography: "{typography.label-caps}" rounded: "{rounded.sm}" padding: "0px 8px" hero-section: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: "0px 72px" section-light: backgroundColor: "{colors.surface-light}" textColor: "{colors.canvas}" typography: "{typography.display-md}" rounded: "{rounded.none}" padding: "64px 0px" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "24px 0px" borderColor: "{colors.hairline}" --- ## Overview Ubisoft's marketing homepage is organized as a game-store catalog front. **Artwork-first tile system.** The surface is not a brand statement — it is a merchandise display surface. Each page section is a horizontal rail of game tiles, each tile a key-art image with a 8px radius, a bold title, platform badges, and a price. The cobalt-blue CTA pill appears only when a game is purchasable; the rest of the chrome retreats to near-black and off-white. Where EA's marketing surface leans into its yellow brand accent across section headings and promotional frames, and where PlayStation's Store uses a pervasive dark indigo system, Ubisoft holds its primary blue for CTA-only duty and lets the games' own key art carry every color conversation. The typographic system divides into two voices. **Ubisoft Sans** — the company's proprietary condensed display typeface — handles section headings at 24–32px weight 700, rendering white against dark artwork banners. **Open Sans** handles all secondary content: body paragraphs, navigation, platform labels, price displays, and category tags. The division is exact: every element the player would skim to navigate (title, price, platform) is Open Sans bold; every element that identifies a page section is Ubisoft Sans. The radius system is binary — 8px on every tile, card, and interactive surface, and a full pill on CTA buttons. **Key Characteristics:** - Single cobalt-blue voltage (`{colors.primary}`) on 13 elements, all CTA buttons and a single gradient stop — never used as text or section-header color. - Full-bleed game tile system — 8px-radius tiles with zero internal padding; key art fills edge-to-edge and text appears below the image. - Two-family typographic split: Ubisoft Sans weight 700 for section display heds, Open Sans weights 400/700 for all secondary content. - Binary radius — `{rounded.md}` 8px on all UI surfaces, `{rounded.full}` pill on all CTA buttons, `{rounded.sm}` 4px on platform badges only. - Near-black canvas with off-white text as the default dark mode; white surface section for the "Play for free" band inverts to light — the system's strongest tonal contrast moment. - Alert-red accent (`{colors.alert-red}`) appears on sale-badge and promotional percentage labels — the semantic "discount" signal distinct from the CTA blue. - Horizontal-scroll game rails — the primary navigation pattern is a horizontally scrollable tile row with arrow controls, repeated per content category. ## Colors ### Brand - **Cobalt Blue** (`{colors.primary}` — #006ef5): frequency 13. Used as background (6), border (6), gradient (1). The primary action color — every "Pre-order now" and "Play" button runs in cobalt blue. Never used as text or section color. The single chromatic brand voltage in the system. - **Cobalt Light** (`{colors.primary-light}` — #3da2ff): frequency 4. Used as text (2) and border (2). A lighter blue for secondary interactive states or link text on dark surfaces. - **Alert Red** (`{colors.alert-red}` — #dc3318): frequency 4. Used as background (2) and border (2). The discount/sale badge color — appears on promotional percentage labels (e.g., "−20%") and limited-offer chips. ### Text - **Ink** (`{colors.ink}` — #f2f2f2): frequency 182. Used as text (91) and border (91). The primary text tone — a cool off-white used for headlines and body copy against dark surfaces. Not pure white; the slight neutral gray softens the contrast. - **Ink Bright** (`{colors.ink-bright}` — #ffffff): frequency 171. Pure white — 72 as text (button labels, hero heds over dark imagery), 26 as background (the "Play for free" light section), 73 as border. ### Surface - **Canvas** (`{colors.canvas}` — #000000): frequency 246. Pure black — 125 as text on light surfaces, 116 as border, 1 as background, 4 as shadow. The floor of the dark game sections and the nav bar background. - **Surface 1** (`{colors.surface-1}` — #242424): frequency 8. The charcoal lifted surface — used as the background for game tile cards in the grid sections, providing a perceptible dark lift above the pure-black floor. ### Hairline - **Hairline** (`{colors.hairline}` — #b5b5b5): frequency 26. Used as text (13) and border (13). The mid-gray hairline for dividers, section separators, and secondary chrome on dark surfaces. - **Hairline Dark** (`{colors.hairline-dark}` — #000000): pure black used as hairline on the light-surface section where white borders would disappear. ### Surface Light - **Surface Light** (`{colors.surface-light}` — #ffffff): the "Play for free" promotional band, which inverts to a white background with charcoal text and cobalt-blue CTA. ## Typography ### Font Families The system runs two families in role-based division. **Ubisoft Sans** — a proprietary condensed display typeface (fallbacks: Roboto, sans-serif) — handles section display headings at 24–32px weight 700. It appears on h2 and h3 elements that title each game rail ("What's hot this week", "Upcoming Games") and on hero banners. **Open Sans** — an open-source humanist sans (variants: "Open Sans Alt", full stack) — handles all body, label, navigation, and secondary content. Open Sans spans weights 400 and 700; the 700 weight runs on game tile titles and interactive labels. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-lg}` | 32px | 700 | 38.4px | Hero h2 game title / page section display | | `{typography.display-md}` | 24px | 700 | 28.8px | Rail section headings | | `{typography.display-sm}` | 14px | 700 | 21px | Ubisoft Sans on small h2 game titles in tiles | | `{typography.body-md}` | 16px | 400 | 24px | Body paragraphs, game descriptions | | `{typography.body-bold}` | 16px | 700 | 24px | Bold body, price display, bold callouts | | `{typography.body-sm}` | 14px | 400 | 21px | Secondary body, metadata, dates | | `{typography.label-bold}` | 14px | 700 | 21px | Nav links, game tile titles, interactive labels | | `{typography.label-caps}` | 12px | 700 | 15.6px | Platform badges, category tags (uppercase) | | `{typography.button-md}` | 14px | 700 | 21px | CTA button labels ("Pre-order now") | ### Principles Ubisoft Sans at weight 700 is the system's only display-serif-equivalent statement: bold, slightly condensed, reads legibly at 32px against dark game artwork. Open Sans at weight 700 handles all the interactive labeling tasks that Ubisoft Sans does not touch — game tile titles, button labels, price display. The system does not use any weight below 400; the minimum rendering weight is the default body. ### Note on Font Substitutes Ubisoft Sans is proprietary. **Barlow Semi Condensed Bold** or **Rajdhani Bold** are the closest open-source matches for a weight-700 display sans with slight condensing. **Exo 2 Bold** also transfers well at the 24–32px display sizes. Open Sans is already freely available on Google Fonts and needs no substitute. ## Layout ### Spacing System - **Base unit:** 8px, with 16px as the dominant module. - **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 64px · `{spacing.2xl}` 72px. - **Section padding:** 0px × 72px horizontal on the hero; 64px vertical on the "Play for free" light section. - **Tile gap:** 8px between game tiles in the horizontal rails. ### Grid & Container - **Hero panel:** full-bleed game artwork at viewport width, with text and CTA anchored in the lower-left quadrant. - **Game tile rails:** horizontal flex rows of fixed-width tiles (approximately 200–250px each), scrollable with overflow-x, separated by 8px gaps. Each rail is preceded by a section heading and optionally a "See all" link. - **"Play for free" band:** full-width white-background section, 64px vertical padding, 3-up grid of free game tiles. - **Footer:** full-width dark canvas, 24px padding, multi-column link list in Open Sans body-sm. ### Rhythm The page alternates between **dark game rail** (canvas background, off-white text, cobalt-blue CTAs) and **light promotional band** (white background, black text). The contrast between these two bands is the page's primary navigational device — the light band marks a distinct content category (free games, subscription content). Within each dark rail, rhythm is produced by the tile height uniformity: every tile in a given rail has the same dimensions, creating a consistent horizontal register. ## Elevation The system has a **minimal shadow tier**. Four shadow occurrences exist in the captured page, all as black-with-opacity ink. The charcoal `{colors.surface-1}` tiles sit above the black-canvas floor by tonal contrast alone — the 24-lightness gap between surface and floor reads as lift without any rendered shadow. The hero banner uses a gradient overlay (from dark near-black to transparent) over the game key art to ensure text legibility, which functions as an elevation-adjacent technique. ## Shapes The radius scale is **binary with one small exception**: - `{rounded.none}` 0px — nav, footer, section bands, hero panel edges. - `{rounded.sm}` 4px — platform-badge chips (5 occurrences). - `{rounded.md}` 8px — the dominant radius, appearing 49 times — every game tile, every card, every interactive surface. - `{rounded.full}` 10000px — CTA buttons only ("Pre-order now", "Play", "Play for free"). The 8px radius is the system's harmonic center. It is consistent enough to feel deliberate and soft enough to feel approachable — a standard game-UI radius that also appears in the Epic Games Store, GOG, and the Microsoft Store. ## Components **`button-primary`** — Cobalt-blue `{colors.primary}` fill, white text, `{rounded.full}` full-pill, 0px × 16px padding, 40px height. "Pre-order now" is the canonical instance. The only element on the page with brand-colored fill. **`button-secondary`** — Transparent fill, 1px white border, white text, same pill rounding and height. Used for secondary actions ("Watch trailer", "Learn more") alongside the primary CTA. **`top-nav`** — Pure black `{colors.canvas}` surface, 48px height. Houses the Ubisoft spiral logo mark (white) flush left, navigation links (Games, Store, News, Esports) in Open Sans bold, a search icon, and a login icon flush right. **`nav-link`** — Transparent, off-white text at `{typography.label-bold}` (14px / 700), 8px × 12px padding. Active state indicated by underlining. **`hero-heading`** — Off-white `{colors.ink}` text, Ubisoft Sans 32px / 700, 0.019px tracking. The game title headline in the hero banner — renders against full-bleed key art with a gradient scrim beneath for legibility. **`section-heading`** — Off-white text, Ubisoft Sans 24px / 700. The rail section title above each horizontal tile grid ("What's hot this week", "Upcoming Games"). **`body-paragraph`** — Off-white text, Open Sans 16px / 400. Game description copy in hero panels and on individual game pages. **`card`** — Charcoal `{colors.surface-1}` fill, off-white text, `{rounded.md}` 8px radius, 16px × 16px × 42px padding (the extra bottom accommodates the button row). Used for featured game cards with more editorial treatment than the compact tile. **`game-tile`** — Charcoal `{colors.surface-1}` fill, `{rounded.md}` 8px radius, zero padding. Key art fills edge-to-edge; title in Ubisoft Sans or Open Sans bold appears below the image outside the tile container. The standard catalog unit. **`price-badge`** — Transparent, white text in `{typography.body-bold}`. Renders the game price (e.g., "£34.99") below the tile title. The alert-red `{colors.alert-red}` discount badge overlaps when a sale price is active. **`platform-badge`** — Transparent, gray `{colors.hairline}` text in `{typography.label-caps}` 12px uppercase. Platform icons (PS5, Xbox, PC) appear as icon + text label chips below each tile title. **`hero-section`** — Pure black canvas background, 0px × 72px horizontal padding. Contains the full-bleed artwork image with a gradient scrim, the hero heading, body paragraph, and primary/secondary CTA pair. **`section-light`** — White `{colors.surface-light}` background, 64px vertical padding. The "Play for free" band — the single light section on an otherwise dark page. Tile titles and headings render in near-black `{colors.canvas}` text. **`footer`** — Black canvas, off-white body-sm text, 24px padding, 1px gray-hairline top border. Multi-column link tree: Games, Community, Careers, Legal, Support. ## Do's and Don'ts **Do** use `{colors.primary}` (#006ef5) exclusively for CTA buttons. The cobalt-blue at 13 occurrences is tightly reserved for purchase and play actions. Using it on section headings, nav accents, or decorative elements would break the "blue means buy" convention the system enforces. **Do** fill game tiles with key art at zero padding and `{rounded.md}` 8px radius. The edge-to-edge image treatment is the system's core catalog pattern — any internal padding on the art container weakens the immersive game-store effect. **Do** use Ubisoft Sans at weight 700 for section headings only. The proprietary typeface is reserved for navigational headings that title each rail; Open Sans handles the rest. Mixing Ubisoft Sans into body copy or labels would reduce its distinctiveness. **Do** maintain the dark-to-light section alternation for free-game or subscription content bands. The white `{colors.surface-light}` band is the page's only tonal inversion and it functions as a section-type signal — "this content is different" — not a purely aesthetic decision. **Don't** introduce intermediate border-radius values between 8px and the full pill. The binary system (8px everywhere, pill on buttons) is deliberate. Adding 12px or 16px on featured cards would create a radius gradient that dilutes the binary discipline. **Don't** use the alert-red `{colors.alert-red}` (#dc3318) for anything other than discount/sale price labels. It is a semantic color for "reduced from regular price" — using it on promotional text, section labels, or error states would introduce an ambiguous signal in a commerce context where red specifically means savings. **Don't** render Ubisoft Sans below 24px. At smaller sizes the proprietary display typeface's slight condensing and weight-700 rendering competes with Open Sans rather than leading it. Below 24px, all copy defaults to Open Sans. **Don't** apply the cobalt-blue as a background for section headers or feature panels. The single hero-gradient use of the cobalt family (as a gradient stop) is the maximum application of the brand color outside button fills — a full-bleed cobalt section would feel like a product-marketing violation of the game-store surface. ## Known Gaps - **Dark mode / light mode toggle:** the site delivers a mixed dark/light page with one light-band section, but no system-level theme toggle was observed. The light section appears to be a content-type declaration, not a user preference. - **Authenticated surfaces:** the logged-in state (Ubisoft Connect account, game library, subscription status) is not represented. The Ubisoft Connect overlay and account management surfaces carry their own component set. - **Hover and focus states:** only resting states are captured. The game tile hover effect (likely a scale transform or overlay glow on key art) and button hover fills are not documented. - **Video player chrome:** promotional trailer overlays and the embedded video player chrome appear on individual game pages but were not present in the captured marketing surface. - **Subscription badge system:** Ubisoft+ subscriber tiles carry a badge overlay; the badge design, color, and positioning are not fully documented from the captured surface. - **Localization surface:** the game store adjusts regional pricing, currency symbols, and rating badges (PEGI, ESRB) per locale. These surfaces were not captured.