What is Ubisoft's primary brand color?

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.

What typefaces does Ubisoft use and what are the best open-source substitutes?

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.

Why does Ubisoft use a near-black dark canvas instead of pure black?

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.

How does Ubisoft's game tile grid work?

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.

Can I use this DESIGN.md to build a game catalog or media store UI?

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.

Ubisoft Design System

Ubisoft's game-publisher marketing design system.

About Ubisoft DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source ubisoft.com

Gaming & Entertainment
E-commerce & Retail

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.

What makes it distinct

Full-bleed game artworkthe 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 voltagethe 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 radius8px on cards and UI surfaces everywhere; 10000px (effective pill) on CTA buttons only; no middle tier
Ubisoft Sans for display onlythe 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 textcharcoal dark surface at near-black with off-white text; the system inverts between dark game sections and light promotional strips

Live at ubisoft.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

ubisoft.com

Explore Ubisoft

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Ubisoft design system FAQ

Common questions about Ubisoft's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Ubisoft — official site

Ubisoft's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.