W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Epic Games
Epic Games is the North Carolina–headquartered game developer and publisher behind Fortnite, Rocket League, the Epic Games Store, and the Unreal Engine real-time 3D platform. The Epic Games Store is the company's direct-to-consumer PC games storefront and free-weekly game distribution channel. The brand voice on the store is product-driven and reductive: hero art carries the color, while the chrome itself is a deep "Ink" near-black canvas with a white primary CTA and an Inter typographic stack. There is no chromatic brand primary in the storefront chrome — the structural identity reads as monochrome ink-on-white-on-ink, leaving the published-game artwork to provide chromatic variety. Unreal Engine is a separate brand cluster under the Epic Games umbrella and is documented in its own atom (unreal-engine@1).
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/epic-games/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/epic-games/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Epic Games
Epic Games is the North Carolina–headquartered game developer and publisher behind Fortnite, Rocket League, the Epic Games Store, and the Unreal Engine real-time 3D platform. The Epic Games Store is the company's direct-to-consumer PC games storefront and free-weekly game distribution channel. The brand voice on the store is product-driven and reductive: hero art carries the color, while the chrome itself is a deep "Ink" near-black canvas with a white primary CTA and an Inter typographic stack. There is no chromatic brand primary in the storefront chrome — the structural identity reads as monochrome ink-on-white-on-ink, leaving the published-game artwork to provide chromatic variety. Unreal Engine is a separate brand cluster under the Epic Games umbrella and is documented in its own atom (unreal-engine@1).
Tags: epic-games, gaming, store, fortnite, dark-first, monochrome
Atoms
Palette
Epic Games · [email protected] · Proprietary — All Rights Reserved
Epic Games' brand palette as captured from the live Epic Games Store stylesheet on store.epicgames.com. The store identity is the most reductive in the modern gaming-storefront cohort: a near-black "Ink" canvas (#101014), white-on-black type, and a white primary CTA that inverts to a black-on-white fill. There is no chromatic primary in the storefront chrome — promotional artwork carries color, while the structural identity reads as monochrome. The neutral ramp scales from a true #FFFFFF white through a near-white pale, a mid-fog gray for tertiary text, a deep graphite for secondary buttons (#404044), and a deep ink for the canvas itself. Inter is the declared sans family.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
ink |
Ink | #101014 |
ink-deep |
Ink Deep | #000000 |
graphite |
Graphite | #202024 |
graphite-mid |
Graphite Mid | #2A2A2E |
graphite-light |
Graphite Light | #404044 |
fog-dark |
Fog Dark | #5A5A5E |
fog |
Fog | #A6A6A6 |
fog-light |
Fog Light | #D0D0D0 |
snow |
Snow | #FFFFFF |
snow-mid |
Snow Mid | #F5F5F5 |
action-blue |
Action Blue | #0078F2 |
hot-pink |
Hot Pink | #FF1F8A |
signal-green |
Signal Green | #26BBA4 |
alert-red |
Alert Red | #D8453A |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
snow |
#FFFFFF |
surface |
snow-mid |
#F5F5F5 |
surface-elevated |
snow |
#FFFFFF |
text-primary |
ink |
#101014 |
text-secondary |
fog-dark |
#5A5A5E |
text-tertiary |
fog |
#A6A6A6 |
primary |
ink |
#101014 |
primary-hover |
graphite-light |
#404044 |
accent |
action-blue |
#0078F2 |
accent-hover |
action-blue |
#0078F2 |
warning |
hot-pink |
#FF1F8A |
warning-hover |
hot-pink |
#FF1F8A |
error |
alert-red |
#D8453A |
success |
signal-green |
#26BBA4 |
border |
fog-light |
#D0D0D0 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
ink |
#101014 |
surface |
graphite |
#202024 |
surface-elevated |
graphite-mid |
#2A2A2E |
text-primary |
snow |
#FFFFFF |
text-secondary |
fog-light |
#D0D0D0 |
text-tertiary |
fog |
#A6A6A6 |
primary |
snow |
#FFFFFF |
primary-hover |
fog-light |
#D0D0D0 |
accent |
action-blue |
#0078F2 |
accent-hover |
action-blue |
#0078F2 |
warning |
hot-pink |
#FF1F8A |
warning-hover |
hot-pink |
#FF1F8A |
error |
alert-red |
#D8453A |
success |
signal-green |
#26BBA4 |
border |
graphite-light |
#404044 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
ink |
#101014 |
on-identity |
snow |
#FFFFFF |
primary |
snow |
#FFFFFF |
primary-hover |
fog-light |
#D0D0D0 |
accent |
action-blue |
#0078F2 |
accent-hover |
action-blue |
#0078F2 |
mark |
snow |
#FFFFFF |
success |
signal-green |
#26BBA4 |
warning |
hot-pink |
#FF1F8A |
error |
alert-red |
#D8453A |
text-primary-light |
ink |
#101014 |
text-primary-dark |
snow |
#FFFFFF |
background-light |
snow |
#FFFFFF |
background-dark |
ink |
#101014 |
surface-light |
snow-mid |
#F5F5F5 |
surface-dark |
graphite |
#202024 |
text-secondary-light |
fog-dark |
#5A5A5E |
text-tertiary-light |
fog |
#A6A6A6 |
border-light |
fog-light |
#D0D0D0 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → roles.colors.mark
- allowed: snow, ink
- forbidden: action-blue, hot-pink, signal-green, alert-red, fog, graphite-light
The Epic Games and Epic Games Store wordmarks render in pure monochrome on the live storefront — white-on-Ink in the standard dark chrome and Ink-on-white in inverted contexts. The store's promotional accents (hot-pink for discount stickers, signal-green for free-claim banners, action-blue for inline links) are content affordances, not identity colors; substituting them for the mark fill reads as a co-branded lockup, not as Epic.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined
Epic Games' identity is reductive by design — the storefront chrome itself uses no gradient, drop-shadow, or photo-embedded logo treatments. Recoloring, rotating, gradient-filling, or placing the mark on a busy photo conflicts with the brand's deliberate restraint.
colorChoice → roles.colors.primary
- allowed: snow, ink, graphite-light
- forbidden: action-blue, hot-pink, signal-green, alert-red
The Epic Games Store's primary action is a white surface with Ink text — observed as the canonical "Save Now / Get / Buy" CTA on the live store. The accent colors (action-blue, hot-pink, signal-green, alert-red) carry links, promotional stickers, free-claim banners, and destructive affordances respectively; substituting any of them for the primary action breaks the store's monochrome chrome grammar.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Snow (#FFFFFF) on Ink (#101014) measures ~19:1 — clears AAA decisively. The monochrome chrome is designed around this high-contrast pairing; consumers should not weaken it.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The monochrome storefront pairs clear AA at the body- text floor with significant headroom; the snow-on-ink pairing (per the contrastRatio rule above) is held to AAA.
compositionConstraint → roles.colors.mark
- pairsWith: ink, snow, graphite, graphite-mid
- doesNotPairWith: hot-pink, signal-green, action-blue
The Epic Games mark pairs only with the monochrome neutrals — Ink, Graphite, Snow. Placing the mark on the promotional hot-pink, signal-green, or action-blue surfaces reads as a co-branded lockup or sub-brand treatment, not as the parent Epic Games identity.
⚠️ warning (2)
contextRestriction → roles.colors.accent
- forbiddenContexts: logo, hero-headline, brand-badge, primary-cta
- allowedContexts: inline-link, focus-ring, active-state
Action-blue (#0078F2) is an inline-link affordance inside the storefront's product chrome — links inside descriptions, focus rings, hover states. It must not appear as headline color, logo fill, or primary CTA — the store's primary CTA is the monochrome snow-on-ink (or ink-on-snow) surface.
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
Epic Games' storefront uses Inter at Regular (400), Medium (500), SemiBold (600), and Bold (700) — observed on the live h1 (font-weight: 700) and the body computed font stack. The lighter cuts (100, 200, 300) and heavier cuts (800, 900) are not exercised by the store chrome.
💡 recommendation (1)
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
The Epic Games Store uses Inter for both display headlines and body text, distinguished by size and weight rather than two families. Maintain at least a 1.5× display-to- prose size ratio to preserve hierarchy when one family carries both roles.
Provenance
- Source: https://store.epicgames.com/
- License:
Proprietary — All Rights Reserved - Attribution: Epic Games, Inc. — visual identity captured from the deployed stylesheet on store.epicgames.com (html background, Inter font-family declaration, primary and secondary button fills). Epic Games, the Epic Games logo, the Epic Games Store logo, Fortnite, Rocket League, Unreal, and associated marks are trademarks of Epic Games, Inc.
- Imported:
2026-05-19 - Notes: Derived from live site CSS at https://store.epicgames.com/ on 2026-05-19; no public Epic Games brand guide located. Epic Games' storefront uses Inter as the declared sans family (--font-family-sans-serif and computed body fontFamily = "Inter, sans-serif"), which is open-source — the inter@1 atom is the exact rendering. assets: [] per the encyclopedia's trademark-redistribution policy. Unreal Engine, also an Epic property, has its own atom (unreal-engine@1) with a distinct visual identity.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Epic Games
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Epic Games
A clear hierarchy in Epic Games's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Epic Games
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ action-blue #0078F2 accent-hover
→ action-blue #0078F2 background-dark
→ ink #101014 background-light
→ snow #FFFFFF border-light
→ fog-light #D0D0D0 error
→ alert-red #D8453A identity
→ ink #101014 mark
→ snow #FFFFFF on-identity
→ snow #FFFFFF primary
→ snow #FFFFFF primary-hover
→ fog-light #D0D0D0 success
→ signal-green #26BBA4 surface-dark
→ graphite #202024 surface-light
→ snow-mid #F5F5F5 text-primary-dark
→ snow #FFFFFF text-primary-light
→ ink #101014 text-secondary-light
→ fog-dark #5A5A5E text-tertiary-light
→ fog #A6A6A6 warning
→ hot-pink #FF1F8A Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from epic-games)
Light mode (15 roles)
accent
→ action-blue accent-hover
→ action-blue background
→ snow border
→ fog-light error
→ alert-red primary
→ ink primary-hover
→ graphite-light success
→ signal-green surface
→ snow-mid surface-elevated
→ snow text-primary
→ ink text-secondary
→ fog-dark text-tertiary
→ fog warning
→ hot-pink warning-hover
→ hot-pink Dark mode (15 roles)
accent
→ action-blue accent-hover
→ action-blue background
→ ink border
→ graphite-light error
→ alert-red primary
→ snow primary-hover
→ fog-light success
→ signal-green surface
→ graphite surface-elevated
→ graphite-mid text-primary
→ snow text-secondary
→ fog-light text-tertiary
→ fog warning
→ hot-pink warning-hover
→ hot-pink Rules (9 typed constraints)
error · 6 rules
colorChoice roles.colors.mark allowed snow, ink forbidden action-blue, hot-pink, signal-green, alert-red, fog, graphite-light The Epic Games and Epic Games Store wordmarks render in pure monochrome on the live storefront — white-on-Ink in the standard dark chrome and Ink-on-white in inverted contexts. The store's promotional accents (hot-pink for discount stickers, signal-green for free-claim banners, action-blue for inline links) are content affordances, not identity colors; substituting them for the mark fill reads as a co-branded lockup, not as Epic.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined Epic Games' identity is reductive by design — the storefront chrome itself uses no gradient, drop-shadow, or photo-embedded logo treatments. Recoloring, rotating, gradient-filling, or placing the mark on a busy photo conflicts with the brand's deliberate restraint.
colorChoice roles.colors.primary allowed snow, ink, graphite-light forbidden action-blue, hot-pink, signal-green, alert-red The Epic Games Store's primary action is a white surface with Ink text — observed as the canonical "Save Now / Get / Buy" CTA on the live store. The accent colors (action-blue, hot-pink, signal-green, alert-red) carry links, promotional stickers, free-claim banners, and destructive affordances respectively; substituting any of them for the primary action breaks the store's monochrome chrome grammar.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Snow (#FFFFFF) on Ink (#101014) measures ~19:1 — clears AAA decisively. The monochrome chrome is designed around this high-contrast pairing; consumers should not weaken it.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The monochrome storefront pairs clear AA at the body- text floor with significant headroom; the snow-on-ink pairing (per the contrastRatio rule above) is held to AAA.
compositionConstraint roles.colors.mark pairsWith ink, snow, graphite, graphite-mid doesNotPairWith hot-pink, signal-green, action-blue The Epic Games mark pairs only with the monochrome neutrals — Ink, Graphite, Snow. Placing the mark on the promotional hot-pink, signal-green, or action-blue surfaces reads as a co-branded lockup or sub-brand treatment, not as the parent Epic Games identity.
warning · 2 rules
contextRestriction roles.colors.accent forbiddenContexts logo, hero-headline, brand-badge, primary-cta allowedContexts inline-link, focus-ring, active-state Action-blue (#0078F2) is an inline-link affordance inside the storefront's product chrome — links inside descriptions, focus rings, hover states. It must not appear as headline color, logo fill, or primary CTA — the store's primary CTA is the monochrome snow-on-ink (or ink-on-snow) surface.
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 Epic Games' storefront uses Inter at Regular (400), Medium (500), SemiBold (600), and Bold (700) — observed on the live h1 (font-weight: 700) and the body computed font stack. The lighter cuts (100, 200, 300) and heavier cuts (800, 900) are not exercised by the store chrome.
recommendation · 1 rule
fontPairing typography.display requires prose minSizeRatio 1.5 The Epic Games Store uses Inter for both display headlines and body text, distinguished by size and weight rather than two families. Maintain at least a 1.5× display-to- prose size ratio to preserve hierarchy when one family carries both roles.
Provenance
- Source
- https://store.epicgames.com/
- License
Proprietary — All Rights Reserved- Attribution
- Epic Games, Inc. — visual identity captured from the deployed stylesheet on store.epicgames.com (html background, Inter font-family declaration, primary and secondary button fills). Epic Games, the Epic Games logo, the Epic Games Store logo, Fortnite, Rocket League, Unreal, and associated marks are trademarks of Epic Games, Inc.
- Imported
2026-05-19- Notes
- Derived from live site CSS at https://store.epicgames.com/ on 2026-05-19; no public Epic Games brand guide located. Epic Games' storefront uses Inter as the declared sans family (--font-family-sans-serif and computed body fontFamily = "Inter, sans-serif"), which is open-source — the inter@1 atom is the exact rendering. assets: [] per the encyclopedia's trademark-redistribution policy. Unreal Engine, also an Epic property, has its own atom (unreal-engine@1) with a distinct visual identity.