№ epicgames-com

Epicgames

Icy glass forms hover in a vibrant amethyst and coral nebula, bold futuristic sans-serif.

Marquee Heroplayful futurist glassmorphism dark mode gamingdark

The hero image is a dynamic, stylized skull and geometric shapes against a gradient backdrop. The overall aesthetic feels energetic and modern, leaning into a futuristic, digital feel with vibrant colors and a sense of depth. · gaming sale, digital storefront, epic games, sale banner, futuristic design, neon colors, game promotion

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: neon · saturated · cool

SwatchHexOKLCHSuggested roleCopy

Hex#1eb3e6
OKLCHoklch(71.8% 0.135 228)
RoleDominant
find sites →
Hex#6f1584
OKLCHoklch(40.6% 0.177 319)
RoleSurface
find sites →
Hex#ee9388
OKLCHoklch(75.4% 0.112 27)
RoleInk
find sites →
Hex#8267a8
OKLCHoklch(56.7% 0.102 302)
RoleAccent
find sites →
Hex#c172a3
OKLCHoklch(65.3% 0.117 343)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	Inter	32px	700	1.4	Aa Bb Cc
body	Inter	16px	400	1.4	Aa Bb Cc
button	Inter	16px	400	1.4	Aa Bb Cc

Radius scale

0px

10px

12px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #1eb3e6;
  --color-surface: #6f1584;
  --color-ink: #ee9388;
  --color-accent: #8267a8;
  --color-detail: #c172a3;
}

/* CSS variables exposed by source */
:root {
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
  --eg-global-nav-height: 4.5rem;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Epicgames.
Reference design system (extracted from the live site):
- Palette: #1eb3e6, #6f1584, #ee9388, #8267a8, #c172a3
- Typefaces: Inter
- Macrostructure: Marquee Hero
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/epicgames-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter

32px

700

1.4

Aa Bb Cc

body

Inter

16px

400

1.4

Aa Bb Cc

button

Inter

16px

400

1.4

Aa Bb Cc

:root { --color-dominant: #1eb3e6; --color-surface: #6f1584; --color-ink: #ee9388; --color-accent: #8267a8; --color-detail: #c172a3; } /* CSS variables exposed by source */ :root { --swiper-theme-color: #007aff; --swiper-navigation-size: 44px; --eg-global-nav-height: 4.5rem; }

Build a landing page in the visual style of Epicgames. Reference design system (extracted from the live site): - Palette: #1eb3e6, #6f1584, #ee9388, #8267a8, #c172a3 - Typefaces: Inter - Macrostructure: Marquee Hero Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/epicgames-com