---
version: alpha
name: Epic Games
description: A pure-black gallery wall where full-bleed game art is sliced into vertical panels, white uppercase Brutal Bold display type stamps each title like a marquee, and a single electric blue button is the only saturated thing on screen — game-publisher marketing built as a cinematic, high-contrast dark grid.

category: Gaming
styles: Dark, Bold, Cool, Minimal

colors:
  # Surface / canvas
  background: "#000000"          # the dominant pure-black gallery canvas
  surface: "#252525"             # dark UI panels, header chrome — top of the panel gradient
  surface-raised: "#565656"      # bottom of the panel gradient — lifted dark surface
  surface-hover: "#242424"       # translucent white wash over black on tile hover — was rgba(255,255,255,0.14) over #000 — Google format requires hex
  surface-neutral: "#333333"     # neutral dark grey — secondary chrome blocks

  # Ink / text
  ink: "#ffffff"                 # the dominant white — display headings, all body over black
  ink-strong: "#333333"          # dark ink on the rare light surface
  ink-muted: "#3d3d3d"           # hover-darkened neutral text

  # Brand accent — Epic's electric store blue
  primary: "#0078f2"             # the bright Epic Games Store blue — the lone CTA ("Download")
  on-primary: "#ffffff"          # white label on the blue button
  primary-hover: "#0067d1"       # deepened blue on CTA hover

  # Borders
  border: "#ffffff"              # 1px white outline on ghost buttons
  border-muted: "#333333"        # subtle dark dividers in chrome

  # Shadow tint
  shadow-soft: "#000000"         # was rgba(0,0,0,0.2) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Brutal Type, Oswald, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 0.87
    letterSpacing: 0px
  display:
    fontFamily: "Brutal Type, Oswald, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 53px
    fontWeight: 600
    lineHeight: 0.87
    letterSpacing: 0px
  heading:
    fontFamily: "Brutal Type, Oswald, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Brutal Type, Oswald, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0px
  body-large:
    fontFamily: "Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  nav-link:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  button-ui:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.5px
  tile-label:
    fontFamily: "Brutal Type, Oswald, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.5px
  caption:
    fontFamily: "Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 14px
  xl: 16px
  2xl: 24px
  3xl: 48px
  4xl: 86px

rounded:
  none: 0px
  sm: 4px
  pill: 9999px

components:
  button-cta:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-cta-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-ghost-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px

  tile:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.tile-label}"
    rounded: "{rounded.none}"
    padding: 24px
  tile-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.tile-label}"
    rounded: "{rounded.none}"
    padding: 24px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 10px 24px

  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.sm}"
    padding: 8px 14px
  nav-link-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.sm}"
    padding: 8px 14px

  input:
    backgroundColor: "{colors.surface-neutral}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
  input-focus:
    backgroundColor: "{colors.surface-neutral}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
---

# Epic Games Design System

## Overview

The Epic Games homepage is a black wall hung with games. The canvas is pure black (`{colors.background}`) — not a near-black, not a charcoal, but absolute `#000000` — and the entire viewport is carved into full-bleed vertical panels, each one a slice of a different title's key art: Rocket League's neon car, the Epic Games Store badge, Robo Recall's battered android, Unreal Tournament. There is no hero paragraph, no marketing preamble, no grid of cards floating on a background. The art *is* the layout. Each panel is stamped with a single uppercase word in white — STORE, ROBO RECALL — set in Brutal Type, a tight geometric grotesque, at a line-height so compressed (0.87) the letters almost touch. The effect is a museum gallery crossed with an arcade marquee: you walk the row, and every panel is an invitation.

The restraint is the strategy. White (`{colors.ink}`) does almost all the talking — it is by far the most-counted color on the page, used for every label, every nav item, every button outline. Against the black, white type and white-outlined ghost buttons read as crisp and weightless. The only saturated thing on the entire screen is a single electric blue button (`{colors.primary}`) in the top-right: "Download." That blue is the Epic Games Store brand color, and the design hoards it — one button, one job. Everything else is monochrome black-and-white, so the blue functions like a flare: your eye goes straight to it. This is high-contrast minimalism wearing a AAA-gaming budget.

Interaction is quiet and physical. Tiles don't bounce or scale on hover — they brighten, a translucent white wash (`{colors.surface-hover}`) lifting the panel a few percent out of the black, with the long, decelerating ease-out curve `cubic-bezier(0.19, 1, 0.22, 1)` that gives the whole site its smooth, expensive feel. Corners are nearly square — buttons take only a hair of radius (`{rounded.sm}`), the art panels none at all. A faint `rgba(0,0,0,0.2) 2px 2px` shadow is the only depth cue. The geometry, the monochrome discipline, and the single hoarded accent make Epic feel less like a storefront and more like a curated dark gallery where the games are the exhibits.

**Key Characteristics:**
- Pure black canvas (`{colors.background}`) — absolute `#000000`, not a softened near-black
- Full-bleed vertical art panels are the layout — game key art, not cards on a background
- White (`{colors.ink}`) is the dominant color — every label, nav item, and button outline
- Brutal Type display set UPPERCASE at a compressed 0.87 line-height (`{typography.display}`) — the marquee stamp
- A single hoarded electric blue CTA (`{colors.primary}`) — "Download" is the only saturated element on screen
- Ghost buttons: transparent fill, 1px white outline (`{colors.border}`), white label
- Tiles brighten rather than move on hover — translucent white wash (`{colors.surface-hover}`), no scale
- Long decelerating ease-out motion (`cubic-bezier(0.19, 1, 0.22, 1)`) gives the smooth, premium feel
- Near-square geometry — tiles at `{rounded.none}`, buttons at a minimal `{rounded.sm}`
- Three-face stack: Brutal Type for display, Helvetica Neue for UI, Open Sans for body (`{typography.body}`)

## Colors

### Surface & Canvas
- **Pure Black** (`{colors.background}`): The absolute-black gallery canvas — the ground for every full-bleed art panel.
- **Dark Panel** (`{colors.surface}`): Header chrome and dark UI panels; the top stop of the `#252525 → #565656` panel gradient.
- **Raised Dark** (`{colors.surface-raised}`): The lighter bottom stop of the panel gradient — a subtle lift within dark surfaces.
- **Hover Wash** (`{colors.surface-hover}`): The translucent white brighten over black on tile and nav-item hover (flattened from `rgba(255,255,255,0.14)`).
- **Neutral Dark** (`{colors.surface-neutral}`): Secondary dark chrome blocks and input fills.

### Ink / Text
- **White** (`{colors.ink}`): The dominant ink — all display headings, body copy, nav, and button outlines over the black.
- **Strong Ink** (`{colors.ink-strong}`): Dark text on the rare light surface.
- **Muted Ink** (`{colors.ink-muted}`): Hover-darkened neutral text.

### Brand Accent
- **Epic Blue** (`{colors.primary}`): The bright Epic Games Store blue — reserved for the single "Download" CTA. The lone saturated color on the page.
- **On-Primary White** (`{colors.on-primary}`): The white label on the blue button.
- **Deep Blue** (`{colors.primary-hover}`): The CTA's hover state — the blue deepens, never brightens.

### Borders & Shadow
- **White Border** (`{colors.border}`): The 1px outline on ghost buttons.
- **Muted Border** (`{colors.border-muted}`): Subtle dark dividers and input edges.
- **Shadow Tint** (`{colors.shadow-soft}`): The black tint behind the faint `2px 2px` drop (flattened from `rgba(0,0,0,0.2)`).

## Typography

### Font Family
- **Display**: `Brutal Type` (Brutal_Bold weight 600), with fallbacks `Oswald, Helvetica Neue, Arial`. A tight, geometric grotesque used UPPERCASE for every panel label and headline — the marquee voice of the brand. Closest free web substitute: **Oswald** (a condensed grotesque with the same stamp character).
- **UI**: `Helvetica Neue` (Helvetica, Arial fallbacks) — uppercase nav links and button labels; the workhorse chrome face.
- **Body**: `Open Sans` (Helvetica Neue, Arial fallbacks) — the readable small-copy face for paragraphs and captions.
- **OpenType Features**: `"kern"` enabled across the stack — kerning is on everywhere for tight, clean letter-fitting.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 64px / 600 / 0.87 — full-screen takeover headline |
| `display` | 53px / 600 / 0.87 — large uppercase section/panel headline |
| `heading` | 36px / 600 — feature headings |
| `heading-sub` | 24px / 600 — sub-section headings |
| `tile-label` | 28px / 600 — the uppercase word stamped on each art panel (STORE, ROBO RECALL) |
| `body-large` | 18px / 400 — lead paragraphs |
| `body` | 14px / 400 — standard Open Sans body copy |
| `nav-link` | 18px / 400 — uppercase Helvetica Neue nav items |
| `button-ui` | 16px / 600 — button labels |
| `caption` | 12px / 400 — fine print |

### Principles
- **Compress the display**: Brutal Type runs at a 0.87 line-height — letters nearly touch, giving headlines a dense, stamped weight.
- **Uppercase the chrome**: panel labels and nav links are UPPERCASE; the all-caps treatment is part of the marquee identity.
- **Three faces, clear jobs**: Brutal Type stamps (display), Helvetica Neue runs the UI, Open Sans handles readable body. Never blur the roles.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. The chrome rhythm is tight — 10px / 14px / 15px values dominate component internals — while content sections breathe with a large 86px (`{spacing.4xl}`) band gap. The page is built from edge-to-edge panels, so internal padding is modest and the panel boundaries themselves do the spatial work.

### Grid & Container
- The homepage is a horizontal row of full-bleed vertical art panels — no max-width container, no gutters; panels run edge-to-edge and floor-to-ceiling
- A slim top nav bar (`{components.nav-bar}`) overlays the black, left-aligned nav items and a right-aligned Sign in / Download cluster
- Deeper pages adopt a centered max-width grid, but the homepage's signature is the full-bleed panel wall

### Whitespace Philosophy
- **Art fills the frame**: panels go edge-to-edge — the key art is the layout, not decoration inside a layout
- **Black is the gutter**: the pure-black ground separates and frames every panel; negative space is literally black
- **Chrome stays slim**: the nav and footer take as little vertical space as possible so the games own the viewport

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; flat panels and outlined buttons on pure black | Art panels, ghost buttons, most chrome |
| Hover Brighten (Level 1) | Translucent white wash (`{colors.surface-hover}`) | Tile and nav-item hover — lifts the panel out of the black |
| Drop (Level 2) | `2px 2px 2px` soft drop (`{colors.shadow-soft}` tint, was `rgba(0,0,0,0.2)`) | The rare floating control or menu |

**Shadow Philosophy**: Epic barely uses shadow. Depth comes almost entirely from a hover brighten — a translucent white wash that lifts a panel a few percent out of the absolute black — rather than from stacked drop shadows. The single `2px 2px` soft drop is reserved for the occasional floating control. On a `#000000` ground, the most effective elevation signal is simply *getting lighter*, and the system leans into that: hover = brighten, not lift.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Art panels, cards, the homepage tile grid — sharp, gallery-frame edges |
| `sm` | 4px | Buttons and inputs — a minimal softening, just off-square |
| `pill` | 9999px | Rare circular nav/carousel controls |

The system is near-square. Art panels carry no radius at all (`{rounded.none}`) — they read as framed exhibits. The only softening is a minimal 4px on interactive controls (`{rounded.sm}`), enough to register as a button without losing the hard, system-serious geometry.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-cta`** — The lone saturated control: Epic blue (`{colors.primary}`) fill, white label (`{colors.on-primary}`), minimal `{rounded.sm}` corners. This is "Download" — the only filled, colored button on the page. Hover deepens the blue (`{components.button-cta-hover}`).
- **`button-ghost`** — Transparent fill on black, 1px white outline (`{colors.border}`), white label. The default action everywhere except the one blue CTA. Hover fills with the translucent wash (`{components.button-ghost-hover}`).

### Tiles
- **`tile`** — The signature element: a full-bleed art panel on black (`{rounded.none}`) with an uppercase white label stamped in Brutal Type (`{typography.tile-label}`). **`tile-hover`** brightens the panel with the white wash (`{colors.surface-hover}`) — no scale, no move.

### Cards
- **`card`** — Dark panel (`{colors.surface}`), white text, square corners — for deeper-page content blocks.

### Inputs
- **`input`** — Neutral-dark fill (`{colors.surface-neutral}`), white text, muted border, minimal radius. **`input-focus`** brightens the border to white (`{colors.border}`).

### Navigation
- **`nav-bar`** — Slim black bar overlaying the panels, white nav links. **`nav-link`** items brighten with the wash on hover (`{components.nav-link-hover}`).

## Do's and Don'ts

### Do
- Use absolute black (`{colors.background}`) as the canvas — `#000000`, not a softened charcoal; the pure black is the point
- Build the layout from full-bleed art panels (`{components.tile}`) — let game key art *be* the layout, edge to edge
- Stamp panel labels and headlines in UPPERCASE Brutal Type at the compressed 0.87 line-height (`{typography.display}`)
- Keep white (`{colors.ink}`) as the dominant color — labels, nav, and ghost-button outlines all live in white
- Reserve Epic blue (`{colors.primary}`) for a single primary CTA — hoard it so it reads as a flare on the monochrome page
- Make every non-CTA button a ghost: transparent fill, 1px white outline (`{components.button-ghost}`)
- Brighten on hover (`{colors.surface-hover}`) instead of scaling or moving — and use the long ease-out `cubic-bezier(0.19, 1, 0.22, 1)`
- Keep corners near-square: `{rounded.none}` on panels, a minimal `{rounded.sm}` on controls

### Don't
- Don't lighten the canvas to grey or near-black — the absolute `#000000` is the gallery wall
- Don't add a second saturated accent — the design's power is one hoarded blue against pure monochrome
- Don't scale or bounce tiles on hover — they brighten in place; movement breaks the gallery calm
- Don't set display type in mixed case or at a normal line-height — it must be UPPERCASE and compressed (0.87)
- Don't fill ghost buttons with color — they are outline-only until hover applies the white wash
- Don't round the art panels — square edges frame them like exhibits
- Don't use Brutal Type for body copy — it's the display stamp only; Open Sans (`{typography.body}`) carries paragraphs
- Don't reach for drop shadows to show depth — on black, brightening is the elevation cue

---

## Responsive Behavior

### Breakpoints
*(Dembrandt surfaced a dense ladder of breakpoints — 300 / 400 / 600 / 767 / 768 / 800 / 991 / 992 / 1000 / 1100 / 1199 / 1200 / 1250 / 1300 / 1439 / 1500 / 1600 / 1695 / 1800px. The table below maps that ladder to the behavioral tiers.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <600px | The horizontal panel row becomes a vertical stack; each art panel goes full-width; nav collapses to a menu; the blue Download CTA stays prominent |
| Tablet | 600–991px | Two-up panel arrangement; nav condenses; tile labels scale down |
| Desktop | 992–1439px | Full horizontal panel wall; complete nav with Sign in + Download |
| Large | ≥1440px | Wider panels, larger key-art crops; type scales up toward the hero sizes |

### Touch Targets
- Buttons run comfortably tall with `8px 16px` padding; the Download CTA stays a clear tap target
- Whole art panels are tappable — generous touch surfaces by design

### Collapsing Strategy
- **Navigation**: the slim top bar collapses to a hamburger; Sign in and Download persist
- **Panels**: the horizontal full-bleed row reflows to a vertical full-width stack on mobile
- **Type**: Brutal Type display drops from ~53px toward ~28px while keeping the uppercase, compressed treatment
- **Chrome**: footer and utility links stack into a single column

### Image Behavior
- Game key art is the layout — panels are art-directed per title and crop to the focal subject as the panel narrows
- On mobile, each panel becomes a full-width banner cropping to its character/logo rather than letterboxing

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Pure Black (`{colors.background}`) — `#000000`, the gallery wall
- Text: White (`{colors.ink}`)
- Brand accent / CTA: Epic Blue (`{colors.primary}`) — hoard it for one button
- Ghost button outline: White (`{colors.border}`)
- Hover lift: White wash (`{colors.surface-hover}`)
- Corners: square panels (`{rounded.none}`), minimal `{rounded.sm}` on controls

### Example Component Prompts

- "Create a full-bleed vertical art panel on pure black (`{colors.background}`) with edge-to-edge game key art, no radius (`{rounded.none}`), and an UPPERCASE white (`{colors.ink}`) label stamped in Brutal Type / Oswald at the compressed 0.87 line-height (`{typography.tile-label}`); on hover, brighten the whole panel with a translucent white wash (`{colors.surface-hover}`) using ease `cubic-bezier(0.19, 1, 0.22, 1)` — no scale"
- "Build the single CTA: Epic blue (`{colors.primary}`) fill, white label (`{colors.on-primary}`) in Helvetica Neue 600 (`{typography.button-ui}`), minimal `{rounded.sm}` corners, 8px 16px padding — e.g. 'Download'; hover deepens the blue (`{colors.primary-hover}`). This is the only colored button on the page"
- "Create a ghost button: transparent fill on black, 1px white outline (`{colors.border}`), white label (`{typography.button-ui}`), `{rounded.sm}`; hover fills with the translucent white wash (`{colors.surface-hover}`)"
- "Build a slim top nav bar (`{components.nav-bar}`) overlaying the black canvas: left-aligned UPPERCASE white nav links (`{typography.nav-link}`) that brighten with the wash on hover, right-aligned Sign in (ghost) + Download (blue CTA) cluster"
- "Render a row of full-bleed art panels edge-to-edge with no gutters on pure black — the panels themselves are the layout, separated only by the black ground"

### Iteration Guide

1. Start the canvas at absolute black (`{colors.background}`). If it's a charcoal or near-black, darken it to `#000000` — the pure black is the gallery wall.
2. Build the layout from full-bleed art panels, not cards on a background. The game art *is* the page.
3. Stamp every label UPPERCASE in Brutal Type / Oswald at the compressed 0.87 line-height (`{typography.display}`). Mixed case or normal leading is wrong.
4. Keep everything white (`{colors.ink}`) except one button. Hoard Epic blue (`{colors.primary}`) for a single CTA so it reads as a flare.
5. Make all other buttons ghosts — transparent fill, 1px white outline (`{components.button-ghost}`).
6. Hover = brighten, never move. Apply the white wash (`{colors.surface-hover}`) with the long ease-out `cubic-bezier(0.19, 1, 0.22, 1)`.
7. Keep corners near-square — `{rounded.none}` on panels, a minimal `{rounded.sm}` on controls. Skip drop shadows; brightening is the depth cue.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Epic Games. Brand names and trademarks belong to their respective owners.