Epic Games Store Design System

Overview

Epic Games Store paints one canvas and lets the catalog do the rest. The page background is a near-black {colors.canvas} ("#101014") and every game card sits on a graded charcoal — {colors.surface-tile-top} ("#18181c") fading into {colors.surface-tile-bottom} ("#202024") — at an 8px corner. The single chromatic accent is {colors.primary} ("#26bbff"), Epic Cyan, which appears 37 times against 3,801 white-on-charcoal surfaces. Where Steam decorates its store with green sale bands, orange "Featured" headers, and a busy chrome palette, Epic commits to one voltage and one canvas — the cyan flags price, savings, and free-game state, nothing else. Game key art carries every other moment of color.

Tile-as-chapter: the storefront has no full-bleed hero band the way PlayStation's marketing site does. Instead, the entire page is a contact sheet of {rounded.md} (8px) tiles — the hero carousel, the "Discover Something New" grid, "Featured Discounts," "Top Free Games," "Top Past Releases," "Mixtape," and "Golden Week" — and the 8px radius repeats 181 times across the captured page. The shape system is so committed that it functions as identity: scan a screenshot with the colors stripped and Epic is recognizable by tile cadence alone.

Caps-at-twenty type: Inter Tight at weight 700 carries titles, and the largest size in the chrome is 20px. There is no display-tier 48px, no editorial 64px, no banner head — because hero copy lives inside the key art, not above it. Below the tile, the chrome compresses to Inter at 12-16px for meta, price, and dev-credit lines. Where most game-store homepages stack a 60px headline over a 16px subhead, Epic keeps every text node under 20px and trusts the art to carry weight.

Key Characteristics:

• Single dark canvas {colors.canvas} ("#101014") — no light mode, no canvas alternation
• Five-layer charcoal elevation ladder: "#101014" page, "#18181c" tile top, "#202024" tile bottom, "#28282c" hover, "#404044" divider
• One voltage {colors.primary} ("#26bbff") reserved for price chips, sale badges, free-game wash, and filter dots
• Type tops out at 20px ({typography.title-lg}) — Inter Tight 700 for tile titles, Inter for body and metadata
• Load-bearing 8px radius ({rounded.md}) appears 181 times across tiles, slides, and cards
• Four-radius shape ladder: 4px inputs, 8px tiles, 9999px pills, 50% avatars and dots
• Default browser blue "#0000ee" survives in inline body links — the storefront does not override the user-agent anchor color

Colors

Epic's palette is a graded charcoal ladder plus one voltage. The palette is small on purpose: with 4014 elements scanned, only 10 distinct chrome hexes survived clustering, because every visual moment that wants color hands the moment to a game cover instead.

• Epic Cyan (#26bbff) — frequency 37. Used as bg (37), text (0), border (0), gradient (0). The storefront's only chromatic chrome accent — price chips, sale-percentage badges, "Free Now" wash flags, and small filter-state dots. Never a primary surface, never a full-bleed band. The voltage is precious by design.
• Page Canvas (#101014) — frequency 67. Used as bg (65), gradient (2). The default page surface. Slightly warmer than pure black at OKLCH hue 285; this is what the body, every section rail, and the footer paint themselves on.
• Tile Gradient Top (#18181c) — frequency 114. Used as gradient (113), bg (1). The lighter half of the standard tile body gradient. Pairs with #202024 to give every card a subtle top-to-bottom lift without a separate hover state.
• Tile Gradient Bottom (#202024) — frequency 114. Used as gradient (113), bg (1). The darker half of the tile gradient. The pairing reads as a single charcoal tile in screenshots but lifts under hover.
• Surface Elevated (#28282c) — frequency 6. Used as bg (6). The hover surface and the chip background for genre pills, the nav search field, and the avatar. One step lighter than tile bottom — the elevation cue is small but legible against the canvas.
• Surface Divider (#404044) — frequency 7. Used as bg (7). The rare lighter charcoal — used on dividers, the carousel pagination track, and the secondary-button surface when one appears in a "View All" position.
• Ink (#ffffff) — frequency 3801. Used as text (1898), border (1893). The dominant on-canvas color. Title rows, body rows, hairline borders for the focus ring, and every metadata line render in white or graded white.
• Pitch (#000000) — frequency 167. Used as text (82), border (82), bg (3). Reserved for on-cyan moments — the price-chip text reads #101014 rather than pure black, but a few badge contexts use pitch directly for maximum contrast.
• Link Default (#0000ee) — frequency 2740. Used as text (1370), border (1370). The unstyled browser anchor color survives in inline body links — Epic does not override the user-agent default for legal-page anchors, FAQ rows, or support links. The volume comes from the page's footer-area legal copy.
• Swiper Theme (#007aff) — declared on :root as --swiper-theme-color. The carousel library's default theme blue, scoped to pagination dots inside the Swiper instance. Rare in the chrome; included because it ships in the CSS.

Typography

Two faces from the Inter family carry every text node: Inter for body, metadata, and caption rows, and Inter Tight for the two tile-title sizes at weight 700. The pairing reads as one family because Inter Tight is the condensed sibling of Inter — the storefront looks single-faced at a glance, and the slight letterform tightening on 16px and 20px titles helps tile names like "Mortal Kombat 1: Komplete Edition" fit on two lines.

The notable strategic choice is the size cap: nothing in the chrome exceeds 20px. The largest type token in the captured surface is {typography.title-lg} (Inter Tight 700, 20px, 1.25 line-height, +0.4px tracking), used on h5 section heads like "Top Free Games" and "Top Past Releases." Tile titles drop to 16px ({typography.title-md}, Inter Tight 700). Body and metadata sit at 14px regular with +0.28px tracking. Eyebrow caps live at 12px weight 700 uppercase with +0.5px or +1.2px tracking, used on small section labels.

Where PlayStation runs SST at weight 300 across a six-step display ladder, Epic runs Inter / Inter Tight at weight 400-700 with no display tier at all — the key-art layer absorbs the moments a typical storefront would amplify with a 48-60px headline. The compression is deliberate: the catalog is the page.

Layout

The page is a single dark canvas with vertical rails of 8px-radius tiles. The default body container is 1232px wide centered on the canvas. Each section is an eyebrow caption (12px Inter 700 uppercase, +0.5px tracking) above a tile rail, with {spacing.xxl} (64px) of vertical separation between rails. There are no full-bleed colored bands and no decorative dividers between sections — the canvas color carries through and the rhythm comes from tile spacing alone.

Spacing in the chrome lives mostly at three steps: {spacing.md} (10px) gap between tile rows and meta lines, {spacing.sm} (8px) gap inside the tile meta footer, and {spacing.xxl} (64px) between sections. Inside tiles, padding is "0" because the cover art bleeds to the 8px corner and the title row sits below the image, not on top of it. The hero carousel uses a 44px circular paddle ({rounded.circle}) at {colors.hairline-mid} ("rgba(255,255,255,0.16)") on the left and right edge of the slide.

The sidebar pattern — Top Sellers, Top Wishlisted, Top Upcoming Wishlisted — runs three parallel single-column lists in the lower half of the page, each capped at five rows. Where Steam's storefront uses dense data tables for top-sellers, Epic uses three small column rails that read like a magazine "What's hot" sidebar.

Elevation & Depth

Epic's elevation system is ink-on-ink: the canvas at {colors.canvas} ("#101014") supports tiles painted in a {colors.surface-tile-top} → {colors.surface-tile-bottom} ("#18181c" → "#202024") gradient, with hover lifting to {colors.surface-elevated} ("#28282c"). The maximum surface in the ladder, {colors.surface-divider} ("#404044"), is reserved for narrow secondary chrome — pagination tracks, divider rules, and the rare "ghost" outline button.

There are no drop shadows in the chrome. The captured surfaces report a shadow count of zero on every clustered color; the entire elevation cue is the ladder. Where most dark-canvas storefronts (Steam, Discord, GOG Galaxy) layer 0-12px shadows on hover, Epic just shifts one step up the charcoal scale. The charcoal-as-elevation move keeps the page perceptually flat — game key art remains the only thing that "pops" off the canvas, exactly what a contact sheet wants.

Shapes

Four radii do the entire shape work. {rounded.md} (8px) is load-bearing at 181 occurrences — every tile, every carousel slide, every card, every wishlist row. {rounded.sm} (4px, 42 occurrences) handles the nav search input, dropdown rows, and small chips. {rounded.pill} (9999px, 35 occurrences) handles genre filter pills and the few sectional CTA buttons. {rounded.circle} (50%, 53 occurrences) renders the avatar in the top-right, the carousel paddles, and small status dots.

The two-shape rhythm of tile-and-pill is the entire vocabulary. There is no 12px or 16px radius in steady use — Epic commits to 8px or pill with no middle ground. The discipline reads in screenshots: every card corner is the same corner, so the eye can scan tiles by cover art alone.

Components

• page-canvas — the dark page surface at {colors.canvas} ("#101014"). No internal padding; child rails set their own rhythm.
• top-nav — 72px tall (--eg-global-nav-height: 4.5rem), full-width, painted on the canvas, with a horizontal row of {typography.body-sm-strong} nav links and a right-aligned search + avatar.
• nav-search — a 4px-radius input painted on {colors.surface-elevated} ("#28282c"), housing the cross-store search.
• nav-avatar — a 36px {rounded.circle} painted on {colors.surface-elevated}, the only circular chrome that contains an image.
• hero-carousel-slide — an 8px-radius slide with a full-bleed cover image and an inset title overlay. The chrome is reduced to the radius and the cyan price chip; no gradient overlay tints the art.
• carousel-paddle — 44px circular paddle (matches --swiper-navigation-size) at {colors.hairline-mid} ("rgba(255,255,255,0.16)") — visible only on hover over the slide region.
• game-tile — the workhorse component. 8px corner, cover art bleeds to the edge, title and price stack below at {typography.title-md} and {typography.body-sm-strong}.
• game-tile-hover — the same shape, surface lifted from the gradient to {colors.surface-elevated} ("#28282c"). No scale transform, no shadow — only the ink-on-ink step.
• tile-meta-row — the row beneath the cover image, padded 8px 12px, with a single-line dev/publisher caption at {typography.caption-md} and the price chip on the right.
• price-chip — text-only chip in {colors.primary} ("#26bbff") at {typography.body-sm-strong}. No background fill in the default state — the cyan text alone signals the price.
• price-chip-free — the "Free Now" variant. Cyan text on a {colors.badge-free-wash} ("rgba(38,187,255,0.16)") wash, the only filled chip in the system.
• sale-badge — a small {colors.primary} chip in {colors.on-primary} ("#101014") text used for percentage-off labels like "-40%". Always sits above the price chip on a saled tile.
• genre-pill — 9999px pill on {colors.surface-elevated} for filter chips above the discount grid. Active state swaps fill to {colors.primary}.
• section-eyebrow — uppercase 12px Inter 700 with +0.5px tracking. Sits above each rail (e.g., "FEATURED DISCOUNTS"). The single most-used display tier in the chrome despite being a 12px caption.
• section-rail — the wrapper container for a horizontal scroll of tiles. 64px bottom padding sets section rhythm.
• filter-dot — 8px {rounded.circle} in {colors.primary} — used to mark an applied filter state next to a filter label.
• footer-band — full-width canvas footer, 48px vertical padding, with three columns of {typography.caption-md} legal and support links painted in {colors.ink-on-canvas-soft}.
• inline-link — body anchors render at the default browser {colors.link-default} ("#0000ee") with no underline override. Epic does not retheme the unstyled anchor.

Do's and Don'ts

• Don't use Epic Cyan {colors.primary} ("#26bbff") as a primary button fill, full-bleed band, or hero accent. The captured page renders 37 cyan occurrences against 3,801 white-on-charcoal — the voltage is reserved for price, savings, and free-game state. Use {colors.surface-elevated} ("#28282c") for the rare secondary action surface instead.
• Don't stack a display headline above a tile rail at 40-60px. The chrome caps at 20px on purpose — the key art carries hero weight. Use {typography.title-lg} (20px Inter Tight 700) or the 12px eyebrow caption, nothing larger.
• Don't add drop shadows under tiles on hover. The captured chrome has zero shadow tokens; elevation is a one-step shift up the charcoal ladder from "#18181c" / "#202024" to "#28282c". A shadow on a near-black canvas reads as a smudge.
• Don't introduce a 12px or 16px radius. The shape vocabulary commits to 4px / 8px / pill / circle; a 12px or 16px corner is jarring next to a rail of 181 8px tiles.
• Don't retheme inline body links away from "#0000ee" without a reason. The default browser blue survives in legal and FAQ rows by design — overriding to the cyan voltage breaks the price-chip-only rule.
• Do repeat the 8px corner across every card-shaped component. The radius is identity; consistency is what makes the contact-sheet read work.
• Do use {colors.surface-tile-top} → {colors.surface-tile-bottom} as a gradient pair on tile bodies rather than a single fill. The 4-OKLCH-lightness lift between the two ends gives the tile body a quiet vertical direction without a border.

Known Gaps

• Storefront only — product detail page, cart, checkout, library, and account chrome are not in this capture.
• Hover states are inferred from the {colors.surface-elevated} ("#28282c") token but not directly observed in the static screenshot.
• Per-game theming — sale pages, mega-sale takeovers, and creator launches sometimes pull a per-title accent color outside the cyan voltage. Those overrides are out of scope here.
• Form chrome — login, sign-up, billing, password reset, and modal/toast styles are not captured; the document covers public storefront chrome only.
• Launcher and creator surfaces — the Epic Games Launcher desktop app and the Unreal-branded creator portal use different chrome that this document does not describe.