Epic Games Store Design System

Epic Games Store reads as a catalog before it reads as a marketing surface. The page paints itself in a near-black charcoal ladder — "#101014" for the canvas, "#18181c" and "#202024" for the gradient bodies of tiles, "#28282c" for hover states, "#404044" for the rare divider — and every game key-art tile sits on this graded ink with an 8px radius. The single chromatic moment in the chrome is Epic Cyan "#26bbff", which appears on the price chip beneath each tile, on "Free Now" flags, on sale badges, and on the small dot that marks a wishlist filter. The voltage is precious: 37 occurrences across the full page versus 3,801 white-on-charcoal surfaces. Where PlayStation alternates three full-bleed canvases, Epic stacks one canvas — dark — and lets the cover art do the chapter work. The DESIGN.md file packages this storefront discipline as 19 color tokens covering the five-layer charcoal ladder plus the cyan voltage, two link blues, and the on-dark text family; 11 typography tokens all set in Inter / Inter Tight with sizes capped at 20px because the brand reserves expressive headlines for the key-art layer; a four-radius shape scale where 8px (181 occurrences) carries every tile, 4px sits on inputs and chips, 50% renders avatars and dots, and 9999px pills sit on filter rows; and 18 components covering tile, hero carousel, genre pill, search field, top-nav, badge family, and the price-and-CTA row that closes every product card. Feed the file to Claude, Cursor, or Copilot and the agent will generate a games-storefront layout that mirrors Epic's restraint: a tile grid on graded charcoal with one cyan accent reserved for price and savings cues, Inter Tight at weight 700 for tile titles capped at 20px, and an 8px radius repeated across every card, filter, and surface. Reference the tokens directly when building a games catalog, a sale page, or a library grid. The system's value as a study is that it documents what happens when key art does the storytelling — the chrome compresses itself to a single accent and a single radius, and the catalog scans like a contact sheet rather than a marketing page.