What is Electronic Arts' primary brand color?

EA's 2020 brand identity pairs a coral red with a deep navy: coral red is wired as --ea-app-brand-color and --ea-theme-ea-brand-2020-coral, and deep navy as --ea-theme-ea-brand-2020-deep-blue. The coral is the single chromatic brand moment on the marketing surface, reserved for the EA Play promo strip two-thirds down the page and for inline emphasis tokens. The dark gradient end-stop carries a slightly hotter coral-pink variant wired as --ea-theme-ea-brand-2017-dark-gradient, a holdover from the previous wordmark generation. A sky blue is also exposed as --ea-hybrid-brand-color-primary for product UI surfaces but does not appear in the marketing chrome captured here.

What typeface does EA use, and what should I use as a substitute?

EA's marketing site runs ElectronicArtsText as the primary sans-serif across body, label, and caption surfaces. Fallbacks walk to Verdana, Helvetica, Arial, sans-serif — Verdana sits first in the stack as the wide-counter fallback for licensed-text surfaces. There is no display-tier family declared in the captured CSS because the marketing chrome carries no 48px+ headlines; screen-printed type inside game key art does that job per-title. A secondary stack of plain Arial at 700 weight 12px carries small-caps card labels (NEW, FEATURED, PRESALE). Inter at the same body sizes is the closest open-source substitute for ElectronicArtsText; Helvetica Now Display at weight 700 is the closest match for the Arial caption tier.

Why does EA use charcoal #161616 instead of pure black for the canvas?

The dominant structural background is #161616, wired into more than 20 CSS custom properties including --ea-dark-color, --ea-theme-tile-color, and --ea-hybrid-neutral-color-800. The deliberate not-quite-black move keeps the canvas from competing with the saturated true blacks inside game key art — when a Battlefield screenshot fills the hero, its in-game shadows hit pure #000 and the surrounding charcoal stays subordinate. The system does also expose pure --eacom-color-black for inverted surfaces (drawer scrims, modal backgrounds), but the standing canvas is the warmer 9% lightness charcoal.

What is EA's corner-radius philosophy?

The rendered radius scale is binary: a tight structural tier at 2-3px (--ea-theme-cta-border-radius is wired at exactly 3px) for cards, registration forms, and inline chips, paired with a 35px pill (--ea-theme-cta-standard-rounded-border-radius) reserved for the standard CTA button. There is no 8px / 12px / 16px middle ladder — surfaces either sit at the tight structural radius or jump straight to the pill. Game-card tiles render with no radius (square corners) so the key art reads as a screen rather than as a UI element. The contrast between 2-3px chrome and 35px CTAs is the system's tap-affordance signal.

Can I use this DESIGN.md to build my own game-publisher marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce EA's specific moves: charcoal-not-black canvas, single coral-red brand voltage reserved for one promotional band, ElectronicArtsText-equivalent body type at 14-18px without an editorial display moment, tight 2-3px structural radii contrasted with a 35px pill on the primary CTA, and per-platform color tokens so store-shelf chips self-identify. The one move that requires the underlying artwork to work: subordinating the brand chrome to game key art only succeeds when the artwork itself is visually overwhelming. For products with quieter visuals you'll need an interstitial typographic tier the brand fully controls.

Electronic Arts Design System

EA's marketing system treats game key art as the canvas — a near-black charcoal floor, a single coral-red brand voltage on the EA Play strip, and ElectronicArtsText carrying body…

About Electronic Arts DESIGN.md

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

Gaming & Entertainment

EA's marketing site does what almost no other consumer-software brand attempts at scale: it lets the product art win every above-fold composition. The hero on ea.com is a full-bleed Battlefield 6 screenshot — landscape rendered, in-game HUD intact, "SEASON" stenciled across the lower third — with a charcoal registration drawer floated over the right rail. Below it, the "Featured Games" strip is a 3-by-2 grid of square game-card tiles (UFC 6, EA Sports FC, F1 25, Apex Legends, The Sims) whose own marketing art carries the chromatic identity for each title. The brand chrome — the top nav, the section dividers, the typographic labels — sits back at charcoal #161616 and lets the artwork do the chromatic work. The coral-red EA Play promo band, two-thirds down the page, is the single act of brand voltage on the entire surface.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 16 color tokens — a charcoal-and-bone structural ladder (charcoal #161616, near-black #000, bone #f3f3f3, pure white #ffffff for inverted surfaces), the 2020 coral-and-navy brand pair, a sky-blue hybrid-product accent at #0098ed, and per-platform identifiers for PlayStation deep-blue #003087, Xbox green #52b043, and Nintendo red #fe0016. 11 typography tokens running ElectronicArtsText as the primary sans (with Verdana, Helvetica, Arial as system fallbacks), plus a 12px / 700 Arial micro-label tier for card metadata. A 2-3px tight radius scale plus a 35px pill on standard CTAs. 16 components covering the EA Play promo block, game-card tiles, the registration drawer, the local-nav strip, and the per-platform store chips.

Feed this file to an AI coding tool and it reproduces EA's specific moves: charcoal canvas instead of softer near-black, single coral voltage held in reserve for one promotional band, ElectronicArtsText at modest 14-18px weights with no editorial 48px+ moment, tight 2-3px structural radii contrasted against a 35px pill on the primary CTA, and per-platform color tokens that let the store-shelf chips self-identify without competing with the brand chrome. The one move worth borrowing for any product-led marketing surface: the willingness to subordinate the brand to the artwork. EA gets away with it because the games are visually overwhelming on their own terms; most teams need an interstitial typographic layer the brand controls.

What makes it distinct

Key-art as canvasthe above-fold hero is a full-bleed Battlefield 6 screenshot with the registration drawer overlaid; brand chrome holds back so the game can do the talking
Single coral voltagecoral red appears as the EA Play promo strip and the --ea-app-brand-color token, the only chromatic brand moment that competes with the game artwork
Two-token brand paircoral and deep navy together form the 2020 EA wordmark identity, wired as --ea-theme-ea-brand-2020-coral and --ea-theme-ea-brand-2020-deep-blue
ElectronicArtsText at modest sizesproprietary sans at 14-18px / 400 carries body and captions; there is no 48px+ editorial display moment in the marketing chrome
Per-platform palettePlayStation deep-blue, Xbox green, Nintendo red, EA Access blue each get their own brand-color CSS variable for store-shelf logo treatments

Live at ea.com

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

ea.com

Explore Electronic Arts

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.

Electronic Arts design system FAQ

Common questions about Electronic Arts'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.

Electronic Arts — official site

Electronic Arts' 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.