Epic Games Store — Design System Deep Dive

1. Brand Overview

Epic Games Store’s design language is unapologetically digital-first gamer culture. This isn’t a soft, rounded, playful aesthetic like Nintendo. It’s sharp, dark, and functional — a UI that’s more about content delivery than ornamental design. The vibe: dark mode by default, high-contrast CTAs, restrained color pops, and typography that feels clean but never ornamental.

The store’s audience is gamers — and that means high visual density, lots of content modules, and a UI that can carry heavy imagery without collapsing under clutter. The system prioritizes legibility in low-light environments (think: late-night gaming sessions), interaction clarity, and brand consistency across a mixed catalog (from AAA shooters to indie puzzle titles).

What’s striking: Epic keeps their design language minimal — no drop shadows, barely any gradient flourishes. The brand trusts its content (game art) to do the heavy lifting visually. The UI is the scaffolding. It’s black and steel blue with occasional cyan bursts (their #26bbff), acting as highlight and focus cues.

This works because the store needs to scale — the same UI has to feel on-brand for Fortnite and Civilization VI. The design is a stable frame, not a competing visual. Navigation is straightforward, spacing is tight in content lists but generous in hero areas, and interactive elements are styled for quick recognition without visual noise.

Epic’s philosophy here: functional elegance. Minimal color palette, consistent type, strict spacing grid, and interaction feedback that’s clear but not flashy. The store’s style says: “We’re here to deliver games, not to be the game.”

2. Color System

2.1 Primary Colors

Primary brand pop: #26bbff (rgb(38, 187, 255). This is the bright cyan used sparingly — mainly for interactive states like focus outlines and accent backgrounds. It’s crisp, high-energy, and reads well against dark backgrounds.

Background: True black (#000000) and near-black (#101014). These are the dominant UI surfaces. They let game art shine and keep text contrast high.

Text: White (#ffffff), often at varying opacities for hover/focus. This is standard for dark UI, but Epic uses reduced alpha to indicate inactive or hovered states.

Competitor comparison: Steam uses more muted blues and gradients; Epic is flatter and more contrast-heavy. Xbox Store leans green; Epic’s cyan is cleaner and less brand-locked to a single franchise.

2.2 Complete Palette

2.3 Color Relationships

Contrast is key here. White text on #000000 background is WCAG AAA compliant (21:1 contrast). Bright Cyan (#26bbff) on black is also extremely legible. Even reduced alpha whites maintain enough contrast for hover states because they’re layered over dark backgrounds.

Dark mode isn’t a “mode” here — it’s the default. The palette is built for it: high-contrast text, low-saturation backgrounds, and single accent color. Accessibility is solid for most text sizes.

Potential risk: White at low opacity (7–14%) may fail contrast for small text. But Epic seems to only use these for non-text overlays, so it’s fine.

2.4 Usage Guide

• Primary combos: #26bbff over #000000 for CTAs and focus. White (#ffffff) for text.
• Avoid: Bright Cyan on white — harsh and fatiguing.
• Safe neutrals: Near black (#101014) for containers, #000000 for full-page backgrounds.
• Hover overlays: Keep white opacity between 0.13–0.15 for subtle interactions.
• Do not introduce new accent colors — the system works because it’s hyper-controlled.

3. Typography

3.1 Font Families

Main UI font: Inter — sans-serif, modern, highly legible. Used across headings, links, buttons, captions.

Secondary font: Inter Tight — slightly condensed variant of Inter, used in headings for tighter vertical rhythm.

Fallback: No explicit stack listed, but defaults to Arial in some button contexts (not ideal, but probably a legacy/system fallback).

No Google or Adobe fonts detected — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

Interesting choice: H1 has multiple size definitions — likely context-specific (hero vs tile vs mobile). Inter Tight’s condensed form lets Epic fit more heading text without wrapping. Body/link text sits solidly at 16px, captions at 12–14px with modest letter-spacing (up to 1.2px for uppercase).

Readability is high — sans-serif with consistent weights. Interaction labels (buttons/links) use 500 weight for clarity.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. But Epic also uses micro values (3px, 4px, 5px) — possibly for icon alignment or tight list gaps.

4.2 Layout

Breakpoints are exhaustive — from 375px up to 2135px. This suggests a fully responsive design built for everything from phones to ultra-wide monitors. No max width token, but container widths likely adapt at each breakpoint.

5. Visual Elements

Border Radius: Epic uses a lot of 8px — the default for most interactive elements. 10px for buttons, 9999px for pills/avatars. They also use 4px for some divs, and 50% for circular elements.

Shadows: None. Flat design. Depth comes from borders and color contrast.

Borders: White borders at full opacity or reduced alpha — often for focus states. Also uses 1px top border with 15% opacity for dividers.

6. Components

6.1 Buttons

Primary (white background)
Default:

• Background: rgb(255,255,255)
• Color: rgb(0,0,0)
• Padding: 12px 20px
• Radius: 10px
• Border: none
• Font: Inter, 14px, weight 500

Hover:

• Background: rgba(255,255,255,0.35)
• Color: rgb(255,255,255)
• Opacity: 0.1

Active:

• Color: var(--eds_xd1k8g3q), background: initial

Focus:

• Border: 1px solid white
• Background: rgb(97,205,255)
• Color: white
• Box-shadow: white inset outline

Secondary (semi-transparent)
Default:

• Background: rgba(255,255,255,0.15)
• Color: white
• Padding: 8px 16px
• Radius: 8px

Hover/Focus similar to primary.

Tertiary (transparent with border)
Default:

• Background: transparent
• Color: white
• Border: 1px solid rgba(255,255,255,0.35)
• Padding: 7px 15px

6.2 Links

Variants:

• White — hover adds underline.
• Blue (#0000ee) — hover turns white and underlined.
• Black — hover turns white.

6.3 Forms

Search input:

• Background: transparent
• Color: white
• Border: none, radius 0
• Focus: outline using custom vars.

6.4 Cards

No explicit data, but border-radius mostly 8px, no shadows, spacing from grid.

7. Design Tokens — CSS Custom Properties

:root {
  /* Colors */
  --color-black: #000000;
  --color-near-black: #101014;
  --color-cyan: #26bbff;
  --color-white: #ffffff;
  --color-swiper-blue: #007aff;

  /* Typography */
  --font-inter: "Inter", sans-serif;
  --font-inter-tight: "Inter Tight", sans-serif;
  --font-arial: Arial, sans-serif;

  /* Font Sizes */
  --font-size-h1-lg: 32px;
  --font-size-h1-md: 20px;
  --font-size-body: 16px;
  --font-size-caption-sm: 14px;
  --font-size-caption-xs: 12px;
  --font-size-button-arial: 13.3333px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-64: 64px;
  --space-80: 79.9844px;
  --space-261: 260.984px;
  --space-298: 297.766px;
  --space-377: 376.875px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-xxl: 16px;
  --radius-xxxl: 24px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Borders */
  --border-white: 1px solid #ffffff;
  --border-white-alpha35: 1px solid rgba(255,255,255,0.35);
  --border-top-white-alpha15: 1px solid rgba(255,255,255,0.15);

  /* Shadows */
  --shadow-none: none;
}

8. AI Coding Assistant Prompt

# Epic Games Store Design System Specification

System Prompt:
You are an Epic Games Store design expert. Build UIs matching their visual language exactly.

Brand Context:
Epic Games Store’s design is dark, clean, and functional. It uses a minimal color palette with high contrast for legibility in low-light. Typography is modern sans-serif with tight hierarchy. Interaction states are clear but understated, relying on color and borders, not shadows.

Color Palette:
- Black: #000000 — Primary background
- Near Black: #101014 — Secondary background surface
- Bright Cyan: #26bbff — Accent, focus states, highlights
- White: #ffffff — Text, icons, borders
- White (opacity variants 0.14–0.15): #ffffff — Hover overlays
- Swiper Theme Blue: #007aff — Component-specific theme

Typography:
- Fonts: "Inter", "Inter Tight", Arial fallback
- Sizes:
  - H1 Large: 32px, weight 700
  - H1 Medium: 20px, Inter Tight, weight 700, line-height 1.25
  - Body: 16px, weight 400–500
  - Caption: 14px, weight 400–500, line-height 1.4
  - Caption XS: 12px, weight 400–700, line-height 1.0–1.5
- Use Inter Tight for headings, Inter for body and UI text

Spacing & Grid:
Base: 8px grid
Scale: 3px, 4px, 5px, 7px, 8px, 10px, 12px, 15px, 18px, 20px, 24px, 30px, 40px, 64px, 80px, 261px, 298px, 377px
Use multiples for padding, margins, and gaps. Button padding: 8–12px vertical, 16–20px horizontal.

Border Radius:
- sm: 4px — small divs
- md: 8px — cards, list items
- lg: 10px — buttons
- xl: 12px — larger surfaces
- xxl: 16px — rare elements
- xxxl: 24px — rare elements
- full: 9999px — pills, avatars
- circle: 50% — circular icons

Shadows & Depth:
Flat design — no shadows. Use borders and color contrast for depth.

Component Specifications:

Primary Button:
Default: background #ffffff, color #000000, padding 12px 20px, radius 10px, font 14px Inter, weight 500
Hover: background rgba(255,255,255,0.35), color #ffffff, opacity 0.1
Focus: border 1px solid #ffffff, background #61cdff, color #ffffff, inset box-shadow white 2px
Active: background initial, color var(--eds_xd1k8g3q)

Secondary Button:
Default: background rgba(255,255,255,0.15), color #ffffff, padding 8px 16px, radius 8px
Hover: same as primary hover
Focus: same as primary focus

Tertiary Button:
Default: background transparent, border 1px solid rgba(255,255,255,0.35), color #ffffff, padding 7px 15px
Hover/Focus: same as primary focus

Navigation Links:
White links — hover underline
Blue links (#0000ee) — hover turns white+underline
Black links — hover turns white+underline

Input Fields:
Search: background transparent, color white, no border, radius 0
Focus: outline var(--eds_xd1k8g5b) solid var(--eds_xd1k8ge)

Layout & Responsive Rules:
Breakpoints: 375px, 400px, 500px, 512px, 550px, 568px, 576px, 767px, 768px, 961px, 991px, 992px, 1023px, 1024px, 1199px, 1200px, 1279px, 1280px, 1380px, 1439px, 1440px, 1599px, 1600px, 1919px, 1920px, 2135px

Interaction Rules:
Transitions: 150ms ease for hover/focus
Focus: always visible border or outline in brand cyan/white

DO List:
- Use ONLY colors from the palette
- Maintain 8px grid for spacing
- Use Inter Tight for headings
- Keep buttons radius consistent (10px primary)
- Use opacity variants for hover overlays
- Keep text contrast high

DON'T List:
- Don't add drop shadows
- Don't mix sharp and rounded corners in same element
- Don't use gradients
- Don't introduce new accent colors
- Don't reduce contrast below WCAG minimum

Code Examples:

Primary Button:
```css
.btn-primary {
  background: #ffffff;
  color: #000000;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: rgba(255,255,255,0.35);
  color: #ffffff;
}
.btn-primary:focus {
  border: 1px solid #ffffff;
  background: #61cdff;
  color: #ffffff;
  box-shadow: inset 0 0 0 2px #ffffff;
}
```

Secondary Button:
```css
.btn-secondary {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
}
```

Search Input:
```css
.input-search {
  background: transparent;
  color: #ffffff;
  border: none;
  border-radius: 0;
}
.input-search:focus {
  outline: var(--eds_xd1k8g5b) solid var(--eds_xd1k8ge);
}
```

9. Summary

TL;DR: Epic Games Store’s design system is dark, flat, and functional. Minimal palette, high-contrast typography, strict spacing grid, and understated interaction states keep the focus on game content.

Brand Keywords: dark-functional, gamer-centric, flat-contrast, minimal-accent, content-first