Refto
Epic Games Store

Epic Games Store

Welcome to Epic Games Store! Download and play PC Games of every genre. We have mods, DLC and Free Games too! Games for everyone.

InteractiveWeb AppGamingDark
3.0
5
Visits
Visit

Categories

Web AppGaming

Available Pages

Home

Version History

Design Analysis

Epic Games Store Home design analysis

Build the interface as a dark browse shell where artwork is the product and chrome exists to support it. Lead with one dominant billboard card, then continue discovery through shelves, rails, and stacked merchandise modu...

Key Takeaways

  • Build the interface as a dark browse shell where artwork is the product and chrome exists to support it.
  • Lead with one dominant billboard card, then continue discovery through shelves, rails, and stacked merchandise modules.
  • Keep utility controls compact and bright only where they need to cut through the dark field.
  • Use cinematic key art, box-art crops, genre tiles, and promotional banners as the primary visual material.
  • Keep artwork high contrast and saturated against nearly black chrome.
  • Organize many artworks through disciplined rails and rounded card frames.

Overview

  • Build the interface as a dark browse shell where artwork is the product and chrome exists to support it.
  • Lead with one dominant billboard card, then continue discovery through shelves, rails, and stacked merchandise modules.
  • Keep utility controls compact and bright only where they need to cut through the dark field.

Image Direction

  • Use cinematic key art, box-art crops, genre tiles, and promotional banners as the primary visual material.
  • Keep artwork high contrast and saturated against nearly black chrome.
  • Organize many artworks through disciplined rails and rounded card frames.

Colors

  • 141418 is the base shell and should remain deep enough that the art feels luminous.
  • 1D1E24 and 2A2C33 define utility chrome, shelves, and inactive states.
  • F5F7FA is the main text color for readable dark-mode commerce.

Typography

  • Use a compact modern display sans for short, forceful headings.
  • Keep product metadata and shelf labels efficient and neutral.
  • Let text support the merchandise rather than compete with it.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Arcade Rail Commerce

A dark entertainment-commerce system built from billboard hero art, stacked thumbnail rails, dense merchandise shelves, and cyan utility actions.

Immersive, energetic, commercial, and art-led.

Primary mode: darkmedia-heavy digital commercecontent-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
Immersive, energetic, commercial, and art-led.
Density
7
Variance
8
Motion
4
Signals
near-black shell that lets key art glow · stacked rails of box art and catalog cards · sharp cyan utility accents on otherwise muted chrome

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Midnight Shell
#141418
Panel Charcoal
#1D1E24
Shelf Gray
#2A2C33
Utility Cyan
#1EB8FF
Body White
#F5F7FA
Muted Silver
#9DA3AE
Usage rules
Keep the shell almost black so merchandise art remains the visual star.
Use cyan only for utility emphasis, not for broad decorative fills.
Let key art provide most of the saturation; the UI chrome should stay restrained.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.4rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2.5rem
section_gap
clamp(2.5rem, 6vw, 4rem)
panel_padding
clamp(0.9rem, 2vw, 1.25rem)

Token Radii

Corner radii tokens with a live surface sample.

sm
10px
md
14px
lg
18px
xl
24px
full
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Inter Tight
compact modern display voice for entertainment commerce
Body
Inter
efficient catalog and metadata voice
Accent
Inter
small utility label and pricing voice
Mono
JetBrains Mono
rare utility metadata only

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.8rem, 5vw, 4.6rem)/—
Display
H2
clamp(1.8rem, 3vw, 2.6rem)/—
H2
H3
clamp(1.2rem, 2vw, 1.5rem)/—
H3
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Keep headlines concise and hard-edged so they do not fight the art. · Use white for primary text and muted silver for metadata and pricing support. · Avoid decorative type experimentation; the merchandise should supply most of the expression.

Borders

Border tokens with resolved values.

Fine
1px solid rgba(255, 255, 255, 0.08)
Strong
1px solid rgba(30, 184, 255, 0.28)

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.22, 1, .36, 1)

Borders

Resolved border token values.

PropertyValue
fine1px solid rgba(255, 255, 255, 0.08)
strong1px solid rgba(30, 184, 255, 0.28)

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Open with one dominant billboard card backed by alternate art states.
Extend discovery through dense horizontal merchandise shelves rather than through editorial sections.
Keep search, filters, and utility controls compact so they never outshine the key art.
Let catalog pages pivot into two-zone layouts: merchandise field plus filter column.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Top nav bar
OverviewFeaturesDocs
Base Attributes
Background
#141418
Text
#F5F7FA
Border
none
Radius
0px
Padding
0.35rem 0.5rem
Utility actions download button
Base Attributes
Background
#1EB8FF
Text
#0A0C10
Border
1px solid rgba(30, 184, 255, 0.28)
Radius
8px
Padding
0.7rem 1rem
Utility actions dark button
Base Attributes
Background
#1D1E24
Text
#F5F7FA
Border
1px solid rgba(255, 255, 255, 0.08)
Radius
10px
Padding
0.7rem 1rem
Merchandise billboard card
Feature Card
Component preview content
Base Attributes
Background
#1D1E24
Text
#F5F7FA
Border
none
Radius
18px
Padding
0px
Shadow
0 10px 28px rgba(0, 0, 0, 0.28)
Merchandise shelf card
Feature Card
Component preview content
Base Attributes
Background
#1D1E24
Text
#F5F7FA
Border
none
Radius
14px
Padding
0px
Shadow
0 6px 16px rgba(0, 0, 0, 0.22)
Merchandise side thumbnail
Base Attributes
Background
#2A2C33
Text
#F5F7FA
Border
none
Radius
10px
Padding
0px
Shadow
none
Filters panel
Base Attributes
Background
#1D1E24
Text
#F5F7FA
Border
1px solid rgba(255, 255, 255, 0.08)
Radius
16px
Padding
1rem
Shadow
none

Image direction

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Role
load-bearing
Media types
  • -
    hero key art
  • -
    box art
  • -
    promotional banner
  • -
    genre tile
Subject patterns
  • -
    one widescreen hero art panel with supporting thumbnails
  • -
    box-art crops repeating in organized shelves
  • -
    high-saturation entertainment art against nearly black chrome
Composition logic
  • -
    Art should feel louder than the interface.
  • -
    Use rails and stacks to turn many artworks into a coherent browse system.
  • -
    Keep UI labels compact and close to the card they describe.
Treatment rules
  • -
    Preserve saturation and contrast inside the artwork.
  • -
    Use dark frames and rounded corners to civilize the merchandise field.
  • -
    Let cyan appear only in utility or priority action moments.
Generation cues
  • -
    Describe hero art scale, shelf density, and the relationship between the art and the dark chrome.
  • -
    Ask for cinematic entertainment artwork rather than abstract tech graphics.
  • -
    Keep metadata short and let the cover art carry mood.
Avoid
  • -
    No pastel merchandising.
  • -
    No large empty editorial voids.
  • -
    No dashboard-style data visualization replacing the art.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not brighten the shell into a generic light commerce interface.
  • -
    Do not overuse cyan until every surface starts flashing.
  • -
    Do not replace merchandise art with abstract product diagrams.
  • -
    Do not turn the catalog into quiet editorial whitespace at the expense of browse density.